サンプルギャラリー
コードを読む前に、ブラウザで動作を試せます。起動するまでゲームをロードしません。同時に動かすサンプルは1つで、別のサンプルを選ぶか「終了する」で前のGameを破棄します。
WebGLの描画経路を中心に検証しています。固定したPixi版には代替描画の自動選択があり、WebGL無効時のCharacterのCanvas2D起動も限定的に確認します。全サンプル・全機能の代替描画互換性を保証するものではありません。小さな画面ではサンプル欄までスクロールしてください。広いゲーム領域が必要なら別タブで開けます。Signal Run・Blockfall・Prism Raid・Canvas trailはタッチだけでゲームを操作できます。その他のキャラクター移動にはキーボードが必要です。
SDK integration lab
Flex連動Viewport・DOMフォーム・整数ステップの表示Tween
Stepを連打、Restartで初期化。Pause中も表示Tweenが進みます。TabでDOMとCanvas入力を移動し、Scene/Returnで破棄と再生成を確認できます。
Tile geometry lab
四角形・三角形・六角形の描画、選択、隣接と動的更新
Geometryを切り替え、タイルをクリック／タップして色変更と隣接セルを確認。Pan・Zoom、非表示切り替え、Scene再生成も操作できます。六角形はPointy/Flat対応。
Tween lab
汎用Tween・Easing・Actor/UI・Slider・2つの時計
Start/RestartでEasingを比較。WASDでSpriteのワールド位置とは独立した描画オフセットを確認。Pause game中もFade/Slide UIやHP表示を操作できます。Tween値のドラッグ、Sequence/Parallel、破棄・再生成も試せます。
Character
最小のキャラクター移動
ゲーム領域をクリック／Tabで選択し、WASDで移動。スマートフォンでは外付けキーボードが必要です。
UI / Scenes
DOM UIとSceneの切り替え
WASDで移動。ボタンをクリック／タップ、またはTab・EnterでSceneを切り替えます。タッチだけでもUI操作を試せます。
Beacon Field
Component・イベント・タイマーを組み合わせる
WASDで琥珀色のビーコンを収集。空き領域のクリック／タップで追加。Add beacon・Zoom・Restartはタッチ対応。移動にはキーボードが必要です。
Signal Run
Trigger・Solid・勝敗・再プレイ
Start runから開始。WASD／矢印、空き領域のクリック／タップ、または下部の長押しボタンで移動。30秒以内に6個の信号を収集し、赤を避け、青い壁に沿って進みます。Pause・Restart・Menu・Zoomも利用できます。
Blockfall
整数グリッドの落ち物パズル・seed付き7-bag・ホールド・ゴースト
← →移動、↑ / X・Z回転、↓ソフトドロップ、Spaceハードドロップ、C / Shiftホールド、P / Esc一時停止。スマートフォンは下部ボタンで全操作に対応。
Prism Raid
Triangle機体で3ウェーブを迎撃するシューティング
Start missionで開始。WASD／矢印で移動、Space長押しで連射、Shift／DASHで移動速度2倍。タッチは下部の方向ボタンとFIREを同時に長押し。P／EscまたはPauseで停止。Watch autopilotで入力APIによる自動プレイを観察できます。
Sprite garden
SpriteSheet・アニメーション・共有画像
ゲーム領域にフォーカスしてWASDで移動。ボタンで仲間の再生操作やScene往復ができます。移動にはキーボードが必要です。
Tile trail
Grid・SpriteSheetで地形配置・編集・カメラ追従
ゲームをフォーカスしてWASDで移動。Paint under playerで足元を変更、Leave/ReturnでScene往復。石・木の壁、水Trigger、Toggle wall aheadで生成／破壊、Toggle collisionで衝突を切り替えます。
Canvas trail
Canvas HUD・Flex・Pointer・Action・地形衝突を統合
Startで開始。WASDまたは下部の方向ボタンで移動し、石の壁と衝突。Wallで壁を編集、Pause/P/Escで停止・再開、空白を選択、Menu/StartでSceneを再生成。Tab・Enter・Spaceでも操作できます。
ゲーム領域をクリック／Tabで選択して入力を開始します。終了すると起動ボタンへフォーカスが戻ります。
学習の順番
-
Character：Game・Character・型付きActionの最小構成。
-
UI / Scenes：型付きScene ID、DOM UI、非同期遷移。
-
Beacon Field：独自Component、イベント、タイマー、ポインター座標、生成・削除。
-
Signal Run：Triggerで取得・被弾、Solidで壁沿いの移動、HP・制限時間・勝敗・ポーズ・再プレイ・カメラ追従。
-
Blockfall：整数グリッド、seed付き7-bag、回転・壁蹴り、行消去・得点、ホールド・ゴースト、キーボード・タッチ、ヘッドレス再現テスト。
-
Prism Raid：Triangle、移動と連射、複数の敵、Trigger、無敵時間、3ウェーブ、通常入力による自動プレイヤー。
-
Sprite garden：SpriteSheet、待機／歩行の切り替え、独立再生と共有画像、Scene往復。
-
Tile trail：Grid・SpriteSheet、複数地形レイヤー、WASD・Camera追従、Solid壁・水Trigger、生成／破壊とScene往復。
-
Canvas trail：Canvas HUD・Flex・Pointer、Actionによるキーボード／タッチ移動、SpriteAnimation・地形衝突・Pause・Scene往復。
フォーカスと終了
iframeはページ本体と別の文書です。ゲーム内のキー操作はゲームをフォーカスしている間だけ有効です。Tabでゲームやボタンへ入り、Tabでページへ戻れます。終了ボタンで起動元へフォーカスを戻します。タブを非表示にするとWeb入力が解放されます。
サンプル変更時は明示的にGame.disposeを実行してからiframeを取り除きます。直接開いたサンプルもpagehideで片付けます。履歴の復元で破棄済み文書へ戻った場合は再読み込みします。これは汎用の安全な外部コード実行環境ではなく、このリポジトリの信頼されたサンプルを分離する構成です。
動作範囲
公開APIで構築した既存例を使用しています。検証対象はChromiumのデスクトップ・幅390pxレイアウトと合成タッチ入力です。実機Safariや全GPUでの検証ではありません。起動に失敗した場合の案内と、現在の制約を確認してください。
Tile geometry lab
四角形・三角形・六角形2方向を切り替えて、タップ選択、色変更、隣接強調とCamera操作を試せます。タイルGeometryガイドを参照してください。