Agent Skills
› fanfan-de/anybox
› phaser-2d-game
phaser-2d-game
GitHub指导使用Phaser、TypeScript和Vite构建2D浏览器游戏。强调将游戏逻辑与渲染分离，保持场景精简，利用DOM覆盖层处理HUD，规范资产管理和摄像机控制，避免常见反模式。
Trigger Scenarios
用户希望开发2D网页游戏
需要使用Phaser框架进行前端开发
涉及游戏场景、动画或DOM HUD集成
Install
npx skills add fanfan-de/anybox --skill phaser-2d-game -g -y
SKILL.md
Frontmatter
{
"name": "phaser-2d-game",
"description": "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."
}
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
Version History
- 08dc189 Current 2026-07-05 18:59
