ESP32とXIAO ESP32-S3向けの携帯ゲーム6本、ブラウザで遊べる

2.4インチのILI9341スクリーン、4つの押しボタンで作る十字キー、そしてAとB用のボタンが2つ。これが携帯ゲーム機で、ESP32なら動かすのに十分すぎるほどです。この構成向けに5本のゲームを作り、さらにアナログスティック付きの大きめの携帯機向けに6本目のSkythreadを作って、6本すべてをVelxioのサンプルギャラリーに入れました。どれもArduinoスケッチで、どれもブラウザで動きます。Runを押せば遊べます。ボードもスクリーンもハンダ付けも不要です。

最初のDoomが最初に作られ、クラシックなESP32で動きます。続く4本はSeeed Studio XIAO ESP32-S3で動きます。パートナーであるSeeedの親指サイズのボードで、4本は1つの小さなエンジンを共有しています。最後のSkythreadはXIAO ESP32-S3 Senseで動きます。同じチップに8 MBのPSRAMを搭載したもので、地形全体をメモリに保持するためにそれが必要です。この記事では、各ゲームの遊び方と内部の仕組みを解説します。

Velxioで遊ぶ方法

1. 上の表から好きなゲームを開きます。スケッチ、ライブラリ、回路がまとめて読み込まれます。
2. Runを押します。Velxioがスケッチをコンパイルして起動します。スケッチの初回コンパイルには最大1分かかりますが、以降はビルドキャッシュから読み込まれます。
3. どのゲームも自動で動くアトラクトモードのデモから始まります。任意のキーかボタンを押すと操作を引き継げます。
4. キーボードで遊びます。矢印キーが十字キー、ZがA、XがBです。キャンバス上の各ボタンには、小さなキーキャップで対応するキーが表示されています。マウスでボタンをクリックすることもでき、押しっぱなしにすれば押されたままになります。Skythreadにはアナログスティックとより多くのボタンがあり、操作方法は下の専用セクションにあります。
5. Serialモニターを開くとゲームのログが見られます。フレームレートを示すSTAT行と、キル、レベル、アイテム取得、死亡のたびに出力されるEVT行があります。Skythreadは2秒ごとに独自の行を出力し、フレームレート、描画と送信にかかった1フレームあたりの時間、スコアを表示します。

Velxioの押しボタンはどれでもキーボードから操作できます。これらのゲームに限りません。ボタンを右クリックしてKeyboard controlカードを使います。カードをクリックしてキーを押すと、以降はシミュレーション実行中にそのキーを押している間ボタンが押されます。

シミュレーターはファームウェアそのものを実行します。実チップ向けにコンパイルされたものを、VelxioがESP32とESP32-S3をブラウザ上で1命令ずつエミュレートし、スケッチがILI9341に送った内容をそのまま描画します。

携帯ゲーム機

XIAOのGPIOピンは11本しかなく、スクリーンと6つのボタンには12本必要です。コツは、スクリーンが通常使う2本の線を必要としないことです。スクリーンから読み戻すことは一切ないのでMISOは未接続のままにし、リセットピンは3.3 Vに接続してボードと一緒にリセットされるようにします。これでちょうど足ります。

各ボタンはそのピンをグランドに接続します。スケッチはpinMode(pin, INPUT_PULLUP)でチップ内蔵のプルアップ抵抗を有効にするので、ボタンが離れているときはHIGH、押されているときはLOWを読み取ります。キャンバス上でも実際のブレッドボード上でも抵抗は不要です。Doomはより大きなESP32 DevKitで同じ考え方を使い、独自のピンを使っています（下のセクションに記載）。

XIAO ESP32-S3を選ぶ理由

XIAO向けの4本のゲームは、まず画面全体をメモリに描き、それから一気にスクリーンへ送ります。320 x 240の画面を1ピクセル2バイトで表すと153,600バイトになり、これが連続した1つのRAMブロックに収まる必要があります。

