This Game Object allows you to easily add a quad with its own shader into the display list, and manipulate it as you would any other Game Object, including scaling, rotating, positioning and adding to Containers. The Shader can be made interactive and used for input events. It can also be used in filters to create visually stunning effects.
It works by creating a custom RenderNode which runs a custom shader program to draw a quad. The shader program can be loaded from the Shader Cache, or provided in-line as strings.
Please see the Phaser Examples GitHub repo for several examples of loading and creating shaders dynamically.
Due to the way in which they work, you cannot directly change the alpha of a Shader. It should be handled via uniforms in the shader code itself.
By default, a Shader has a uniform called uProjectionMatrix which is set automatically. You can control additional uniforms using the setupUniforms method in the Shader configuration object, which runs every time the shader renders.
Shaders are stand-alone renders: they finish any current render batch and run once by themselves. As this costs a draw call, you should use them sparingly. If you need to have a fully batched custom shader, then please look at using a custom RenderNode instead. However, for background or special masking effects, they are extremely effective.
Note: be careful when using texture coordinates in shader code. The built-in variable gl_FragCoord and the default uniform outTexCoord both use WebGL coordinates, which are 0,0 in the bottom-left. Additionally, gl_FragCoord says it's in "window relative" coordinates. But this is actually relative to the framebuffer size.
A Shader Game Object.
This Game Object allows you to easily add a quad with its own shader into the display list, and manipulate it as you would any other Game Object, including scaling, rotating, positioning and adding to Containers. The Shader can be made interactive and used for input events. It can also be used in filters to create visually stunning effects.
It works by creating a custom RenderNode which runs a custom shader program to draw a quad. The shader program can be loaded from the Shader Cache, or provided in-line as strings.
Please see the Phaser Examples GitHub repo for several examples of loading and creating shaders dynamically.
Due to the way in which they work, you cannot directly change the alpha of a Shader. It should be handled via uniforms in the shader code itself.
By default, a Shader has a uniform called
uProjectionMatrixwhich is set automatically. You can control additional uniforms using thesetupUniformsmethod in the Shader configuration object, which runs every time the shader renders.Shaders are stand-alone renders: they finish any current render batch and run once by themselves. As this costs a draw call, you should use them sparingly. If you need to have a fully batched custom shader, then please look at using a custom RenderNode instead. However, for background or special masking effects, they are extremely effective.
Note: be careful when using texture coordinates in shader code. The built-in variable
gl_FragCoordand the default uniformoutTexCoordboth use WebGL coordinates, which are0,0in the bottom-left. Additionally,gl_FragCoordsays it's in "window relative" coordinates. But this is actually relative to the framebuffer size.