Phaser Trailblazers

New projects bring new opportunities to hungry devs. All of our sites here at Blake use the same Javascript Framework that has served and continues to serve us well. From the ashes of Flash rose Caper, based on the CreateJS framework, which allowed the content team to create fun and vibrant activities for children and parents during the early iPad years.

But time moves quickly in the mobile world, and today’s phones are becoming as fast as computers from the last decade. It’s opening up the market for applications that have more moving parts, more complex game mechanics, and higher resolution graphics. When a fresh opportunity places itself on our desk we jumped at the chance. Through a small R&D phase we decided on Phaser. Phaser is making a name for itself in the world of HTML5 games, bringing Javascript into the foreground as a viable game language for this modern mobile-focused world. So using the lessons we learned from Caper, we’ve begun work on Jester, our brand new activity framework for this upcoming project release.

One of the major pulls for Phaser came from the cuts and bruises we suffered at the hands of CreateJS and Caper, while the end result is a powerful tool for the team to create fun activities, it took a long time to get where it was. One of the consequences of an evolving framework was that of legacy code. As much as we’re to move forward, we needed to continue to cater for those lessons built in the early days. Which meant either continually rebuilding or actively retrofitting with caution. Given the hundreds if not thousands of Maths and Reading games, the decision was made with focus on the latter. Legacy code is something that every dev must deal with in their career, it’s as inevitable as mystery bugs and strained deadlines for us codemonkeys. We were left with barely used or forgotten about classes that we were too afraid to touch, and there has been an ongoing effort to update the core engine that is proving difficult given the sheer amount of old code it is affecting. While this still remains a key issue for the team which we are working towards, the appeal of a fresh start was too good an opportunity to pass up.

The community that Phaser provides was another big tick in the box for the engine. While we loved CreateJS the community involvement had died down somewhat over the last few years, while Phaser is very developer-focused, with the creator in constant communication with the users. Updates are pumped out on the regular and solutions to problems that arise with builds are taken care up at a much faster rate.

With Phaser chosen as the core engine we began throwing resources at it. After a lengthy naming process, we finally chose one, and thus Jester was born.

Making a new framework though, even from an existing engine, has its headaches. For starters we’re moving from CoffeeScript to ES6, while not a big change in terms of syntax, it does have its own set of caveats. The use of linters and an evolving guideline for ‘Best Practices’ all require debate and discussion to reach maximum efficiency, as does the approach to a more functional way of coding. The jury is still out on this as we have a strong love for a more object-orientated way of programming, but we’re never ones to shy away from at least giving it a go. Our devs have been tinkering away at the keyboards, hammering through build errors and compile issues, and drinking more coffee than humans should ever drink. But the result of this progress is beginning to show, and already we’re seeing the benefits.

For a lot of our animations we use a skeletal animation library that exports straight from Flash, allowing our veteran animators to use what they’re comfortable with and still be able to provide a HTML5 friendly solution. Caper used this library but it was taxing on the engine, with no more than two fully animated characters being allowed at any given time. We tried some other solutions on the market but opted to adapt the existing library into Jester, and the result was stunning. Over 40 fully animated characters jumping about with barely a drop in the framerate. That was the point at which we knew we were on to a winner with the Phaser engine.

TextureMap and JSON exported from Flash and assembled in Javascript

While simultaneously allowing our artists more creative freedom and giving our devs something new to play with, Jester is beginning to become a well-rounded solution for future projects here at Blake. Pushing our content team, and the company as a whole, forward with moving technology.

Maybe VR is the next thing we’ll look at. Only time and our sanity will tell.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.