Phaser Cheatsheet

Creating a game config

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload,
    create,
    update,
  },
  physics: {
    default: 'arcade',
    arcade: {
      debug: true,
      gravity: {
        y: 0,
      },
    },
  },
};

const game = new Phaser.Game(config);

Managing game states

game.state.add('play', playState);
game.state.start('play');

//It also has functions useful for debugging and whatnot
console.log("Currently at the "+ game.state.getCurrentState() +" game state!");

Adjusting the game to any screen size

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.scale.setScreenSize(true); // setScreenSize doesn't seem to exist anymore in the current documentation

Working with globals

//Declare it outside of any functions
//This way they persist through state changes
game.global = {
    mute: false,
    score: 0,
    bestScore: 100
};

//Then we can change them anywhere
game.global.mute = true;
game.global.bestScore = game.global.score;

Using local storage

//It can only store strings
localStorage.setItem('itemKey', 'myContent');

//You can store entire objects by doing this:
localStorage.setItem('myObject', JSON.stringify(myObject));

//Then you just get the string you stored!
localStorage.getItem('itemKey');

Loading an image/music/asset

function preload() {
    game.load.image('key', 'path/to/file.png');
    game.load.audio('key', ['path/to/file.mp3', 'path/to/file.ogg']);
    game.load.spritesheet('key', 'path/to/file', frameWidth, frameHeight);
}

Setting a background color

//Setting it to a nice, greyish blue
game.stage.backgroundColor = '#6d94b5';

Generating random numbers

const num = game.rnd.integerInRange(120, 480);
const intNum = game.rnd.integer();
const fracNum = game.rnd.frac();

//Spawn a sprite at a random position
game.add.sprite(game.world.randomX, game.world.randomY, 'mysprite');

Adding game objects

function create() {
    //image, sprite, audio and others are all methods of the factory
    game.add.image(x, y, 'key');
    var player = game.add.sprite(x, y, 'key', frame, group);

    //You can add existing objects too
    var sprite = new Phaser.Sprite(game, x, y, 'key');
    game.add.existing(sprite);
}

Repositioning an objects anchor

//Objects have an anchor property that goes from 0 (top left) to 1 (bottom right)
//It defaults to 0,0 but it can be changed easily
image.anchor.x = 0.2;
image.anchor.y = 1;

//This sets it in the middle
image.anchor.setTo(0.5,0.5);

Scaling an object

//Objects have a scale property that defaults to 1
//Negative values essentially mirror it on the affected axis
image.scale.x = -1;

//This doubles the size of the object
image.scale.setTo(2,2);

Displaying an image

function create() {
    game.add.image(x, y, 'key');
}

Working with sprites

function create() {
    //Assign it to a variable so we can reference it
    const sprite = game.add.sprite(x, y, 'key');

    //Now we can access its properties and methods
    sprite.x = 200;
    sprite.y = 300;
}

Adding & playing animations

function create() {
    sprite.animations.add('name', [frames], frameRate, loop);
    sprite.animations.play('name', frameRate, loop, killOnComplete);
}

Working with animations

function create() {
    //Assign it so we can reference it later
    const run = sprite.animations.add('name', [frames], frameRate, loop);

    //Second parameter is the context, usually 'this'
    run.onStart.add(listener, this);
}

function listener() {
    console.log("You just started running!");
}

Displaying text

function create() {
    //Assigned for later use
    const label = game.add.text(x, y, "text", {style}, group);
    label.text = "I'm changing the text inside the label var!";
    //Center the text
    const txt = game.add.text(game.world.centerX, game.world.centerY, "My Text");
    txt.anchor.set(0.5, 0.5);
}

Tweening

//Adding an example sprite but you can tween pretty much anything
const player = game.add.sprite(100, 100, 'player');

game.add.tween(player)
    .to({x:500}, 400) //change player.x to 500 over 400ms
    .start();

Playing music

function create() {
    //Assign it so we can reference it 
    var music = game.add.audio('key', volume, loop);
    music.loop = true;
    music.play();
}

