game-engine

ゲームエンジンスキル

HTML5 Canvas、WebGL、JavaScript を使用して、Web ベースのゲームおよびゲームエンジンを構築します。このスキルには、スターターテンプレート、リファレンスドキュメント、および Phaser、Three.js、Babylon.js、A-Frame などのフレームワークを用いた 2D および 3D ゲーム開発のためのステップバイステップのワークフローが含まれています。

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

• Web 技術を使用してゲームエンジンまたはゲームをゼロから構築する場合
• ゲームループ、物理演算、衝突判定、またはレンダリングを実装する場合
• ゲームグラフィックスに HTML5 Canvas、WebGL、または SVG を使用する場合
• ゲームの操作（キーボード、マウス、タッチ、ゲームパッド）を追加する場合
• 2D プラットフォーマー、ブロック崩し風ゲーム、迷路ゲーム、または 3D 体験を作成する場合
• タイルマップ、スプライト、またはアニメーションを扱う場合
• Web ゲームにオーディオを追加する場合
• WebRTC または WebSocket でマルチプレイヤー機能を実装する場合
• ゲームのパフォーマンスを最適化する場合
• Web ゲームを公開および配布する場合

前提条件

• HTML、CSS、JavaScript の基本的な知識
• Canvas/WebGL をサポートする最新の Web ブラウザ
• テキストエディタまたは IDE
• 任意: ビルドツールとローカル開発サーバー用の Node.js

中核となる概念

以下の概念は、すべての Web ベースのゲームエンジンの基盤を形成します。

ゲームループ

すべてのゲームエンジンは、ゲームループを中心に動作します -- 次のサイクルの連続です:

1. 入力の処理 - キーボード、マウス、タッチ、またはゲームパッドの入力を読み取ります
2. 状態の更新 - ゲームオブジェクトの位置、物理演算、AI、およびロジックを更新します
3. レンダリング - 現在のゲーム状態を画面に描画します

スムーズでブラウザに最適化されたレンダリングには requestAnimationFrame を使用します。

レンダリング

• Canvas 2D - 2D ゲーム、スプライトベースのレンダリング、タイルマップに最適です
• WebGL - ハードウェアアクセラレーションによる 3D および高度な 2D レンダリング
• SVG - ベクターベースのグラフィックスで、UI 要素に適しています
• CSS - DOM ベースのゲーム要素やトランジションに役立ちます

物理演算と衝突判定

• 2D 衝突判定 - AABB、円、および SAT ベースの衝突
• 3D 衝突判定 - バウンディングボックス、バウンディングスフィア、およびレイキャスティング
• 速度と加速度 - 移動のための基本的なニュートン物理学
• 重力 - プラットフォーマー向けの一定の下向き加速度

操作

• キーボード - 矢印キー、WASD、およびカスタムキーバインド
• マウス - クリック、移動、および FPS スタイルの操作のためのポインターロック
• タッチ - モバイルのタッチイベントと仮想ジョイスティック
• ゲームパッド - コントローラー対応のための Gamepad API

オーディオ

• Web Audio API - プログラムによるサウンド生成と空間オーディオ
• HTML5 Audio - 音楽や効果音のためのシンプルなオーディオ再生

ステップバイステップのワークフロー

基本的な 2D ゲームの作成

1. <canvas> 要素を含む HTML ファイルをセットアップします
2. 2D レンダリングコンテキストを取得します
3. requestAnimationFrame を使用してゲームループを実装します
4. 位置、速度、サイズのプロパティを持つゲームオブジェクトを作成します
5. プレイヤー操作のためのキーボード/マウス入力を処理します
6. ゲームオブジェクト間の衝突判定を実装します
7. スコア、残機、および勝敗条件を追加します
8. 効果音と音楽を追加します

3D ゲームの構築

1. フレームワークを選択します（Three.js、Babylon.js、A-Frame、または PlayCanvas）
2. シーン、カメラ、およびレンダラーをセットアップします
3. 3D モデルとテクスチャを読み込むか作成します
4. ライティングとシェーダーを実装します
5. 物理演算と衝突判定を追加します
6. プレイヤー操作とカメラの動きを実装します
7. オーディオと視覚効果を追加します

ゲームの公開

1. アセットを最適化します（画像の圧縮、コードの圧縮）
2. ブラウザとデバイス間でテストします
3. 配布プラットフォームを選択します（Web、アプリストア、ゲームポータル）
4. 必要に応じてマネタイズを実装します
5. ゲームコミュニティやソーシャルメディアを通じて宣伝します

ゲームテンプレート

スターターテンプレートは assets/ フォルダに用意されています。各テンプレートは完全で動作するサンプルを提供しており、新しいプロジェクトの出発点として利用できます。

テンプレート	説明
paddle-game-template.md	ピュア JavaScript による 2D ブロック崩しスタイルのゲーム
2d-maze-game.md	デバイスの傾きで操作する迷路ゲーム
2d-platform-game.md	Phaser フレームワークを使用したプラットフォーマーゲーム
gameBase-template-repo.md	ゲームベーステンプレートのリポジトリ構造
simple-2d-engine.md	衝突判定を備えたシンプルな 2D プラットフォーマーエンジン

リファレンスドキュメント

詳細なリファレンス資料は references/ フォルダに用意されています。特定のトピックを深く掘り下げたい場合は、これらのファイルを参照してください。

リファレンス	扱うトピック
basics.md	ゲーム開発の入門と構造
web-apis.md	Canvas、WebGL、Web Audio、Gamepad、その他の Web API
techniques.md	衝突判定、タイルマップ、非同期スクリプト、オーディオ
3d-web-games.md	3D の理論、フレームワーク、シェーダー、WebXR
game-control-mechanisms.md	タッチ、キーボード、マウス、ゲームパッドの操作
game-publishing.md	配信、プロモーション、マネタイズ
algorithms.md	レイキャスティング、衝突、物理、ベクトル演算
terminology.md	ゲーム開発の用語集
game-engine-core-principles.md	ゲームエンジンの核となる設計原則

トラブルシューティング

問題	解決策
Canvas が真っ白になる	コンテキストを取得した後に、ゲームループ内で描画メソッドを呼び出しているか確認してください
ゲームの速度が一定にならない	更新の計算では固定値ではなくデルタタイムを使用してください
衝突判定が不安定になる	連続衝突判定を使用するか、高速で移動するオブジェクトのタイムステップを小さくしてください
オーディオが再生されない	ブラウザではオーディオの再生前にユーザー操作が必要です。クリックハンドラーから再生をトリガーしてください
パフォーマンスが悪い	ブラウザの開発ツールでプロファイリングし、描画呼び出しを減らし、オブジェクトプーリングを使用し、アセットのサイズを最適化してください
タッチ操作に反応しない	タッチのデフォルト動作を防止し、タッチイベントをマウスイベントとは別に処理してください
WebGL コンテキストが失われる	webglcontextlost イベントを処理し、webglcontextrestored で状態を復元してください