Phaser Design Patterns
Implement design patterns with a focus on real gameplay, not abstract examples.
When to use
Use this skill when the user needs to apply, refactor, review, or explain design patterns in Phaser 3 (JavaScript), especially for scene architecture, entities, input systems, physics interactions, and performance-sensitive gameplay code.
Workflow
- Identify a real game problem (entity creation, system coordination, behavior variation, etc).
- Choose a pattern that reduces coupling and does not add unnecessary complexity.
- Map the pattern to Phaser primitives (Scene, GameObject, Group, Events, Physics, Time, Input).
- Implement in JavaScript using game-domain naming.
- Validate at runtime (scene loads, input responds, collisions work, no event leaks).
Quick Pattern Selection
- Variable entity creation -> Factory Method / Abstract Factory.
- Step-by-step level or UI construction -> Builder.
- Shared state for thousands of instances -> Flyweight + pooling.
- Rules by AI mode/behavior -> State / Strategy.
- Decoupled events between gameplay and UI -> Observer / Mediator.
- Re-runnable actions (input, replay, undo) -> Command.
Implementation Rules
- Prioritize composition over deep inheritance.
- Keep scenes small and with clear responsibilities.
- Avoid mutable singletons for gameplay logic; reserve them for global services (audio, config).
- Use
delta in update(time, delta) when the pattern affects movement or timers.
- Unsubscribe events in
shutdown/destroy to avoid memory leaks.
- For massive objects (bullets, particles), combine the pattern with pooling (
setActive(false), setVisible(false)).
Expected Deliverables
- Explain in 2-4 lines why the pattern solves the problem.
- Show a JavaScript/Phaser snippet with real game context.
- Include relevant risks and anti-patterns.
- Propose minimum validation (manual test or simple test).
References
- See
references/patterns-map.md for a complete pattern -> Phaser usage map.
- See
references/phaser-snippets.md for ready-to-copy and adapt templates.
- See
references/state-machine-pattern-phaser.md for a full State + StateMachine implementation (Idle/Move/Action) adapted to Phaser.
1---2name: phaser-design-patterns3description: Design pattern implementation in Phaser 3 with JavaScript, focused on scene architecture, entities, input, physics, and performance. Use when asked to apply, refactor, review, or teach design patterns (creational, structural, or behavioral) in Phaser games.4---56# Phaser Design Patterns78Implement design patterns with a focus on real gameplay, not abstract examples.910## When to use1112Use this skill when the user needs to apply, refactor, review, or explain design patterns in Phaser 3 (JavaScript), especially for scene architecture, entities, input systems, physics interactions, and performance-sensitive gameplay code.1314## Workflow15161. Identify a real game problem (entity creation, system coordination, behavior variation, etc).172. Choose a pattern that reduces coupling and does not add unnecessary complexity.183. Map the pattern to Phaser primitives (Scene, GameObject, Group, Events, Physics, Time, Input).194. Implement in JavaScript using game-domain naming.205. Validate at runtime (scene loads, input responds, collisions work, no event leaks).2122## Quick Pattern Selection2324- Variable entity creation -> Factory Method / Abstract Factory.25- Step-by-step level or UI construction -> Builder.26- Shared state for thousands of instances -> Flyweight + pooling.27- Rules by AI mode/behavior -> State / Strategy.28- Decoupled events between gameplay and UI -> Observer / Mediator.29- Re-runnable actions (input, replay, undo) -> Command.3031## Implementation Rules3233- Prioritize composition over deep inheritance.34- Keep scenes small and with clear responsibilities.35- Avoid mutable singletons for gameplay logic; reserve them for global services (audio, config).36- Use `delta` in `update(time, delta)` when the pattern affects movement or timers.37- Unsubscribe events in `shutdown`/`destroy` to avoid memory leaks.38- For massive objects (bullets, particles), combine the pattern with pooling (`setActive(false)`, `setVisible(false)`).3940## Expected Deliverables4142- Explain in 2-4 lines why the pattern solves the problem.43- Show a JavaScript/Phaser snippet with real game context.44- Include relevant risks and anti-patterns.45- Propose minimum validation (manual test or simple test).4647## References4849- See `references/patterns-map.md` for a complete pattern -> Phaser usage map.50- See `references/phaser-snippets.md` for ready-to-copy and adapt templates.51- See `references/state-machine-pattern-phaser.md` for a full State + StateMachine implementation (Idle/Move/Action) adapted to Phaser.
agusstingalvan