mcpField
W
web-game-foundations

web-game-foundations

github.com/openai開発7.6k55 回インストール3 週間前に更新
リポジトリ

web-game-foundations について

web-game-foundations はブラウザーゲームの実装前やエンジン選定時に使う設計スキルです。シミュレーション、描画、入力、アセット、UI、セーブデータの境界を定め、方針が固まったら実行環境やアセットの専門スキルへ引き継ぎます。

主な機能

  1. 01シミュレーション状態と描画を分離
  2. 02入力アクションの対応関係を明確化
  3. 03アセットマニフェストと 3D 形式を規定
  4. 04UI、セーブ、デバッグ、性能の境界を設定
  5. 052D と 3D のエンジン選定を支援

活用シーン

  1. 01実装前にブラウザーゲームのモジュールを設計
  2. 02Phaser、Three.js、React Three Fiber を選定
  3. 03アセットとセーブデータの規約を策定
  4. 04複数の専門スキル間で設計を統一

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/openai/plugins --skill web-game-foundations

インストール後、Claude Code で/web-game-foundationsを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yaml

詳細

Web ゲームの基礎

概要

実装を始める前に、譲れないアーキテクチャを確立するには、このスキルを使用してください。シミュレーション、レンダリング、UI、アセットの読み込み、入力処理を混在させると、ブラウザーゲームの品質はすぐに低下します。

基本ルール：シミュレーション状態はレンダラーの外部で管理し、明確な理由がない限りブラウザー UI をキャンバスに押し込まず、出荷する 3D アセットには、場当たり的なモデル形式ではなく GLB または glTF 2.0 を標準として使用します。

このスキルを使用する場面

  • ユーザーがエンジンやレンダラーをまだ決めていない場合
  • タスクが境界、モジュール構成、状態の所有権、アセットの方針に関する場合
  • 複数の専門スキルで共通のアーキテクチャ基盤が必要な場合

このスキルの対象外となる場面

  • 実行環境として Phaser を使うことが明確な場合
  • 実行環境として vanilla Three.js を使うことが明確な場合
  • 実行環境として React Three Fiber を使うことが明確な場合
  • タスクが出荷する 3D アセットのみに関する場合

スタックが明確になったら、実行環境またはアセットの専門スキルに引き継いでください。

アーキテクチャのルール

  1. シミュレーションとレンダリングを分離します。
    • シミュレーションは、エンティティ、ターン、タイマー、衝突、進行状況、保存可能な状態を管理します。
    • レンダラーは、シーンの構成、アニメーションの再生、カメラ、パーティクル、入力の連携処理を管理します。
  2. 入力マッピングを明示します。
    • move、confirm、cancel、ability-1、pause などのアクションを定義します。
    • 物理入力からアクションへのマッピングは一か所にまとめます。
  3. アセット読み込みを主要なシステムとして扱います。
    • 安定したマニフェストキーを使用します。
    • ドメイン別に分類します：キャラクター、環境、UI、音声、FX。
    • 3D コンテンツでは、選択したエンジンのエコシステムで別の形式が上流工程で必須とされていない限り、GLB または glTF 2.0 を標準にします。
  4. 保存、デバッグ、パフォーマンスの境界を早い段階で定義します。
    • レンダラーのオブジェクトではなく、シリアル化可能なシミュレーション状態を保存します。
    • デバッグオーバーレイやパフォーマンス計測を簡単に切り替えられるようにします。
  5. メニューと HUD には、原則として DOM オーバーレイを使用します。
    • キャンバスまたは WebGL でプレイフィールドを処理します。
    • テキストの多い HUD、メニュー、設定、アクセシビリティに配慮が必要なコントロールは DOM で処理します。
    • 3D では、シーンの視認性と操作性を保つため、常時表示する UI の量を抑えます。
  6. 3D 実行環境の規約を早めに確定します。
    • 単位、原点、ピボット、命名規則を統一します。
    • 実行環境への統合を始める前に、コリジョンプロキシ、LOD、ベイク済みライティングデータの作成方法を決めます。

エンジンの選定

  • スプライト、タイルマップ、トップダウンまたは横視点のアクション、ターン制グリッド、従来型のブラウザーアーケード形式の 2D ゲームには、Phaser を標準として使用します。
  • プレーンな TypeScript または Vite でシーン、カメラ、レンダラー、ループを直接制御したい、明示的な 3D シーンには vanilla Three.js を標準として使用します。
  • 3D シーンを React アプリケーション内に配置し、宣言的な構成、アプリ状態の共有、React を中心とした UI 連携が必要な場合は、React Three Fiber を標準として使用します。
  • エンジンの抽象化が妨げになる、シェーダー中心またはレンダラー中心のプロジェクトに限り、raw WebGL を使用します。
  • Babylon.js と PlayCanvas は、コード生成の標準ターゲットではなく、代替エンジンの選択肢として扱います。

標準の判断表については、../../references/engine-selection.md を参照してください。

実装チェックリスト

コアコードを書く前に、以下を定義します。

  • プレイヤーの体験と主要な動詞
  • コアループと敗北またはリセットの状態
  • カメラモデル
  • 入力アクションマップ
  • シミュレーションモジュール
  • レンダラーモジュール
  • アセットマニフェストの構成
  • 3D アセットの形式と最適化ルール
  • HUD とメニューの表示領域
  • 保存データの境界
  • デバッグおよびパフォーマンスの表示領域

アンチパターン

  • ゲームプレイのルールをシーンのコールバックに直接混在させる
  • レンダラーをゲーム状態の信頼できる唯一の情報源として扱う
  • デフォルトで HUD とメニューの UI をすべてキャンバスに配置する
  • アセットのファイル名を、マニフェストキーの代わりに公開 API として扱う
  • 最適化されていない 3D アセットを DCC ツールからブラウザーへそのまま出荷する
  • 明示的な入力境界を設けずに、カメラ制御の状態とメニューまたはモーダルの状態を混在させる
  • ゲームのジャンルが変わるたびにアーキテクチャを作り直す

参考資料

  • エンジンの選択：../../references/engine-selection.md
  • Phaser の構造：../../references/phaser-architecture.md
  • Three.js の構造：../../references/three-webgl-architecture.md
  • Three.js エコシステムのスタック：../../references/threejs-stack.md
  • React Three Fiber のスタック：../../references/react-three-fiber-stack.md
  • 3D アセットの配信：../../references/web-3d-asset-pipeline.md

コメント

Markdown 対応