mcpField
W
web-games

web-games

github.com/ranbot-ai開発897 回インストール今日更新
リポジトリ

web-games について

Web Browser Game Developmentは、HTML5、WebGL、WebGPUゲームを開発する人向けのスキルガイドです。ブラウザ向けフレームワークやランタイムの選定に加え、性能、アセット読み込み、音声、PWA、DOMとCanvasの連携を扱います。

主な機能

  1. 01ブラウザーゲーム用フレームワークの比較
  2. 02WebGPUとWebGLの選択およびフォールバック指針
  3. 03ブラウザーでの性能と読み込みの実践
  4. 04ゲームアセットの形式と読み込み段階の計画
  5. 05ブラウザー音声とPWA要件への対応
  6. 06DOMとCanvasを組み合わせたゲームシェルの設計

活用シーン

  1. 012Dまたは3Dブラウザーゲームのフレームワーク選定
  2. 02GPU負荷の高いプロジェクトの描画方式の計画
  3. 03通信環境に応じたアセットと読み込みの最適化
  4. 04HTML画面内でのCanvasゲームの組み込みと破棄

インストール

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

$npx skills add https://github.com/ranbot-ai/awesome-skills --skill web-games

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

詳細

Web ブラウザーゲーム開発

フレームワークの選定とブラウザー固有の原則です。スタック選択の詳細については、game-development/engine-selection を参照してください。

1. フレームワークの選定

決定ツリー
What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser 4
│   ├── Fast prototype / jam?      → Kaplay
│   ├── Raw rendering power?       → PixiJS 8
│   └── Tiny / no dependency?      → Raw Canvas / WebGL
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused?         → Three.js
│
├── Hybrid (DOM UI + canvas moments)
│   └── Custom shell + guest viewport
│       (Canvas/Kaplay/Phaser/Pixi inside a region/modal)
│
└── Narrative-first
    └── Ink (inkjs) or Twine export + DOM host
比較
フレームワーク種類最適な用途
Raw Canvas / WebGL2D／低レベル小規模なプロジェクト、完全な制御が必要な場合
Kaplay2D ツールキット迅速なプロトタイプ作成
Phaser 42D エンジンゲーム機能一式が必要な場合
PixiJS 82D レンダラーレンダリング、カスタムシステム
Three.js3D レンダラービジュアライゼーション、軽量な 3D
Babylon.js3D エンジンフル機能のエンジン、XR
ハイブリッドシェル＋ゲスト

メニュー、インベントリ、テキスト、ダッシュボードなどの UI は HTML で構成し、ゲームプレイ時にはキャンバスを使う場合に使用します。

  1. ゲストをコンテナにマウントし、コンテキストを渡します。
  2. ゲスト内でローカルのゲームループを実行します。
  3. 結果（スコア、合否）を返し、必要に応じて RAF、リスナー、GL コンテキストを含むゲストを破棄します。

製品そのものがフルスクリーンゲームでない限り、ゲストにアプリ全体のルーティングを管理させないでください。

2. WebGPU の採用

ブラウザーのサポート状況（2025 年）
ブラウザーサポート状況
Chrome✅ v113 以降
Edge✅ v113 以降
Firefox✅ v131 以降
Safari✅ 18.0 以降
合計世界全体の約 73%
判断基準
  • 新規の GPU 負荷が高いプロジェクト：WebGPU を使用し、WebGL にフォールバックします
  • 幅広いレガシー環境への対応／シンプルな 2D：WebGL または Canvas 2D から始めます
  • 機能検出：navigator.gpu を確認します

3. パフォーマンスの原則

ブラウザーの制約
制約対策
ローカルファイルにアクセスできないアセットのバンドル、CDN
タブの処理が制限される非表示時に一時停止（visibilitychange）
モバイルデータの制限アセットを圧縮
音声の自動再生ユーザー操作を必須にする
最適化の優先順位
  1. アセットの圧縮 - KTX2、Draco、WebP
  2. 遅延読み込み - 必要に応じて読み込む
  3. オブジェクトプーリング - GC を回避
  4. ドローコールのバッチ処理 - 状態変更を減らす
  5. Web Workers - 負荷の高い計算をオフロード

4. アセット戦略

種類形式
テクスチャKTX2 + Basis Universal（またはシンプルな 2D には WebP/PNG）
音声WebM/Opus（フォールバック：MP3）
3D モデルglTF + Draco/Meshopt
フェーズ読み込むもの
起動時コアアセット、<2MB
ゲームプレイ中必要に応じてストリーミング
バックグラウンド次のレベルを先読み

5. ゲーム向け PWA

メリット： オフラインプレイ、インストール、フルスクリーン、任意のプッシュ通知。 要件： サービスワーカー、Web アプリマニフェスト、HTTPS。

6. 音声の扱い

  • 最初のクリック／タップ時に AudioContext を作成または再開します
  • Web Audio API を優先し、ソースをプールして、よく使う SFX を事前読み込みします
  • 可能な場合は WebM/Opus で圧縮します

7. アンチパターン

❌ しないこと✅ すること
すべてのアセットを最初に読み込む段階的に読み込む
タブの表示状態を無視する非表示時に一時停止する
音声の読み込み完了を待って処理を止める音声を遅延読み込みする
圧縮を省略するすべてを圧縮する
高速な接続を前提にする低速なネットワークにも対応する
キャンバスエンジンを画面外で動かし続けるゲストを破棄する

覚えておいてください： ブラウザーは最も利用しやすいプラットフォームです。その制約を尊重してください。

使用する場面

HTML5/WebGL/WebGPU ゲームの開発、ブラウザーのランタイムの選定、または DOM とキャンバスを組み合わせたハイブリッド構成でゲストを接続する場合に使用します。

制限事項

  • 上記で説明した範囲にタスクが明確に該当する場合にのみ、このスキルを使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認を求めてください。

コメント

Markdown 対応