チャッピーにゲームボーイのゲームを作ってもらった

チャッピーにゲームボーイのゲームを作ってもらいました。大阪産業大学のロゴも入っています。

携帯ゲーム機に表示されたタイトル画面。大阪産業大学のロゴも表示している。

携帯ゲーム機に自分のゲームのタイトルが出ていると、ちょっとうれしいですね。今回は動いている様子も確認できました。

小さい画面に何を出すか

ゲームボーイの画面は160×144ピクセルです。今のPCと比べるとかなり小さいので、ロゴや文字をそのまま縮小しても読めるとは限りません。タイトルをどのくらいの大きさにするか、何を省くかで画面の見え方が変わります。

背景やキャラクターの表示には、タイルやスプライトを使います。絵柄のデータと、それを画面のどこに置くかを分けて扱う仕組みです。画面サイズだけでなく、表示に使える資源にも制約があります。仕様を調べるにはPan Docsがまとまっています。

ゲームとして動かすところ

ゲームの処理は、ボタンを読む、ゲーム内の状態を更新する、画面へ出す、という流れで考えると整理しやすくなります。ボタンを押している間ずっと動く処理と、押した瞬間だけ実行する処理も分けます。

例えば、左右移動は押している間続けたいですが、決定ボタンを同じ扱いにすると、一度押しただけで次の画面まで進んでしまうことがあります。タイトル画面、ゲーム中、結果画面のような状態を持たせると、各画面で受け付ける操作を分けられます。

描画にもゲームボーイ側の都合があります。表示用メモリーへいつでも自由に書けるわけではないため、更新のタイミングを合わせる必要があります。このあたりはPan Docsの描画の項目に説明があります。

コードができた後も、触ってみる

AIがコードを出してくれても、操作したときの速さや当たり判定まで、文章だけで分かるわけではありません。画面に出して、ボタンを押して、意図した動きになっているかを見る必要があります。

最初に動かすものを小さくしておくと、どこを変えたいかも決めやすくなります。タイトルが出る、操作できる、終了してもう一度始められる、と一つずつ確かめていく作業です。

昔のゲーム機向けのものを、今のAIと一緒に作れるのはなかなか不思議です。とりあえず、手元のゲーム機で動いたのでよかった。

MakeCode ArcadeとM5Stack、Teachable Machineで体験型ゲームジャム

メディア基礎演習で、前からやってみたかった体験型ゲームジャムをやりました。MakeCode ArcadeとM5Stack、それにTeachable Machineを組み合わせています。2コマで、オタ芸の音ゲーやPONGの再現など、いろんなゲームが完成しました。

センサーの値を、ゲームのボタンへ変える

ゲームはMakeCode Arcadeで作ります。センサーやカメラからの入力は、こちらのページで↑・↓・←・→・A・Bへ変換します。ゲームの共有URLを読み込んで、入力とボタンの対応を設定する仕組みです。

ゲーム側では、いつもどおりボタンで操作する処理を書けばよいようにしています。体の動きをどう読み取るかは、入力側で調整します。同じゲームでも、割り当てを変えると操作の仕方を変えられます。

センサー値の範囲と、対応するゲームのボタンを設定する画面。画面でテストするモードの表示例。

M5GOからは、JSONで送る

M5GOの送信プログラムでは、Port AのToFセンサーから距離を読み、Aボタンの状態と一緒に送っています。データは{"distance":170,"buttonA":false}のようなJSONを1行ずつ出す形です。

ブラウザーはWeb Serialで受け取ります。M5GO側は約50msごとの送信です。UIFlowでプログラムを動かした後は、UIFlow側のUSB接続を閉じてからWebページで接続します。対応ブラウザーはChrome／Edgeです。送信プログラムはこちら。

境界付近で、操作がばたつかないようにする

距離のような数値入力は、2つの境界で3範囲に分けます。設定例では、100未満なら左、100以上250未満なら何も押さない、250以上なら右です。数値を直接キャラクターの座標にするのではなく、ボタンのON／OFFに変えています。

境界ちょうどのところで値が揺れると、ボタンが細かく入ったり切れたりします。そのため、前の判定を少し維持する幅を設けました。設定画面の「境界の揺れを抑える幅」がその値です。

デジタル入力はONの間だけ押します。OFFになったときや、データが途絶えたときは解除します。同じボタンへ複数の入力を割り当てた場合は、どれか一つがONなら押した状態にします。この処理はmapping.jsにあります。

Teachable Machineの認識結果もボタンへ割り当てる

カメラのほうは、Teachable Machineで学習したクラスへボタンを対応付けます。最も確率の高いクラスを選び、確信度が設定値以上ならボタンを押す処理です。

