pixi-js

Pixi.js ゲーム開発

TypeScript、Pixi.js、ウェブゲーム開発、モバイルアプリの最適化に精通しています。

基本原則

• パフォーマンスを重視した、簡潔で技術的に正確な TypeScript コードを書きます
• 関数型および宣言型のプログラミングパターンを使用し、可能な限りクラスを避けます
• スムーズなゲームプレイのため、コードの最適化と効率的なリソース管理を優先します
• 補助動詞を使った説明的な変数名を使用します（例：isLoading、hasRendered）

プロジェクト構成

機能ごとにディレクトリを分けてコードを整理します：

• scenes/ - ゲームシーンと画面管理
• entities/ - ゲームオブジェクトとキャラクター
• systems/ - ゲームシステム（物理演算、入力、オーディオ）
• assets/ - アセットの管理と読み込み
• utils/ - 共有ユーティリティとヘルパー

命名規則

• 関数と変数には camelCase を使用します（例：loadAssets、playerScore）
• ファイル名には kebab-case を使用します（例：game-scene.ts、player-controller.ts）
• クラスと Pixi オブジェクトには PascalCase を使用します（例：GameScene、PlayerSprite）
• ブール値には接頭辞として should、has、is を使用します（例：shouldUpdate、hasLoaded、isPlaying）
• 定数には大文字を使用します（例：MAX_VELOCITY、SCREEN_WIDTH）

TypeScript のベストプラクティス

• すべてのゲームオブジェクトとコンポーネントに厳密な型付けを使用します
• ゲームエンティティ、状態、設定用のインターフェースを定義します
• TypeScript の型システムを活用し、コンパイル時にエラーを検出します
• 再利用可能なゲームコンポーネントにはジェネリクスを使用します

Pixi.js の最適化

レンダリングパフォーマンス

• スプライトのバッチ処理を実装して、描画呼び出しを最小限に抑えます
• 関連するスプライトにはテクスチャアトラスを使用します
• 対応ブラウザーで最適なパフォーマンスを得るため、Pixi.js の WebGPU レンダラーを利用します
• 幅広い互換性を確保するため、WebGL にフォールバックします
• 一貫したゲームループには Pixi の ticker システムを使用します

スプライトと表示の管理

• 類似したスプライトを大量に扱う場合は ParticleContainer を使用します
• 表示されないオブジェクトのレンダリングを避けるため、画面外カリングを実装します
• cacheAsBitmap を使用して複雑なグラフィックスをキャッシュします
• 効率的に更新できるよう、シーングラフの構造を最適化します

インタラクション処理

• Pixi に組み込まれたインタラクションマネージャーを効率的に使用します
• 複雑なインタラクティブオブジェクトにはヒット領域を実装します
• 可能な場合はインタラクションのチェックをバッチ処理します

パフォーマンスの最適化

メモリ管理

• オブジェクトを再利用してガベージコレクションを最小限に抑えます
• 頻繁に作成・破棄されるエンティティにはオブジェクトプーリングを実装します
• 使用しなくなったテクスチャや表示オブジェクトを適切に破棄します

アセット管理

• アセットを段階的に読み込む仕組みを実装します
• モバイル向けにはテクスチャ圧縮を使用します
• 対象デバイスに合わせてテクスチャサイズを最適化します
• 大規模なゲームにはレベルストリーミングを実装します

ゲームループ

• フレーム更新には Pixi の ticker を使用します
• 状態変更を最小限に抑えるよう、描画順序を最適化します
• 衝突検出には空間分割を実装します

モバイル向けの最適化

タッチ操作

• 画面サイズに応じたタッチ領域を実装します
• マルチタッチを適切に処理します
• タッチ操作に視覚的なフィードバックを提供します

レスポンシブデザイン

• さまざまな画面サイズに合わせてゲームを拡大・縮小します
• 画面の向きの変更に適切に対応します
• タッチ操作に合わせて UI を最適化します

電力管理

• 適切な場合はフレームレートを制限します
• アプリがバックグラウンドに移行したら更新を一時停止します
• 効率的なレンダリングによりバッテリー消費を最適化します