創って学ぼうプログラミング 第11回 画像の表示と対戦ゲーム micro:bit編
今回はマイクロビットで画像を表示します。画像といってもLED上に表示する5×5か10×5の小さなサイズのものになります。画像として表示することで任意の位置に表示したり一定時間ごとにスクロールして表示させることができます。これらの機能を利用して対戦ゲームを作成してみます。対戦ゲームと言っても紙相撲のようなものでボタン連打で相手を押し出すという簡単なゲームです。なお、子供同士で対戦する場合はマイクロビットの用のケースを取り付けてください。そうしないと、マイクロビットの基板ごと壊してしまうことがあります。
マイクロビットには5×5サイズのLEDがあります。マイクロビットでの画像は、この5×5サイズのLEDに表示することになります。LEDに表示するブロックでもLEDに任意の形状を表示できますが、画像の場合表示する左右の位置を指定することができます。今回はこれを利用してVRのようなものを作成します。また、画像は5×5サイズだけでなく10×5サイズの画像も扱うことができます。
まずは、5×5サイズの画像を表示してみましょう。画像の表示は単純にLEDに表示する場合と異なり、最初に変数に「画像」データを入れておきます。その後、「画像を□を□ドットずらして表示」ブロックを使ってLEDに表示します。
以下の手順でブロックを組み合わせるとLEDに画像が表示されます。
JavaScriptコードだと以下のようになります。
let 変数: Image = null
変数 = images.createImage(`
# . . . .
# # . . .
# # # . .
# # # # .
# # # # #
`)
basic.forever(() => {
変数.showImage(0)
})
プログラムができたらマイクロビットに転送して動作を確認してみましょう。
画像は表示位置を変更することができます。ずらす値は正数だけでなく負数も指定できます。2や-3などを指定してどのように画像がずれて表示されるか確認してみてください。マイクロビットに転送しなくてもプレビューで確認する程度で十分です。
次に大きな画像を配置し動かしてみましょう。画像のブロックには一定時間ごとに自動的にスクロールする機能が用意されています。以下のようにブロックを組み合わせると三角波の画像が右から左に流れるように表示されます。
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サイズの大きな画像を配置し、そこに人を描きます。対戦しているように、うまく描いてください。人でなくモンスターでも何でも好きなキャラクターを描けばよいでしょう。
次に画像の表示位置を示す変数Xを作成します。画面外に押し出されたかどうかは、この変数Xの値で判断します。
次にボタンが押された時の処理を書きます。ボタンAとボタンBが押されたら変数Xの値を増やしたり減らしたりします。
最後に画像を変数Xの位置に表示します。あとは場外判定を行うブロックを書けばできあがりです。場外かどうかは変数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を押すと画像が左右に移動します。相手を場外まで押し出すとゲームオーバーになります。再度プレイする場合はマイクロビット基板上にあるリセットボタンを押してください。
場外判定のブロックを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/