ここが2つのチップの違いです。各チップでスケッチから最大の空きブロックを出力しました。クラシックなESP32では110,592バイト、ESP32-S3では278,528バイトでした。S3はフレーム全体を余裕を持って保持できますが、クラシックなESP32にはできません。だからこそDoomは画面を1列ずつ描画しているのです（詳細は後述）。

S3はシミュレーター上でも2つのうち速い方です。両ボードで同じフレームバッファのベンチマークを実行したところ、Velxioのブラウザ内エンジンはESP32を毎秒8,100万から9,000万命令で、ESP32-S3を毎秒9,600万から1億600万命令で実行し、S3はESP32の31フレームに対して33フルフレームを毎秒描画しました。

4本のゲームで1つのエンジン

XIAO向けの4つのスケッチは、同じ200行から始まります。エンジンです。フレームバッファ、ボタン、いくつかの描画関数、フレームループを担当します。

RAMに描画するので順序は関係ありません。ゲームは空を塗り、丘を描き、飛行機を描き、その上に爆発を描くことができ、スクリーンは完成した画像しか見ないのでちらつきません。送信はAdafruit ILI9341ライブラリへの3回の呼び出しです。

static void present() {
  tft.startWrite();
  tft.setAddrWindow(0, 0, SCR_W, SCR_H);  // the whole 320 x 240 screen
  tft.writePixels(fb, SCR_W * SCR_H);     // 153,600 bytes in one burst
  tft.endWrite();
}

40 MHzでは、この153,600バイトがSPIの配線上で約31 msかかるので、転送だけで毎秒約30フレームが上限になります。フレームの残り、つまりゲームロジックと描画は残り時間に収める必要があり、だからこそ描画関数はシンプルです。塗りつぶした矩形、線、円、Adafruit GFXに同梱の5 x 7フォントのテキスト、そしてスプライトです。

スプライトはテキストで書かれ、1文字が1ピクセルで、.は透明なピクセル、それ以外は128色のパレットで表現されます。これがGear Hopのロボットです。

"........a.......",
"....mmmmmmmm....",
"...mMMMMMMMMm...",
"...mMllMMllMm...",   // l = the eyes, light cyan
"...mMllMMllMm...",
"...mMMMMMMMMm...",
"....mmmrrmmm....",   // r = the red mouth

これらのゲームには画像ファイルから来たものは何もありません。マップのタイル、テクスチャ、エフェクトはボード起動時にコードがRAMに描画するので、各スケッチはエディターで読んで変更できるプレーンテキストです。

Sky Duel: フライトモデル付きのドッグファイト

あなたは複葉機を操り、画面4つ分の幅を持つ世界を飛びます。世界はループしていて、右端から飛び出すと左側に戻ってきます。赤い飛行隊があなたを追い、地上には対空砲とトラックが待ち構え、ウェーブが進むごとに敵機が1機ずつ増えていきます。

遊び方。 D-padを飛びたい方向に向けます（斜めも含む）。飛行機はその方向へ旋回します。Aを押し続けると機関銃を撃ち、Bをタップすると爆弾を投下します（ウェーブごとに6発）。地上のターゲットを破壊できるのは爆弾だけです。画面上部のレーダーには世界全体が表示されるので、画面外の飛行機も見つけられます。

仕組み。 飛行機は一定速度では動きません。スケッチは毎フレーム小さなフライトモデルを実行します。

速度は巡航値に向かって変化しますが、上昇すると速度を失い、降下すると速度を得ます。その度合いは角度に比例します。長く真上に引くと速度がストール速度を下回り、機首がひとりでに地面へ向かって落ちます。再び飛ぶには降下して速度を取り戻す必要があります。敵パイロットも同じモデル、同じストールで飛びます。だからこそこれが射撃場ではなくドッグファイトになるのです。

