• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • HOME
  • Arduino
    • Arduino初心者編
    • Arduino基礎編
    • Arduino応用編
    • Arduino実践編
  • Raspberry Pi
  • microbit
  • XBee
  • Scratch
  • Contact Us
  • Privacy Policy

STEMSHIP

ものづくりを通して、科学を学ぼう!

現在の場所:ホーム / microbit / microbit:画像の表示・作成・オフセット・スクロール・変数保存の方法

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

2021年1月13日 by STEMSHIP コメントを書く

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

1.アイコン画像の表示

(1) 目的

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

(2) 方法

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

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

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

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

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

(3) 解説

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

図2. アイコン画像の一覧

2.画像のオフセット

(1) 目的

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

(2) 方法

  1. ツールボックスで高度なブロックをクリックしてカテゴリリストを展開し、画像カテゴリをクリックします。
  2. 画像を0ドットずらして表示ブロックをクリックしてドラッグし、最初だけブロックの内側に配置します。
  3. ツールボックスで画像カテゴリをクリックし、アイコンの画像ブロックをクリックします。
  4. アイコンの画像ブロックをクリックしてドラッグし、画像を0ドットずらして表示ブロックの内側に配置します。。
  5. アイコンの画像をクリックし、ドロップダウンメニューから「うれしい顔」アイコンを選択します。オフセットを 2 に変更します。
図3. アイコン画像を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を使用すると、画像を完全に隠すことができます。

3.画像のスクロール

(1) 目的

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

(2) 方法

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

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

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

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

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

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

4.自分のイメージを作る

(1) 目的

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

(2) 方法

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

(3) 解説

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

5.ダブルサイズ画像の作成

(1) 目的

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

(2) 方法

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

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

図6. 大きな画像を作成して表示するブロックの配置

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と入力してください。

図7. 第2フレームを表示させるインデックス

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

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

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

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

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

図8. 大きな画像を作成してスクロール表示するブロックの配置

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

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

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

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

6.矢印の表示

(1) 目的

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

(2) 方法

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

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

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

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

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

(3) 解説

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

7.変数を使って画像を保持する

(1) 目的

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

(2) 方法

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

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) 解説

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

Filed Under: microbit

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

最初のサイドバー

CONTACT US

  • Facebook
  • Twitter
  • Youtube

More to See

Arduinoベースのセンサノード:XBeeデータ収集ノードの製作

2021年9月27日 By STEMSHIP

Arduinoベースのセンサノード:Arduinoを使った温度センサの作製

2021年9月21日 By STEMSHIP

XBeeモジュールとBMP280センサを使用してデータ収集する

2021年5月31日 By STEMSHIP

XBeeモジュールでMicroPythonを使ってセンサを読み取る

2021年5月24日 By STEMSHIP

XBeeモジュールでセンサを読み取る:センサノードの設定と測定

2021年5月17日 By STEMSHIP

カテゴリー

  • Arduino (44)
    • Arduino初心者編 (15)
    • Arduino基礎編 (11)
    • Arduino実践編 (4)
    • Arduino応用編 (11)
    • Arduino番外編 (3)
  • MakeyMakey (1)
  • microbit (11)
  • Raspberry Pi (13)
  • Scratch (6)
  • STEM教育 (5)
  • XBee (15)
  • ものづくり教育 (2)
  • 子供の教育 (2)
  • 科学 (6)
  • 算数 (5)

Tags

BLE DCモータ EEPROM ELEGOO ESP32 ESP8266 IoT LCD LED makeymakey MQTT Node-RED scratch STEM教育 WiFi XBee アニメーション オンラインゲーム カメラ クローン ゲーム コスチュームの変更 サーボモータ ステッピングモータ ステートマシン スピーカ タイマー ピンポン ブロック定義 ペン ライントレース ラジコン リスト 分数 割り込み 実験 工作 幼児 当たり判定 温度センサ 無線通信 物理 角度制御 重力 音楽

Footer

最近の投稿

  • Arduinoベースのセンサノード:スケッチ(プログラム)の作製
  • Arduinoベースのセンサノード:XBeeデータ収集ノードの製作
  • Arduinoベースのセンサノード:Arduinoを使った温度センサの作製
  • XBeeモジュールとBMP280センサを使用してデータ収集する
  • XBeeモジュールでMicroPythonを使ってセンサを読み取る

タグ

BLE DCモータ EEPROM ELEGOO ESP32 ESP8266 IoT LCD LED makeymakey MQTT Node-RED scratch STEM教育 WiFi XBee アニメーション オンラインゲーム カメラ クローン ゲーム コスチュームの変更 サーボモータ ステッピングモータ ステートマシン スピーカ タイマー ピンポン ブロック定義 ペン ライントレース ラジコン リスト 分数 割り込み 実験 工作 幼児 当たり判定 温度センサ 無線通信 物理 角度制御 重力 音楽

Search

2023年3月
月 火 水 木 金 土 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    

Copyright © 2023 · STEMSHIP.COM