無料GitHub で公開

phaser-2d-game

Implement 2D browser games with Phaser. Use when the user wants a Phaser, TypeScript, and Vite stack for scenes, gameplay systems, cameras, sprite animation, and DOM-overlay HUD patterns.

openai/plugins

インストール方法を見る

含まれるファイル（2）

SKILL.md3.1 KB
agents/openai.yaml213 B

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Phaser 2D Game

Overview

Use this skill for the main execution path in this plugin. Phaser is the default stack for 2D browser games here because it handles rendering, timing, sprites, cameras, and scene orchestration well without forcing gameplay rules into the framework.

Preferred stack:

Phaser
TypeScript
Vite
DOM-based HUD or menus layered over the game canvas

Architecture

Keep gameplay state outside Phaser scenes.
- Systems own rules, turn order, movement, combat, inventory, objectives, and progression.
- Phaser scenes adapt system state into sprites, camera motion, animation playback, and effects.
Make scenes thin.
- Boot and asset preload
- Menu or shell scene
- Gameplay scene
- Optional overlay or debug scene
Keep renderer-facing objects disposable.
- Sprite containers, emitters, tweens, and camera rigs are view state, not source of truth.
Favor stable asset manifest keys over direct file-path references throughout gameplay code.

Implementation Guidance

Use one integration boundary where the scene reads simulation state and emits input actions back.
Prefer deterministic system updates over scene-local mutation.
Treat HUD and menus as DOM when text, status density, or responsiveness matter.
Keep animation state derived from gameplay state rather than ad hoc sprite flags.

2D Modes Covered Well

Turn-based grids and tactics
Top-down exploration
Side-view action platformers
Character-action combat with sprite animation
Lightweight management or deck-driven battle scenes

Camera and Presentation

Choose the camera model early: locked, follow, room-based, or tactical-pan.
Keep camera logic separate from game rules.
Use restrained screen shake, hit-stop, and parallax. Effects should improve readability, not obscure it.

UI Integration

Use DOM overlays for HUD, command menus, settings, and narrative panels.
Keep the canvas responsible for the world, combat readability, and motion.
Avoid shoving dense text or complex settings UIs into Phaser unless the project explicitly needs an in-canvas presentation.

Asset Organization

characters/
environment/
ui/
fx/
audio/
data/

Keep manifest keys human-readable and stable.

Default Directory Shape

See ../../references/phaser-architecture.md for a concrete module split.

Anti-Patterns

Game rules inside update() loops without a system boundary
Scene-to-scene state passed through mutable global objects
HUD text rendered in the game canvas just because it is convenient
Asset paths embedded everywhere instead of a manifest layer
Overusing generic React dashboard patterns for game UI

References

Shared architecture: ../web-game-foundations/SKILL.md
Frontend direction: ../game-ui-frontend/SKILL.md
Sprite workflow: ../sprite-pipeline/SKILL.md
Phaser structure: ../../references/phaser-architecture.md

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

accessibility-and-inclusive-visualization

無料

Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.

日本語の概要は準備中です。原文の説明を表示しています。