Welcome to Issue 77 of Phaser World
With Easter over I trust you're happily full of chocolate, and enjoyed your extra days off. I've been spring cleaning the Phaser repos and Felipe has been in the land of shaders (more of that in the Dev Progress this week), and you've been creating more great games and tutorials. There's also another new Phaser CE release!
If you're taking part in Ludum Dare this weekend then please tag your game #phaser (or #phaserjs) so we can find it :) And of course send us links to play by email, on Slack, or twitter.
Until the next issue, keep on coding. Drop me a line if you've got any news you'd like featured (you can just reply to this email) or grab me on the Phaser Slack or Discord channels.
Final week: Zenva are having a huge end of season sale. Their popular Phaser courses are at massively reduced prices - some down from $150 to $29 - Check it out before it ends! If you buy a course via that link then a % goes towards Phaser development too.
Games made with Phaser
Game of the Week
Use sweat, fire, force of will, and a well-timed key presses to turn raw material into an authentic blade, in this game based on the TV series.
Staff Pick
A turn based strategy game, featuring a wide variety of units to acquire and put into battle.
Drop the bricks into the pile and see how high you can go, in this compelling one button game.
A fun but brutally challenging platformer. Wall jump your way to the end, and avoid everything!
Throw the ball and hit the burgers, but avoid the dudes.
Phaser News & Tutorials
The latest version of Phaser CE is now released, including new fixes, especially with compressed textures.
A webpack asset loader for Phaser, including parallel load support, all file types, retina postfix support and compressed texture support.
A massive update to the excellent Phaser Editor, including long-awaited MacOS support, Sprite prefabs, TypeScript support and lots more.
In this tutorial you'll learn how to make your MMO scale better, using Phaser Quest as an example.
Clients Synchronization Tutorial
A tutorial on how to handle client synchronization in real-time multiplayer games like Phaser Quest.
Patreon Updates
Thank you and welcome to the following awesome people who joined the Phaser Patreon this week: feiss, Akash Harriram, Rajasekaran Senthil Kumaran, Cutler Cox, Samuel Batista, Bruce Onder and Patrick TenHoopen. Thank you to Yotam Gingold, Andrea Laconi and Brahma for the donations. And thank you to Az Cross, Matthew and Mark Lindhout for increasing their pledges.
Lots of new patrons - mostly in response to my article last week about how we'd lost a large portion of income recently. It was really humbling to see you all respond, so thank you very much!
Patreon is a way to contribute towards the Phaser project on a monthly basis. This money is used entirely to fund development costs, and is the only reason we're able to invest so much time into our work. You can also donate via PayPal.
Backers are entitled for free monthly support from me via Slack or Skype, as well as discounts on plugins and books, and forum badges.
Development Progress
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.
Geek Links
Over the Easter weekend Titan released a new demo called Overdrive 2. It's running entirely on a Sega Megadrive (or Genesis for you US folk) and is utterly fantastic. Great music, great effects and astounding to think they made a Megadrive do this.
Biisuke Ball's Big Adventure Part 2 is just a brilliant video! Crazy, but brilliant.
A SCUMM-8 (point and click adventure game) created entirely in Pico-8. It's extremely impressive work!
Phaser Releases
The current version of Phaser CE is 2.7.7 released on April 20th 2017.
Phaser 3.0.0 is in active development in the GitHub v3 folder.
Please help support Phaser development
Have some news you'd like published? Email support@phaser.io or tweet us.
Missed an issue? Check out the Back Issues page.