Skip to main content
Version: Phaser v3.88.2

MultiPipeline

The Multi Pipeline is the core 2D texture rendering pipeline used by Phaser in WebGL.

Virtually all Game Objects use this pipeline by default, including Sprites, Graphics

and Tilemaps. It handles the batching of quads and tris, as well as methods for

drawing and batching geometry data.

Prior to Phaser v3.50 this pipeline was called the TextureTintPipeline.

In previous versions of Phaser only one single texture unit was supported at any one time.

The Multi Pipeline is an evolution of the old Texture Tint Pipeline, updated to support

multi-textures for increased performance.

The fragment shader it uses can be found in shaders/src/Multi.frag.

The vertex shader it uses can be found in shaders/src/Multi.vert.

The default shader attributes for this pipeline are:

inPosition (vec2, offset 0)

inTexCoord (vec2, offset 8)

inTexId (float, offset 16)

inTintEffect (float, offset 20)

inTint (vec4, offset 24, normalized)

The default shader uniforms for this pipeline are:

uProjectionMatrix (mat4)

uResolution (vec2)

uMainSampler (sampler2D, or sampler2D array)

If you wish to create a custom pipeline extending from this one, you can use two string

declarations in your fragment shader source: %count% and %forloop%, where count is

used to set the number of sampler2Ds available, and forloop is a block of GLSL code

that will get the currently bound texture unit.

This pipeline will automatically inject that code for you, should those values exist

in your shader source. If you wish to handle this yourself, you can also use the

function Utils.parseFragmentShaderMaxTextures.

The following fragment shader shows how to use the two variables:


#define SHADER_NAME PHASER_MULTI_FS



#ifdef GL_FRAGMENT_PRECISION_HIGH

precision highp float;

#else

precision mediump float;

#endif



uniform sampler2D uMainSampler[%count%];



varying vec2 outTexCoord;

varying float outTexId;

varying float outTintEffect;

varying vec4 outTint;



void main ()

{

    vec4 texture;



    %forloop%



    vec4 texel = vec4(outTint.bgr * outTint.a, outTint.a);



    //  Multiply texture tint

    vec4 color = texture * texel;



    if (outTintEffect == 1.0)

    {

        //  Solid color + texture alpha

        color.rgb = mix(texture.rgb, outTint.bgr * outTint.a, texture.a);

    }

    else if (outTintEffect == 2.0)

    {

        //  Solid color, no texture

        color = texel;

    }



    gl_FragColor = color;

}

If you wish to create a pipeline that works from a single texture, or that doesn't have

internal texture iteration, please see the SinglePipeline instead. If you wish to create

a special effect, especially one that can impact the pixels around a texture (i.e. such as

a glitch effect) then you should use the PreFX and PostFX Pipelines for this task.

Constructor

new MultiPipeline(config)

Parameters

nametypeoptionaldescription
configPhaser.Types.Renderer.WebGL.WebGLPipelineConfigNoThe configuration options for this pipeline.

Scope: static

Extends

Phaser.Renderer.WebGL.WebGLPipeline

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L18
Since: 3.50.0

Inherited Members​

From Phaser.Renderer.WebGL.WebGLPipeline:

Public Members​

calcMatrix​

calcMatrix: Phaser.GameObjects.Components.TransformMatrix​

Description:

A temporary Transform Matrix, re-used internally during batching by the

Shape Game Objects.

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L184
Since: 3.55.0

Inherited Methods​

From Phaser.Events.EventEmitter:

From Phaser.Renderer.WebGL.WebGLPipeline:

Public Methods​

batchFillPath​

<instance> batchFillPath(path, currentMatrix, parentMatrix)​

Description:

Adds the given path to the vertex batch for rendering.

It works by taking the array of path data and then passing it through Earcut, which

creates a list of polygons. Each polygon is then added to the batch.

The path is always automatically closed because it's filled.

Parameters:

nametypeoptionaldescription
pathArray.<Phaser.Types.Math.Vector2Like>NoCollection of points that represent the path.
currentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe current transform.
parentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe parent transform.

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L772
Since: 3.55.0

batchFillRect​

<instance> batchFillRect(x, y, width, height, currentMatrix, parentMatrix)​

