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

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.

Navigation Guide

How to Use This Skill

Table of Contents

1. Scene Architecture

2. Asset Management

3. Physics & Collision

4. Movement Patterns

5. Animation System

6. Input Handling

7. State Management

8. Object Pooling & Memory

9. 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

Core Patterns Reference

Scene Setup

Custom Game Object

Grid System

Collision Handling

Input Patterns

Animation Setup

State Management

Common Pitfalls

Performance Tips

When to Read Detailed Files

Quick Reference Cheat Sheet

Scene Flow

Physics

Groups & Pooling

Input

Tweens

Camera

Writing Phaser 3 Games

Phaser 3 Game Development Skill

Quick Start

Most Common Patterns