Welcome to Issue 75 of Phaser World
Hi everyone! This is a pretty big issue, mostly thanks to the screen shots in the Developer Progress section. I'm aware that some email clients (looking at you gmail) truncate the newsletter after a certain length. But you can read it online, or even download a PDF if you prefer, and please do! because there's some neat content below :)
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.
Games made with Phaser
Game of the Week
You are the ladybug Euphrosine and you must run, jump, climb and float to collect 10 dots on your back.
Staff Pick
Sink or swim in this massively multiplayer bubble shooting ship game.
How long can you balance a spinning plate on a stick? In this fun physics action game.
How far can you go? Just tap to change direction and dodge the obstacles.
The game of solitaire played with 2 decks at once - plus the developers making-of article.
Phaser News & Tutorials
The complete 'Make a platformer' games workshop is now available online.
A new tutorial series on creating a game like Pudi, a mixture of match-3 and Tetris.
A project aimed to help you when building Phaser plugins.
Responsive Game Tutorial Part 1
Part 1 in a new series of tutorials on how to Make a responsive Phaser game.
Responsive Game Tutorial Part 2
The second tutorial in the series on making responsive games.
Patreon Updates
Thank you and welcome to the following awesome people who joined the Phaser Patreon this week: Wayward Worlds, Travis O'Neal, Jouni Airaksinen and Jose Lema. And thank you to Cosmono for the donation.
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
Another week of significant work across all fronts, so let's dive in:
First of all Phaser CE has been going crazy the past few weeks. I gave repo contributor status to samme a few weeks back, and the results have been fantastic. He's been doing some stellar work. So many PRs merged, issues fixed and tests made. It's great to see all of this activity, and I'm sure we aren't far off a 2.7.6 release.
Phaser 3 Updates
This week I focused on the new Animation Manager, and also adding in some extra features to the Loader. Felipe worked on adding shader support. As usual the screen shots are all linked to examples, so click away!
New Loader Filetypes
After some experimentation I updated the Phaser 3 Loader to handle 2 new file formats: SVG files, and HTML files. SVGs can now be loaded as part of the preload process, and are converted into textures automatically on load, which can then be assigned to any texture based Game Object:
SVG files have obvious merits, their typically tiny size being one of them. Browser support is pretty good too, especially if you don't need to worry about older browsers too much.
The other file type I added was HTML. It loads a block of HTML, then renders that to a texture. As with SVGs this can be used on any texture based object. In the crude example below you can see a CSS gradient on a div, with some pre tags and a few fonts. It's a daft little example, but hopefully shows what is possible:
Browser support is much more limited on this, but if you can use it, and need it, it's a damn handy thing to have available. I can especially see a use for it in rendering instruction screens for example.
Phaser 3 Shader Effects
Felipe has been working on adding shader support into v3. Obviously shaders are used in the WebGL renderer, but this update exposes them to you via a new Game Object called an EffectLayer.
EffectLayers are a way of redirecting the WebGL rendering target of each Game Object to an offscreen framebuffer. You can later apply custom post processing shaders to that offscreen framebuffers color buffer, which in the case of an EffectLayer is a texture. You can even access the texture from the EffectLayer via the dstRenderTexture property.
Using an EffectLayer is very simple, being just a single call to the Game Object Factory, but for taking full advantage it may require understanding how shaders work. You can find a simple and useful explanation of how to use fragment shaders to manipulate the pixels on the EffectLayer rendering pass in this tutorial.
We will extend the features available in an EffectLayer to allow for easier use and setting of shader uniforms, but in the meantime this is an example of how to use an EffectLayer, adding an Image Game Object to it:
As you can (hopefully!) see in the code above the Effect Layer is simply a piece of fragment shader source with a position and a size. You can then add normal Game Objects to the Effects Layer, and the shader will be applied to them. The result looks like this:
Of course this is a very simple effect, just to demonstrate it running, but with a little more time spent in the shader code you can start creating things like this, and easily merge them into the display list of your game (as always, click the image to see the demo running)
Hopefully you can see how easy this will be to use :) There's more work to be done on it of course, but it's a great start - and you're free to play around with it right now to test it out. You can edit it live online, just by changing the labs URL to say 'edit.html' instead of 'view.html', or you can pull the code from the repos and build it.
New Animation Manager
While Felipe battled with shaders, I personally spent this week working on the new Phaser 3 Animation Manager. I'm extremely pleased with the progress made and the features added. It's already significantly more advanced than anything we had in v2, while being a lot less heavy on both the CPU and memory use. It's a big topic to cover though, and will take up a whole issue to explain, so look out for it in issue 76 next week. Until then, here are just a few of the features that are in and working already to whet your appetite, and some of the choices I made when building it.
Global Animations
Animations are stored globally. In v2 every single Sprite had its own animation manager, and would maintain its own collection of frames. This worked, but was pretty damn heavy. If you had an animated bullet for example, and 100 bullets, that would be 100 animation manager instances, each with its own set of frames and associated data. That needed to change.
So in v3 there is a single global Animation Manager, and all animations are created and stored within it. When you play an animation onto a Sprite all the Sprite really receives is a reference to the animation, and a bunch of playhead data. Going back to our 100 bullets example, under v3 there is only 1 instance of the animation, and instead each bullet just maintains a mini timeline of its own, tracking its play through the animation.
Animation Controls
Animations in v3 are built by providing a configuration object. This tells the manager which frames should be used, but it also allows you to set playback controls. For example you can now set either a framerate (in frames per second) for the animation, or you can specify a duration instead, and it'll calculated the required framerate for you. You can also now specify a delay before the animation will start, a repeat value to set it to repeat however many times you need (including forever), along with repeat delay, allowing it to pause before repeating again. There's even a yoyo setting, so it can play forwards and backwards again, before repeating (if set).
All of these settings are configured on the animation itself, so are picked up automatically by any Sprite that plays it. However, the Sprite can override them all too, changing them as it needs without impacting the data stored in the global animation - so if a specific sprite needs to have a different delay for example, it can do so:
There's a lot more I want to talk about, including features like transitions: so you can define a set of frames that are played when a sprite is playing one animation, and is then told to play another. Or the per-frame settings: for example you can make specific frames of the animation do things to the sprite, like change its visible property, or change its alpha, or anything you like via an update callback. But I'll cover this, and more, next issue.
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
ASCII Patrol is a conversion of the arcade game Moon Patrol into ascii. This appears to be becoming something of a trend recently, and it certainly looks the part. What sets it apart is that it's actually proper ASCII art, and not just a shader that converts pixels into text.
Fantasy consoles, like pico8, are fascinating to me. And this is a really great write-up on the various consoles out there, and their respective merits.
Apparently the world record for retweets could be broken over some free chicken nuggets.
Got a suggestion for a Geek Link? Email it to me (support@phaser.io)
Phaser Releases
The current version of Phaser CE is 2.7.5 released on March 23rd 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.