Description:

Pushes a filled rectangle into the vertex batch.

Rectangle factors in the given transform matrices before adding to the batch.

Parameters:

nametypeoptionaldescription
xnumberNoHorizontal top left coordinate of the rectangle.
ynumberNoVertical top left coordinate of the rectangle.
widthnumberNoWidth of the rectangle.
heightnumberNoHeight of the rectangle.
currentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe current transform.
parentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe parent transform.

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L652
Since: 3.55.0

batchFillTriangle​

<instance> batchFillTriangle(x0, y0, x1, y1, x2, y2, currentMatrix, parentMatrix)​

Description:

Pushes a filled triangle into the vertex batch.

Triangle factors in the given transform matrices before adding to the batch.

Parameters:

nametypeoptionaldescription
x0numberNoPoint 0 x coordinate.
y0numberNoPoint 0 y coordinate.
x1numberNoPoint 1 x coordinate.
y1numberNoPoint 1 y coordinate.
x2numberNoPoint 2 x coordinate.
y2numberNoPoint 2 y coordinate.
currentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe current transform.
parentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe parent transform.

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L686
Since: 3.55.0

batchLine​

<instance> batchLine(ax, ay, bx, by, aLineWidth, bLineWidth, index, closePath, currentMatrix, parentMatrix)​

Description:

Creates a line out of 4 quads and adds it to the vertex batch based on the given line values.

Parameters:

nametypeoptionaldescription
axnumberNox coordinate of the start of the line.
aynumberNoy coordinate of the start of the line.
bxnumberNox coordinate of the end of the line.
bynumberNoy coordinate of the end of the line.
aLineWidthnumberNoWidth of the start of the line.
bLineWidthnumberNoWidth of the end of the line.
indexnumberNoIf this line is part of a multi-line draw, the index of the line in the draw.
closePathbooleanNoDoes this line close a multi-line path?
currentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe current transform.
parentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe parent transform.

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L893
Since: 3.55.0

batchSprite​

<instance> batchSprite(gameObject, camera, [parentTransformMatrix])​

Description:

Takes a Sprite Game Object, or any object that extends it, and adds it to the batch.

Parameters:

nametypeoptionaldescription
gameObjectPhaser.GameObjects.Image | Phaser.GameObjects.SpriteNoThe texture based Game Object to add to the batch.
cameraPhaser.Cameras.Scene2D.CameraNoThe Camera to use for the rendering transform.
parentTransformMatrixPhaser.GameObjects.Components.TransformMatrixYesThe transform matrix of the parent container, if set.

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L288
Since: 3.0.0

batchStrokePath​

<instance> batchStrokePath(path, lineWidth, pathOpen, currentMatrix, parentMatrix)​

Description:

Adds the given path to the vertex batch for rendering.

It works by taking the array of path data and calling batchLine for each section

of the path.

The path is optionally closed at the end.

Parameters:

nametypeoptionaldescription
pathArray.<Phaser.Types.Math.Vector2Like>NoCollection of points that represent the path.
lineWidthnumberNoThe width of the line segments in pixels.
pathOpenbooleanNoIndicates if the path should be closed or left open.
currentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe current transform.
parentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe parent transform.

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L845
Since: 3.55.0

batchStrokeTriangle​

<instance> batchStrokeTriangle(x0, y0, x1, y1, x2, y2, lineWidth, currentMatrix, parentMatrix)​

Description:

Pushes a stroked triangle into the vertex batch.

Triangle factors in the given transform matrices before adding to the batch.

The triangle is created from 3 lines and drawn using the batchStrokePath method.

Parameters:

nametypeoptionaldescription
x0numberNoPoint 0 x coordinate.
y0numberNoPoint 0 y coordinate.
x1numberNoPoint 1 x coordinate.
y1numberNoPoint 1 y coordinate.
x2numberNoPoint 2 x coordinate.
y2numberNoPoint 2 y coordinate.
lineWidthnumberNoThe width of the line in pixels.
currentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe current transform.
parentMatrixPhaser.GameObjects.Components.TransformMatrixNoThe parent transform.

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L729
Since: 3.55.0

batchTexture​