飛行機は右向きの16 x 16スプライト1枚です。起動時にスケッチがこれを32方向に回転させてすべて保存し、左向きのものは反転させて飛行機が逆さまに飛ばないようにします。飛行機の描画はテーブル参照になり、画面上で2倍に拡大されます。敵はあなたの少し先の点へ向かって旋回し、あなたが銃口の前にいると発砲し、接近通過の後は離脱して衝突を避けます。

XIAO Quest: 小さなRPG

勇者、村、森、そして洞窟。噴水のそばの長老は、影の王が村のクリスタルを古い洞窟へ持ち去ったと告げ、道を塞ぐ門の鍵を渡します。森と洞窟ではモンスターが襲ってきて、ターン制で戦います。

遊び方。 D-padで歩きます。Aは人と話す、看板を読む、宝箱を開ける、決定する、に使います。Bはステータスとアイテムを表示します。噴水は体力を回復し、商人は10ゴールドでポーションを売り、3つの宝箱にはポーション2つ、鉄の剣、銀の指輪が入っています。バトルではD-padで選び、Aで決定します。攻撃、火の魔法（MP3、ダメージ2倍、防御無視）、ポーションを飲む、逃げる、の4つです。

仕組み。 このゲームは小さなステートマシンです。各状態は独自の入力処理と描画を持ち、次のイベントで状態が移ります。

3つのマップは16ピクセルのタイル20 x 14で、スケッチ内に文字列として書かれ、1文字が1タイルです。#は木、~は水、=は道、Kは施錠された門です。勇者は1タイルずつ移動し、0.16秒かけてタイル間を滑るので、動きは滑らかでも衝突判定は単純なままです。1歩が許されるか、許されないかだけです。

バトルは小さな整数の式を使います。攻撃は自分の攻撃力に0から3の乱数を足し、敵の防御力を引いた値です。経験値でレベルが上がり、レベルごとに体力、魔力、攻撃力、防御力が増えます。洞窟は暗く、マップを描いた後、スケッチは勇者から50〜70ピクセルの範囲のピクセルを半分の明るさに、それより遠いものは4分の1の明るさに落とします。これがランタンの役割です。全ピクセルの距離を測るとフレームレートは約27から16に落ちましたが、行ごとに1回だけ計算し、明るい区間、薄暗い区間、暗い残りに分けると約22に戻ります。

Gear Hop: プラットフォーマー

小さなロボットが2つのレベルを駆け抜けて歯車を集めます。カブトムシが地面を歩き、ドローンが空中を浮かび、床にはトゲが並び、最も広い隙間は動く足場でしか渡れません。各レベルの終わりにある旗を目指しましょう。

遊び方。 LEFTとRIGHTで歩き、Bを押し続けると走り、Aでジャンプします。Aを長く押すほど高くジャンプします。敵の上に着地すると踏みつけになり、**?**ブロックを下から叩くと歯車が出てきます。ハートは3つで、トゲや敵に触れると1つ減り、穴に落ちても1つ減ります。

仕組み。 レベルは128 x 14タイルで、小さなスクリプトで生成され、スケッチに文字列として貼り付けられています。ロボットは10 x 14ピクセルの箱で、毎フレーム2段階で動きます。まず横方向に動き、壁の中に入り込んだら押し戻します。次に縦方向に動き、地面、一方通行の板、動く足場に着地するか、ブロックに頭をぶつけます。2軸を別々に処理することで、ロボットが壁に張り付いたり角をすり抜けたりするのを防ぎます。

ジャンプの感触を良くする小さなルールが3つあります。着地の最大0.12秒前に押したジャンプは、着地した瞬間に実行されます（ジャンプバッファ）。足場から歩いて落ちた後0.08秒以内に押したジャンプも有効です（コヨーテタイム）。そしてAを早く離すと上昇速度が抑えられ、ボタンを押し続けると高くジャンプできます。2層の丘がカメラ速度の5分の1と2分の1未満でスクロールし、シーンに奥行きを与えます。

Circuit Defense: 回路基板上のタワーディフェンス

