Navigation

May 2019 Phaser Backers Code Bundle

Published on 2nd May 2019

Hello! I'm very pleased to bring you a brand new Backers Code Bundle. This month we've got 4 new Phaser3D Examples, along with an updated Phaser3D lib and the latest version of three.js. The examples show how to create point sprites, use shaders on objects and apply post-processing effects to your scene.

The real meat of this months pack, however, are the other 14 examples. In Phaser 3.17 (the latest build of which is included in this bundle) there is a brand new Game Object called a Shader. There is also a new resource called BaseShader and the GLSL File Loader has been given a serious injection of features. This all culminates in it now being trivially easy to add shaders into your game without the need for any form of custom pipeline.

The examples this month are all geared around demonstrating this new Game Object. From the basics such as loading a shader, to changing the textures a shader is using, to tracking pointer input and even using shaders as masks (or having masks on a shader). It's really quite powerful and super-easy to do.

The Shader Game Object in 3.17 can be controlled like any other regular Game Object, including rotation, scaling, enabling it for interaction, putting it inside a Container, or even giving it a physics body. There's an example specifically showing you how to support this in the shader, along with a tutorial example (the tutorial can be found in the source code) all about how to get shaders from ShaderToy working in Phaser.

You can create shaders dynamically at run-time, perhaps if you need to inject statements into the shader source that you don't want to expose as a uniform, or you can use the vastly improved GLSL File Loader. This has been given a real kick in the pants. You can use it as before, to load a single piece of shader source if you wish. Or, you can take advantage of the new GLSL bundle file format. This allows you to embed multiple shaders into a single file, without needing to wrap the source in quotes or an array, and even define the shader uniforms in there too, allowing them to be prepared automatically when loaded. Think of it as a texture atlas but for shaders. It's super handy and makes development so much faster, as there's no pre-processing stage involved.

Also included are, of course, lots of lovely shaders :) The Starfield Gallery example alone contains 8 different ones and you'll find loads more as you dig through the files. Some are incredibly complex (the Stones example in particular) while others achieve such amazing effects in just a couple lines of GLSL that hopefully they'll inspire you to dig in and learn more about them. A few of them will make weak GPUS struggle, but most should fly along happily.

Remember, as with all bundle packs, they use the latest cutting-edge release of Phaser, which is included in the build folder. They won't work with 3.16. The new Shader game objects are fully documented and if you do find any issues when using them, please report on GitHub so I can fix before the final release.

phaser-backers-examples-may2019.zip