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

http://www.gaffga.de

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!

(http://www.goodboydigital.com/pixi-v3-bunnymark/>

Lots of Features

Graphics

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

Sound

  • Low-latency Sound
  • Looping Music
  • Audiosprite Support

Physics

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

Lifecycle

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

Platform Support

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

Animation

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

    phaserGame.state.start("boot");
            

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!

Questions?