実践例

3 つのプロジェクトに実装説明、画像、ダウンロード、検証記録があります。ソースは開発継続用、dist は実行・公開用です。作者の認証情報や Post の紐付けは含まれないため、最初に自分のゲームを作成します。

パス、パッチ、座標、エディター版は各例専用です。検証記録は 2026-10-08 時点であり、モバイルのビューポート確認は実機検証を意味しません。

H5 実装例 · Star Sprint

体力 3 で開始し、2 体の巡回ロボットを避けながら 45 秒以内に星を 5 個集めます。WASD / 矢印で移動、P でポーズ、R でリプレイ。モバイル表示には方向ボタンがあります。ソースには HTML/JS 版と Vite 版が入っています。

ダウンロードして起動

新しい native-h5 フォルダーに展開し、直下に package.json がある状態で移動します。次のどちらかを選びます。

python3 -m http.server 8000 --bind 127.0.0.1 --directory plain/dist

npm ci
npm run dev

直接実行版は http://127.0.0.1:8000/、Vite は http://127.0.0.1:5173/。記録上の場所はデスクトップの Move to Combos/native-h5 ですが、自分のパスを使ってください。

ローカルの Star Sprint：開始、移動、星の収集、得点を確認。

検証・ビルド・公開

星を取って得点が増え、5 個で勝利することを確認します。接触ダメージ、時間切れ、ポーズ、リプレイも確認。Vite は dev を止めて以下を実行します。

npm run build
npm run preview

完成品は http://127.0.0.1:4173/、直接実行版は plain/dist です。公開手順に従い、自分の combos.json を保持します。

記録された Vite 版は pc,mobile、revision 1。Star Sprint をプレイ 、Canvas コード 07752。ローカルと公開版でキーボードによる完全クリアを確認。モバイル操作はビューポートのみで、実機は未検証です。

Combos 公開ページで最初の星を集める Star Sprint。

ソースとダウンロード

index.html / src/style.css は Canvas、HUD、ボタン、配置、タッチ操作を担当。src/main.js は入力、移動、収集、衝突、時間、勝敗、描画を処理します。package.json / vite.config.js はビルドと相対 URL、plain/dist は同じ内容のビルド不要版です。

以下は得点処理の説明で、Combos 接続に必須のコードではありません。

if (!star.collected && Math.hypot(
  star.x - state.player.x, star.y - state.player.y
) < 35) {
  star.collected = true;
  state.score++;
}
if (state.health <= 0 || state.elapsed >= 45) show('lost');
else if (state.score === 5) show('won');

• 両バージョンのソースとカバー
• HTML/JS 完成品
• Vite 完成品

完成品 ZIP はどちらも展開先の直下に index.html があります。

Unity 実装例 · BoatAttack

Unity 公式 BoatAttack のコミット 91886a3ef1ac963aa10578fcaf1d59e9b6961ab3 を使います。元は 6000.2.0b8、本例は Unity 6.3 LTS 6000.3.25f1 / Apple Silicon ARM64 に対応。船、操縦者、Island、水面、物理、AI、C# のゲーム処理を保ちます。

取得と適用

Git LFS を導入し、新しいフォルダーに clone して大型アセットを取得します。git apply の 2 コマンドの前に、適応パッケージをルートへ展開してください。パッチは一度だけ適用します。

git clone https://github.com/Unity-Technologies/BoatAttack.git BoatAttack
cd BoatAttack
git checkout 91886a3ef1ac963aa10578fcaf1d59e9b6961ab3
git lfs pull
git lfs fsck
git apply --check tracked-project-changes.patch
git apply tracked-project-changes.patch

適用済みプロジェクトには再適用しません。パッケージには互換性・バージョン変更、文書、ライセンスがあり、元の大型アセット、Library、dist、Combos プラグインは含みません。自分のゲームには一般の Unity 手順を使います。

出力してレース開始

main_menu.unity を開き、Play でメニューとシングルプレイ設定を確認して停止。シーンは main_menu.unity (0)、level_Island.unity (1)。Default、Gzip + fallback、Player Build 時の Addressables を選び、dist へ出力します。

Unity エディター内の元の BoatAttack メニュー。

シングルプレイ設定：Island を選択後、船を設定。

記録された Build は 18:21:57〜18:26:03、246 秒。27 ファイル、Addressables 5 bundle、合計 127.36 MiB、最大 94.58 MiB、ZIP 124.88 MiB。容量制限内で、ZIP 直下に index.html があります。

python3 -m http.server 8001 --bind 127.0.0.1 --directory dist

http://127.0.0.1:8001/ で RACE → SINGLEPLAYER → ISLAND（1 周）→ NEXT → 船の設定 → RACE と進みます。演出・カウントダウン後、画面をクリックしてフォーカス。W / ↑ / スペースで加速、A/D で旋回、R でリセット、F でポーズ・再開します。

公開と結果

実際のレース画像を cover.png にし、--platform pc --screen-orientation landscape で自分のゲームを作成します。自分の紐付けがある場合のみ update。大容量では --timeout 10m も使えます。

記録では同じ Post を revision 2 に更新し、公開済み、submission_is_current=true。BoatAttack をプレイ 、Canvas コード 08759。ローカルサーバー停止後、独立した 2 ブラウザセッションで公開ページと共有 URL から入り、加速、旋回、ポーズ・再開、片方で R リセットを確認。音声はミュート。主要ファイルと 5 bundle は公開環境から読み込まれ、ゲーム実行エラーは観測されませんでした。

Combos 上でレースを実行するネイティブ Default ビルド。

