Agent Skills by ALSEL
Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

game-engine

HTML5、Canvas、WebGL、JavaScriptを用いたWebブラウザ向けゲームエンジンおよびゲーム開発に特化したスキル。ゲームの作成、ゲームエンジンの構築、物理演算の実装、衝突判定、ゲームループの設定、スプライト管理、操作入力の追加、2D/3Dレンダリングなどが必要な場面で活躍します。プラットフォーマー、ブロック崩し、迷路ゲーム、タイルマップ、サウンド、WebRTCを使ったマルチプレイヤー対応、ゲームの公開まで幅広いテクニックをカバーします。

description の原文を見る

Expert skill for building web-based game engines and games using HTML5, Canvas, WebGL, and JavaScript. Use when asked to create games, build game engines, implement game physics, handle collision detection, set up game loops, manage sprites, add game controls, or work with 2D/3D rendering. Covers techniques for platformers, breakout-style games, maze games, tilemaps, audio, multiplayer via WebRTC, and publishing games.

SKILL.md 本文

ゲームエンジンスキル

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

このスキルの使用タイミング

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

前提条件

  • HTML、CSS、JavaScript の基本知識
  • Canvas/WebGL サポートを備えた最新のウェブブラウザ
  • テキストエディタまたは IDE
  • オプション：ビルドツールとローカル開発サーバー用の Node.js

コアコンセプト

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

ゲームループ

すべてのゲームエンジンはゲームループを中心に回転しています。ゲームループは以下の継続的なサイクルです：

  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. 配布プラットフォームを選択する（ウェブ、アプリストア、ゲームポータル）
  4. 必要に応じてマネタイゼーションを実装する
  5. ゲームコミュニティとソーシャルメディアで宣伝する

ゲームテンプレート

スターターテンプレートは assets/ フォルダで利用できます。各テンプレートは、新しいプロジェクトの出発点として使用できる完全に機能する例を提供します。

テンプレート説明
paddle-game-template.md純粋な JavaScript を使用した 2D ブレイクアウトスタイルゲーム
2d-maze-game.mdデバイスの向きコントロール付き迷路ゲーム
2d-platform-game.mdPhaser フレームワークを使用したプラットフォーマーゲーム
gameBase-template-repo.mdゲームベーステンプレートリポジトリ構造
simple-2d-engine.md衝突検出を備えたシンプル 2D プラットフォーマーエンジン

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

詳細なリファレンス資料は references/ フォルダで利用できます。特定のトピックの詳細な説明については、これらのファイルを参照してください。

リファレンスカバーされるトピック
basics.mdゲーム開発入門と解剖学
web-apis.mdCanvas、WebGL、Web Audio、Gamepad、およびその他のウェブ API
techniques.md衝突検出、タイルマップ、非同期スクリプト、オーディオ
3d-web-games.md3D 理論、フレームワーク、シェーダー、WebXR
game-control-mechanisms.mdタッチ、キーボード、マウス、ゲームパッドコントロール
game-publishing.md配布、宣伝、マネタイゼーション
algorithms.mdレイキャスト、衝突、物理、ベクトル数学
terminology.mdゲーム開発用語集
game-engine-core-principles.mdゲームエンジンのコア設計原則

トラブルシューティング

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

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
github
リポジトリ
github/awesome-copilot
ライセンス
MIT
最終更新
不明
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/github/awesome-copilot / ライセンス: MIT

関連スキル

汎用ソフトウェア開発⭐ リポ 39,967

doubt-driven-development

重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 1,175

apprun-skills

TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。

by yysun
OpenAIソフトウェア開発⭐ リポ 797

desloppify

コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。

by Git-on-my-level
汎用ソフトウェア開発⭐ リポ 39,967

debugging-and-error-recovery

テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

test-driven-development

テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

incremental-implementation

変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。

by addyosmani
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: github · github/awesome-copilot · ライセンス: MIT