Phaser Backers July Code Bundle
Greetings everyone! Another month, another packed Backers Bundle for you :)
Download the attached zip file, unzip it somewhere either in an existing web root (should you have something like WAMP or MAMP installed), or you can use 'npm install' followed by 'npm run start' to boot-up the included http-server and browse to the July folder of goodies.
This month we've got the following:
Avoid the Germs! This is another complete game. Move the mouse to guide yourself around and don't let the germs catch you. Try to collect as many rings as you can as you go. As usual, this game is split up into proper class files, so you can see the structure of a typical Phaser game.
3 Sets of Distortion Effects - These effects will work on any image you throw at them and can create some wonderfully trippy backgrounds for your games or title screens.
Self Updating Tweens - If you provide your own start and end callbacks to your tween properties you can create some pretty smart effects. The callbacks can embed any logic you require, making them properly dynamic (rather than being set at creation time). Have a look at the source to see.
Lava Planet & Protean Clouds - Two beautiful shaders :) Warning: Both likely to require desktop class GPUs.
4 Shader Buffer Effects - One of the changes I made in 3.19 was the ability for a shader to accept another shader (or, indeed, any WebGL Texture) as an input. They can now also render themselves to textures as well, rather than to the display list. This means multi-pass shaders are now really easy to create. Combine those with Render Textures and you have the option for some powerful combinations, such as sprite outlines, blurs and glows. You can see this used in several of the examples in this bundle, which I've tried to keep as flexible as possible for use in your own games.
Working on this feature made me realise that it would now be quite trivial to introduce the concept of Effect Layers back into the API. Something that existed in early beta versions, but was removed due to being incomplete. Equally, using the same approach there's the chance for Game Objects to have a filters property (along with a filter area), allowing them to render with their own shaders into specific areas that extend beyond the traditional texture quad.
There are plus and minus points to each approach. On the plus side, a Game Object specific filter means you could easily add a glow or outline effect to a single Game Object without needing to re-arrange your display list at all. Plus, if you are careful about the filter area size, you can keep memory use down. On the downside, a lot of these objects in your display list will thrash the batch, causing flushes and shader swaps per object.
An Effect Layer could work the same way as the buffer examples in this months bundle, just encapsulated into a single class. A combination of a Render Texture with its own Shader and a Container. You'd need to carefully manage your display list so you group objects that all live on the same Effect Layer, but the upside is that it's one batch flush and shader swap for the entire layer, not for every object within it. I'll keep experimenting with this in the coming months. For now, you can re-create an Effect Layer yourself using the approach I've taken in examples like the God Rays or Motion Fire.
Finally, I'd just like to say a big welcome to all the new patrons who have joined us recently. I hope you find the bundle useful and, most of all, inspirational. If anyone creates any cool examples of their own (either based on ones in the bundle or not) then please send them to me for a future pack.
Until the next post I hope you all have fun. Catch you in a new issue of Phaser World this week!
Greetings everyone! Another month, another packed Backers Bundle for you :)
Download the attached zip file, unzip it somewhere either in an existing web root (should you have something like WAMP or MAMP installed), or you can use 'npm install' followed by 'npm run start' to boot-up the included http-server and browse to the July folder of goodies.
This month we've got the following:
Avoid the Germs! This is another complete game. Move the mouse to guide yourself around and don't let the germs catch you. Try to collect as many rings as you can as you go. As usual, this game is split up into proper class files, so you can see the structure of a typical Phaser game.
3 Sets of Distortion Effects - These effects will work on any image you throw at them and can create some wonderfully trippy backgrounds for your games or title screens.
Self Updating Tweens - If you provide your own start and end callbacks to your tween properties you can create some pretty smart effects. The callbacks can embed any logic you require, making them properly dynamic (rather than being set at creation time). Have a look at the source to see.
Lava Planet & Protean Clouds - Two beautiful shaders :) Warning: Both likely to require desktop class GPUs.
4 Shader Buffer Effects - One of the changes I made in 3.19 was the ability for a shader to accept another shader (or, indeed, any WebGL Texture) as an input. They can now also render themselves to textures as well, rather than to the display list. This means multi-pass shaders are now really easy to create. Combine those with Render Textures and you have the option for some powerful combinations, such as sprite outlines, blurs and glows. You can see this used in several of the examples in this bundle, which I've tried to keep as flexible as possible for use in your own games.
Working on this feature made me realise that it would now be quite trivial to introduce the concept of Effect Layers back into the API. Something that existed in early beta versions, but was removed due to being incomplete. Equally, using the same approach there's the chance for Game Objects to have a filters property (along with a filter area), allowing them to render with their own shaders into specific areas that extend beyond the traditional texture quad.
There are plus and minus points to each approach. On the plus side, a Game Object specific filter means you could easily add a glow or outline effect to a single Game Object without needing to re-arrange your display list at all. Plus, if you are careful about the filter area size, you can keep memory use down. On the downside, a lot of these objects in your display list will thrash the batch, causing flushes and shader swaps per object.
An Effect Layer could work the same way as the buffer examples in this months bundle, just encapsulated into a single class. A combination of a Render Texture with its own Shader and a Container. You'd need to carefully manage your display list so you group objects that all live on the same Effect Layer, but the upside is that it's one batch flush and shader swap for the entire layer, not for every object within it. I'll keep experimenting with this in the coming months. For now, you can re-create an Effect Layer yourself using the approach I've taken in examples like the God Rays or Motion Fire.
Finally, I'd just like to say a big welcome to all the new patrons who have joined us recently. I hope you find the bundle useful and, most of all, inspirational. If anyone creates any cool examples of their own (either based on ones in the bundle or not) then please send them to me for a future pack.
Until the next post I hope you all have fun. Catch you in a new issue of Phaser World this week!