Phaser 1.0 and the journey we took to get there

After months of hard work everything came to a head on Friday September 13th when we released version 1.0 of Phaser, our HTML5 game framework. This was a monumental milestone release for us, and the fact that it has taken us 3 days to even write about it on our own site should give you some indication of the whirlwind that ensued following launch.

We punched the shiny ‘release’ button quite late on Friday, which not only pushed 1.0 to our github master branch but also unveiled the lovely new Phaser web site as well. Although just a single page site for now the design reflects everything that I want a game framework to be: fun, fast and easy to use. I wanted people to look at the site and instantly feel like it was approachable: not too ‘serious’ or dour, but by no means amateur either. The site certainly had the desired effect, as sure enough the tweets spread like wildfire and the site is getting thousands of visitors a day. As a result we’re seeing great levels of activity on our github repo and the Phaser section of the HTML5 Game Devs forum has exploded, with fresh new sign-ups and questions coming every hour.

A road hard walked

It took a lot of work to reach 1.0. Like most things the first few iterations of Phaser came easily, but as soon as you start pushing the framework in new and needed directions the cracks start to show. I was trying to blend in an advanced physics system, overly complex renderer, UI elements and lots more. And like a house made from a deck of cards it all came crashing down. The cause? TypeScript 0.9. I had been building against 0.8.3 which was flawless – great compile times, clean code and a Visual Studio plugin that worked. But the TypeScript team had made 0.9 the default download on their site and Phaser wouldn’t compile with it, so I had to upgrade to stem the flow of “why doesn’t it work?” emails I was receiving.

However it was a battle fought entirely in compiler hell. I ran into bug after TypeScript bug. The compiler (when it wasn’t freezing up) would spew out literally thousands of random unrelated errors. Line numbers were rendered meaningless, debugging became next to impossible. The days I wasted trying to carefully get the correct sequence of my source files so the compiler wouldn’t trip over on a circular dependency just wasn’t funny. You’ll find my various rants and bug reports on the TypeScript site. It was a dark and bleak time.

The problems caused me to miss the original launch deadline I had set myself, so I decided to ask the community if they would care if I dropped using TypeScript. The response was overwhelming. 50+ replies later and it was clear: virtually no-one wanted the TypeScript version anyway. They were all JavaScript developers and my use of TypeScript was scaring them away and stopping them from using it as much as they wanted to. This was a real wake-up call for me and the decision was made to abandon using TypeScript entirely. I wrote off the weeks and weeks of wasted time and moved back to plain good-old JavaScript. We still fully intended to release a TypeScript definitions file, so you can make your game using TypeScript, we just dropped building the framework itself using it.

I knew that making this change meant I’d have to recode the whole library from scratch. Obviously I had a lot of the code already done in TypeScript, but it would still need redoing. But it provided me with the opportunity to make one more fundamental change: the integration of Pixi.js into the core. Pixi is a library that provides a WebGL and Canvas 2D rendering interface. Given that WebGL is now in Chrome on Android and finally in IE11 it’s important to no longer ignore it. And with an equally powerful canvas renderer it would cover both sides. This was a big decision to make though, as Pixi has very specific ways of doing things and it would make features like multi-camera support next to impossible to achieve. But ultimately the benefits outweighed the cost.

So I literally started with a fresh Pixi powered slate, hundreds of files of TypeScript functions as reference, and set to work. Honestly, it was like taking in a breath of fresh air. After weeks and weeks of struggling and fighting with the horribly broken TypeScript compiler I was suddenly set free. If you’re interested you can read through the “March towards 1.0” thread on the Phaser forum, where I document the transition pretty much every day. It gave me the opportunity to take all the really good bits from Phaser 0.95, blend them with the power of the Pixi display list and produce a final product I am genuinely proud of. Phaser 1.0 has close to everything I want from a game framework and I know I can easily extend it with plugins to cover the additional features I’ll need going forward.

Community Powered

I can’t state enough how important the small but fantastic Phaser community has been through-out all of this. It’s one thing for me to be using Phaser daily because I knew how it worked, but to see other developers release some truly fantastic games made using it (check out Connect Me Factory for a great example) really stunned me. They were encouraging me on through the forum, contributing ideas and now lots of them are diving into the 1.0 release and sharing their experiences. And they’re doing all this by just reading my examples and the source, as lots of the documentation is still missing.

I took the decision to launch before the API documentation had been completed because I knew it wasn’t far away. Today a new member of the Photon Storm team, Alvin, started working for us, and he’s cracking through the docs and examples. Having him fully dedicated to them while I deal with bug reports and client projects will ensure we get them finished quickly. So I’m confident that we’ll have the API docs brewed within a few weeks and lots of great new examples to learn from too.

Until then I still urge you to download the framework and have a play. There is a getting started guide on the web site for those new to HTML5 game dev and an ever growing collection of examples to pick the code apart from. And of course the forum is simply buzzing – ask a question and someone will reply within a matter of hours!

So please download, experiment and share and don’t be afraid of asking if you need to. I’m not even close to finished on what I have in store for Phaser. In my mind it’s a living breathing framework and this site will reflect that going forwards. My eternal thanks go out to those who helped more than they know: to Tom and Ilija for the sterling work on the web site and logo, to Mat Groves for creating Pixi and putting up with my stupid questions over GTalk and to everyone else who posted positive feedback to me one way or another.

Go and play, it’s going to be fun.

http://phaser.io

Posted on September 16th 2013 at 2:30 pm by Rich.
View more posts in Phaser. Follow responses via the RSS 2.0 feed.