創って学ぼうプログラミング(11) 画像の表示と対戦ゲーム micro:bit編

マイクロビットの画像表示

　今回はマイクロビットで画像を表示します。画像といってもLED上に表示する5×5か10×5の小さなサイズのものになります。画像として表示することで任意の位置に表示したり一定時間ごとにスクロールして表示させることができます。これらの機能を利用して対戦ゲームを作成してみます。対戦ゲームと言っても紙相撲のようなものでボタン連打で相手を押し出すという簡単なゲームです。なお、子供同士で対戦する場合はマイクロビットの用のケースを取り付けてください。そうしないと、マイクロビットの基板ごと壊してしまうことがあります。

2種類のイメージ

　マイクロビットには5×5サイズのLEDがあります。マイクロビットでの画像は、この5×5サイズのLEDに表示することになります。LEDに表示するブロックでもLEDに任意の形状を表示できますが、画像の場合表示する左右の位置を指定することができます。今回はこれを利用してVRのようなものを作成します。また、画像は5×5サイズだけでなく10×5サイズの画像も扱うことができます。
　まずは、5×5サイズの画像を表示してみましょう。画像の表示は単純にLEDに表示する場合と異なり、最初に変数に「画像」データを入れておきます。その後、「画像を□を□ドットずらして表示」ブロックを使ってLEDに表示します。
　以下の手順でブロックを組み合わせるとLEDに画像が表示されます。

新規プロジェクトから「高度なブロック」の下位にある「画像」カテゴリをクリックする

「画像を作成」(create image)を選び、図のようにLEDを反転させてイメージを作成する

「変数」カテゴリから「変数「変数」を「0」にする」をクリックし、図のように作成した「画像を作成」ブロックを当てはめる

「画像」カテゴリから「画像「変数」を「0」ドットずらして表示」ブロックをクリック、「ずっと」ブロックに配置する

　JavaScriptコードだと以下のようになります。

 let 変数: Image = null
 変数 = images.createImage(`
     # . . . .
     # # . . .
     # # # . .
     # # # # .
     # # # # #
     `)
 basic.forever(() => {
     変数.showImage(0)
 })

プログラムができたらマイクロビットに転送して動作を確認してみましょう。

画像は表示位置を変更することができます。ずらす値は正数だけでなく負数も指定できます。2や-3などを指定してどのように画像がずれて表示されるか確認してみてください。マイクロビットに転送しなくてもプレビューで確認する程度で十分です。

次に大きな画像を配置し動かしてみましょう。画像のブロックには一定時間ごとに自動的にスクロールする機能が用意されています。以下のようにブロックを組み合わせると三角波の画像が右から左に流れるように表示されます。

「画像」カテゴリの「大きな画像を作成」(create big image)ブロックを当てはめる

　JavaScriptコードだと以下のようになります。

 let 変数: Image = null
 変数 = images.createBigImage(`
     # . . . . . . . . #
     . # . . . . . . # .
     . . # . . . . # . .
     . . . # . . # . . .
     . . . . # # . . . .
     `)
 basic.forever(() => {
     変数.scrollImage(1, 200)
 })

プログラムができたらマイクロビットに転送して動作を確認してみましょう。

作成した画像が右から左へスクロールで流れるため、波のような動きが繰り返し表示される

傾きにあわせて画像をずらして表示する

　次に大きな画像を利用して傾きにあわせて画像をずらして表示してみましょう。画像の位置表示を指定するブロックを利用します。
　ブロックは以下のように組み合わせます。

「傾き」変数を作成し、入力カテゴリの「傾斜(°)ブロックを図のように配置する」

　JavaScriptコードだと以下のようになります。

 let 傾き = 0
 let 変数: Image = null
 変数 = images.createBigImage(`
     . . . . # # . . . .
     . . . # # # # . . .
     . . # # # # # # . .
     . # # # # # # # # .
     # # # # # # # # # #
     `)
 basic.forever(() => {
     傾き = input.rotation(Rotation.Roll) / 36
     傾き = 傾き + 3
     変数.showImage(傾き)
 })

プログラムができたらマイクロビットに転送して動作を確認してみましょう。マイクロビットを左右に傾けると傾きに応じて大きな画像が左右に動くような感じになります。

傾きを検知して、それに応じてドットをずらすため画像を操作することになる

対戦ゲームの作成

　それでは対戦ゲームを作成します。ルールは簡単でボタンA,Bを押して相手を画面外に押し出すだけです。
まず、10×5サイズの大きな画像を配置し、そこに人を描きます。対戦しているように、うまく描いてください。人でなくモンスターでも何でも好きなキャラクターを描けばよいでしょう。

新規プロジェクトからさきほど同様に変数のなかに「大きな画像を作成」(create big image)を図のように配置する

　次に画像の表示位置を示す変数Xを作成します。画面外に押し出されたかどうかは、この変数Xの値で判断します。

「変数」カテゴリから「変数」ブロックをクリックし、

表示されるダイアログに「X」と入力する

　次にボタンが押された時の処理を書きます。ボタンAとボタンBが押されたら変数Xの値を増やしたり減らしたりします。

「入力」カテゴリから「ボタン「A」が押されている」ブロックを選び、図のようにA、B両方の動作を配置する

　最後に画像を変数Xの位置に表示します。あとは場外判定を行うブロックを書けばできあがりです。場外かどうかは変数Xの値で判断します。

「ずっと」ブロックには「画像」カテゴリから「画像「変数」を「0」ドットずらして表示」を選び、「0」ドットの部分に先ほど作成した変数「X」を当てはめる

「論理」カテゴリから「もし「真」なら」ブロックを2つ作り、図のように変数Xを使って、場外判定の基準を作成。ゲームオーバーブロックは「ゲーム」カテゴリから選ぶことができる

　JavaScriptコードだと以下のようになります。

 let X = 0
 let 変数: Image = null
 input.onButtonPressed(Button.A, () => {
     X += -1
 })
 input.onButtonPressed(Button.B, () => {
     X += 1
 })
 変数 = images.createBigImage(`
     . . . # . . # . . .
     . . # # . . # # . .
     . . . # # # # . . .
     . . # # . . # . . .
     . . # . # # . # . .
     `)
 X = 3
 basic.forever(() => {
     変数.showImage(X)
     if (X >= 6) {
         game.gameOver()
     }
     if (X <= -1) {
         game.gameOver()
     }
 })

プログラムができたらマイクロビットに転送して動作を確認してみましょう。ボタンAとBを押すと画像が左右に移動します。相手を場外まで押し出すとゲームオーバーになります。再度プレイする場合はマイクロビット基板上にあるリセットボタンを押してください。

Aボタンを押すと右に、Bボタンを押すと左に「人」を模した画像が動く

どちらかの人(画像)が押し出されると画面にGAMEOVERが表示されて終了となる

　場外判定のブロックを2つにしてあるので、どちらが勝ったかを示すメッセージを表示したり改良してみるとよいでしょう。
　なお、Pythonを利用すると単純なオンオフのLED画像ではなく輝度を指定できるLED画像も表示することができます。以下のページに説明があるので興味のある人は挑戦してみてください。

BBC micro:bit MicroPython
http://microbit-micropython.readthedocs.io/ja/latest/tutorials/images.html

著者古籏一浩
プログラミングをベースにして面白そうなものはとりあえずやってみるというスタンス。複雑なものよりシンプルで楽しめるものが好み。最近は30年前に移植したゲーム（mz-700版 SPACE HARRIER）の話などを書いたりしています。
著者サイト：http://www.openspc2.org/