Happy Birthday Phaser!

On April 5th 2013 I started work on the very first version of Phaser. A couple of weeks later, on April 12th, version 0.5 was pushed up to GitHub and the rest, as they say, is history. You can read all about the very first version and see it running in this article, which I wrote back when it was celebrating turning 3. Today, however, marks the 5th year anniversary of Phaser. Yup, our little framework is growing up!

I recently saw this tweet that warmed every inch of my heart. In it, you can see a class of students who were being taught game development as part of the Primary & Vocational Education GameDev Project in Spain. Laptops covered in Phaser stickers are fun enough for me to see, but the thought of those kids being taught how to create their own games is even better. Honestly, it's what Phaser is all about.

To say things have changed a lot in the past 5 years is a vast understatement. It's been quite the journey, both personally and professionally. I've made so many mistakes along the way it doesn't bear thinking about sometimes. Usually as a result of trying to juggle too many things at once, sometimes as a result of ignorance or not planning far enough ahead, but ultimately I believe that even if the decisions made weren't always correct, they were absolutely always made with the very best of intentions.

The one overriding thing that has persisted for the past five years is that I always want Phaser to get better and be more useful. To have more features. To keep on growing and empowering developers, new and old, to create better games. Or just create games more simply. I've never once wavered in that belief or vision, and I truly don't think I ever will. Being able to create something is a gift we all have in common. Being able to share the means to create is what keeps me going on. Because let's face it, you lot are making some truly amazing things. It's humbling to think there are developers, indeed whole companies, out there, who are earning their living creating games in Phaser, or resources based on it.

While I'm reminising, below, you can see the very first colored sketch that Ilija drew of the infamous Phaser logo:

I honestly feel that his vision for the Phaser visuals over the years has really helped give it an identity and brand that lots of developers recognize, even if they don't use it.

In the coming weeks I'm going to wrap-up the 3.17 release and get it out there. It's actually Easter break here in the UK, so the schools are closed and other than a couple of days public-holidays, I can actually focus for longer than usual day-to-day. Regular readers will know that this newsletter is a bit late, this is because I've been overwhelmed with trying to complete a growing stack of coding tasks, so much so that I just couldn't find the time to take a whole day out of my working week to publish another issue. Part of me was frustrated that I was struggling trying to get 3.17 issues resolved, and didn't feel there was anything interesting to write about in a Dev Log. And another part of me just wanted to knuckle down and give my undivided attention to coding, rather than taking the considerable time out that is required to author the newsletter. Today being the 5th birthday, I had to make an exception.

Realistically I'm going to allow myself to publish Phaser World every two weeks, rather than weekly, for the next few months. This should hopefully be less intrusive on my coding, but still regular enough for you to feel connected to what's going on. So, what has been going on? ...

Arcade Physics 2

There were a number of issues in GitHub relating to some problems with Arcade Physics, mostly around the way it was stepping out of sync with the game update, meaning you couldn't do things like call colliders from within a Scene update. I fixed that within a couple of days and then started tidying up other small parts of AP that had been bothering me for a while.

For example, I added the functions overlapTiles and collideTiles, which allowed you to pass a Body along with an array of tiles to a callback, and have only those tiles checked against the body. The Tiles don't have to have been enable for collision, or even be on the same layer as each other, for the checks to work. You can provide your own process callback and/or overlap callback. This is handy for testing for overlaps or collisions for a specific Tile or area in your map, not just based on a tile index.

I also added overlapRect which you can test by clicking the image above. This allows you to get all bodies within a defined rectangle. Again, this is another way of quickly filtering bodies based on spatial criteria, which can be incredibly useful. What's more, it was a simple extension of the RTree functionality already built into Arcade Physics, making the cost effectively 'free'.

