After 6 weeks work it's finally here! Sporting a brand new graphics pipeline, fully pimped-out Render Textures, Matter.js updates, SVG resizing and loads, loads more.

Article by Richard Davey. Posted on 4th Sep 2018.   @phaser_


Today I released Phaser v3.12. This release represents the past 6 weeks of development both from myself and the wider community. As usual the updates are sweeping, significant and important.

In 3.11 I overhauled the TextureTintPipeline, the WebGL batch used to render all texture based Game Objects. In 3.12 I did the same to the FlatTintPipeline. This pipeline was used exclusively by the Graphics Game Object to draw filled and stroked primitives in WebGL, as well as by the renderer for Camera effects. I took a close look at the shaders being used and realized a lot of GPU ops could be saved if they were merged.

Previously, mixing Graphics objects and Sprites in your game would cause complete batch flushes as it rebound the shaders. Now, in 3.12 this bottleneck has been removed. After a lot of hard work I was able to remove the pipeline entirely, saving 42.3KB and 1000 lines of code in the process. A nice side effect is the ability to now be able to texture Graphics objects :)


Another large improvement in 3.12 happened with Render Textures. I rewrote them from scratch as I wasn't happy with the previous implementation. Before 3.12 they were very restricted in what you could do with them, involving a complex internal matrix stack for simple transforms and the inability to draw anything but textures. Now, they've been pimped to the max! Not only do they sport an internal camera system, you can literally draw any type of Game Object to them, including complete Scenes. This opens-up a whole new world of possible effects.

I also completed all of the documentation for this class, getting us another step closer to full coverage.

As usual, the new features and updates don't end there! I also added the ability to support 3 new rendering modes for your tilemaps, allowing you to pick from four draw orders for the tiles per layer. Matter.js was updated from 0.13.1 to 0.14.2, which bought in a few nice fixes re: collision resolution. A whole stack of resolution and high-dpi related fixes landed as well. You can now set Text objects to use high-dpi, or the Game as a whole, and it'll react a lot better than any previous version! There's still more work to do here, but it's a strong start.


One of my favorite new features is a simple but useful one: the ability to play animations in reverse :) You can trigger it during playback or in advance and it fully supports yoyo and repeating.

Influenced by a great community PR, when loading an SVG file you can now change the size of the SVG during the load process, before it is rendered to a texture. This is really helpful if you wish to increase SVGs that have small viewBoxes set, or want to try and reduce memory consumption from SVGs with extra large dimensions. You can either pass in a fixed width and height or a scale value and it'll adapt accordingly.

I love it when community PRs lead to innovations like this. It literally benefits everyone. As always, I'd urge you to carefully read the Change Log, especially if upgrading from an earlier version in an existing project.


Development of 3.13 has started already. There were some new features created during the 3.12 process that I didn't feel were ready to release yet, including the Scale Manager, DOM objects and Facebook Instant Games Plugin. You can expect to see these in 3.13 and 3.14.

Again, a massive thank-you to everyone who supports Phaser on Patreon and PayPal. It really, genuinely does make a difference as it allows me to work full-time on Phaser, which we all benefit from. If you can help, even just $1, please do, as there are so many more exciting things we can do with Phaser 3 together.

Grab the latest build from GitHub, npm or CDN and see the full Change Log for details. Also, be sure to read the past 4 or so issues of the Phaser World newsletter, as they cover the new features in more detail.