Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Phaser Cheatsheet

This is the content from the original Phaser cheatsheet, the site of which went down. I'm editing outdated information as I come across it.

Starting a new game

Reference: http://docs.phaser.io/Phaser.Game.html#Game

var game = new Phaser.Game(width, height, renderer, "parent");
//All parameters are optional but you usually want to set width and height
//Remember that the game object inherits many properties and methods!

Creating a game state object

Reference: http://docs.phaser.io/Phaser.State.html

playState = {

    init: function() {
    //Called as soon as we enter this state
    },

    preload: function() {
    //Assets to be loaded before create() is called
    },

    create: function() {
    //Adding sprites, sounds, etc...
    },

    update: function() {
    //Game logic, collision, movement, etc...
    }
};

Managing game states

Reference: http://docs.phaser.io/Phaser.StateManager.html

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

Reference: http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html

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

Reference: http://www.html5gamedevs.com/topic/4247-where-to-put-global-var-in-the-basic-template/

//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

Reference: http://www.w3schools.com/html/html5_webstorage.asp

//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

Reference: http://docs.phaser.io/Phaser.Loader.html

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

Reference: http://docs.phaser.io/Phaser.Stage.html

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

Generating random numbers

Reference: http://docs.phaser.io/Phaser.RandomDataGenerator.html

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

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

Adding game objects

Reference: http://docs.phaser.io/Phaser.GameObjectFactory.html

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

Reference: https://github.com/photonstorm/phaser/wiki/Graphics

//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

Reference: https://github.com/photonstorm/phaser/wiki/Graphics

//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

Reference: http://docs.phaser.io/Phaser.Image.html

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

Working with sprites

Reference: http://docs.phaser.io/Phaser.Sprite.html

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

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

Adding & playing animations

Reference: http://docs.phaser.io/Phaser.AnimationManager.html

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

Working with animations

Reference: http://docs.phaser.io/Phaser.Animation.html

function create() {
    //Assign it so we can reference it later
    var 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

Reference: http://docs.phaser.io/Phaser.Text.html

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

Tweening

Reference: http://docs.phaser.io/Phaser.Tween.html

//Adding an example sprite but you can tween pretty much anything
var 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

Reference: http://docs.phaser.io/Phaser.Sound.html

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

Reference: http://docs.phaser.io/Phaser.Timer.html

//Three types of timers: looping, one time event, repeat.
var looping = game.time.events.loop(delay, callback, context);
var once = game.time.events.add(delay, callback, context);
var 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

Reference: http://docs.phaser.io/Phaser.Time.html

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

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

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

Input

Reference: http://docs.phaser.io/Phaser.Input.html

//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

Reference: http://docs.phaser.io/Phaser.Pointer.html

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

Reference: http://docs.phaser.io/Phaser.Keyboard.html

Keycodes: http://docs.phaser.io/Keyboard.js.html#sunlight-1-line-557

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
var 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

Reference: http://docs.phaser.io/Phaser.Group.html

//Remember to assign it so we can reference it
var 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

Reference: http://docs.phaser.io/Phaser.Physics.Arcade.html

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

Reference: http://docs.phaser.io/Phaser.Physics.Arcade.html#collide

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

Reference: http://docs.phaser.io/Phaser.Camera.html

//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

Reference: http://docs.phaser.io/Phaser.Particles.Arcade.Emitter.html

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

Reference: http://docs.phaser.io/Phaser.Utils.Debug.html

//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);

Contribute!

Any contributions are welcome. I'm not really planning to update it myself since I'm a relative beginner with Phaser, I just noticed that the cheatsheet that was talked about everywhere was down so I figured I'd make it available again properly (the github repo of the original site doesn't format the code correctly).

@rawtaz

This comment has been minimized.

Copy link

@rawtaz rawtaz commented Mar 11, 2017

Nice cheat sheet!

The heading "Adding game objects" isn't a heading, but should be :)

@JimLynchCodes

This comment has been minimized.

Copy link

@JimLynchCodes JimLynchCodes commented Mar 28, 2017

Thanks is awesome. Thanks 👍

@woubuc

This comment has been minimized.

Copy link
Owner Author

@woubuc woubuc commented Jul 31, 2018

The heading "Adding game objects" isn't a heading, but should be :)

A tad late but.. Fixed 😄

@Elyazid-as

This comment has been minimized.

Copy link

@Elyazid-as Elyazid-as commented Sep 5, 2020

awesome cheat sheet ! thanks a ton

@woubuc

This comment has been minimized.

Copy link
Owner Author

@woubuc woubuc commented Sep 13, 2020

awesome cheat sheet ! thanks a ton

You're welcome! However, be careful with this cheatsheet cause I haven't updated it since I shared it 3 years ago. I don't use Phaser anymore so I don't know if it has changed much, but I can't guarantee that everything on here is still correct.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.