However, as is often the way, the more I worked inside of Arcade Physics, the more I loathed what I saw. It's one of the oldest parts of Phaser, having changed very little since that first version of it 5 years ago. There are so many ways in which you can break it so easily (just try stacking two bodies on-top of each other in a world that has gravity!) that at some point a few weeks ago I'd just had enough and figured it was time to whip it into a better state.

Which is what I've been doing (among other work) for the past few weeks. If you monitor the Phaser GitHub you'll see what I've been coding away on it for weeks now, day and night, trying to turn it into something more useful and functional, while retaining the same format and core API as before. I wanted to resolve the issue of bodies not being able to stack. I wanted to resolve the issue of bodies that you control via tweens or user input to be able to calculate their own velocities, making them still useful for collision and overlap checks! It took a lot of work, and it's still not 100% ready, and honestly it got quite overwhelming at points - because for everyone bug I'd fix, another bunch would magically appear. Sometimes you can just get too close to a problem to be able to see the solution.

I took a couple of days away from it to finish off the Phaser 3D Class (see below!) and write this newsletter, so I can revisit the final lingering bugs next week and hammer it out. I'm going to set myself a hard target of 3 days. If I haven't resolved what I need in that time, I'm going to revert every single change and release 3.17 with the previous version in place. By the end of Easter I want Phaser 3.17 published. Hopefully, fingers crossed, that will include Arcade Physics 2.

Phaser 3D

Each month I put together a pack of code examples that are then sent to everyone who supports Phaser on Patreon (or via PayPal). For the April pack, I had the idea of taking the work I had done with the new Extern Game Object and merging that with Three.JS, wrapping it in a helper class that exposed the most common parts via 60+ helper methods and packaging it up as Phaser 3D. Back when I was working on Spine support in Phaser 3, I created a brand new teeny tiny Game Object that had one special purpose. It is called an Extern and what it allows is for Phaser to pass-off full control over the gl context to a 3rd party, which can then do whatever it needs with it, and returns back to Phaser again.

Phaser3D is a plugin that uses a new Extern Game Object and injects Three.js into it. It configures it properly for you, so that three.js can happily write to the current context and then restores itself cleanly when it's finished. Because Externs sit on the display list like any other Game Object, you can layer your game content around a three.js scene. This means you could add 3D backdrops behind your 2D games, or 3D objects over the top of a 2D game, or any combination of.

Of course, you can fully control three.js from Phaser too. This isn't some cut-down hobbled version of it, it's literally the entire library. Every single thing three.js can do, you can do via Phaser3D. There are loads and loads of helper methods to ease your workflow. These cover features like creating all supported forms of geometry, add spot, point or hemisphere lights, enabling shadows and fog, creating cameras, groups and all lots more. I've also included support for GLTF Models. You can, of course, load any other format, but as GLTF is the new standard, I included methods directly for it.

You can preload any textures or models that three.js needs via the Phaser loader, so they can be part of your normal preload sequence, or you can use the three.js loader instead - it's up to you.

Included in the bundle are no less than 34 examples, covering all kinds of different features, from geometry to cube maps to an example showing how to layer a normal 2D Phaser game over a 3D backdrop. There's even a little demo showing how to use Matter.js bodies for 3D objects. It's a powerful combination and I hope Phaser backers have fun playing with the demos and creating stuff.

I will release Phaser 3D publically in a few months time, but for now backers get to play with this first, as they're the ones that enable me to work on Phaser full-time, so it's my way of giving back to them. It was also a really nice creative break for me. I had real fun putting the demos together and yet I only really scratched the surface of what could be done with it!

3.17 Release

As I mentioned above I'm going to spend the next two weeks working solidly on getting 3.17 ready for release. Hopefully, this will include AP2, but even if it doesn't there are still a bunch of important fixes and useful new features in there. Thank you for your patience with this, and for those of you submitting pull requests and issues. I very much appreciate the time people put in to help the project out.

Right now I'm going to have a cup of coffee and a slice of 5th birthday cake and then get back to the coalface. 3.17 ain't going to release itself :)