Welcome to Issue 75 of Phaser World

Hi everyone! This is a pretty big issue, mostly thanks to the screen shots in theDeveloper Progress section. I'm aware that some email clients (looking at yougmail) truncate the newsletter after a certain length. But you can read it online, oreven download a PDF if you prefer, and please do! because there's some neatcontent below :)

Until the next issue, keep on coding. Drop me a line if you've got any news you'dlike featured (you can just reply to this email) or grab me on the Phaser Slack orDiscord channels.

Games made with PhaserEuphrosine wants ten dots

Game of the Week You are the ladybug Euphrosine and you must run,jump, climb and float to collect 10 dots on your back.

Burbles.io

Staff Pick Sink or swim in this massively multiplayer bubbleshooting ship game.

Plate on a Stick

How long can you balance a spinning plate on astick? In this fun physics action game.

Bouncr

How far can you go? Just tap to change direction anddodge the obstacles.

Forty Thieves Solitaire

The game of solitaire played with 2 decks at once -plus the developers making-of article.

Phaser News & TutorialsPlatformer Games Workshop

The complete 'Make a platformer' games workshop isnow available online.

Pudi Tutorial Part 1

A new tutorial series on creating a game like Pudi, amixture of match-3 and Tetris.

Plugin System

A project aimed to help you when building Phaserplugins.

Responsive Game Tutorial Part 1

Part 1 in a new series of tutorials on how to Make aresponsive Phaser game.

Responsive Game Tutorial Part 2

The second tutorial in the series on making responsivegames.

Patreon Updates

Thank you and welcome to the following awesome people who joined the PhaserPatreon this week: Wayward Worlds, Travis O'Neal, Jouni Airaksinen andJose 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 reasonwe'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 wellas 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 repocontributor status to samme a few weeks back, and the results have beenfantastic. He's been doing some stellar work. So many PRs merged, issues fixedand tests made. It's great to see all of this activity, and I'm sure we aren't far off a2.7.6 release.

Phaser 3 UpdatesThis week I focused on the new Animation Manager, and also adding in someextra features to the Loader. Felipe worked on adding shader support. As usualthe 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 fileformats: SVG files, and HTML files. SVGs can now be loaded as part of thepreload process, and are converted into textures automatically on load, which canthen 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 aboutolder browsers too much.

The other file type I added was HTML. It loads a block of HTML, then renders thatto a texture. As with SVGs this can be used on any texture based object. In thecrude example below you can see a CSS gradient on a div, with some pre tagsand 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 inrendering instruction screens for example.

Phaser 3 Shader EffectsFelipe has been working on adding shader support into v3. Obviously shaders areused in the WebGL renderer, but this update exposes them to you via a newGame Object called an EffectLayer.

EffectLayers are a way of redirecting the WebGL rendering target of each GameObject to an offscreen framebuffer. You can later apply custom post processingshaders to that offscreen framebuffers color buffer, which in the case of anEffectLayer is a texture. You can even access the texture from the EffectLayervia the dstRenderTexture property.

Using an EffectLayer is very simple, being just a single call to the Game ObjectFactory, but for taking full advantage it may require understanding how shaderswork. You can find a simple and useful explanation of how to use fragmentshaders 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 andsetting of shader uniforms, but in the meantime this is an example of how to usean EffectLayer, adding an Image Game Object to it:

As you can (hopefully!) see in the code above the Effect Layer is simply a pieceof fragment shader source with a position and a size. You can then add normalGame Objects to the Effects Layer, and the shader will be applied to them. Theresult looks like this:

Of course this is a very simple effect, just to demonstrate it running, but with alittle 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 theimage to see the demo running)

Hopefully you can see how easy this will be to use :) There's more work to bedone on it of course, but it's a great start - and you're free to play around with itright now to test it out. You can edit it live online, just by changing the labs URL tosay 'edit.html' instead of 'view.html', or you can pull the code from the repos andbuild it.

New Animation ManagerWhile Felipe battled with shaders, I personally spent this week working on thenew Phaser 3 Animation Manager. I'm extremely pleased with the progress madeand the features added. It's already significantly more advanced than anything wehad in v2, while being a lot less heavy on both the CPU and memory use. It's abig topic to cover though, and will take up a whole issue to explain, so look out forit in issue 76 next week. Until then, here are just a few of the features that are inand working already to whet your appetite, and some of the choices I made whenbuilding it.

Global Animations

Animations are stored globally. In v2 every single Sprite had its own animationmanager, and would maintain its own collection of frames. This worked, but waspretty 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 framesand associated data. That needed to change.

So in v3 there is a single global Animation Manager, and all animations arecreated and stored within it. When you play an animation onto a Sprite all theSprite really receives is a reference to the animation, and a bunch of playheaddata. Going back to our 100 bullets example, under v3 there is only 1 instance ofthe 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 themanager which frames should be used, but it also allows you to set playbackcontrols. 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 therequired framerate for you. You can also now specify a delay before theanimation will start, a repeat value to set it to repeat however many times youneed (including forever), along with repeat delay, allowing it to pause beforerepeating again. There's even a yoyo setting, so it can play forwards andbackwards again, before repeating (if set).

All of these settings are configured on the animation itself, so are picked upautomatically by any Sprite that plays it. However, the Sprite can override themall too, changing them as it needs without impacting the data stored in the globalanimation - so if a specific sprite needs to have a different delay for example, itcan do so:

There's a lot more I want to talk about, including features like transitions: so youcan 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 canmake specific frames of the animation do things to the sprite, like change itsvisible 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 GuideIf you're interested in helping evolve the shape of Phaser 3, then please join thePhaser 3 Google Group. Discussions this week have included varying renderloops. The group is for anyone who wishes to help shape what the Phaser 3 APIand feature-set will contain.

The Phaser 3 Developers Guide is available. Essential reading for anyone who'dlike to help build Phaser 3.

Geek Links

ASCII Patrol is a conversion of the arcade game Moon Patrol into ascii. Thisappears to be becoming something of a trend recently, and it certainly looks thepart. What sets it apart is that it's actually proper ASCII art, and not just a shaderthat converts pixels into text.

Fantasy consoles, like pico8, are fascinating to me. And this is a really greatwrite-up on the various consoles out there, and their respective merits.

Apparently the world record for retweets could be broken over some free chickennuggets.

Got a suggestion for a Geek Link? Email it to me (support@phaser.io)

Phaser ReleasesThe 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.

©2017 Photon Storm Ltd | Unit 4 Old Fleece Chambers, Lydney, GL15 5RA, UK

Web Version Preferences Forward Unsubscribe