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

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

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

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

小さい画面に何を出すか

ゲームボーイの画面は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へつないだ後は、入力機器として認識されるか、各キーが反応するか、割り当てが意図したものになっているかを分けて確かめます。

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

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

AIと協働して、6キーとつまみ付きのキーボードを作った

AIと協働して、小さなキーボードを作ってみました。キーは6つ。左上につまみ、右上に小型ディスプレイを載せています。

2行×3列のキー、左上のつまみ、右上のディスプレイを載せた基板。

6つのキーと、ロータリーエンコーダー

キーは2行×3列に並べました。画面にはK1〜K6の割り当てを表示しています。つまみのほうは音量操作の表示です。

ボタンを押す操作と、つまみを回す操作を一台へまとめられるので、特定の機能を呼び出すものはキーへ、値を増減するものはつまみへ、という使い分けができます。

ロータリーエンコーダーは、可変抵抗のように「今この角度だから、この電圧」という読み方をする部品とは違います。一般的なものは位相のずれた2つの信号から、どちらへ回ったかを読み取ります。回転方向に応じて音量を上げ下げする、といった操作に使えます。

キーボードでの実装例はQMKのエンコーダー資料にもあります。使用するファームウェアによって設定方法は変わりますが、回した動作へキーや機能を対応付ける考え方は共通です。

画面に割り当てを出す

ディスプレイのフットプリントには「0.96" 80×160（RGB）SPI」と記載しています。小さい画面ですが、6キー分の割り当てとつまみの状態を表示するには収まっています。

キー数の少ないキーボードは、どのキーに何を入れたかを忘れると使いにくくなります。画面へ出しておけば、キーキャップの文字と実際の設定が違っても確認できます。

SPIの画面を扱う場合、キーを読む処理に加えて、表示を更新する処理も必要です。毎回すべてを描き直すのか、変化した部分を更新するのかで、処理量も変わります。キー入力への反応を保ちながら表示する、という点も考えることになります。

基板上の配置

手前にキー、奥に表示器を置き、つまみは左へ寄せました。指で操作する部分と、見る部分を分けた配置です。USBの接続口は上側に出しています。

部品同士がぶつからずに載ることと、指を掛けて操作しやすいことは別です。とくにつまみは、周囲に指を入れる余裕が必要になります。こういうところは、基板を眺めているときより実物のほうが分かりやすいです。

オープンキャンパスでバーチャルDJ、ロボットアーム、3Dプリンター

今回のオープンキャンパスは、バーチャルDJ、ロボットアーム、3Dプリンターでした。あと流しそうめん。並べて書くと、なかなか統一感のないメニューです。

体験展示の設置風景。ディスプレイや周辺の機材を配置した様子。

操作すると、音や映像が変わる

バーチャルDJのような体験展示では、自分の操作へ反応が返ってくることが大事です。入力を受け取ってから、音や映像が変わるまでに時間が掛かると、何に反応したのかが分かりにくくなります。

入力を読み取る処理、操作を決める処理、音や映像を出す処理が順につながります。どこか一つが遅くても、全体の反応に出ます。画面上で動いているだけでなく、実際に操作したときにどう感じるかを見たいところです。

ロボットアームは、画面の外で動く

ロボットアームは、数値で指定したことが実際の動きになります。関節の角度を指定して動かす方法と、手先の位置を指定して複数の関節を動かす方法では、制御の考え方が違います。

物をつかむなら、先端が届くだけでなく、つかむ向きや、開閉するタイミングも関わります。実物では、関節の曲がる範囲や、周囲へぶつからずに動ける範囲も見えてきます。画面上で点を動かすのとは違うところです。

3Dプリンターは、データから形ができる

3Dプリンターでは、形状データをスライサーで層ごとの経路へ変換し、その経路に沿って造形します。設計した立体を、そのまま一度に出しているわけではありません。

少しずつ積み上がっていくところを見ると、なぜ造形に時間が掛かるのか、下から支えられない形がなぜ難しいのかも分かりやすくなります。モデルの形を考えることと、プリンターで作れる形を考えることがつながります。

今回は装置の展示に、流しそうめんも加わりました。見たり触ったりするものがいろいろある一日でした。

会場に用意した流しそうめん。技術の体験とともに、いろいろな楽しみ方を用意。

犬型ロボットに3Dプリンターとロボットアームを載せて、下水道展へ

下水道展に、3Dプリンターとロボットアームを載せた犬型ロボットを持っていきました。管路内の破損を、その場で修理するための装置です。だいぶ魔改造感のある見た目になりました。

作業用の装置を載せた犬型ロボット。上部へ伸びるアームと配線も含め、複数の機能を一台にまとめている。

移動する足と、作業する腕

犬型ロボットで移動し、アームを使って作業位置へ先端を持っていく構成です。3Dプリンターを載せることで、移動先で材料を扱うことを狙っています。

据え置き型の3Dプリンターなら、ノズルと造形面の位置関係はフレームで決まります。移動する機体へ載せると、足元の状態や機体の傾きも、その位置関係に入ってきます。アームだけ正しい位置へ動かしても、機体側が傾けば対象物との距離は変わります。

そのため、歩いて目的地へ着くところと、止まって作業するところは別に考える必要があります。移動中の振動に耐えられることと、作業中に先端の位置を保てることも、同じ条件ではありません。

上に載せると、重量以外も効いてくる

アームを伸ばすと、機体に対する重さの掛かり方が変わります。取り付け位置や固定部のたわみは、先端の位置にも影響します。配線も、電気的につながっていればよいというだけではなく、足や関節の動きを邪魔しない長さと経路が必要です。

管路のように周囲が狭い場所では、アームの届く範囲に加えて、機体ごと入れるか、向きを変えられるかも問題になります。装置を小さくまとめることと、作業に必要な可動範囲を確保することを、両方見ていくことになります。

修理するには、材料を置く先も考える

破損箇所へノズルを近づけられても、それだけで修理は完了しません。対象面の向きや状態、材料がその場所にとどまるか、施工後にどう確認するかという課題があります。平らな造形台の上に材料を積む場合とは条件が違います。

今後、施工へつなげるには、位置の再現性や材料の状態を評価していく必要があります。今回の展示では、まず移動と作業を一台へまとめた装置を持っていきました。普通の犬型ロボットとは、かなり違う姿です。