Due to the rapid pace of change some links or details may no longer be correct.

Published in Phaser World Issue 69 on 24th February 2017 by Richard Davey   @photonstorm

Bitmap Text started and Keyboard Manager Updates


Have you seen Indie Game: the Movie? If you haven't then I'd recommend it. Not because it's accurate about how indie games are made these days, far from it, but because it's a great piece of film making. If you have seen it there's a part where Jonathan Blow is describing the creation of his game Braid, he likens it to 'digging for gold' and no matter where he strikes, he hits gold.

What he's describing is the way in which during a project you have good points, and bad points, but when you manage to string together a whole bunch of good points together in a flow, it really does feel like you've hit gold. It's fair to say that this week it felt like that with Phaser 3 development. Most days this week I've been on such a roll that I'll literally code all through the night, crawl in to bed at 5am, sleep for a bit and then carry on. Not because I have to, or am being forced to, but just because things are flowing so well I literally cannot stop myself from doing just a little bit more. It's not a sustainable habit of course, and I wouldn't recommend it long term, but now and again if you're on a coding high, it feels great to keep that going as long as you can. So what have we been up to this week?

BitmapText Merged In

Some months ago I talked about how Felipe had written a brand new Bitmap Text renderer, and we showed animated gifs of it in action. The feature was built in isolation (as v3 was in a state of flux at the time) but this week he merge it with the latest build and new renderers. Both the WebGL and Canvas implementations are done, and he created this example showing it rendering 56,000 characters (WebGL only naturally).


As it stands today we have got Images, Sprites, Blitter Objects, Containers and BitmapText all built and included. The next Game Objects to be added are Graphics and Text, which will be started next week. There are others of course, such as TileSprite, Video and the new PixelField object, but it feels to me like we can easily have a Beta 1 release without those included.

Keyboard Manager

At the start of this week I finished off implementing the Keyboard Manager. It has changed a lot since v2. It's significantly more powerful now, but has a lot less code overall, something we're trying to do everywhere in v3.

The biggest change, which will be continued as we add mouse and touch input, is that all DOM events, such as 'keydown', are now added to an internal Event Queue. In v2 when the event occurred we would deal with it instantly. I.e. if you had a callback bound to a specific key press, it would be fired as soon as the DOM event landed on the doorstep. This is no longer the case in v3. All events are placed into an Event Queue, which is then dealt with at a precise moment in the game loop. This means if a callback is going to happen as a result of a key press, Phaser 3 now knows exactly when it will fire (and more importantly, so do you!). In v2 there is a lot of conditional code in place to try and trap issues that arose as a result of DOM events dispatching in less than desirable parts of the game loop. We can finally ditch all of that, keeping it cleaner and predictable as a result.

Keyboard Events

In v3 the Keyboard Manager will dispatch lots of new events you can listen to. As well as the obvious, KEY_DOWN and KEY_UP, it also dispatches events for standard key presses. Which means you can now do:


Want to only get the key event once? Just change 'events.on' to 'events.once'. You can also create Key objects, as you did in v2, which are useful when you need high intensity polling, such as keyboard controls for a player.

Key Combos

Another new feature in v3 is the ability to set-up Key Combinations. These combos allow you to define a sequence of key codes and map them to a combo. If the user then enters the combo in the correct sequence it will dispatch an event. This is easier to explain with a bit of code:


In the above if the user enters 'ABCD' the combo event will dispatch. There are all kinds of configuration options available. For example you can set a time limit between each key in the combo (if they take too long entering it, you can reset the combo). You can make the combo reset if they get a key press wrong, or let it carry on going. Konami code anyone? :)


As well as working on the keyboard manager I also spent the tail end of the week working on a new Phaser class system. This offers a way for you to extend base Phaser classes in a nice and clean manner, defining which components you want and having them merged in automatically. We're actually using the class system internally ourselves now for all the Game Objects. It's quite a major new feature and I'll cover it in more detail soon.

The next steps

We've been working really hard on Phaser 3 for months now. Yes, we definitely had a few missteps along the way, but the path we're on is solid, and there honestly feels like light at the end of the tunnel. As I mentioned earlier I would like to see the new Graphics renderer we built merged into v3, and also to sort out the life cycle of a Game Object, but once those things are done the next real task is to create some small games with it. Nothing too complex, but enough to know that we can push v3 beyond the simple examples we've been making so far, and use it 'properly'.

I also intend to start making new videos again. It was quite fun doing them before, and I think combined with the labs site it'll be good to visually show off what is possible. Realistically it feels like we've another couple weeks of tidying up and getting the final Beta 1 Game Objects in, and then we'll make some games and videos in advance of a Beta 1 release.

Thank you to everyone who has supported us during this period of development, especially those of you who are part of Patreon. I hope you'll be pleased with the end result!

Phaser 3 Mailing List and Developers Guide

If you're interested in helping evolve the shape of Phaser 3, then please join the Phaser 3 Google Group. Discussions this week have included varying render loops. The group is for anyone who wishes to help shape what the Phaser 3 API and feature-set will contain.

The Phaser 3 Developers Guide is available. Essential reading for anyone who'd like to help build Phaser 3.