確認範囲は PC 横画面のシングルプレイ読込と運転です。完走・勝利、モバイルタッチ、実機は未検証。loader / エンジンの警告は残り、外側ページの未ログイン profile 401 はゲーム読込と分けて記録しています。

変更内容

元のコード・アセットと既存の WebGL 水面分岐を保持。Default ページは Unity が生成し、loader は改変していません。シーン、圧縮、Addressables はネイティブ UI で設定。エディター / Input System / URP の対応とシリアライズ変更を含みます。新しい uGUI 向けに UIPanelFade.shader へ _MainTex を追加：

[PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}

以前の専用 Editor ビルドスクリプト、Combos テンプレート、com.unity.pipeline は削除しました。固定コミットに対する 31 の追跡ファイルのパッチで、README-migration.md、WEBGL-MIGRATION.md、LOCAL_SETUP.md、ライセンスを含みます。全 Unity ゲーム共通の移行パッチではありません。

BoatAttack 適応パッケージ。

Roblox 実装例 · Ball Game

Ball game open source  の ball game.rbxl が元です。5 秒待ち、ピンクの球を 3 枚のずれた壁の間に押して進め、WinPiece に触れると金色になり Winner を表示するルールを保ちます。

原作の確認

Roblox Studio でプレイ後に停止し、元の .rbxl を変えずにスクリプト、アバター、シーン、プロパティを調べます。

原作の人物、草地、壁、灰色の土台、ゴール。

GetWinner は球と WinPiece の接触を監視。

2 つのスクリプトは球生成と勝利判定を担当し、描画、人物、入力、カメラ、アニメーション、物理、サーバー環境は Roblox が提供します。球は 5×5×5 studs、草地は 18×1×74、壁の中心は (22,17.5,34)、(32,17.5,15)、(21.5,17.5,-4)。本例専用の値です。

Ball.Touched:Connect(function(partTouching)
    if partTouching.Name == "WinPiece" then
        Ball.BrickColor = BrickColor.new("Gold")
        warn("Winner!")
        game.Workspace.Map1.PlayerWon.Value = true
    end
end)

単純な Part シーンなら、Play 停止中に以下を Studio Command Bar で実行し Output に属性を表示できます。読み取り専用で、複雑なメッシュ、テクスチャ、リグは別途扱います。H5 を出力するコマンドではありません。

for _, part in ipairs(workspace:GetDescendants()) do
    if part:IsA("BasePart") then
        print(part:GetFullName(), part.Position, part.Size,
            part.Material, part.Transparency)
    end
end

H5 との対応

元は実行時にアカウントの Avatar を読み込みます。本例は公式メッシュを直接取り込まず、ローカル形状とテクスチャで外観を再現しました。Part は実際の配置を再現しています。他のゲームでは権限のあるモデル・テクスチャを再利用できます。

再現した人物の正面：髪、笑顔、青黒の服、濃いズボン、白い靴底。

側面：髪、身体の分割、靴の形状。

換算は 1 stud = 0.3 m、原点 (27,15,15)、球半径 0.75 m。座標変換、質量、摩擦、転がりの減衰、速度上限は自分のゲームに合わせて調整します。

3 つの障害物、境界、ゴールを元の配置に再構築。

ballBody.addEventListener('collide', event => {
  if (event.body !== winPiece.body || state.mode !== 'playing' || state.won) return;
  state.won = true;
  state.phase = 'finished';
  pink.color.set('#fff000');
  pink.emissive.set('#fff000');
  glow.material.color.set('#fff54b');
  document.querySelector('#status').textContent = 'Winner!';
  show('won');
});

ブラウザ版にはタッチ移動・ジャンプ、ポーズ・再開、リプレイ、全画面、人物表示、WebGL 非対応表示を追加。Roblox アカウント、Robux、マルチプレイ同期、クラウド保存は移行しておらず、完全互換ランタイムではありません。

起動と検証

新しい ball-game-h5 に展開し、ルートに package.json を置きます。level.js、avatar.js、environment.js、camera.js、main.js、SOURCE-MAPPING.md、reference/ の元 Lua を含みます。

npm ci
npm run dev

http://127.0.0.1:5174/ を開きます。記録ではデスクトップの Move to Combos/ball-game-h5 を使用。自分のパスに置き換えます。開始後 5 秒で球が出現。WASD / 矢印で移動、スペースでジャンプ、ドラッグで回転、ホイールでズーム、P でポーズ、R でリプレイ、F で全画面。「人物を見る」はゲームを止め、戻ると再開します。

ローカルの三人称視点でピンクの球を物理的に押す。

初期視点で壁を右、左、右と避け、最後のくぼみに入れます。WinPiece への接触で金色になり Winner を表示。記録ではキーボードと物理操作で完全クリアし、着地、ポーズ、リプレイ、カメラ、人物表示を確認しました。

ローカルでクリア後、金色の球と Winner を表示。

ビルドと公開

dev を止め、完成品を http://127.0.0.1:4174/ で確認します。

npm run build
npm run preview

ソースには cover.png があります。自分のゲームを作成し、以後は自分の紐付けで更新。ローカルサーバー停止後も公開 URL を再検証します。記録された人物・シーン更新は revision 2、公開済み、submission_is_current=true。Ball Game H5 、Canvas コード 70261。公開版でキーボードによるクリアを確認。モバイルボタンはビューポートのみで、実機は未検証です。

ローカルサーバー停止後、Combos で動く更新版 Ball Game H5。

• H5 全ソース、Lua 参照、対応表
• 完成品 ZIP、展開先直下に index.html

出典：Combos 開発者向け導入ガイド 。原文の確認日：2026-10-08、CLI v1.14.2。検証結果は原文に記録された実行時のものです。