microbit：画像の表示・作成・オフセット・スクロール・変数保存の方法

今回は、主にマイクロビットディスプレイに画像を表示する方法について説明します。MakeCodeには、2フレームまでに制限された独自の画像を作成するためのアイコン画像と画像編集ブロックのセットが用意されています。スクロールしたり、オフセットしたりして、さまざまな方法で画像を表示できます。

１．アイコン画像の表示

(1) 目的

micro:bit LEDマトリクスにアイコン画像を表示したい。

(2) 方法

1. ツールボックスで高度なブロックをクリックしてカテゴリリストを展開し、画像カテゴリをクリックします。
2. 画像を０ドットずらして表示ブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
3. ツールボックスで画像カテゴリをクリックし、アイコンの画像ブロックをクリックします。
4. アイコンの画像ブロックをクリックしてドラッグし、画像を０ドットずらして表示ブロックの内側に配置します。
5. アイコン画像をクリックし、ドロップダウンメニューからお好みのアイコンを選択します。オフセットは 0 のままにしておきます。

Javascriptで書くと、以下の通りです。

images.iconImage(IconNames.Heart).showImage(0)

Pythonで書くと、以下の通りです。

images.icon_image(IconNames.HEART).show_image(0)

(3) 解説

MakeCode には、micro:bit ディスプレイに表示するための 40 個の画像が内蔵されています。画像を０ドットずらして表示ブロックでは、オフセットパラメータは LED マトリクスに表示される画像の開始位置（または終了位置）を決定します。

２．画像のオフセット

(1) 目的

ディスプレイを横にオフセットして画像を水平方向に移動させたい。

(2) 方法

1. ツールボックスで高度なブロックをクリックしてカテゴリリストを展開し、画像カテゴリをクリックします。
2. 画像を０ドットずらして表示ブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
3. ツールボックスで画像カテゴリをクリックし、アイコンの画像ブロックをクリックします。
4. アイコンの画像ブロックをクリックしてドラッグし、画像を０ドットずらして表示ブロックの内側に配置します。。
5. アイコンの画像をクリックし、ドロップダウンメニューから「うれしい顔」アイコンを選択します。オフセットを 2 に変更します。

Javascriptで書くと、以下の通りです。

images.iconImage(IconNames.Happy).showImage(2)

Pythonで書くと、以下の通りです。

images.icon_image(IconNames.HAPPY).show_image(2)

(3) 解説

マイクロビットLEDディスプレイは、25個のLEDを5行5列（5×5のマトリクス）に配置したもので構成されています。最初の列のインデックスは0、最後の列は4です。 オフセットは左からLEDの数を指定することができます。

以下の値を使用して、オフセットを作ることができます。

• 0 – オフセットなし
• 任意の正の数 – 左からのオフセット
• 任意の負の数 – 右からのオフセット

LEDディスプレイは1つのフレームで、一辺に5つのLEDが付いた正方形です。画像は複数のフレームにまたがることができます。オフセットに値5または-5を使用すると、画像を完全に隠すことができます。

３．画像のスクロール

(1) 目的

micro:bit表示の画像を速度を変えてスクロールさせたい。

(2) 方法

1. ツールボックスで高度なブロックをクリックしてカテゴリリストを展開し、画像カテゴリをクリックします。
2. 画像を1ドットずつ200ミリ秒ごとにスクロールブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
3. ツールボックスで画像カテゴリをクリックし、アイコンの画像ブロックをクリックします。
4. アイコンの画像ブロックをクリックしてドラッグし、画像を1ドットずつ200ミリ秒ごとにスクロールブロックの内側に配置します。。
5. 200ミリ秒ごとには1000を入力してください。

スクロールブロックでは、マイクロビットディスプレイ上のイメージを右から左、または左から右にスクロールさせることができます。オフセット・パラメータは、マイクロビットがアニメーションを開始して継続する画像の左または右からのLEDの数を指定します。オフセット値が0と1の場合も同様の効果があります。オフセット値0と任意の正の数を指定すると、画像を右から左にスクロールします。負の値を指定すると、画像は左から右にスクロールします。スクロール効果の速度は interval パラメータで変更できます。時間はミリ秒単位で指定します。

Javascriptで書くと、以下の通りです。

images.iconImage(IconNames.Happy).showImage(2)

Pythonで書くと、以下の通りです。

images.icon_image(IconNames.HAPPY).show_image(2)

４．自分のイメージを作る

(1) 目的

micro:bit表示に合わせて画像を作成したい。

(2) 方法

1. ツールボックスで高度なブロックをクリックしてカテゴリリストを展開し、画像カテゴリをクリックします。
2. 画像を０ドットずらして表示ブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
3. ツールボックスで画像カテゴリをクリックし、画像を作成ブロックをクリックします。
4. 画像を作成ブロックをクリックしてドラッグし、画像を０ドットずらして表示ブロックの内側に配置します。
5. 画像を作成ブロックで、LEDをクリックして、好きな画像を作成します。

(3) 解説

画像を作成ブロックは、micro:bitの物理的なLEDディスプレイを表します。5 x 5 のイメージブロックは、シングルフレームのイメージです。

５．ダブルサイズ画像の作成

(1) 目的

2つのフレームで大きな画像を作りたい。

(2) 方法

