phaser-best-practices

name	phaser-best-practices
description	Phaser 3 performance and implementation best-practice reference. Use when writing, reviewing, or optimising a Phaser 3 browser game — covers scene architecture, scene management, physics selection (Arcade vs Matter.js), asset pipeline (texture atlas, audio sprites), input handling, sprite animation, tilemap, object pooling, camera system, ScaleManager, and mobile optimisation.
license	MIT
compatibility	Portable reference skill for agents that support markdown skills or prompt files. Works best alongside project Phaser 3 source files and Chrome DevTools Performance captures.
disable-model-invocation	true
metadata	{"owner":"game-delivery","version":"2.0.0","language":"en-GB","category":"web-rendering","tags":["phaser3","phaser","2d","web-game","canvas","webgl","tilemap","physics","mobile"],"intents":["scene-architecture","physics-selection","atlas-pipeline","input-handling","animation-state-machine","tilemap-setup","object-pooling","mobile-scaling"],"output_types":["code-example","architecture-recommendation","review-findings","configuration-snippet"]}

Phaser 3 Best Practices

Reference guide for Phaser 3.60+. Rules are grouped by topic. Critical rules are marked CRITICAL.

---

1. Scene Architecture

The five lifecycle methods

class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'GameScene' });
  }

  init(data) {
    // Called first. Receive data passed from previous scene.
    // Initialise instance variables here — NOT in constructor.
    this.level = data.level ?? 1;
  }

  preload() {
    // Load assets. Runs once per scene start.
    this.load.image('player', 'assets/player.png');
    this.load.atlas('sprites', 'assets/sprites.png', 'assets/sprites.json');
  }

  create(data) {
    // Assets are loaded. Build the scene here.
    this.player = this.physics.add.sprite(100, 200, 'player');
  }

  update(time, delta) {
    
    ..(... ? - : );
  }

  () {
    
    ...();
  }
}