Phaser.Filter

new Filter(game, uniforms, fragmentSrc)

This is a base Filter class to use for any Phaser filter development. If you want to make a custom filter, this should be your base class.

The default uniforms, types and values for all Filters are:

resolution: { type: '2f', value: { x: 256, y: 256 }}
time: { type: '1f', value: 0 }
mouse: { type: '2f', value: { x: 0.0, y: 0.0 } }
date: { type: '4fv', value: [ d.getFullYear(),  d.getMonth(),  d.getDate(), d.getHours() *60 * 60 + d.getMinutes() * 60 + d.getSeconds() ] }
sampleRate: { type: '1f', value: 44100.0 }
iChannel0: { type: 'sampler2D', value: null, textureData: { repeat: true } }
iChannel1: { type: 'sampler2D', value: null, textureData: { repeat: true } }
iChannel2: { type: 'sampler2D', value: null, textureData: { repeat: true } }
iChannel3: { type: 'sampler2D', value: null, textureData: { repeat: true } }

The vast majority of filters (including all of those that ship withPhaser) use fragment shaders, and therefore only work in WebGL and are not supported by Canvas at all.

Parameters:

Name

Type

Argument

Description

game

Phaser.Game

A reference to the currently running game.

uniforms

object

<optional>

Uniform mappings object. The uniforms are added on the default uniforms, or replace them if the keys are the same.

fragmentSrc

Array | string

<optional>

The fragment shader code. Either an array, one element per line of code, or a string.

Source - core/Filter.js, line 35

Members

dirty:boolean

Internal PIXI var.

Default Value: - true

Source - core/Filter.js, line 66

fragmentSrc:array|string

The fragment shader code.

Type:

  • array| string

Source - core/Filter.js, line 120

game:Phaser.Game

A reference to the currently running game.

Source - core/Filter.js, line 40

height:number

The height (resolution uniform)

Source - core/Filter.js, line 285

padding:number

Internal PIXI var.

Source - core/Filter.js, line 72

prevPoint:Phaser.Point

The previous position of the pointer (we don't update the uniform if thesame)

Source - core/Filter.js, line 77

type:number

The const type of this object, either Phaser.WEBGL_FILTER or Phaser.CANVAS_FILTER.

Source - core/Filter.js, line 46

uniforms:object

Default uniform mappings. Compatible with ShaderToy and GLSLSandbox.

Source - core/Filter.js, line 88

width:number

The width (resolution uniform)

Source - core/Filter.js, line 265

addToWorld(x, y, width, height, anchorX, anchorY)→ {Phaser.Image}

Creates a new Phaser.Image object using a blank texture and assigns this Filter to it. The image is then added to the world.

If you don't provide width and height values then Filter.width and Filter.height are used.

If you do provide width and height values then this filter will be resized to match those values.

Parameters:

Name

Type

Argument

Default

Description

x

number

<optional>

0

The x coordinate to place the Image at.

y

number

<optional>

0

The y coordinate to place the Image at.

width

number

<optional>

The width of the Image. If not specified (or null) it will use Filter.width. If specified Filter.width will be set to this value.

height

number

<optional>

The height of the Image. If not specified (or null) it will use Filter.height. If specified Filter.height will be set to this value.

anchorX

number

<optional>

0

Set the x anchor point of the Image. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.

anchorY

number

<optional>

0

Set the y anchor point of the Image. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.

Returns:

Phaser.Image-

The newly added Image object.

Source - core/Filter.js, line 176

destroy()

Clear down this Filter and null out references to game.

Source - core/Filter.js, line 244

init()

This should be over-ridden. Will receive a variable number of arguments.

Source - core/Filter.js, line 126

setResolution(width, height)

Set the resolution uniforms on the filter.

Parameters:

Name

Type

Description

width

number

The width of the display.

height

number

The height of the display.

Source - core/Filter.js, line 137

syncUniforms()

Syncs the uniforms between the class object and the shaders.

Source - core/Filter.js, line 230

update(pointer)

Updates the filter.

Parameters:

Name

Type

Argument

Description

pointer

Phaser.Pointer

<optional>

A Pointer object to use for the filter. The coordinates are mapped to the mouse uniform.

Source - core/Filter.js, line 151