Phaser.Renderer.Canvas
GetBlendModes
<static> GetBlendModes()
Description:
Returns an array which maps the default blend modes to supported Canvas blend modes.
If the browser doesn't support a blend mode, it will default to the normal source-over blend mode.
Returns: array - Which Canvas blend mode corresponds to which default Phaser blend mode.
Source: src/renderer/canvas/utils/GetBlendModes.js#L10
Since: 3.0.0
SetTransform
<static> SetTransform(renderer, ctx, src, camera, [parentMatrix])
Description:
Takes a reference to the Canvas Renderer, a Canvas Rendering Context, a Game Object, a Camera and a parent matrix and then performs the following steps:
-
Checks the alpha of the source combined with the Camera alpha. If 0 or less it aborts.
-
Takes the Camera and Game Object matrix and multiplies them, combined with the parent matrix if given.
-
Sets the blend mode of the context to be that used by the Game Object.
-
Sets the alpha value of the context to be that used by the Game Object combined with the Camera.
-
Saves the context state.
-
Sets the final matrix values into the context via setTransform.
-
If the Game Object has a texture frame, imageSmoothingEnabled is set based on frame.source.scaleMode.
-
If the Game Object does not have a texture frame, imageSmoothingEnabled is set based on Renderer.antialias.
This function is only meant to be used internally. Most of the Canvas Renderer classes use it.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| renderer | Phaser.Renderer.Canvas.CanvasRenderer | No | A reference to the current active Canvas renderer. |
| ctx | CanvasRenderingContext2D | No | The canvas context to set the transform on. |
| src | Phaser.GameObjects.GameObject | No | The Game Object being rendered. Can be any type that extends the base class. |
| camera | Phaser.Cameras.Scene2D.Camera | No | The Camera that is rendering the Game Object. |
| parentMatrix | Phaser.GameObjects.Components.TransformMatrix | Yes | A parent transform matrix to apply to the Game Object before rendering. |
Returns: boolean - true if the Game Object context was set, otherwise false.
Source: src/renderer/canvas/utils/SetTransform.js#L9
Since: 3.12.0
Phaser.Renderer.Snapshot
Canvas
<static> Canvas(canvas, config)
Description:
Takes a snapshot of the current frame displayed by a canvas. Depending on the configuration, this can operate in one of three modes: single-pixel color sampling, partial area capture, or full canvas capture.
In pixel mode, the color at the given (x, y) coordinate is read and the callback is invoked immediately with a Phaser.Display.Color object.
In area or full capture mode, the relevant region is encoded as a data URL and assigned to a new Image object. Once the image has loaded, the callback provided in the Snapshot Configuration object is invoked with the Image as its argument. If the image fails to load, the callback is still invoked but with no argument.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| canvas | HTMLCanvasElement | No | The canvas to take a snapshot of. |
| config | Phaser.Types.Renderer.Snapshot.SnapshotState | No | The snapshot configuration object. |
Source: src/renderer/snapshot/CanvasSnapshot.js#L11
Since: 3.0.0
WebGL
<static> WebGL(sourceContext, config)
Description:
Takes a snapshot of an area from the current frame displayed by a WebGL canvas, or reads the color value of a single pixel, depending on the getPixel property of the snapshot configuration object.
When capturing an area, the raw pixel data is read from the WebGL context and composited into a temporary canvas, accounting for WebGL's inverted Y-axis and optionally reversing pre-multiplied alpha. The canvas is then serialized to a data URL and loaded into an Image object, which is passed to the callback defined in the Snapshot Configuration object once loading completes.
When reading a single pixel, the RGBA values at the given coordinates are read directly via gl.readPixels and returned as a Phaser.Display.Color object via the callback.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| sourceContext | WebGLRenderingContext | No | The WebGL context to take a snapshot of. |
| config | Phaser.Types.Renderer.Snapshot.SnapshotState | No | The snapshot configuration object. |
Source: src/renderer/snapshot/WebGLSnapshot.js#L11
Since: 3.0.0
Phaser.Renderer.WebGL.Utils
getTintFromFloats
<static> getTintFromFloats(r, g, b, a)
Description:
Packs four floats in a range from 0.0 to 1.0 into a single Uint32
Parameters:
| name | type | optional | description |
|---|---|---|---|
| r | number | No | Red component in a range from 0.0 to 1.0 |
| g | number | No | Green component in a range from 0.0 to 1.0 |
| b | number | No | Blue component in a range from 0.0 to 1.0 |
| a | number | No | Alpha component in a range from 0.0 to 1.0 |
Returns: number - The packed RGBA values as a Uint32.
Source: src/renderer/webgl/Utils.js#L17
Since: 3.0.0
getTintAppendFloatAlpha
<static> getTintAppendFloatAlpha(rgb, a)
Description:
Packs a Uint24, representing RGB components, with a Float32, representing the alpha component, with a range between 0.0 and 1.0 and returns a Uint32
Parameters:
| name | type | optional | description |
|---|---|---|---|
| rgb | number | No | Uint24 representing RGB components |
| a | number | No | Float32 representing Alpha component |
Returns: number - Packed RGBA as Uint32
Source: src/renderer/webgl/Utils.js#L40
Since: 3.0.0
getTintAppendFloatAlphaAndSwap
<static> getTintAppendFloatAlphaAndSwap(rgb, a)
Description:
Packs a Uint24, representing RGB components, with a Float32, representing the alpha component, with a range between 0.0 and 1.0 and returns a swizzled Uint32 with the red and blue channels exchanged (RGB becomes BGR)
Parameters:
| name | type | optional | description |
|---|---|---|---|
| rgb | number | No | Uint24 representing RGB components |
| a | number | No | Float32 representing Alpha component |
Returns: number - Packed RGBA as Uint32
Source: src/renderer/webgl/Utils.js#L59
Since: 3.0.0
getFloatsFromUintRGB
<static> getFloatsFromUintRGB(rgb)
Description:
Unpacks a Uint24 RGB into an array of floats with values in the range 0.0 to 1.0
Parameters:
| name | type | optional | description |
|---|---|---|---|
| rgb | number | No | RGB packed as a Uint24 |
Returns: array - Array of floats representing each component as a float
Source: src/renderer/webgl/Utils.js#L82
Since: 3.0.0
checkShaderMax
<static> checkShaderMax(gl, maxTextures)
Description:
Check to see how many texture units the GPU supports in a fragment shader and if the value specified in the game config is allowed.
This value is hard-clamped to 16 for performance reasons on Android devices.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| gl | WebGLRenderingContext | No | The WebGLContext used to create the shaders. |
| maxTextures | number | No | The Game Config maxTextures value. |
Returns: number - The number of texture units that is supported by this browser and GPU.
Source: src/renderer/webgl/Utils.js#L101
Since: 3.50.0
updateLightingUniforms
<static> updateLightingUniforms(enable, drawingContext, programManager, textureUnit, vec, [selfShadow], [selfShadowPenumbra], [selfShadowThreshold])
Description:
Sets or clears all lighting-related uniforms on the given shader program manager.
When enable is true, this function queries the Scene's Light Manager for all active lights visible to the camera and uploads their positions, colors, intensities, and radii as uniform arrays to the shader. It also uploads the ambient light color, camera transform, and the normal map texture unit. Optionally enables self-shadowing by uploading the penumbra and diffuse threshold uniforms.
When enable is false, all previously set lighting uniforms are removed from the program manager. If the Scene has no active Light Manager, the function returns early without making any changes.
Tags:
- webglOnly
Parameters:
| name | type | optional | description |
|---|---|---|---|
| enable | boolean | No | Whether to enable lighting. |
| drawingContext | Phaser.Renderer.WebGL.DrawingContext | No | The DrawingContext instance. |
| programManager | Phaser.Renderer.WebGL.ProgramManager | No | The ShaderProgramManager instance. |
| textureUnit | number | No | The texture unit to use for the normal map. |
| vec | Phaser.Math.Vector2 | No | A Vector2 instance. |
| selfShadow | boolean | Yes | Whether to enable self-shadowing. |
| selfShadowPenumbra | number | Yes | The penumbra value for self-shadowing. |
| selfShadowThreshold | number | Yes | The threshold value for self-shadowing. |
Source: src/renderer/webgl/Utils.js#L133
Since: 4.0.0
Phaser.Renderer.WebGL.ShaderAdditionMakers
MakeAnimLength
<static> MakeAnimLength(maxAnims, [disable])
Description:
Returns a ShaderAdditionConfig for defining the maximum number of animation frames. This is used by TilemapGPULayer.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| maxAnims | number | No | The maximum number of animation frames to support. This value is injected into the shader as the MAX_ANIM_FRAMES preprocessor constant. | |
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeAnimLength.js#L7
Since: 4.0.0
MakeApplyLighting
<static> MakeApplyLighting([disable])
Description:
Creates and returns a ShaderAdditionConfig that injects normal-map lighting into a WebGL shader pipeline. When added to a renderer, it includes the ApplyLighting GLSL header in the fragment shader and runs applyLighting(fragColor, normal) during the fragment process stage, blending the lighting result into the output color.
The normal variable must be available in the fragment shader.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeApplyLighting.js#L9
Since: 4.0.0
MakeApplyTint
<static> MakeApplyTint([disable])
Description:
Return a ShaderAdditionConfig for applying a tint to a texture.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeApplyTint.js#L9
Since: 4.0.0
MakeBoundedSampler
<static> MakeBoundedSampler([disable])
Description:
Return a ShaderAdditionConfig for bounded texture sampling. A bounded sampler will return a transparent pixel if the texture coordinates are outside the texture bounds.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeBoundedSampler.js#L9
Since: 4.0.0
MakeDefineLights
<static> MakeDefineLights([disable])
Description:
Return a ShaderAdditionConfig for defining the lights and core lighting algorithm in the fragment shader.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeDefineLights.js#L9
Since: 4.0.0
MakeDefineTexCount
<static> MakeDefineTexCount(maxTextures, [disable])
Description:
Returns a ShaderAdditionConfig for defining the texture count in a multi-texture shader. This is used by other additions to process the correct number of textures.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| maxTextures | number | No | The maximum number of textures the shader supports. This value is used to set the TEXTURE_COUNT preprocessor define in the fragment shader. | |
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeDefineTexCount.js#L7
Since: 4.0.0
MakeFlatNormal
<static> MakeFlatNormal([disable])
Description:
Return a ShaderAdditionConfig for defining a flat normal. This is used to light objects without a normal map.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeFlatNormal.js#L7
Since: 4.0.0
MakeGetNormalFromMap
<static> MakeGetNormalFromMap([disable])
Description:
Return a ShaderAdditionConfig that injects the getNormalFromMap function into the fragment shader header and samples the normal map at the current texture coordinate during fragment processing. The resulting normal vector is used by the lighting pipeline to apply per-pixel lighting to a texture.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeGetNormalFromMap.js#L9
Since: 4.0.0
MakeGetTexCoordOut
<static> MakeGetTexCoordOut([disable])
Description:
Return a ShaderAdditionConfig for getting the texture coordinates from the vertex shader via the outTexCoord variable.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeGetTexCoordOut.js#L7
Since: 4.0.0
MakeGetTexRes
<static> MakeGetTexRes([disable])
Description:
Creates and returns a ShaderAdditionConfig that injects a GLSL fragment shader header providing a helper function for looking up a texture's resolution from a uniform array of resolutions, as used in multi-texture rendering where each bound texture may have a different size.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeGetTexRes.js#L9
Since: 4.0.0
MakeGetTexture
<static> MakeGetTexture([maxTextures], [disable])
Description:
Creates a ShaderAdditionConfig for multi-texture sampling in a WebGL shader. The returned config injects a getTexture GLSL function into the fragment shader header, built as an if...else chain that selects from up to maxTextures texture units based on the texture ID. It also injects a single-line process that samples the current fragment color via that function.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| maxTextures | number | Yes | 1 | The number of texture units to support. Determines how many branches are generated in the texture-selection if...else chain. |
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeGetTexture.js#L9
Since: 4.0.0
MakeOutFrame
<static> MakeOutFrame([disable])
Description:
Returns a ShaderAdditionConfig that declares inFrame as a vertex attribute and passes it to the fragment shader via the outFrame varying.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeOutFrame.js#L7
Since: 4.0.0
MakeOutInverseRotation
<static> MakeOutInverseRotation([disable])
Description:
Returns a ShaderAdditionConfig for creating an outInverseRotationMatrix varying in the vertex shader. This matrix is used during lighting calculations to correctly transform normal vectors into world space, ensuring that light direction is applied relative to the game object's orientation.
The rotation variable must be available in the vertex renderer.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeOutInverseRotation.js#L9
Since: 4.0.0
MakeRotationDatum
<static> MakeRotationDatum([disable])
Description:
Creates and returns a ShaderAdditionConfig that reads the rotation value from the inTexDatum vertex attribute and exposes it as a float rotation variable in the vertex shader's processing stage. This addition is tagged for use with lighting shaders, enabling directional and normal-mapped lighting calculations to account for the rotation of the rendered geometry.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeRotationDatum.js#L7
Since: 4.0.0
MakeSampleNormal
<static> MakeSampleNormal([disable])
Description:
Returns a ShaderAdditionConfig that adds normal map sampling to a TilemapGPULayer shader. The addition samples the normal map texture via uNormSampler, decodes the stored RGB values from the [0, 1] range back into a normalized direction vector in the [-1, 1] range, and exposes the result through a Samples object so that other shader additions (such as lighting calculations) can consume it. The addition is tagged LIGHTING, meaning it will only be active when a lighting pass is in use.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Source: src/renderer/webgl/shaders/additionMakers/MakeSampleNormal.js#L7
Since: 4.0.0
MakeSmoothPixelArt
<static> MakeSmoothPixelArt([disable])
Description:
Creates and returns a ShaderAdditionConfig that enables smooth pixel art rendering.
When applied to a shader, this addition replaces standard texture coordinate interpolation with a blocky sampling method that preserves crisp pixel edges while applying sub-pixel anti-aliasing at texel boundaries. The result is that pixel art assets scaled up or rendered at non-integer scales retain sharp, clean edges rather than the blurriness introduced by bilinear filtering.
Internally this uses the GL_OES_standard_derivatives WebGL extension to compute per-fragment derivative information, which drives the anti-aliased edge blending via the getBlockyTexCoord GLSL helper.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeSmoothPixelArt.js#L9
Since: 4.0.0
MakeTexCoordFrameClamp
<static> MakeTexCoordFrameClamp([disable])
Description:
Returns a ShaderAdditionConfig for clamping coordinates inside a frame. This prevents bleeding across the edges of the frame. However, it creates a hard edge at the frame boundary.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeTexCoordFrameClamp.js#L9
Since: 4.0.0
MakeTexCoordFrameWrap
<static> MakeTexCoordFrameWrap([disable])
Description:
Returns a ShaderAdditionConfig for wrapping coordinates inside a frame. This makes the texture repeat within the bounds of the frame - it's what makes a TileSprite work.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| disable | boolean | Yes | false | Whether to disable the shader addition on creation. |
Returns: Phaser.Types.Renderer.WebGL.ShaderAdditionConfig - The shader addition configuration.
Source: src/renderer/webgl/shaders/additionMakers/MakeTexCoordFrameWrap.js#L7
Since: 4.0.0