<instance> batchTexture(gameObject, texture, textureWidth, textureHeight, srcX, srcY, srcWidth, srcHeight, scaleX, scaleY, rotation, flipX, flipY, scrollFactorX, scrollFactorY, displayOriginX, displayOriginY, frameX, frameY, frameWidth, frameHeight, tintTL, tintTR, tintBL, tintBR, tintEffect, uOffset, vOffset, camera, parentTransformMatrix, [skipFlip], [textureUnit], [skipPrePost])​

Description:

Generic function for batching a textured quad using argument values instead of a Game Object.

Parameters:

nametypeoptionaldefaultdescription
gameObjectPhaser.GameObjects.GameObjectNoSource GameObject.
texturePhaser.Renderer.WebGL.Wrappers.WebGLTextureWrapperNoTexture associated with the quad.
textureWidthnumberNoReal texture width.
textureHeightnumberNoReal texture height.
srcXnumberNoX coordinate of the quad.
srcYnumberNoY coordinate of the quad.
srcWidthnumberNoWidth of the quad.
srcHeightnumberNoHeight of the quad.
scaleXnumberNoX component of scale.
scaleYnumberNoY component of scale.
rotationnumberNoRotation of the quad.
flipXbooleanNoIndicates if the quad is horizontally flipped.
flipYbooleanNoIndicates if the quad is vertically flipped.
scrollFactorXnumberNoBy which factor is the quad affected by the camera horizontal scroll.
scrollFactorYnumberNoBy which factor is the quad effected by the camera vertical scroll.
displayOriginXnumberNoHorizontal origin in pixels.
displayOriginYnumberNoVertical origin in pixels.
frameXnumberNoX coordinate of the texture frame.
frameYnumberNoY coordinate of the texture frame.
frameWidthnumberNoWidth of the texture frame.
frameHeightnumberNoHeight of the texture frame.
tintTLnumberNoTint for top left.
tintTRnumberNoTint for top right.
tintBLnumberNoTint for bottom left.
tintBRnumberNoTint for bottom right.
tintEffectnumberNoThe tint effect.
uOffsetnumberNoHorizontal offset on texture coordinate.
vOffsetnumberNoVertical offset on texture coordinate.
cameraPhaser.Cameras.Scene2D.CameraNoCurrent used camera.
parentTransformMatrixPhaser.GameObjects.Components.TransformMatrixNoParent container.
skipFlipbooleanYesfalseSkip the renderTexture check.
textureUnitnumberYesThe texture unit to set (defaults to currently bound if undefined or null)
skipPrePostbooleanYesfalseSkip the pre and post manager calls?

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L427
Since: 3.0.0

batchTextureFrame​

<instance> batchTextureFrame(frame, x, y, tint, alpha, transformMatrix, [parentTransformMatrix])​

Description:

Adds a Texture Frame into the batch for rendering.

Parameters:

nametypeoptionaldescription
framePhaser.Textures.FrameNoThe Texture Frame to be rendered.
xnumberNoThe horizontal position to render the texture at.
ynumberNoThe vertical position to render the texture at.
tintnumberNoThe tint color.
alphanumberNoThe alpha value.
transformMatrixPhaser.GameObjects.Components.TransformMatrixNoThe Transform Matrix to use for the texture.
parentTransformMatrixPhaser.GameObjects.Components.TransformMatrixYesA parent Transform Matrix.

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L607
Since: 3.12.0

boot​

<instance> boot()​

Description:

Called every time the pipeline is bound by the renderer.

Sets the shader program, vertex buffer and other resources.

Should only be called when changing pipeline.

Overrides: Phaser.Renderer.WebGL.WebGLPipeline#boot

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L270
Since: 3.50.0

destroy​

<instance> destroy()​

Description:

Destroys all shader instances, removes all object references and nulls all external references.

Overrides: Phaser.Renderer.WebGL.WebGLPipeline#destroy

Returns: Phaser.Renderer.WebGL.Pipelines.MultiPipeline - This WebGLPipeline instance.

Fires: Phaser.Renderer.WebGL.Pipelines.Events#event:DESTROY

Source: src/renderer/webgl/pipelines/MultiPipeline.js#L1012
Since: 3.60.0