1. ツールボックスで高度なブロックをクリックしてカテゴリリストを展開し、画像カテゴリをクリックします。
2. 画像を０ドットずらして表示ブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
3. ツールボックスで画像カテゴリをクリックし、大きな画像を作成ブロックをクリックします。
4. 大きな画像を作成ブロックをクリックしてドラッグし、画像を０ドットずらして表示ブロックの内側に配置します。
5. 大きな画像を作成ブロックで、LEDをクリックして、好きな画像（例：片仮名で”イス”）を作成します。

micro:bitでコードを実行すると、micro:bitの表示では”イ”しか表示されません

Javascriptで書くと、以下の通りです。

images.createBigImage(`
    . . . # . # # # # #
    . . # . . . . . # .
    . # # . . . . # . .
    # . # . . . # . # .
    . . # . . # . . . #
    `).showImage(0)

Pythonで書くと、以下の通りです。

images.create_big_image("""
    . . . # . # # # # #
    . . # . . . . . # .
    . # # . . . . # . .
    # . # . . . # . # .
    . . # . . # . . . #
    """).show_image(0)

(3) 解説

MakeCodeでは、2つのフレームを使って画像を作成することができます。各フレームは5行5列のLEDで構成されています。micro:bit上でコードを実行すると、micro:bitのディスプレイには画像の最初のフレームが表示されます。2つ目のフレームを見たい場合は、オフセットやスクロールの方法を使う必要があります。

図7にオフセット法を用いて第2フレームを表示するためのコードを示します。オフセットボックスには、第2フレームの1列目のインデックスを5と入力してください。

Javascriptで書くと、以下の通りです。

images.createBigImage(`
    . . . # . # # # # #
    . . # . . . . . # .
    . # # . . . . # . .
    # . # . . . # . # .
    . . # . . # . . . #
    `).showImage(5)

Pythonで書くと、以下の通りです。

images.create_big_image("""
    . . . # . # # # # #
    . . # . . . . . # .
    . # # . . . . # . .
    # . # . . . # . # .
    . . # . . # . . . #
    """).show_image(5)

図８は、スクロール画像ブロックを使用して、フレーム２をマイクロビットＬＥＤ画面に表示する方法を示しています。

Javascriptで書くと、以下の通りです。

images.createBigImage(`
    . . . # . # # # # #
    . . # . . . . . # .
    . # # . . . . # . .
    # . # . . . # . # .
    . . # . . # . . . #
    `).scrollImage(1, 200)

Pythonで書くと、以下の通りです。

images.create_big_image("""
    . . . # . # # # # #
    . . # . . . . . # .
    . # # . . . . # . .
    # . # . . . # . # .
    . . # . . # . . . #
    """).scroll_image(1, 200)

６．矢印の表示

(1) 目的

右上方向を指す矢印を表示させたい。

(2) 方法

1. ツールボックスで高度なブロックをクリックしてカテゴリリストを展開し、画像カテゴリをクリックします。
2. 画像を０ドットずらして表示ブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
3. ツールボックスで画像カテゴリをクリックし、矢印の画像ブロックをクリックします。
4. 矢印の画像ブロックをクリックしてドラッグし、画像を０ドットずらして表示ブロックの内側に配置します。
5. 矢印の画像ブロックで、ドロップダウンリストをクリックして、右上向きを選択します。

Javascriptで書くと、以下の通りです。

images.arrowImage(ArrowNames.NorthEast).showImage(0)

Pythonで書くと、以下の通りです。

images.arrow_image(ArrowNames.NORTH_EAST).show_image(0)

(3) 解説

矢印の画像ブロックでは、異なる方向を指し示す矢印を表示することができます。上下左右と斜め４方向、合計８種類の画像が用意されています。

７．変数を使って画像を保持する

(1) 目的

画像を保持するために変数を使用したい。

(2) 方法

1. ツールボックスで変数をクリックし、変数を追加するをクリックします。
2. 作成する変数の名前モーダル・ボックス(ウィンドウ)で、変数名(例: heart)を入力します。そして、OK ボタンをクリックします。
3. これで、変数ツールボックスは以下のようになるはずです。これには、変数と、変数を設定したり変更したりするための2つのブロックが含まれています。
4. 画像を０ドットずらして表示ブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
5. ツールボックスで画像カテゴリをクリックし、アイコンの画像ブロックをクリックします。
6. アイコンの画像ブロックをクリックしてドラッグし、画像を０ドットずらして表示ブロックの内側に配置します。
7. アイコン画像をクリックし、ドロップダウンメニューからお好みのアイコンを選択します。オフセットは 0 のままにしておきます。

1. 変数heartを0にするブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
2. 画像を０ドットずらして表示ブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
3. ツールボックスで画像カテゴリをクリックし、アイコンの画像ブロックをクリックします。
4. アイコンの画像ブロックをクリックしてドラッグし、変数heartを0にするブロックの内側に配置します。
5. ツールボックスで画像カテゴリをクリックし、画像を０ドットずらして表示ブロックをクリックしてドラッグし、ずっとブロックの内側に配置します。
6. 画像を０ドットずらして表示ブロックの画像をクリックし、ドロップダウンリストから変数の heart を選択します。

Javascriptで書くと、以下の通りです。

let heart = images.iconImage(IconNames.Heart)
basic.forever(function () {
    heart.showImage(0)
})

Pythonで書くと、以下の通りです。

heart = images.icon_image(IconNames.HEART)

def on_forever():
    heart.show_image(0)
basic.forever(on_forever)

(3) 解説

変数には、組み込みの画像やカスタム画像を保持することができます。画像を変数に代入すると、変数名を使用してコードの任意の場所に画像を表示することができます。