親指サイズのゲーム機「Thumby」を使うと、MicroPythonを使って手軽に自作ゲームを作ることができる。超小型ながら十字キーとAとBのボタンをしっかり押してゲームを遊ぶことができる。今回は、Thumbyを使って、便利なバードカウンターを作ってみよう。

  • ブラウザで手軽に作れる「Thumby」でバードカウンターを作ってみよう

    ブラウザで手軽に作れる「Thumby」でバードカウンターを作ってみよう

ブラウザ上でプログラムが開発できるThumbyのおさらい

本連載の139回目では、Thumbyの簡単な使い方を紹介し、実行して楽しめるライフゲームを作ってみた。

Thumbyのプログラムは、基本的に上から下へと実行されるだけなので、とてもシンプルなものだ。しかも、こちらにあるWebブラウザ上のIDE上で無料で開発できるため、プログラミング入門や初心者のスキル向上にぴったりの題材とも言える。

そして、当然ながら作ったプログラムは、手軽に実機に転送して使うことができる。ブラウザ上で動かすだけでも十分楽しいので、実機を持っていない人も遊んでみよう。

  • ブラウザ上のIDEでプログラミングできる

    ブラウザ上のIDEでプログラミングできる

Thumbyで十字キーやABボタンを使うには

さて、今回はThumbyでバードカウンターを作るのが目的だ。バードカウンターを作る際に重要になるのが、ボタンを押したかどうかを判定する処理になる。Thumbyでキーが押されているかを判定するには、以下のようにする。

次のプログラムは、公式のサンプルを少し改良したもので、Thumbyのボタンを押すと、押したボタンの名前を画面に表示するというものだ。

import thumby
while True:
    thumby.display.fill(0) # 画面を黒く塗る

    if thumby.buttonU.pressed():  # 十字キーの↑が押された？
        thumby.display.drawText("U", 18, 12, 1)
    if thumby.buttonD.pressed():  # 十字キーの↓が押された？
        thumby.display.drawText("D", 22, 12, 1)

    if thumby.buttonL.pressed():  # 十字キーの←が押された？
        thumby.display.drawText("L", 12, 17, 1)
    if thumby.buttonR.pressed():  # 十字キーの→が押された？
        thumby.display.drawText("R", 24, 17, 1)

    if thumby.buttonA.pressed():  # Aボタンが押された？
        thumby.display.drawText("A", 52, 12, 1)
    if thumby.buttonB.pressed():  # Bボタンが押された？
        thumby.display.drawText("B", 42, 22, 1)

    thumby.display.update()  # 画面を更新する

Thumbyエミュレーターで実行してみよう

こちらのWeb IDEにアクセスしたら、画面上部にある[UTILITIES] > [MAKE NEW GAME]をクリックしよう。ファイル名を適当に「key_test.py」などの名前を入力して[Enter]キーを押そう。

そして、上記のプログラムを画面左側のコードエディタに貼り付けよう。そして、画面上部の[EMULATION]の赤枠にチェックを入れて、右下にあるエミュレータの[START]ボタンを押そう。すると、下記のようにエミュレーターで実行できる。

  • Aボタンを押したところ

    Aボタンを押したところ

ThumbyのAPIは単純なのが良いところ

無事にプログラムが実行できたら、改めてプログラムを確認してみよう。Thumbyでは、プログラムは上から下に順に実行されるのが良いところではあるが、ゲームやツールを作るときには、プログラムが継続実行するようにメインループを記述する必要がある。

それで、Thumbyの大半のプログラムは次のような構造になっている。

while True:
    thumby.display.fill(0) # 画面を黒に初期化
    # ここで何かの処理
    #     押されたキーを判定したり、画面を描画したり…
    thumby.display.update()  # 画面を更新する

まず、「while True:」と書く事で、永遠に処理が繰り返されるようにしている。そして、繰り返しの最後に「thumby.display.update()」と書くことで、画面が更新される。

Thumbyには、線を引いたり文字を表示するといった命令が用意されているが、それを実行した後、updateメソッドを呼び出してはじめて実際に画面に描画内容が反映されるようになっている。

そして、あとは、if文を使って、ボタンNが押されているかを確認し、押されたボタンに応じてゲームを進行すれば、いろいろなゲームを作ることができる。

昨今のマルチタスク環境では、イベントモデル全盛なので、このような原始的なプログラムを書くことは少ない。しかし、Thumbyでプログラミングを行うことにより、現代では隠蔽されてしまった貴重なメインループをデザインするという楽しみを体験できる。

バードカウンターを侮ることなかれ

ここまで、紹介したプログラムを組み合わせれば、バードカウンターなど簡単にできそうに思えることだろう。Aボタンが押されていたらカウンタを1加算するという処理を、何も考えずに作ると、次のようなプログラムになるだろう。

import thumby

# カウンタを0にセット
counter = 0
# フォントの設定
thumby.display.setFont("/lib/font8x8.bin", 8, 8, 1)