バグが回路基板を這ってチップへ向かいます。あなたは電子部品を基板上に建ててそれを止めます。LEDは1匹のバグに高速レーザーを放ち、コンデンサは周囲のすべてのバグに放電し、コイルはバグの動きを遅くします。チップに到達したバグは1ポイントの体力を奪い、ウェーブはどんどん強くなっていきます。

遊び方。 D-padでカーソルを動かします。Bで部品を選び、Aで建てます。すでに建てた部品の上でAを押すとアップグレードでき、最大レベル3まで上がります。倒したバグはコインを落とし、ウェーブをクリアするごとにボーナスが入ります。カーソルの周りの円は、これから建てる部品の射程を示します。

仕組み。 バグは決まった経路をたどりません。開けた基板上を歩き、あなたは建てたもので彼らを誘導できます。基板上の銅配線が常に彼らの進むルートになります。その裏側にあるのが、建てるたびに再実行される幅優先探索です:

探索はチップに隣接するセルから始まり、それらに0を割り当てて外側へ広がります。番号の付いたセルの空いている隣接セルには、その番号に1を足した値が入ります。完了すると、すべてのセルがチップまでの距離を持ち、タワーの壁も含まれます。あるセルに立つバグは、単により小さい番号の隣接セルへ移動するだけです。バグごとの経路計画はありません。1回の探索、260セルがすべてのバグに使われます。

同じ数値のおかげで、ゲームの唯一のルールを簡単に守らせることができます。経路を長くすることはできますが、閉ざすことはできません。建てるとき、スケッチは部品を置き、探索を再実行し、入口のセルを見ます。そこに番号がなくなっていれば、バグは通れません。部品は取り除かれ、ゲームはTHAT BLOCKS THE PATHと表示します。

ESP32 Doom: ファーストパーソンシューター

5本の中で最も古いものは、クラシックなESP32 DevKitで動きます。テクスチャ付きの壁の迷路を歩き、追いかけてくるロボットや酸を吐くスライムを撃ち、ドアを開け、メディキットや弾薬を拾い、次々とウェーブを片付けます。

遊び方。 D-padで歩き、向きを変えます。Aで発射(押しっぱなしで自動連射)、Bで目の前のドアを開け、Bを押しながらLEFTまたはRIGHTで横移動します。ピン配置はXIAOのゲームとは異なります。UPはGPIO 32、DOWNは33、LEFTは25、RIGHTは15、Aは22、Bは21、スクリーンはESP32のVSPIバス(SCK 18、MOSI 23、MISO 19、CS 5、D/C 2、RST 4)です。

仕組み。 Doomはレイキャスターであり、Wolfenstein 3D(1992)の技法です。画面の各列について、プレイヤーから20 x 20のグリッドマップへ光線を飛ばし、最初の壁で止めます。その距離が壁スライスの描画高さを決めます。クラシックなESP32にはフルフレームを収める余裕がないため、スケッチは200ピクセルのバッファに1列ずつ構築します。床、天井、壁、敵、武器、エフェクトはすでに合成済みで、それを1回のバーストで送信します:

ロボットはまっすぐ向你かって歩き、毎秒5の体力を引っかきます。スライムは距離を保ち、7のダメージを与える酸を吐きます。射撃はクロスヘアの下の最も近い敵に当たりますが、より近い壁がない場合に限ります。敵をすべて倒すと次のウェーブが2体増え、少し速く、少し強くなります。

Skythread: 生成された世界の上を飛ぶ3D飛行

Doomは屋内の3Dです。Skythreadは屋外の3Dです。デルタ翼のグライダーで広大な田園地帯の上を低空飛行し、川の谷に沿って進み、山を越え、湖の上を飛びます。地平線に向かって霧がかかり、空は昼からゴールデンアワー、そして夜へと移り変わります。前方の空中にはリングが浮かび、時計は刻々と進みます。最初は45秒で、リングをくぐるたびに数秒が追加されます。連続でリングをくぐるとコンボが上がり、最大5倍のポイントになります。リングの中央をくぐるとPERFECTです。リングを逃すとコンボはリセットされ、地面に触れると跳ね返されて速度が落ち、3秒を失います。他のゲームと同様、最初は自動操縦のデモから始まります。

