phaser-hud-component-patterns

# Phaser HUD Component Patterns ## Overview Reusable patterns for implementing HUD elements in Phaser games. Accelerate HUD implementation and ensure consistency. ## HUD Background Pattern - Use `Phaser.GameObjects.Graphics` for rounded rectangles - Set depth to 100+ to appear above game elements - Use semi-transparent backgrounds (alpha: 0.7-0.8) - Position relative to camera dimensions ## Text Element Pattern - Position text relative to HUD background - Set depth to 101+ (above background) - Use consistent font families and sizes - Update text in real-time via `setText()` ## Test Seam Integration - Expose HUD properties: colors, positions, text content - Include visual state accessors: `getTimerColor()`, `getCoinCount()` - Document HUD structure in test seam ## Common HUD Elements See `references/hud-elements.md` for patterns: - Timer display (MM:SS format) - Score/coin counter - Health bar (if applicable) - Minimap (if applicable) ## Test in Isolation Before or while integrating a HUD component into GameScene, create a standalone component test scene that only renders this HUD element (e.g. `HUDTimerTestScene`). Test layout, test seam, and behavior there. Use the **phaser-component-test-scenes** skill for workflow and template. ## Template See `assets/hud-template.ts` for HUD component template. ## Resources - `references/hud-elements.md` - Timer display, score counter, health bar patterns - `assets/hud-template.ts` - Template for HUD components - **phaser-component-test-scenes** - Standalone test scenes for UI components