A very concise reference of Phaser.js - a game development framework.
Setup
Game with states
``html
``Game + States.
...
var game = new Phaser.Game(480, 320, Phaser.CANVAS, null);
game.state.add('boot', bootState);
game.state.add('preload', preloadState);
...
game.state.start('boot');
...
Managing State Files
<html><body>
<script src="state1.js"> </script>
<script src="state2.js"> </script>
...
</body></html>
Preload Stage
Canvas Setup
- Scale + Position + Background
// SHOW_ALL, RESIZE, NO_SCALE, EXACT_FIT
game.scale.scaleMode = Phaser.ScaleManager.NO_SCALE;
// Center at its block
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.stage.backgroundColor = '#eee';
Loading Assets
- Sprites / Spritesheets
game.load.image('imgObjName', 'file/path.png');
// Width and height of each frame.
game.load.spritesheet('ssName', 'sprite.png', 20, 20);
Game Content Creation
Rendering Texts
textStyle = {font: '15px Arial', fill: 'lightblue'};
textObj = game.add.text(x, y, 'Content', textStyle);
Rendering Sprites / Images
The same sprite can be repeatedly used for different objects.
imgObj = game.add.sprite(x, y, 'spriteName');
Element Configuration
- Position + Display
// Every object's default anchor is at its top left.
obj.anchor.set(0.5);
// Hide it - temporarily usually
imgObj.visible = false;
Sprite Animation
A spritesheet contains a series of frames (indexed from 0).
An animation is a specific sequence of frames (in a sprite sheet, in this context).
Our example shows an animation with 6 frames -> 4 animations per second.
var fps = 24;
var frameSeq = [0, 1, 0, 2, 0, 1];
imgObj.animations.add('spritesheetName', frameSeq, fps);
Physics Setup
Choose and fireup a physics system.
ARCADE, P2 or NINJA
game.physics.startSystem(Phaser.Physics.ARCADE);
Enable Physics on Objects.
game.physics.enable(obj, Phaser.Physics.ARCADE);
Using Physics
Velocity + Movability + Gravity
obj.body.immovable = true;
obj.body.velocity.set(V_x, V_y);
obj.body.velocity.x = 10;
obj.body.gravity.y = 9.8;
Collisions with world boundaries
obj.body.collideWorldBounds = true;
obj.checkWorldBounds = true;
// Event handler / Callback function + Context
obj.events.onOutOfBounds.add(callback, this);
Handle Collision between Objects
game.physics.arcade.collide(obj1, obj2, handler);
function handler(obj1, obj2) {}
Just Bounce
obj.body.bounce.set(1, 1);
In-Game Update
Re-render Text
textObj.setText("new content");
Delete Objects
obj.kill();
obj.alive = false;
Collision Check.
game.physics.arcade.collide(obj1, obj2, handler);
function handler(obj1, obj2) {}
Position Change
obj.x = new_x;
obj.reset(new_x, new_y);
Reading Input: KeyDown + Cursor Moving
One-shot Handler / Always-fire Handler
Don’t forget the context - this
// Horizontal position of cursor - Undefined at the beginning.
obj.x = game.input.x || default_x;
// Add once
obj.events.onDown.addOnce(function() {
}, this);
Play Animations - Usually in Event Handlers
obj.animations.play('animationName');
Tweens - Usually in Event handlers
// Tween on a specific property
var scaleTween = game.add.tween(obj.scale);
// 200 ms
var tweenDuration = 200;
// Final state, time and Type.
scaleTween.to({x: 0, y: 0}, tweenDuration, Phaser.Easing.Elastic.Out);
// Set up tween Handler
scaleTween.onComplete.add(function() {
obj.kill();
}, this);
// Fire it up explicitly
scaleTween.start();
Restart Game
Notification
console.alert('You won !');
Reload Page
document.reload();