Phaser API Documentation

  Version: 
Filter
This is a beta release of our new docs system. Found an issue?
Please tell us about it in the #📖-newdocs-feedback channel on the Phaser Discord

Phaser . GameObjects . Components . TransformMatrix

This is a beta release of our new docs system. Found an issue?
Please tell us about it in the #📖-newdocs-feedback channel on the Phaser Discord

Phaser . GameObjects . Components . TransformMatrix

A Matrix used for display transformations for rendering.

It is represented like so:

| a | c | tx |
| b | d | ty |
| 0 | 0 | 1  |

Constructor:

new TransformMatrix([a], [b], [c], [d], [tx], [ty])

Parameters:

name type arguments Default description
a number <optional> 1

The Scale X value.

b number <optional> 0

The Skew Y value.

c number <optional> 0

The Skew X value.

d number <optional> 1

The Scale Y value.

tx number <optional> 0

The Translate X value.

ty number <optional> 0

The Translate Y value.

Members

a: number
Focus
Focus

Description:

The Scale X value.

Type:
number
Focus
Focus
b: number
Focus
Focus

Description:

The Skew Y value.

Type:
number
Focus
Focus
c: number
Focus
Focus

Description:

The Skew X value.

Type:
number
Focus
Focus
d: number
Focus
Focus

Description:

The Scale Y value.

Type:
number
Focus
Focus
decomposedMatrix: object
Focus
Focus

Description:

The decomposed matrix.

Type:
object
Focus
Focus
e: number
Focus
Focus

Description:

The Translate X value.

Type:
number
Since: 3.11.0
Focus
Focus
f: number
Focus
Focus

Description:

The Translate Y value.

Type:
number
Since: 3.11.0
Focus
Focus
matrix: Float32Array
Focus
Focus

Description:

The matrix values.

Type:
Float32Array
Focus
Focus
<readonly> rotation: number
Focus
Focus

Description:

The rotation of the Matrix. Value is in radians.

Type:
number
Focus
Focus
<readonly> rotationNormalized: number
Focus
Focus

Description:

The rotation of the Matrix, normalized to be within the Phaser right-handed clockwise rotation space. Value is in radians.

Type:
number
Since: 3.19.0
Focus
Focus
<readonly> scaleX: number
Focus
Focus

Description:

The decomposed horizontal scale of the Matrix. This value is always positive.

Type:
number
Focus
Focus
<readonly> scaleY: number
Focus
Focus

Description:

The decomposed vertical scale of the Matrix. This value is always positive.

Type:
number
Focus
Focus
tx: number
Focus
Focus

Description:

The Translate X value.

Type:
number
Focus
Focus
ty: number
Focus
Focus

Description:

The Translate Y value.

Type:
number
Focus
Focus

Methods

applyITRS(x, y, rotation, scaleX, scaleY)
Focus
Focus

Description:

Apply the identity, translate, rotate and scale operations on the Matrix.

Parameters:

name type description
x number

The horizontal translation.

y number

The vertical translation.

rotation number

The angle of rotation in radians.

scaleX number

The horizontal scale.

scaleY number

The vertical scale.

Returns:
Description:

This TransformMatrix.

Examples:
Focus
Focus
applyInverse(x, y, [output])
Focus
Focus

Description:

Takes the x and y values and returns a new position in the output vector that is the inverse of the current matrix with its transformation applied.

Can be used to translate points from world to local space.

Parameters:

name type arguments description
x number

The x position to translate.

y number

The y position to translate.

output Phaser.Math.Vector2 <optional>

A Vector2, or point-like object, to store the results in.

Returns:
Description:

The coordinates, inverse-transformed through this matrix.

Examples:
Since: 3.12.0
Focus
Focus
copyFrom(src)
Focus
Focus

Description:

Set the values of this Matrix to copy those of the matrix given.

Parameters:

name type description
src Phaser.GameObjects.Components.TransformMatrix

The source Matrix to copy from.

Returns:
Description:

This TransformMatrix.

Examples:
Since: 3.11.0
Focus
Focus
copyFromArray(src)
Focus
Focus

Description:

Set the values of this Matrix to copy those of the array given. Where array indexes 0, 1, 2, 3, 4 and 5 are mapped to a, b, c, d, e and f.

Parameters:

name type description
src array

The array of values to set into this matrix.

Returns:
Description:

This TransformMatrix.

Examples:
Since: 3.11.0
Focus
Focus
copyToArray([out])
Focus
Focus

Description:

Copy the values in this Matrix to the array given.

Where array indexes 0, 1, 2, 3, 4 and 5 are mapped to a, b, c, d, e and f.

Parameters:

name type arguments description
out array <optional>

The array to copy the matrix values in to.

Returns:
Description:

An array where elements 0 to 5 contain the values from this matrix.

Type:
  • array
Examples:
Since: 3.12.0
Focus
Focus
copyToContext(ctx)
Focus
Focus

Description:

Copy the values from this Matrix to the given Canvas Rendering Context. This will use the Context.transform method.

Parameters:

name type description
ctx CanvasRenderingContext2D

The Canvas Rendering Context to copy the matrix values to.

Returns:
Description:

The Canvas Rendering Context.

Type:
  • CanvasRenderingContext2D
Examples:
Since: 3.12.0
Focus
Focus
decomposeMatrix()
Focus
Focus

Description:

Decompose this Matrix into its translation, scale and rotation values using QR decomposition.

The result must be applied in the following order to reproduce the current matrix:

translate -> rotate -> scale

Returns:
Description:

The decomposed Matrix.

Type:
  • object
Examples:
Focus
Focus
destroy()
Focus
Focus

Description:

Destroys this Transform Matrix.

