スキル web-games
🎮

web-games

安全

WebGPU でブラウザゲームを構築する

ブラウザベースのゲームを作成するには、固有のプラットフォーム制約の理解が必要です。このスキルでは、高品質な Web ゲームを構築するためのフレームワーク選択ガイダンス、WebGPU 導入戦略、およびパフォーマンス最適化技術を提供します。

対応: Claude Codex Code(CC)
📊 70 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「web-games」を使用しています。 2D プラットフォーマーにはどのフレームワークを使うべきですか？

期待される結果:

物理演算、コリジョン、アニメーションなどのフルゲーム機能を備えた 2D プラットフォーマーには、**Phaser 4** を使用してください。すぐに使える包括的なゲームシステムを提供します。ゲームロジックなしの生のレンダリングパフォーマンスが必要な場合は、**PixiJS 8** を検討してください。

「web-games」を使用しています。 ブラウザゲームでオーディオを処理するにはどうすればよいですか？

期待される結果:

ブラウザのオーディオにはユーザーインタラクションが必要です。ページロード時ではなく、最初のクリック/タップ時に AudioContext を作成してください。パフォーマンスのためにプーリングされたオーディオソースと Web Audio API を使用します。オーディオは WebM/Opus フォーマットで圧縮してください。

セキュリティ監査

安全
v1 • 2/25/2026

Static analysis flagged 6 potential issues including external_commands, weak crypto, and system reconnaissance. Manual review confirms all findings are FALSE POSITIVES. The skill is pure markdown documentation providing browser game development guidance. Line 19/32 show ASCII decision trees (not shell backticks), lines 3/155 are description text (not crypto), and lines 30/80 are game dev terms (not reconnaissance). No dangerous patterns detected.

1
スキャンされたファイル
156
解析された行数
3
検出結果
1
総監査数
中リスクの問題 (1)
SKILL.md:19-32
False Positive: External Commands Pattern
Static scanner detected 'Ruby/shell backtick execution' at SKILL.md:19 and :32. Actual content: ASCII decision tree using Unicode box-drawing characters (│, └). Not shell execution.
低リスクの問題 (2)
SKILL.md:3SKILL.md:155
False Positive: Weak Cryptographic Algorithm
Static scanner detected 'weak cryptographic algorithm' at SKILL.md:3 and :155. Actual content: Frontmatter description and concluding text about browser game development. No cryptographic algorithms present.
SKILL.md:30SKILL.md:80
False Positive: System Reconnaissance
Static scanner detected 'system reconnaissance' at SKILL.md:30 and :80. Actual content: 'Hybrid / Canvas' (game type) and 'Object pooling' (performance technique). No system reconnaissance present.
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
26
コミュニティ
96
セキュリティ
91
仕様準拠

作れるもの

2D ゲームのフレームワーク選択

2D ブラウザゲームを始める開発者は、Phaser（フル機能）と PixiJS（レンダリングパフォーマンス）のどちらを選択するかを決定する必要があります。決定ツリーは、プロジェクト要件に基づいて正しい選択を特定するのに役立ちます。

WebGPU サポートの有効化

グラフィックス集約型ゲームを構築するチームは、より良いパフォーマンスのために WebGPU を使用したいと考えています。このスキルは、古いブラウザ向けのブラウザサポートマトリックスとフォールバック戦略を提供します。

ゲームロード時間の最適化

開発者は Web ゲームがモバイルでゆっくりロードされることに気づきました。このスキルは、初期ロードを削減するためのアセット圧縮（KTX2、Draco、WebP）とレイジーローディング戦略をガイドします。

これらのプロンプトを試す

フレームワーク選択ヘルプ 
[2D/3D] ブラウザゲームを [特定の機能] で構築したいのですが、どのフレームワークを使うべきですか？
WebGPU 実装 
ブラウザゲームで WebGPU を WebGL フォールバック付きで実装するにはどうすればよいですか？
PWA ゲーム設定 
ブラウザゲームをオフラインサポート付きのプログレッシブ Web アプリにするには、どのような要件がありますか？
アセット最適化戦略 
Web ゲームのテクスチャ、オーディオ、3D モデルには、どのような圧縮フォーマットを使用すべきですか？

ベストプラクティス

  • WebGPU から始めるが、より広範なブラウザサポートのために WebGL フォールバックを常に提供する（WebGPU カバレッジ約 73%）
  • すべてのアセットを、テクスチャには KTX2、オーディオには WebM/Opus、3D モデルには Draco 付き glTF を使用して圧縮する
  • タブ可視性処理を実装する - ブラウザのタブが非表示のときにゲームループを一時停止してリソースの浪費を防ぐ

回避

  • プログレッシブローディングではなく、起動時にすべてのゲームアセットをロードすること
  • ユーザーインタラクションを必要としないことでオーディオ自動再生制限を無視すること
  • すべてのユーザーが高速接続を持っていると仮定すること - 常に低速ネットワーク状態を処理すること

よくある質問

2D ブラウザゲームに最適なフレームワークは何ですか？
Phaser 4 はフルゲーム機能に最適です。PixiJS 8 はパフォーマンスを必要とするレンダリング重視のプロジェクトに最適です。
WebGPU と WebGL のどちらを使うべきですか？
新規プロジェクトでは、WebGL フォールバック付きで WebGPU を使用してください。これにより、約 73% のブラウザをサポートしながらモダンなグラフィックスにアクセスできます。
ゲームをインストール可能にするにはどうすればよいですか？
Web アプリマニフェストを作成し、キャッシング用のサービスワーカーを追加し、HTTPS で提供してください。これにより、ホーム画面インストールとオフラインプレイが可能になります。
どのアセットフォーマットを使うべきですか？
テクスチャには KTX2 + Basis Universal、オーディオには WebM/Opus、3D モデルには Draco 圧縮付き glTF を使用してください。
なぜオーディオは自動的に再生されないのですか？
ブラウザの自動再生ポリシーではユーザーインタラクションが必要です。最初のクリックまたはタップイベントで AudioContext を作成してください。
モバイル向けに最適化するにはどうすればよいですか？
アセットを積極的に圧縮し、レイジーローディングを実装し、タッチ入力を適切に処理し、ローエンドデバイスでテストしてください。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/game-development/web-games

参照

main

ファイル構成

📄 SKILL.md