Phaser CE v2.7.7

Last week when I said there was an absolute fire burning under Phaser CE at the moment I wasn't kidding! This week we published v2.7.7 to GitHub and npm. It's mostly bug fixes, but some really great ones - including lots of work on getting compressed textures running. Again, congratulations to the team who worked on it, and to samme for pulling it all together.

Spring Cleaning

I spent a long time this week tidying up all of the various Phaser resources and repos. It's basically the un-glamorous side of the open source life. In preparation for the start of Phaser 3 beta testing I have cleaned out the Phaser GitHub repo issues list. All of those issues which were related to the Phaser web site or examples, I fixed, and the rest were asked to re-test against Phaser CE. I also closed down all of the lingering PRs. Lots of the issues I closed were feature requests, which have all been logged in the Phaser 3 wish list. I updated the issues template too, so hopefully people will understand how to get support for v2 now.

After doing all that I fixed lots of the broken Phaser Examples. Many of the filter examples didn't load (because they couldn't get the shaders, or similar path issues). These are all now working. I worked through all of the Examples PRs, merged most of them, and responded or closed all issues as well.

It was all a lot of work, and I'll be honest, not much fun - but it needed doing. We're now in good shape though and it will be easy to keep on top of things from here on.

Mozilla Open Source Support

Based on the suggestions of two Phaser patrons I spent a day this week working on an application for Mozilla Open Source Support. MOSS is essentially Mozilla helping fund open source projects that align with their manifesto. They have varying amounts of grants available, and honestly it could make a massive difference for Phaser. So I made the decision it could be well worth the time writing the application. They, quite fairly, ask for a lot of details, and it took a while to fit it all in. If it works out, the funding could help pay for Phaser for months to come. If it doesn't, at least it was good experience applying for a grant. Fingers crossed. The decision process starts soon, so hopefully there won't be long to wait.

You Shall Render Pass

While I've been stuck in the realm of Easter, admin and grant applications, Felipe has been working on the new Render Pass Game Object for Phaser 3. I'll let him explain. As usual, click the screen shots for demos, or click the code to open the online code editor with the example loaded.

You can use a Render Pass Game Object if you want to apply per object shaders. This can be useful in many cases. From creating more advanced effects like bitmap masking, to simple lighting and even deferred shading. It can also be used to bake elements into a texture and then avoid re-rendering them individually. For example you could use it for rendering UI, which isn’t constantly updated. This gives you much more control over how and when to render something, and the way in which the renderer flows.

Here is a small code sample of how to use a render pass:

The code is getting a fragment shader from the cache (loaded in the preload function), creating an image, and then defining an 800x600 sized render pass. This is set to use the loaded shader, is cleared, and then the image is rendered to it. Because the image is rendered to the render pass (and not to the standard display list) it has the shader applied to it, which looks like this:

Taking this to the next step we can also create dynamic bitmap masking effects by composing a masking texture at runtime. We then use that texture in another render pass to apply a masking effect on everything that is rendered using the render pass. Here is the code:

One render pass is responsible for creating the mask (in the screen shot below that is all of the white Phaser logos). The other render pass takes the mask and then applies it to any image rendered by that pass (the Einstein picture).

Click here to see the above example running.

If you think about a Render Pass as being a shader that only impacts those images rendered to it, that is itself a texture, then it opens up all kinds of possibilities. You can feed the output of one Render Pass into another, such as the masking demo above, but it can go much further than this. For example here is a checkboard shader being used to mask two images:

Here is another example, showing a nice way to reveal an image. Or how about using a plasma effect to transition between two images:

It's not just about masking though :) Here is a simple lighting system demo, created by generating a normal map texture at runtime:

Move the mouse around in the above demo to move the light. View the source to see how it is built up, how the uniforms are applied, and how simple it is!

Using a combination of the Effects Layer, which we talked about a couple of issues ago, and the Render Pass, you have very fine grained control over the rendering processes and shaders in your game.

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.