Skip to content

Instantly share code, notes, and snippets.

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


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


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


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

//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 = {
    mute: false,
    score: 0,
    bestScore: 100

//Then we can change them anywhere = true; =;

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!

Loading an image/music/asset


function preload() {
    game.load.image('key', 'path/to/file.png');'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


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(,, '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');

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

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

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


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

Working with animations


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


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(,, "My Text");
    txt.anchor.set(0.5, 0.5);



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

    .to({x:500}, 400) //change player.x to 500 over 400ms

Playing music


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

Working with timers


//Three types of timers: looping, one time event, repeat.
var looping =, callback, context);
var once =, callback, context);
var repeat =, repeatCount, callback, context);
//You can also pass one last argument with the callback arguments;;

Calculating elapsed time


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

Working with groups


//Remember to assign it so we can reference it
var enemies =;

//We can add an already created object

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

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

Handling Collision


function update() {
    //You can collide a group with itself
    //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



//Lets follow a sprite named 'missile';

//Once the missile explodes, maybe we want to reset the camera;

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



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

//To use gravity on the emitter, start the physics system
emitter.gravity = 200;



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


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).


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 :)


This comment has been minimized.

Copy link

@JimLynchCodes JimLynchCodes commented Mar 28, 2017

Thanks is awesome. Thanks 👍


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 😄


This comment has been minimized.

Copy link

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

awesome cheat sheet ! thanks a ton


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.