Working with timers

//Three types of timers: looping, one time event, repeat.
const looping = game.time.events.loop(delay, callback, context);
const once = game.time.events.add(delay, callback, context);
const repeat = game.time.events.repeat(delay, repeatCount, callback, context);
//You can also pass one last argument with the callback arguments

game.time.events.pause(loopingTimer);
game.time.events.remove(once);

Calculating elapsed time

//You can get the current time
const currentTime = game.time.time;

//You can get the elapsed time (milliseconds) since the last update
const elapsedTime = game.time.elapsed;

//Or you can get the elapsed time (seconds) since the last event tracked
const lastEventTrackedTime = game.time.time;
//Do something...
const elapsedTime = game.time.elapsedSecondsSince(lastEventTrackedTime);

Input

//Input can come from mouse, touch or keyboard
//This is the parent object, with properties for setting how input works

//Allows up to a second between taps for a double click
game.input.doubleTapRate = 1000;

//Increases the hitbox for touch
game.input.circle = 66;

Mouse & touch input

if (game.input.mousePointer.isDown) {
    console.log("Mouse X when you clicked was: "+game.input.mousePointer.x);
}

//Assign a callback and a context to a click event
game.input.onDown.add(callback, context);

Keyboard input

if (game.input.keyboard.justReleased(Phaser.Keyboard.SPACEBAR, 10000)) {
    console.log("Spacebar has been pressed in the last 10 seconds.");
}

//Assigning Up, Down, Left and Right to a variable
const arrow =  game.input.keyboard.createCursorKeys();
if (arrow.up.isDown) {
    console.log("You are pressing the up arrow!");
}

//This will stop the arrow keys from scrolling the page
game.input.keyboard.addKeyCapture(arrow);

Working with groups

//Remember to assign it so we can reference it
const enemies = game.add.group();

//We can add an already created object
enemies.add(button);

//Or we can create a new object in the group
enemies.create(x, y, 'enemy_sprite');

//You can use setAll to modify properties across all children
enemies.setAll('x', 500);

Adding physics to Sprites

function create() {
    //First we start the system
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //We then create our sprite & enable physics on it
    sprite = game.add.sprite(x, y, 'key');
    game.physics.enable(sprite, Phaser.Physics.ARCADE);

    //Now our sprite has an object body as a property
    sprite.body.velocity.setTo(x, y);
    sprite.body.bounce.set(0.8);
}

Handling Collision

function update() {
    //You can collide a group with itself
    game.physics.arcade.collide(sprites);
    
    //You can call a function when a collision happens
    game.physics.arcade.collide(sprites, monsters, callback);
    
    //You can perform additional checks with a processCallback
    //If it returns false the collision will not happen
    game.physics.arcade.collide(sprites, monsters, null, processCallback);

    //Or you can check if two bodies overlap. This method avoids the impact
    //between then, keeping their velocities and properties
    game.physics.arcade.overlap(sprites, monsters, callback);
    
    //You can perform the following collisions:
    //Sprite vs Sprite or
    //Sprite vs Group or
    //Group  vs Group or
    //Sprite vs Tilemap Layer or
    //Group  vs Tilemap Layer
}

Camera

//Lets follow a sprite named 'missile'
game.camera.follow(missile);

//Once the missile explodes, maybe we want to reset the camera
game.camera.reset();

//Something cool is happening, let's pan the camera there
game.camera.x = 500;

Particles

emitter = game.add.emitter(x, y, maxParticles);
emitter.makeParticles('image');
emitter.setAlpha(min, max, rate, easing, yoyo);

//To use gravity on the emitter, start the physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
emitter.gravity = 200;
emitter.start();

Debugging

//Print debug text
game.debug.text(game.time.physicsElapsed, 10, 20);

//Print debug body information
game.debug.bodyInfo(player, 10, 20);

//Show the sprite's hitbox as a green rectangle
game.debug.body(player);