Examples:
Focus
Focus
getCSSMatrix()
Focus
Focus

Description:

Returns a string that can be used in a CSS Transform call as a matrix property.

Returns:
Description:

A string containing the CSS Transform matrix values.

Type:
  • string
Examples:
Since: 3.12.0
Focus
Focus
getX(x, y)
Focus
Focus

Description:

Returns the X component of this matrix multiplied by the given values. This is the same as x * a + y * c + e.

Parameters:

name type description
x number

The x value.

y number

The y value.

Returns:
Description:

The calculated x value.

Type:
  • number
Examples:
Since: 3.12.0
Focus
Focus
getXRound(x, y, [round])
Focus
Focus

Description:

Returns the X component of this matrix multiplied by the given values.

This is the same as x * a + y * c + e, optionally passing via Math.round.

Parameters:

name type arguments Default description
x number

The x value.

y number

The y value.

round boolean <optional> false

Math.round the resulting value?

Returns:
Description:

The calculated x value.

Type:
  • number
Examples:
Since: 3.50.0
Focus
Focus
getY(x, y)
Focus
Focus

Description:

Returns the Y component of this matrix multiplied by the given values. This is the same as x * b + y * d + f.

Parameters:

name type description
x number

The x value.

y number

The y value.

Returns:
Description:

The calculated y value.

Type:
  • number
Examples:
Since: 3.12.0
Focus
Focus
getYRound(x, y, [round])
Focus
Focus

Description:

Returns the Y component of this matrix multiplied by the given values.

This is the same as x * b + y * d + f, optionally passing via Math.round.

Parameters:

name type arguments Default description
x number

The x value.

y number

The y value.

round boolean <optional> false

Math.round the resulting value?

Returns:
Description:

The calculated y value.

Type:
  • number
Examples:
Since: 3.50.0
Focus
Focus
invert()
Focus
Focus

Description:

Invert the Matrix.

Returns:
Description:

This TransformMatrix.

Examples:
Focus
Focus
loadIdentity()
Focus
Focus

Description:

Reset the Matrix to an identity matrix.

Returns:
Description:

This TransformMatrix.

Examples:
Focus
Focus
multiply(rhs, [out])
Focus
Focus

Description:

Multiply this Matrix by the given Matrix.

If an out Matrix is given then the results will be stored in it. If it is not given, this matrix will be updated in place instead. Use an out Matrix if you do not wish to mutate this matrix.

Parameters:

name type arguments description
rhs Phaser.GameObjects.Components.TransformMatrix

The Matrix to multiply by.

out Phaser.GameObjects.Components.TransformMatrix <optional>

An optional Matrix to store the results in.

Returns:
Description:

Either this TransformMatrix, or the out Matrix, if given in the arguments.

Examples:
Focus
Focus
multiplyWithOffset(src, offsetX, offsetY)
Focus
Focus

Description:

Multiply this Matrix by the matrix given, including the offset.

The offsetX is added to the tx value: offsetX * a + offsetY * c + tx. The offsetY is added to the ty value: offsetY * b + offsetY * d + ty.

Parameters:

name type description
src Phaser.GameObjects.Components.TransformMatrix

The source Matrix to copy from.

offsetX number

Horizontal offset to factor in to the multiplication.

offsetY number

Vertical offset to factor in to the multiplication.

Returns:
Description:

This TransformMatrix.

Examples:
Since: 3.11.0
Focus
Focus
rotate(angle)
Focus
Focus

Description:

Rotate the Matrix.

Parameters:

name type description
angle number

The angle of rotation in radians.

Returns:
Description:

This TransformMatrix.

Examples:
Focus
Focus
scale(x, y)
Focus
Focus

Description:

Scale the Matrix.

Parameters:

name type description
x number

The horizontal scale value.

y number

The vertical scale value.

Returns:
Description:

This TransformMatrix.

Examples:
Focus
Focus
setToContext(ctx)
Focus
Focus

Description:

Copy the values from this Matrix to the given Canvas Rendering Context. This will use the Context.setTransform method.

Parameters:

name type description
ctx CanvasRenderingContext2D

The Canvas Rendering Context to copy the matrix values to.

Returns:
Description:

The Canvas Rendering Context.

Type:
  • CanvasRenderingContext2D
Examples:
Since: 3.12.0
Focus
Focus
setTransform(a, b, c, d, tx, ty)
Focus
Focus

Description:

Set the values of this Matrix.

Parameters:

name type description
a number

The Scale X value.

b number

The Shear Y value.

c number

The Shear X value.

d number

The Scale Y value.

tx number

The Translate X value.

ty number

The Translate Y value.

Returns:
Description:

This TransformMatrix.

Examples:
Focus
Focus
transform(a, b, c, d, tx, ty)
Focus
Focus

Description:

Transform the Matrix.

Parameters:

name type description
a number

The Scale X value.

b number

The Shear Y value.

c number

The Shear X value.

d number

The Scale Y value.

tx number

The Translate X value.

ty number

The Translate Y value.

Returns:
Description:

This TransformMatrix.

Examples:
Focus
Focus
transformPoint(x, y, point)
Focus
Focus

Description:

Transform a point using this Matrix.

Parameters:

name type description
x number

The x coordinate of the point to transform.

y number

The y coordinate of the point to transform.

point object | Phaser.Geom.Point | Phaser.Math.Vector2

The Point object to store the transformed coordinates.

Returns:
Description:

The Point containing the transformed coordinates.

Examples:
Focus
Focus
translate(x, y)
Focus
Focus

Description:

Translate the Matrix.

Parameters:

name type description
x number

The horizontal translation value.

y number

The vertical translation value.

Returns:
Description:

This TransformMatrix.

Examples:
Focus
Focus