Announcing Phaser (Flixel HTML5) and our Adobe Max session

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.

Posted on April 12th 2013 at 6:01 pm by .
View more posts in Phaser. Follow responses via the RSS 2.0 feed.


10 Responses

Leave a comment
  • April 12th 2013 at 6:20 pm

    Wow…this is absolutely amazing. The first canvas lib which makes me think to give up the development of my own personal lib. Thank you so much!

    By the way – is this the death of Kiwi.js or is it just a side project ?

  • April 12th 2013 at 6:20 pm

    Ahh … and good luck for the speech on Adobe Max!

  • April 12th 2013 at 6:22 pm

    Think of Phaser as being “Kiwi Lite”. Kiwi is a very big framework! But I wanted something small and fast, that didn’t have to care about DOM rendering or complex internal components :) Still lots of work to do on it of course, but I tried really hard to keep it ‘easy to use’ above and beyond anything else.

  • April 12th 2013 at 6:41 pm

    Phaser looks impressive. I really like the features. I’m excited to try it ASAP.

  • April 13th 2013 at 5:04 am

    Very nice.
    Got about 20,000 bunnies with 5 fps… wow. Just wow. That’s hecka fast.

  • bob
    April 14th 2013 at 10:03 am

    Hey, framework looks cool.
    But i have a question? what framework was flixel based off?

  • April 14th 2013 at 10:16 am

    Don’t think it was based on anything to be honest, just Adam’s previous games. It filled a gap that existed in the flash area at the time and gained a cult following from it.

  • April 14th 2013 at 9:46 pm

    This is outstanding, Rich! Thank you so much for that! Finally I received the kick to start experimenting with HTML5 games :)

    Good luck at MAX!

  • April 15th 2013 at 6:43 pm

    This is fantastic. I’ve been using HaxeFlixel for my cross platform needs, but this framework looks exceptionally pleasing to use. TypeScript + Visual Studio + all major Flixel functionality?! Very well done. I will have to experiment with this sooner rather than later :)

  • Alvaro Cavalcanti
    May 2nd 2013 at 2:26 pm

    Thank you very, VERY much. You guys rock :)

Make yourself heard