← Cheatsheets

Tags: phaser, html5, javascript, scenes, cameras, physics, arcade, input, asset-loading, game-engine Last updated: 2026-06-27

Phaser.js Cheatsheet

Quick Reference

Game Configuration & Boot

const config = {
  type: Phaser.AUTO,              // WebGL preferred, Canvas fallback
  width: 800,
  height: 600,
  physics: {
    default: "arcade",
    arcade: { gravity: { y: 300 }, debug: false }
  },
  scene: [BootScene, MenuScene, GameScene],
  pixelArt: true,
  backgroundColor: "#1a1a2e"
};
const game = new Phaser.Game(config);

Scenes

class GameScene extends Phaser.Scene {
  constructor() { super("GameScene"); }
  init(data) { }              // Receives data from scene.start()
  preload() { }               // Load assets
  create() { }                // Build game objects
  update(time, delta) { }     // Every frame — game loop
}

// Scene management
this.scene.start("GameScene", { level: 3 });
this.scene.restart();
this.scene.stop("MenuScene");
this.scene.launch("UIOverlay");     // Parallel scene

// Fade transition
this.cameras.main.fadeIn(1000, 0, 0, 0);
this.cameras.main.once("camerafadeincomplete", () => {
  this.scene.start("NextScene");
});

Physics (Arcade)

const player = this.physics.add.sprite(400, 300, "player");

// Body properties
player.setCollideWorldBounds(true);
player.setBounce(0.2);
player.setDrag(100);
player.setMaxVelocity(200, 400);
player.body.setGravityY(300);

// Movement
player.setVelocityX(160);
player.setVelocity(100, -200);        // Jump

// Collisions
this.physics.add.collider(player, platforms);
this.physics.add.collider(enemies, bullets, (enemy, bullet) => {
  enemy.destroy();
  bullet.destroy();
});

// Overlap (pass-through)
this.physics.add.overlap(player, coins, (player, coin) => {
  coin.destroy();
  coinsCollected++;
});

// Groups
const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, "ground");
const stars = this.physics.add.group({
  key: "star", repeat: 11,
  setXY: { x: 12, y: 0, stepX: 70 }
});

Input Handling

// Cursor keys
const cursors = this.input.keyboard.createCursorKeys();
if (cursors.left.isDown)  player.setVelocityX(-160);
if (cursors.right.isDown) player.setVelocityX(160);
if (cursors.up.isDown && player.body.blocked.down) {
  player.setVelocityY(-330);
}

// Specific key
const spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
if (Phaser.Input.Keyboard.JustDown(spaceBar)) { shoot(); }

// WASD
const wasd = this.input.keyboard.addKeys({
  up: "W", down: "S", left: "A", right: "D"
});

// Pointer / Touch
this.input.on("pointerdown", (pointer) => {
  player.setVelocityX(pointer.x > player.x ? 160 : -160);
});

// GameObject click
sprite.setInteractive();
sprite.on("pointerdown", () => { sprite.setTint(0xff0000); });

Asset Loading

preload() {
  this.load.image("sky", "assets/sky.png");
  this.load.image("ground", "assets/platform.png");
  this.load.spritesheet("player", "assets/player.png", {
    frameWidth: 32, frameHeight: 48
  });
  this.load.atlas("enemies", "assets/enemies.png", "assets/enemies.json");
  this.load.audio("bgm", "assets/music.mp3");
  this.load.audio("sfx_jump", "assets/jump.wav");
}

// Spritesheet animations
this.anims.create({
  key: "walk",
  frames: this.anims.generateFrameNumbers("player", { start: 0, end: 3 }),
  frameRate: 10,
  repeat: -1
});
player.anims.play("walk");

Cameras

this.cameras.main.setBounds(0, 0, 3200, 600);
this.cameras.main.startFollow(player, true, 0.1, 0.1);
this.cameras.main.shake(200, 0.01);       // intensity, duration(s)
this.cameras.main.flash(300, 255, 0, 0);  // duration, r, g, b
this.cameras.main.fade(500, 0, 0, 0);     // Fade to black
this.cameras.main.zoomTo(1.5, 1000);      // target zoom, duration(ms)

Tips

• Phaser.AUTO tries WebGL first — better performance.
• Use staticGroup() for platforms/walls — cheaper collision.
• setCollideWorldBounds(true) keeps the player on screen.
• player.body.blocked.down checks if on ground — use for jump logic.
• Prefer atlas over individual images — one file, better performance.
• Phaser.Math has useful helpers: Clamp, Between, FloatBetween, Angle.
• Use this.time.addEvent() for delayed/repeating logic instead of setInterval().