Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

HTML5 Game Development with

A quick overview by Stefan Gaffga

About Phaser

About Phaser

Phaser can be used...

Phaser is fast

60 FPS with 110k individually rotated, bouncing Sprites - on a 6 year old i7 quad core!


Lots of Features


  • Sprites and Animation
  • Particles
  • Tile-based Environments
  • Text and Font Rendering
  • Lines, Rectangles, etc.
  • Camera Viewport


  • Low-latency Sound
  • Looping Music
  • Audiosprite Support


  • Collision detection (Quadtree optimized)
  • Arcade Physics (fast, simple)
  • P2 Physics (precise, physically correct)


  • Finite State Machine
  • Loading Progress Bar
  • Asset Loading Functions

Platform Support

  • Input Abstraction Layer
  • Gamepad Support
  • Support for Plugins
  • Scaling of Screen


  • Sprite Atlas Support
  • Tweening
  • Timer Events

A typical Phaser Game Structure

A Phaser Game State

    var state = {
        preload: function() { last chance to load Assets for this state },

        create: function() { called when preload finished loading },

        update: function() { called on each frame },

        render: function() { usually not necessary, Phaser draws everything itself },

        shutdown: function() { called when the state is left }

Phaser Initialization

    phaserGame = new Phaser.Game(600, 600, Phaser.AUTO,
       domObj, null, false, true);

    phaserGame.state.add("boot", stateBoot);
    phaserGame.state.add("preload", statePreload);
    phaserGame.state.add("title", stateTitle);
    phaserGame.state.add("play", statePlay);


Game Objects

Phaser uses a Tree to manage the Display Objects:

Create Game Objects

    // Create a Spritesheet (multiple Sprites in 1 Image)
    phaserGame.load.spritesheet('button' , 'img/buttons.png' , 150, 50);
    // Create a Single Sprite
    phaserGame.load.image('star', 'img/star.png');
Phaser uses keys to reference Assets - in this example "button" and "star".

Blind Spots

Thank you!