携帯機について。 Skythreadは、他の4本のD-padレイアウトではなく、私たちのMetal Gear SolidとCastlevaniaの移植版を動かす携帯機向けに書かれました。Seeed Studio XIAO ESP32-S3 Senseに同じILI9341スクリーン、2軸アナログスティック、専用ピンに2つのボタン、そして1本のピンにさらに6つのボタンを備えています。Velxioでは、この例はその携帯機と同じレイアウトで開きます。スティックが左、スクリーンが中央、ボタンが右とスクリーンの下です。

遊び方。 スティックで操縦します。キャンバス上でクリックして矢印キーを使うか、スティックの矢印の上でマウスを押し続けます。下に引くと上昇、前に倒すと降下、左右でバンクして旋回します。FIRE（Z）は青いバーを消費するブーストで、ゲームの開始にも使います。BRAKE（X）は急旋回のために減速します。START（Enter）で開始と一時停止、CROSS（C）でもゲームを開始、SELECT（Q）でデモに戻り、CIRCLE（T）で時間帯を変更、TRIANGLE（W）で新しい世界を生成、L1（F）でフレームレートを表示します。

1本のピンに6つのボタン。 XIAOには11本のピンがあり、スクリーン、スティック、8つのボタンには16本必要です。6つのボタンのための工夫が抵抗ラダーです。10 kΩの抵抗がD2を3.3 Vにプルアップし、各ボタンは異なる抵抗を介してD2をグランドに接続するため、それぞれが異なる分圧回路を形成します。ピンは3.3 V × R / (R + 10 kΩ)を読み取ります。

スケッチはanalogReadMilliVolts()でD2を読み取り、電圧が最も近いボタンを選びます。しきい値は隣同士の中間（300、824、1350、1960、2496、2960 mV）です。Velxioはラダーを実際の回路として解きます。最後の列は、キャンバス上で各ボタンを押したときにスケッチがシリアルモニタに出力した値です。ラダーは一度に1つのボタンしか読めません。2つ同時に押すと、より小さな抵抗を持つ1つのボタンのように見えるからです。だからこそゲームは、飛行中に押し続けるFIREとBRAKEを専用ピンに置いています。また、一度ラダーが離されたのを確認するまでラダーを無視するので、D2が未接続のままでも幻のボタンが押されることはありません。

仕組み。 世界はボードの起動時に生成されます。ダイヤモンドスクエアノイズで作られた512 x 512の地形マップで、各セルは2バイト、高さに1バイト、パレットの色に1バイトを使います。遠距離用の半分サイズのコピーと2つのフレームバッファを含めて約940 KBになり、SkythreadがSenseとそのPSRAMを必要とする理由です。Velxioでは世界の構築にシミュレート時間で3秒かかり、最初のフレームが画面に届くのは電源投入から3.4秒後です。

描画には1990年代初頭のボクセル飛行ゲームのコラムレイキャスティングを使います。スクリーンの各列について、スケッチはカメラからマップ上へ、手前から奥へとレイを進め、最大160ステップ、340セル先まで進みます。110セルを超えると半分サイズのマップを読むようになります。各ステップでその地点の地形の高さをスクリーンの行に変換します。その行がその列でこれまで描いたどの行よりも高ければ、そのセルの色で隙間を埋め、新しい上端を記録します。

この列ごとに記録された上端はyバッファと呼ばれます。手前の地面が常に最初に描かれるので、奥の地面はその上にしか現れず、同じピクセルが二度描かれることはありません。霧は20のパレットで、それぞれが空の色に向かって少しずつ混ざり、距離の帯ごとに1つです。バンクはシアー（せん断）で表現します。各列の地平線がスクリーン中央からの距離に比例して上下し、ロールのように見えます。リング、グライダーの影、太陽はそれぞれの距離で同じyバッファと照合されるので、リングの前の山がリングを隠します。

