Gabe Hollombe: Building games with JavaScript and Phaser

Orde Saunders' avatarPublished: by Orde Saunders

Gabe Hollombe (@gabehollombe) was talking about making games with JavaScript and Phaser at Scotland.js, these are my notes from his talk.

Need to load assets, draw things on screen, animate things, manage frames, handle input from a variety of input, check for collisions, play sounds, manage states.  <= Don't do all this, use a framework and make your game.  These are solved problems, not your game.

Phaser, designed for mobile.  HTML5 + JS, open source, 2D.  It's under active development by professionals at Photo Storm so it doesn't get out of date in a fast changing technology environment.

Phaser will try and render using the fastest technology available in the runtime it finds.  Pass in functions to manage states - preload, create and update (clock tick - uses request animation frame).

Texture atlas, lets you work with many related assets - a sprite sheet with a map to where they all are.  There's a free tool that will build them for you from individual assets.  Phaser will then allow us to access this in a conceptually easy manner.

A physics group to allow collision detection, there are different physics engines - arcade is probably enough for most things.  Create a sprite using the physics group.

Animations are just more complex sprites, use several sprites from the texture atlas and give it a name.  Call .play and Phaser will handle it.  Can chain other animations when animations complete with callbacks.

Can hook interactions to creating sprites.  Phaser will give you a clean interface with input events. 

Each sprite can have an update event that will be called on each clock tick.

Phaser abstracts out the audio implementation - just give it an MP3 and an OGG.  Can preloaded them and then add them into the game so we can call them.

Set up a collision callback that will be called when Phaser detects the two objects have overlapped.

There's lots more in Phaser:

  • Camera movement
  • Tilemaps
  • Plugins
  • Particles
  • Physics

http://phaser.io/ <- has 300+ of demos and code samples.