確信度が低いときは、無理にどれかの操作へ決めず、何も押さない状態にします。カメラを止めたときや認識結果が古くなったときも、押しっぱなしにならないよう解除します。カメラ入力の処理はこちら。

ゲームを作るだけでも2コマは短いですが、今回は実際に遊べるところまで進められました。オタ芸で音ゲーを操作するような、普通のコントローラーでは出てこない案が出ていたのがよかったです。

アクリル板を光らせるために、ATtiny402でLED基板を作った

プリペンの20周年に合わせて、アクリル板を光らせる基板を作ってみました。細長い基板へLEDを並べ、小さなマイコンで制御しています。

LEDを点灯させた状態。細長い基板に沿って複数の色が並ぶ。

アクリル板へ光を入れる

アクリル板は、端面から光を入れると、加工した文字や模様の部分で光を散乱させて見せることができます。板の幅に沿って光を入れられるよう、LEDを列状に並べた基板にしました。

LEDが光ることと、板がきれいに見えることは別です。光源と端面の距離、LEDの向き、板の固定位置で見え方が変わります。基板の形を決めるときも、電気的な接続だけでなく、どの位置から光を入れるかが関わります。

ATtiny402とUPDI端子

ATtiny402、モード用スイッチ、コンデンサー、UPDI端子を配置した部分。

マイコンはATtiny402です。8ピンのAVRで、Flashは4KB、SRAMは256バイト。大きなマイコンボードを載せずに、LEDの制御を小さくまとめる構成です。仕様はMicrochipの製品ページで確認できます。

基板の端にはUPDIの接点を出しています。ATtiny402の書き込みとデバッグに使うインターフェースです。部品を実装した後も、この接点からプログラムを書き換えられます。

ボタンには「SW2 MODE」と表記しました。操作する部分と書き込む部分を基板に残しておくと、装置を組んだ後も調整しやすくなります。

光り方を作るときの処理

LEDを複数の色で光らせる場合は、各LEDへどの色を出すかと、その色をいつ更新するかを考えます。点灯パターンを配列で持つ方法もありますし、時刻やLEDの位置から色を計算する方法もあります。

ATtiny402はRAMが256バイトなので、大きなデータをそのまま持つとすぐに使い切ります。必要な状態だけを保持して、次の色を計算する、といった作り方が合います。光らせるだけの小さな装置でも、データの持ち方は効いてきます。

基板には電解コンデンサーと「104」のコンデンサーも載せています。LEDの点灯状態が変わると消費電流も変わるため、電源まわりも合わせて考える必要があります。

写真は基板を点灯させた状態です。細長い基板の上に色が並ぶだけでも、なかなかよい感じになりました。アクリル板を光らせたい、から始めて基板まで作ってしまいました。

自作左手キーボードのワークショップをやりました

自作左手キーボードのワークショップを行いました。基板やキー、ケースを用意して、それぞれの一台を作る回です。

用意した基板、ケース、キーなどの部材。組み合わせを考えるところから工作が始まる。

完成したものを並べると、色もキーの組み合わせもばらばらでした。同じような部品から作っていても、ずいぶん雰囲気が変わります。

それぞれ異なる色とキーを組み合わせた左手キーボード。

キーボードを部品から見る

普段はまとめて「キーボード」と呼んでいますが、指で押すスイッチ、その上のキーキャップ、接続をまとめる基板、全体を支えるケースに分かれます。

キーを押すとスイッチの接点が変化し、その状態を制御側が読み取ってPCへ入力を送ります。ケースやキーキャップを選ぶ作業に加えて、この入力の流れを実物で見られるのが、キットを組むよいところです。

ケースに収まっても、キーを押して確認する

ケースは基板が入れば完成、というわけでもありません。キーを押し込んだときに縁へ当たらないか、基板が大きく動かないか、ケーブルの接続口がふさがれていないかを見ます。

キーキャップには高さや形の違いがあり、隣同士の間隔にも関わります。止まっている状態でぶつかっていなくても、押したときだけ擦ることがあります。組み上がったら、すべてのキーを一度ずつ押してみるだけでも確認できます。

動作確認で見るところ

PCへつないだ後は、入力機器として認識されるか、各キーが反応するか、割り当てが意図したものになっているかを分けて確かめます。

全部のキーが反応しないなら接続や制御側、特定のキーだけならそのキー周辺、入力は出るけれど内容が違うなら設定、という具合に分けると調べる場所を絞れます。押した感触だけでなく、出てきた入力まで見る必要があります。

今回は、見た目の違うキーボードがいろいろできました。電子工作は同じものを人数分作ることも多いですが、この回は選ぶ部品にそれぞれの好みが出ていました。