Phaser 3 Game Development Skill Quick Start Most Common Patterns Multi-Scene Flow const config = { scene : [ Boot , Preloader , MainMenu , Game , GameOver ] } ; // Boot → Preloader → MainMenu → Game → GameOver Object Pooling create ( ) { this . projectiles = this . physics . add . group ( { classType : Projectile , frameQuantity : 20 , active : false , visible : false } ) ; } fire ( ) { const projectile = this . projectiles . getFirstDead ( false ) ; if ( projectile ) projectile . fire ( x , y ) ; } Global Animations // In Preloader.js create() this . anims . create ( { key : 'walk' , frames : this . anims . generateFrameNumbers ( 'player' , { start : 0 , end : 3 } ) , frameRate : 10 , repeat : - 1 } ) ; JustDown Input if ( Phaser . Input . Keyboard . JustDown ( this . spacebar ) ) { this . jump ( ) ; } Navigation Guide How to Use This Skill This skill provides access to 18 comprehensive pattern files covering all aspects of Phaser 3 development. Each file contains detailed patterns, code examples, and best practices. To find specific patterns:

Read a specific topic

Read knowledgebase/06-input-handling.md

Search for a pattern across all files

grep -r "object pooling" knowledgebase/

Find patterns by keyword

grep -i "animation" knowledgebase/.md grep -i "collision" knowledgebase/.md Quick lookup by number: 01 = Scene Architecture 02 = Asset Management 03 = Physics & Collision 04 = Movement Patterns 05 = Animation System 06 = Input Handling 07 = State Management 08 = Object Pooling & Memory 09 = Grid Systems 10 = Custom Game Objects 11 = UI/HUD Patterns 12 = Tween & Visual Effects 13 = Audio Integration 14 = Game Loop Patterns 15 = Algorithm Implementations 16 = Performance Optimization 17 = Code Organization 18 = Development Philosophy Table of Contents 1. Scene Architecture knowledgebase/01-scene-architecture.md Multi-scene flow, parallel scenes for UI overlays, scene transitions with effects, data passing between scenes. Key Patterns: Boot → Preloader → MainMenu → Game → GameOver flow Parallel UI scene with scene.launch() Camera fade transitions Scene data passing via init(data) 2. Asset Management knowledgebase/02-asset-management.md Two-stage loading, texture atlases, multi-format audio, font synchronization. Key Patterns: Bootstrap assets in Boot, full assets in Preloader Texture atlas for multiple sprites Multi-format audio for browser compatibility WebFont loading synchronization 3. Physics & Collision knowledgebase/03-physics-collision.md Physics configuration, collision vs overlap, dynamic responses, state-gated collision. Key Patterns: Collider for physical blocking, overlap for triggers Position-based dynamic response (paddle hits) State-gated collision checks Per-track/layer collision isolation 4. Movement Patterns knowledgebase/04-movement-patterns.md Velocity-based, time-based discrete, timer-based, pursuit, direction validation, screen wrapping. Key Patterns: Velocity-based for continuous action games Time-based discrete for grid games Timer-based for turn-based games Direction validation (prevent 180° turns) 5. Animation System knowledgebase/05-animation-system.md Global animation creation, reverse animations, animation-driven logic, state-based control. Key Patterns: Create animations once in Preloader, use everywhere Animation events for gameplay synchronization State-based animation control with caching External animation JSON data 6. Input Handling knowledgebase/06-input-handling.md Keyboard, pointer, touch, JustDown pattern, dual input support, input gating, cleanup. Key Patterns: JustDown for single-press detection Dual keyboard + pointer support Input gating during animations Event-driven pointer movement One-time input with once() 7. State Management knowledgebase/07-state-management.md Scene-level state, registry for persistence, localStorage, GameObject data component, state machines. Key Patterns: Constructor for config, init() for resettable state Registry for cross-scene data GameObject data component for custom properties Boolean flags vs state machines 8. Object Pooling & Memory knowledgebase/08-object-pooling-memory.md Group-based pooling, enable/disable pattern, object reuse, dynamic texture cleanup. Key Patterns: Pre-create with frameQuantity , recycle with getFirstDead() Enable/disable instead of create/destroy Reset pattern for reusable objects Dynamic texture cleanup prevention 9. Grid Systems knowledgebase/09-grid-systems.md Dual coordinates, 2D arrays, adjacency helpers, grid alignment, visualization. Key Patterns: Separate grid coordinates from pixel coordinates 2D array with bounds checking Adjacency helpers (8-direction, 4-direction) Grid-aligned group creation 10. Custom Game Objects knowledgebase/10-custom-game-objects.md Extending Sprite/Image, composition pattern, extending groups, self-registration. Key Patterns: Extend Sprite when physics + animations needed Extend Image for static sprites with physics Composition for non-visual managers Must call super.preUpdate() for animations 11. UI/HUD Patterns knowledgebase/11-ui-hud-patterns.md Text styling, positioning, dynamic updates, bitmap fonts, icon counters, layering. Key Patterns: Text origin for positioning (top-left, center, etc.) Animated counters with tweens Icon-based counters (hearts, lives) Depth/z-ordering for layered UI 12. Tween & Visual Effects knowledgebase/12-tween-visual-effects.md Basic tweens, staggered animations, choreographed sequences, camera effects, particles. Key Patterns: Tween callbacks for sequencing Staggered grid animations Choreographed sequences with accumulating delays Camera shake, flash, fade Particle emitters 13. Audio Integration knowledgebase/13-audio-integration.md Sound management, audio lock handling, centralized audio, delayed/sequenced audio. Key Patterns: Multi-format audio loading Audio lock detection and handling Centralized audio management in UI scene Persistent music across scenes 14. Game Loop Patterns knowledgebase/14-game-loop-patterns.md Standard update, minimal event-driven, preUpdate for custom objects, delegation, timers. Key Patterns: Early exit guards in update() Event-driven for turn-based games Timer-based recurring/one-shot events Update delegation to managers 15. Algorithm Implementations knowledgebase/15-algorithm-implementations.md Flood fill, smart random placement, solvable puzzle generation, proximity calculation, following chains, AI. Key Patterns: Recursive flood fill with 4-direction spread Valid position collection for guaranteed placement Walker algorithm for solvable puzzles Following chain with ShiftPosition 16. Performance Optimization knowledgebase/16-performance-optimization.md Object pooling, texture caching, minimize update logic, event-driven, static groups. Key Patterns: Object pooling eliminates GC pauses Static groups for immovable objects Event-driven over polling in update() Texture atlas for rendering performance 17. Code Organization knowledgebase/17-code-organization.md File structure, ES6 modules, constants management, separation of concerns. Key Patterns: Scenes, gameobjects, managers, utils, constants folders ES6 module imports Constant files for sprite/animation/audio keys Clear initialization order in create() 18. Development Philosophy knowledgebase/18-development-philosophy.md Architecture principles, when to use physics, scene decisions, update vs events, progressive difficulty. Key Patterns: When to use physics vs manual logic Single vs multi vs parallel scenes Update() vs event-driven approaches Progressive difficulty patterns Core Patterns Reference Scene Setup export default class Game extends Phaser . Scene { constructor ( ) { super ( 'Game' ) ; // Configuration constants this . GRID_SIZE = 32 ; } init ( ) { // Reset resettable state this . score = 0 ; this . gameOver = false ; } create ( ) { // Initialize objects this . player = new Player ( this ) ; this . enemies = this . physics . add . group ( ) ; // Setup collisions this . physics . add . collider ( this . player , this . enemies , this . onHit , null , this ) ; } update ( time , delta ) { if ( this . gameOver ) return ; // Game logic } } Custom Game Object export default class Player extends Phaser . Physics . Arcade . Sprite { constructor ( scene , x , y ) { super ( scene , x , y , 'player' ) ; // Self-register scene . add . existing ( this ) ; scene . physics . add . existing ( this ) ; // Configuration this . setCollideWorldBounds ( true ) ; this . isAlive = true ; } preUpdate ( time , delta ) { super . preUpdate ( time , delta ) ; // ESSENTIAL for animations if ( ! this . isAlive ) return ; this . handleMovement ( ) ; } } Grid System // Dual coordinate system this . gridX = 5 ; this . gridY = 3 ; this . sprite . x = this . gridX * TILE_SIZE ; this . sprite . y = this . gridY * TILE_SIZE ; // 2D array with bounds checking getCellXY ( x , y ) { if ( x < 0 || x

= this . width || y < 0 || y = this . height ) { return null ; } return this . grid [ y ] [ x ] ; } Collision Handling // Physical collision this . physics . add . collider ( player , platforms ) ; // Trigger-based overlap this . physics . add . overlap ( player , coins , this . collectCoin , null , this ) ; // Collision with state gates onHit ( player , enemy ) { if ( ! player . isAlive ) return ; if ( player . invincible ) return ; if ( enemy . alpha < 1 ) return ; this . handleDamage ( player , enemy ) ; } Input Patterns create ( ) { // Cursor keys this . cursors = this . input . keyboard . createCursorKeys ( ) ; // Specific key this . spacebar = this . input . keyboard . addKey ( Phaser . Input . Keyboard . KeyCodes . SPACE ) ; // Pointer/touch this . input . on ( 'pointerdown' , this . handleClick , this ) ; } update ( ) { // Continuous input if ( this . cursors . left . isDown ) { this . player . setVelocityX ( - 160 ) ; } // Single-press input if ( Phaser . Input . Keyboard . JustDown ( this . spacebar ) ) { this . jump ( ) ; } } Animation Setup // In Preloader create() - global animations this . anims . create ( { key : 'player-walk' , frames : this . anims . generateFrameNumbers ( 'player' , { start : 0 , end : 3 } ) , frameRate : 10 , repeat : - 1 } ) ; // In Game create() - use animations this . player . play ( 'player-walk' ) ; // Animation events this . player . on ( 'animationcomplete-attack' , this . spawnProjectile , this ) ; State Management // Scene-level state init ( ) { this . score = 0 ; this . lives = 3 ; this . gameOver = false ; } // Registry for cross-scene data this . registry . set ( 'highscore' , this . score ) ; const highscore = this . registry . get ( 'highscore' ) ; // GameObject data sprite . setData ( { gridX : 5 , gridY : 3 , type : 'enemy' } ) ; const gridX = sprite . data . values . gridX ; Common Pitfalls Critical mistakes to avoid: Forgetting super.preUpdate(time, delta) in custom sprites Animations won't work without this Always call first thing in preUpdate() Not calling refreshBody() after scaling static groups this . platforms . create ( x , y , 'platform' ) . setScale ( 2 ) . refreshBody ( ) ; // REQUIRED Creating objects in update() instead of pooling Causes GC pauses and poor performance Pre-create pools, recycle with enable/disable Missing bounds checks on grid access if ( x < 0 || x = width || y < 0 || y = height ) return null ; Not cleaning up listeners/timers shutdown ( ) { this . input . off ( 'pointerdown' , this . handleClick ) ; if ( this . timer ) this . timer . remove ( ) ; } Using wrong collision method Use collider for physical blocking Use overlap for triggers/pickups Polling in update() when events would work Use physics overlap instead of distance checks Use pointer events instead of checking every frame Hard-coding values instead of constants // Bad: magic numbers sprite . x = 400 ; // Good: named constants const GRID_SIZE = 32 ; sprite . x = gridX * GRID_SIZE ; Not resetting state in init() Scene restart won't work properly Put all resettable state in init(), not constructor Ignoring context binding in callbacks // Use arrow functions or bind this . time . delayedCall ( 1000 , ( ) => this . start ( ) , [ ] , this ) ; Performance Tips Object pools for frequently created/destroyed objects Texture atlases combine sprites into single image Static groups for immovable platforms/walls Event-driven over polling in update() Minimal update logic - only what's necessary each frame Cache lookups - don't search arrays every frame Set depth once - don't sort every frame When to Read Detailed Files Starting a new game? → Read 01-scene-architecture.md Performance issues? → Read 16-performance-optimization.md Grid-based game? → Read 09-grid-systems.md Complex animations? → Read 05-animation-system.md and 12-tween-visual-effects.md Input problems? → Read 06-input-handling.md Memory leaks? → Read 08-object-pooling-memory.md Implementing algorithms? → Read 15-algorithm-implementations.md Architecture decisions? → Read 18-development-philosophy.md Quick Reference Cheat Sheet Scene Flow Boot → Preloader → MainMenu → Game → GameOver this . scene . start ( 'NextScene' , { score : this . score } ) ; this . scene . launch ( 'GameUI' ) ; // Parallel scene Physics this . physics . add . collider ( a , b ) ; // Physical blocking this . physics . add . overlap ( a , b , callback ) ; // Trigger only sprite . setCollideWorldBounds ( true ) ; sprite . setImmovable ( true ) ; Groups & Pooling this . items = this . physics . add . group ( { frameQuantity : 20 } ) ; const item = this . items . getFirstDead ( false ) ; item . enableBody ( true , x , y , true , true ) ; item . disableBody ( true , true ) ; Input this . cursors = this . input . keyboard . createCursorKeys ( ) ; Phaser . Input . Keyboard . JustDown ( key ) this . input . on ( 'pointerdown' , callback , this ) ; Tweens this . tweens . add ( { targets : sprite , x : 400 , duration : 1000 , ease : 'Power2' , onComplete : ( ) => { } } ) ; Camera this . cameras . main . shake ( duration , intensity ) ; this . cameras . main . fadeOut ( duration ) ; this . cameras . main . flash ( duration , r , g , b ) ; This skill provides comprehensive Phaser 3 patterns. Read the detailed knowledgebase files for in-depth examples and advanced techniques.