Navigation

Announcing Phaser (Flixel HTML5) and our Adobe Max session

Published on 12th April 2013

phaser_cams We've two exciting bits of news to share today. First we have just released Phaser. Phaser is a light-weight 2D HTML5 game framework based heavily on Flixel. Indeed it started life called Flixel5 but was renamed to avoid any potential confusion :) The current feature list is pretty comprehensive:

  • Asset Loading Easy loading for Images, Sprite Sheets, Texture Packer Data, JSON, Text Files and Audio Files.
  • Cameras Multiple world cameras that can scale, rotate, flash, shake, alpha and track sprites around the game world.
  • Sprites All sprites have physics properties including velocity, acceleration, bounce and drag and collision built-in.
  • Groups Group sprites together for collision checks, visibility toggling and easy 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 within world space.
  • Particles An easy to use Emitter can emit sprites in a burst or at a constant rate, setting physics properties on them as it does so.
  • Input Keyboard, Mouse and Touch support (advanced gestures coming soon)
  • 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 collision and motion is tracked across the whole world.
  • Sound (partial support) Currently uses WebAudio for playback. 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. 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.
  • Random Number Generator A seed based random number generator allows for reproducible in-game effects.
  • Game Scaling Games can scale to fit any device and will scroll the URL/status bar away on Android and iOS mobile.

phaser_particles 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: http://gametest.mobi/phaser/ (note they are all designed for desktop, but Phaser does also work on mobile) And download the full source here: https://github.com/photonstorm/phaser 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!

Speaking at Adobe Max

AdobeMax

I'm also pleased to say that I am running a session on creating HTML5 games for mobile web browsers at Adobe Max in LA. If you are attending Max then be sure to drop-by my session. It's on Tuesday at 2.30pm in room 514. Use the Session ID S9565 in your Max Session Planner to save it. I can't wait to meet-up with some of you and look forward to sharing what I've learnt during building nearly 40 commercial mobile browser games.