Phaser 3 · 1 / 6

Dashboard
Creative coding · Phaser 3

Boot config, Scene & Scale

Every Phaser project starts with a config object and at least one Scene. Scenes own preload, create, and update. Pair Phaser.Scale.RESIZE with your parent div so lessons behave inside Coffee Academy iframes and on rotated phones.

Demos load Phaser 3.80 from CDN — open over HTTP, not raw file://.

// Minimal bootstrap (Phaser 3)
class Play extends Phaser.Scene {
  constructor() { super('play'); }
  create() { this.add.text(100, 100, 'Hello'); }
}

new Phaser.Game({
  type: Phaser.AUTO,
  parent: 'game',
  scale: { mode: Phaser.Scale.RESIZE, autoCenter: Phaser.Scale.CENTER_BOTH },
  scene: Play
});
Why scenes?

Scenes bundle lifecycle hooks so you can swap menus, gameplay, and overlays without one giant update() spaghetti file.

Next

Graphics vs GameObjects — procedural drawing & grouped motion.