フレームは列ごとに保存され、すでにILI9341が期待するバイト順になっています。パネル自身の縦向きアドレッシングでは、風景画像の1列がパネルの1行になるため、フレーム全体が1回のバーストで送り出されます。2つのフレームバッファを使い、チップの2つのコアが同時に働きます。コア0のタスクが40 MHzのSPIで1フレームをスクリーンに送る間に、コア1が次のフレームを描画します。

スケッチは自身の速度も監視します。フレームの描画に平均22 ms以上かかると、320本ではなく160本のレイをキャストし、各列を2ピクセル幅で描きます。7 msを下回ると全幅に戻ります。45 msを超えると、コメントでブラウザシミュレータのような遅いホスト用とされているケースですが、2つのコアのオーバーラップをやめ、各フレームの送出が完了するのを待ってから次を描きます。これによりシミュレートされたパネルは常に完全なフレームを受け取ります。Velxioではずっとこのモードで動作し、160列で、各フレームをシミュレート時間で33〜50 msかけて描画しました。

フレームレート

すべてのゲームをサーバー上のヘッドレスChromeブラウザでvelxio.dev上で計測し、それぞれ約1分間プレイしました。

ゲームごとに2つの数値があります。1つ目はゲーム自体がシリアルモニタに報告する値で、チップ自身のmillis()によるものです。シミュレートされたボードのフレームレートです。2つ目はブラウザが実時間1秒あたりに実際に表示したフレーム数です。シミュレーションを動かすコンピュータがシミュレートされたチップをフルスピードで維持できない場合、これらは異なります。その場合、シミュレート時間は壁時計より少し遅く進みます。あなた自身の数値はあなたのコンピュータによって変わります。

2DのXIAOゲーム4本はDoomのほぼ2倍のフレームレートで動作します。その一部は処理量によるものです。レイキャスターは320本のレイをキャストし、床と天井をピクセル単位で計算します。一部は転送によるものです。320回の小さな転送ではなく、それぞれが独自のアドレスウィンドウを持つ1回のバーストで済みます。3D風景を描く唯一のゲームであるSkythreadは、320本ではなく160本のレイをキャストすることで約20フレーム毎秒を維持しています。これはフレームの描画に22 ms以上かかるたびに自身のコードが行うトレードオフです。

自分好みに改造しよう

各ゲームは1つのスケッチで、コードはブロックごとに整理されています。エンジン、アート、ゲーム状態、更新処理、描画です。1分でできる変更をいくつか挙げます。

• Sky Duel: fly() の巡航速度（125）や失速速度（50）を変えて、飛行機の挙動の変化を体感してみてください。
• XIAO Quest: マップは MAP_V、MAP_F、MAP_C の文字列です。モンスターの数値は FOES テーブルにあります。
• Gear Hop: ジャンプの強さは movePlayer() の -335、重力は 950 です。月面気分も試せます。
• Circuit Defense: TW_NAME、TW_COST、updateTowers() に4つ目のパーツを追加してみてください。
• Doom: MAP_SRC は20桁の数字からなる20個の文字列です。各桁が壁のテクスチャで、9はドアです。
• Skythread: スケッチ冒頭の WORLD_SEED が起動時のワールドを決めます。PITCH_PULL_TO_CLIMB を0にすると、スティックを前に倒すと上昇するようになります。

編集後にRunを押すと、Velxioが変更されたスケッチをコンパイルするので、数値を変えて数秒後に結果を確認できます。気に入った動きになったら、同じスケッチがILI9341と上記のように配線した6つのボタンを備えた実機のXIAO ESP32-S3で動きます。Skythreadは、そのセクションで紹介したスティックとボタンを備えたXIAO ESP32-S3 Senseで動きます。

サンプルギャラリーを開く