game-studio について
game-studio はブラウザーゲームの計画と開発を支援する統括スキルです。2D では Phaser を既定とし、3D の方針も用意されています。依頼を分類して専門スキルへ振り分け、設計、UI、アセット、プレイテストの整合性を保ちます。
主な機能
- 012D ブラウザーゲームでは Phaser を既定に設定
- 02Three.js と React Three Fiber の作業を振り分け
- 03設計、UI、アセット、QA の各スキルを連携
- 04ゲームループ、技術スタック、アセット手順を策定
活用シーン
- 01ブラウザーゲームの技術スタックを選定
- 02UI とアセットを含む Phaser ゲームを計画
- 03React 上の 3D ゲーム作業を振り分け
- 04ブラウザーゲームの開発とプレイテストを調整
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/game-studioを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
詳細
ゲームスタジオ
概要
ブラウザーゲーム開発の入り口として、このスキルを使用してください。ユーザーが 3D、Three.js、React Three Fiber、シェーダーを多用するレンダリング、または WebGL を主軸とする別の方針を明示的に求めない限り、2D の Phaser を標準とします。
このプラグインは、意図的に対象範囲を非対称にしています。
- v1 で最も強力な実行経路は 2D です。
- 3D には、意見の明確なデフォルトのエコシステムが 1 つあります。通常の TypeScript または Vite アプリには vanilla Three.js、React 上で動作する 3D アプリには React Three Fiber を使用し、出荷用アセットのデフォルト形式には GLB または glTF 2.0 を使用します。
- 共通のアーキテクチャ、UI、プレイテストの実践方法は、どちらにも適用できます。
このスキルを使用する場面
- ユーザーがまだ技術スタックを選んでいる段階の場合
- 実行環境、UI、アセットパイプライン、QA など、依頼が複数の領域にまたがる場合
- ユーザーが実装方針を指定せずに「ゲームを作るのを手伝って」と言う場合
このスキルにとどまらない場面
- 実行環境が明らかに通常の Three.js の場合
- 実行環境が明らかに React Three Fiber の場合
- タスクが明らかに出荷用アセットに関するものの場合
- タスクが明らかにフロントエンドのみ、または QA のみの場合
意図が明確になったら、最も具体的な専門スキルに振り分け、そこから作業を続けてください。
振り分けルール
- 設計やコーディングを始める前に、依頼を分類します。
2D default：Phaser、スプライト、タイルマップ、トップダウン、横スクロール、グリッド戦術ゲーム、アクションプラットフォーマー。3D + plain TS/Vite：命令型のシーン制御、エンジンのようなループ、React 以外のアプリ、Three.js を直接扱う作業。3D + React：React 上で動作するプロダクト画面、宣言的なシーン構成、共有 React 状態、UI が中心の 3D アプリ。3D asset pipeline：GLB、glTF、テクスチャのパッケージ化、圧縮、LOD、実行時のアセットサイズ。Alternative engine：Babylon.js または PlayCanvas に関する依頼。通常は比較やエコシステムとの適合性に関する質問です。Shared：コアループの設計、フロントエンドの方針、セーブ／デバッグ／パフォーマンスの境界、ブラウザー QA。
- 分類したら、すぐに専門スキルへ振り分けます。
- 共通アーキテクチャとエンジンの選定：
../web-game-foundations/SKILL.md - 2D の詳細な実装：
../phaser-2d-game/SKILL.md - vanilla Three.js の実装：
../three-webgl-game/SKILL.md - React 上で動作する 3D の実装：
../react-three-fiber-game/SKILL.md - 3D アセットの出荷と最適化：
../web-3d-asset-pipeline/SKILL.md - HUD とメニューの方針：
../game-ui-frontend/SKILL.md - 2D スプライトの生成と正規化：
../sprite-pipeline/SKILL.md - ブラウザー QA とビジュアルレビュー：
../game-playtest/SKILL.md
- 共通アーキテクチャとエンジンの選定：
- 振り分けた各スキル間で、一貫した計画を維持します。エンジン、UI、アセット、QA の判断に食い違いが生じないようにしてください。
デフォルトのワークフロー
- ゲームの世界観と、プレイヤーが実行できるアクションを決めます。
- コアループ、失敗状態、進行要素、想定するプレイセッションの長さを定義します。
- 実装方針を選びます。
- 2D のブラウザーゲームでは、Phaser を標準とします。
- プロジェクトが明確に 3D であり、通常の TypeScript または Vite アプリでレンダーループを直接制御したい場合は、vanilla Three.js を選びます。
- プロジェクトがすでに React を使用している場合、または共有 React 状態を使った宣言的なシーン構成を求める場合は、React Three Fiber を選びます。
- 独自のレンダラーやシェーダーを主軸とする画面をユーザーが明示的に求める場合に限り、raw WebGL を選びます。
- UI の構成を早い段階で定義します。プレイフィールドがキャンバスや WebGL 上にある場合でも、ブラウザーゲームでは通常、DOM の HUD とメニューレイヤーが必要です。
- 3D のスタータースキャフォールドでは、プレイフィールドを維持し、二次パネルを折りたたんだ、装飾を抑えた HUD を標準とします。
- アセットのワークフローを決めます。
- 2D キャラクターとエフェクトには、
sprite-pipelineを使用します。 - 3D モデル、テクスチャ、出荷形式には、
web-3d-asset-pipelineを使用します。
- 2D キャラクターとエフェクトには、
- 作業を本番環境向けと判断する前に、プレイテストのサイクルを実施して仕上げます。
出力に関する期待事項
- 計画の依頼には、スタックの選択、ゲームプレイのループ、UI の表示領域、アセットのワークフロー、テスト方法を含む、ゲームに特化した計画を返します。
- 実装の依頼では、ファイル構成とコードの境界から、選択したスタックが明確に分かるようにします。
- 複合的な依頼では、ユーザーが別のものを求めない限り、プラグインのデフォルトである 2D Phaser を優先します。
- Babylon.js または PlayCanvas について尋ねられた場合は、率直に比較します。ただし、ユーザーが別のエンジンを明示的に選択しない限り、コード生成のデフォルトでは Three.js と R3F を優先します。
参考資料
- エンジンの選択：
../../references/engine-selection.md - Three.js スタック：
../../references/threejs-stack.md - React Three Fiber スタック：
../../references/react-three-fiber-stack.md - 3D アセットパイプライン：
../../references/web-3d-asset-pipeline.md - Vanilla Three.js スターター：
../../references/threejs-vanilla-starter.md - React Three Fiber スターター：
../../references/react-three-fiber-starter.md - フロントエンドのプロンプトパターン：
../../references/frontend-prompts.md - プレイテストのチェックリスト：
../../references/playtest-checklist.md
例
- 「ブラウザー向けのタクティクスゲームのプロトタイプ作成を手伝ってください。」
- 「HUD とメニューを備えた、Phaser ベースのアクションゲームのゲームプレイループが必要です。」
- 「WebGL ライティングとブラウザーで安全に使える UI を備えた、Three.js の探索デモを作りたいです。」
- 「React Three Fiber を使った、React ベースの 3D コンフィギュレーターを作りたいです。」
- 「GLB アセットをウェブ向けに最適化し、ファイルサイズを抑えてください。」
- 「一貫性のある 2D スプライトアニメーションのためのアセットワークフローを設定してください。」
コメント
Markdown 対応