while True:
    thumby.display.fill(0) # 画面を黒く塗る
    if thumby.buttonA.pressed():  # Aボタンが押された？
        counter += 1  # カウンタを加算
    # カウンタを表示
    thumby.display.drawText(str(counter), 10, 10, 1)
    thumby.display.update()

このプログラムを貼り付けて実行してみよう。Aボタンを押すと、確かにカウンターはカウントアップされる。しかし、ボタンを押している間、際限なくずっと数字が加算されてしまう。つまり、ボタンを押した回数をカウントするのではなく、押している時間をカウントするカウンターとなってしまったのだ。これでは、バードカウンターとは言えない。

  • バードカウンターの失敗作を実行したところ

    バードカウンターの失敗作を実行したところ

ボタンの押しっぱなしを検出する仕組みを考えよう

そこで、ボタンを押しっぱなしにした時には、カウントを行わないように、ボタンを押し続けたかどうかを判定する変数isdownaを導入しよう。はじめてAボタンを押した時に、この変数をTrueに設定し、変数is_down_aがTrueの間は、カウントしないようにするのだ。

実際のコードにすると以下のようになるだろう。

counter = 0
is_down_a = False  # 最初はFalseで初期化
while True:
    thumby.display.fill(0) # 画面を黒く塗る
    if thumby.buttonA.pressed():  # Aボタンが押された？
        if is_down_a:  # 押しっぱなしならカウントしない
            continue
        counter += 1  # カウンタを加算
        is_down_a = True  # 押したことを記録
    else:
        is_down_a = False  # ボタンを離した
    # カウンタを表示
    thumby.display.drawText(str(counter), 10, 10, 1)
    thumby.display.update()

バードカウンター(完成版)を見てみよう

そして、以下のプログラムが、完成版のバードカウンターだ。Aボタンでカウントアップ、Bボタンでカウントダウン、上ボタンを押すと、メニューに戻るというプログラムにしてみた。

import thumby

# 変数を初期化
counter = 0
is_down_a = False  # Aボタンの押しっぱなし判定 --- (※1)
is_down_b = False  # Bボタンの押しっぱなし判定

# フォントの設定
thumby.display.setFont("/lib/font8x8.bin", 8, 8, 1)

while True:
    thumby.display.fill(0) # 画面を黒く塗る
    if thumby.buttonU.pressed():  # 上ボタンが押された？
        break
    if thumby.buttonA.pressed():  # Aボタンが押された？ --- (※2)
        if is_down_a:  # 押しっぱなしならカウントしない --- (※3)
            continue
        counter += 1  # カウンタを加算
        is_down_a = True # 押したことを記録
    else:
        is_down_a = False  # ボタンを離した
    if thumby.buttonB.pressed():  # Bボタンが押されたら減らす
        if is_down_b:  # 押しっぱなしならカウントしない
            continue
        counter -= 1  # カウンタを減算
        is_down_b = True # 押したことを記録
    else:
        is_down_b = False  # ボタンを離した
    # カウンタを表示
    thumby.display.drawText("COUNTER!", 0, 0, 1)
    thumby.display.drawText(str(counter), 30, 20, 1)
    thumby.display.update()
# リセットしてメニューに戻る
thumby.reset()

プログラムを実行すると、今度は正しくAボタンを1回押すと1カウントアップできるようになった。これで、バードカウンターとして実用的なものになった。

  • バードカウンターを作ったところ

    バードカウンターを作ったところ

もし、実機を持っていれば、IDEの[FILE] > [SAVE TO THUMBY]をクリックしよう。実機に転送してプログラムを実行することができる。実際に、次のように正しく動かすことができた。

  • 実機で実行したところ

    実機で実行したところ

プログラムのポイントを確認しよう。

(※1) まず、AボタンとBボタンが押されているかどうかを記録する変数is_down_aとis_down_bを用意する。最初はどちらも押されていないので、Falseで初期化する。

(※2) thumby.buttonA.pressed()を使って、Aボタンが押されているかどうかを調べる。ボタンが押されていればTrueが返るので、カウントアップの処理を行う。Bボタンについても同様に判定している。

(※3) ここが今回のポイントだ。変数is_down_aがTrueなら、Aボタンが押しっぱなしになっていると判断し、continueでループの先頭に戻る。初めて押された場合だけカウンターを1増やし、is_down_aをTrueにする。ボタンを離すとFalseに戻すので、次に押した時には再びカウントできる。Bボタンも同じ仕組みだ。

まとめ

以上、「Thumby」を使って、バードカウンターを作ってみた。Thumbyはシンプルな構造なので、ボタンの入力判定や画面の描画など、プログラミングの基本を学ぶのにぴったりだ。メインループを作ったり、ボタンを押しっぱなしにした時の処理を作ったり、目的の動作を作るためには、ちょっとした工夫が必要になることが多い。

Thumbyはブラウザ上のエミュレーターでも楽しめるので、今回のプログラムを改造して、自分だけの便利なツールやゲームを作ってみよう。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「実践力をアップする Pythonによるアルゴリズムの教科書(マイナビ出版)」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。