Phaser: Our TypeScript based game framework

Topics: General
Apr 12, 2013 at 6:21 PM
Phaser is a 2D JavaScript/TypeScript HTML5 Game Framework based heavily on Flixel.

Phaser was born from a cross-polination of the AS3 Flixel game library and our own internal HTML5 game framework. The objective was to allow you to make games really quickly and remove some of the speed barriers HTML5 puts in your way.


Phaser fully or partially supports the following features. This list is growing constantly and we are aware there are still a number of essential features missing:
  • Asset Loading Images, Sprite Sheets, Texture Packer Data, JSON, Text Files, Audio File.
  • Cameras Multiple world cameras, camera scale, zoom, rotation, deadzones and Sprite following.
  • Sprites All sprites have physics properties including velocity, acceleration, bounce and drag. ScrollFactor allows them to re-act to cameras at different rates.
  • Groups Group sprites together for collision checks, visibility toggling and function iteration.
  • Animation Sprites can be animated by a sprite sheet or Texture Atlas (JSON Array format supported). Animation playback controls, looping, fps based timer and custom frames.
  • Collision A QuadTree based Sprite to Sprite, Sprite to Group or Group to Group collision system.
  • Particles An Emitter can emit Sprites in a burst or at a constant rate, setting physics properties.
  • Input Keyboard and Mouse handling supported (Touch coming asap)
  • Stage Easily change properties about your game via the stage, such as background color, position and size.
  • World The game world can be any size and Sprites and collision happens within it.
  • Sound (partial support) Currently uses WebAudio for playback. A lot more work needs to be done in this area.
  • State Management For larger games it's useful to break your game down into States, i.e. MainMenu, Level1, GameOver, etc. The state manager makes swapping states easy, but the use of a state is completely optional.
  • Cache All loaded resources are stored in an easy to access cache, which can be cleared between State changes or persist through-out the whole game.
  • Tilemaps Support for CSV and Tiled JSON format tile maps is implemented but currently limited.

It’s not yet finished of course and there is still lots to do, but with Ludam Dare around the corner I wanted to get this out sooner rather than later. So please download it, try it, kick it hard and let me know what you think.

You can run all the current tests here: (note they are all designed for desktop, but Phaser does also work on mobile)

And download the full source here:

We’ve set-up a Phaser specific board on the on HTML5 Game Devs forum – so post questions and comments or in the comments

We built Phaser using TypeScript, but you can easily use plain-vanilla JavaScript to create your games, indeed all of the Test cases were created that way. We’ve a number of exciting plans for Phaser in the near future, so definitely stay tuned! and thanks to the TypeScript team for making it a breeze to create this framework :)
Apr 15, 2013 at 1:55 PM
Very cool stuff. Thanks for sharing!