You are browsing legacy Phaser documentation that is 4+ years out of date. Please see https://newdocs.phaser.io

Class: TransformMatrix

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  |

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

Parameters:
Name Type Argument 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.
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 11)

Members

a :number

The Scale X value.

Type:
  • number
Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 73)

b :number

The Skew Y value.

Type:
  • number
Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 94)

c :number

The Skew X value.

Type:
  • number
Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 115)

d :number

The Scale Y value.

Type:
  • number
Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 136)

decomposedMatrix :object

The decomposed matrix.

Type:
  • object
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 57)

e :number

The Translate X value.

Type:
  • number
Since: 3.11.0
Source: src/gameobjects/components/TransformMatrix.js (Line 157)

f :number

The Translate Y value.

Type:
  • number
Since: 3.11.0
Source: src/gameobjects/components/TransformMatrix.js (Line 178)

matrix :Float32Array

The matrix values.

Type:
  • Float32Array
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 48)

<readonly> rotation :number

The rotation of the Matrix. Value is in radians.

Type:
  • number
Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 241)

<readonly> rotationNormalized :number

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
Source: src/gameobjects/components/TransformMatrix.js (Line 258)

<readonly> scaleX :number

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

Type:
  • number
Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 298)

<readonly> scaleY :number

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

Type:
  • number
Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 315)

tx :number

The Translate X value.

Type:
  • number
Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 199)

ty :number

The Translate Y value.

Type:
  • number
Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 220)

Methods

applyInverse(x, y [, output])

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 Argument 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.
Since: 3.12.0
Source: src/gameobjects/components/TransformMatrix.js (Line 863)
Returns:

The coordinates, inverse-transformed through this matrix.

Type
Phaser.Math.Vector2

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

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.
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 829)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

copyFrom(src)

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.
Since: 3.11.0
Source: src/gameobjects/components/TransformMatrix.js (Line 619)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

copyFromArray(src)

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.
Since: 3.11.0
Source: src/gameobjects/components/TransformMatrix.js (Line 643)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

copyToArray( [out])

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 Argument Description
out array <optional>

The array to copy the matrix values in to.
Since: 3.12.0
Source: src/gameobjects/components/TransformMatrix.js (Line 708)
Returns:

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

Type
array

copyToContext(ctx)

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.
Since: 3.12.0
Source: src/gameobjects/components/TransformMatrix.js (Line 668)
Returns:

The Canvas Rendering Context.

Type
CanvasRenderingContext2D

decomposeMatrix()

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

Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 770)
Returns:

The decomposed Matrix.

Type
object

destroy()

Destroys this Transform Matrix.

Since: 3.4.0
Source: src/gameobjects/components/TransformMatrix.js (Line 1000)

getCSSMatrix()

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

Since: 3.12.0
Source: src/gameobjects/components/TransformMatrix.js (Line 985)
Returns:

A string containing the CSS Transform matrix values.

Type
string

getX(x, y)

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.
Since: 3.12.0
Source: src/gameobjects/components/TransformMatrix.js (Line 899)
Returns:

The calculated x value.

Type
number

getXRound(x, y [, round])

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 Argument Default Description
x number

The x value.
y number

The y value.
round boolean <optional>
 false

Math.round the resulting value?
Since: 3.50.0
Source: src/gameobjects/components/TransformMatrix.js (Line 933)
Returns:

The calculated x value.

Type
number

getY(x, y)

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.
Since: 3.12.0
Source: src/gameobjects/components/TransformMatrix.js (Line 916)
Returns:

The calculated y value.

Type
number

getYRound(x, y [, round])

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 Argument Default Description
x number

The x value.
y number

The y value.
round boolean <optional>
 false

Math.round the resulting value?
Since: 3.50.0
Source: src/gameobjects/components/TransformMatrix.js (Line 959)
Returns:

The calculated y value.

Type
number

invert()

Invert the Matrix.

Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 588)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

loadIdentity()

Reset the Matrix to an identity matrix.

Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 332)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

multiply(rhs [, out])

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 Argument 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.
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 428)
Returns:

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

Type
Phaser.GameObjects.Components.TransformMatrix | Phaser.GameObjects.Components.TransformMatrix

multiplyWithOffset(src, offsetX, offsetY)

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.
Since: 3.11.0
Source: src/gameobjects/components/TransformMatrix.js (Line 474)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

rotate(angle)

Rotate the Matrix.

Parameters:
Name Type Description
angle number

The angle of rotation in radians.
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 398)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

scale(x, y)

Scale the Matrix.

Parameters:
Name Type Description
x number

The horizontal scale value.
y number

The vertical scale value.
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 375)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

setToContext(ctx)

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.
Since: 3.12.0
Source: src/gameobjects/components/TransformMatrix.js (Line 688)
Returns:

The Canvas Rendering Context.

Type
CanvasRenderingContext2D

setTransform(a, b, c, d, tx, ty)

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.
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 741)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

transform(a, b, c, d, tx, ty)

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.
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 521)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix

transformPoint(x, y, point)

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 Phaser.Geom.Point | Phaser.Math.Vector2 | object

The Point object to store the transformed coordinates.
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 557)
Returns:

The Point containing the transformed coordinates.

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

translate(x, y)

Translate the Matrix.

Parameters:
Name Type Description
x number

The horizontal translation value.
y number

The vertical translation value.
Since: 3.0.0
Source: src/gameobjects/components/TransformMatrix.js (Line 354)
Returns:

This TransformMatrix.

Type
Phaser.GameObjects.Components.TransformMatrix