Class TransformMatrix

A TransformMatrix is a 3x3 affine transformation matrix used to encode the position, rotation, scale, and skew of a Game Object for rendering.

It is used internally by Phaser during the render pipeline to accumulate parent-child transform chains and apply camera transformations. You will typically interact with it when writing custom renderers or working with the camera or display list transform pipeline.

It is represented like so:

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

Constructors

constructor

new TransformMatrix(
    a?: number,
    b?: number,
    c?: number,
    d?: number,
    tx?: number,
    ty?: number,
): TransformMatrix
Parameters
- Optionala: number
  The Scale X value. Default 1.
- Optionalb: number
  The Skew Y value. Default 0.
- Optionalc: number
  The Skew X value. Default 0.
- Optionald: number
  The Scale Y value. Default 1.
- Optionaltx: number
  The Translate X value. Default 0.
- Optionalty: number
  The Translate Y value. Default 0.
Returns TransformMatrix
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20598

Properties

a

a: number

The Scale X value.

b

b: number

The Skew Y value.

c

c: number

The Skew X value.

d

d: number

The Scale Y value.

decomposedMatrix

decomposedMatrix: object

The decomposed matrix.

e

e: number

The Translate X value.

f

f: number

The Translate Y value.

matrix

matrix: Float32Array

The matrix values.

quad

quad: Float32Array

The temporary quad value cache.

`Readonly`rotation

rotation: number

The rotation of the Matrix. Value is in radians.

`Readonly`rotationNormalized

rotationNormalized: number

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

`Readonly`scaleX

scaleX: number

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

`Readonly`scaleY

scaleY: number

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

tx

tx: number

The Translate X value.

ty

ty: number

The Translate Y value.

Methods

applyInverse

applyInverse(x: number, y: number, output?: Vector2): Vector2
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
- x: number
  The x position to translate.
- y: number
  The y position to translate.
- Optionaloutput: Vector2
  A Vector2, or point-like object, to store the results in.
Returns Vector2
The coordinates, inverse-transformed through this matrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20853

applyITRS

applyITRS(
    x: number,
    y: number,
    rotation: number,
    scaleX: number,
    scaleY: number,
): this
Apply the identity, translate, rotate and scale operations on the Matrix.
Parameters
- 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 this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20841

copyFrom

copyFrom(src: TransformMatrix): this
Set the values of this Matrix to copy those of the matrix given.
Parameters
- src: TransformMatrix
  The source Matrix to copy from.
Returns this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20761

copyFromArray

copyFromArray(src: any[]): this
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
- src: any[]
  The array of values to set into this matrix.
Returns this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20769

copyToArray

copyToArray(out?: any[]): any[]
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
- Optionalout: any[]
  The array to copy the matrix values in to.
Returns any[]
An array where elements 0 to 5 contain the values from this matrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20808

copyToContext

copyToContext(ctx: CanvasRenderingContext2D): CanvasRenderingContext2D
Copy the values from this Matrix to the given Canvas Rendering Context. This will use the Context.transform method.
Parameters
- ctx: CanvasRenderingContext2D
  The Canvas Rendering Context to copy the matrix values to.
Returns CanvasRenderingContext2D
The Canvas Rendering Context.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20791

copyWithScrollFactorFrom

copyWithScrollFactorFrom(
    src: TransformMatrix,
    scrollX: number,
    scrollY: number,
    scrollFactorX: number,
    scrollFactorY: number,
): this
Set the values of this Matrix to copy those of the matrix given, combined with a camera scroll factor.

This is used in many render functions.
Parameters
- src: TransformMatrix
  The source Matrix to copy from.
- scrollX: number
  The horizontal scroll value to factor in.
- scrollY: number
  The vertical scroll value to factor in.
- scrollFactorX: number
  The horizontal scroll factor to apply.
- scrollFactorY: number
  The vertical scroll factor to apply.
Returns this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20783

decomposeMatrix

decomposeMatrix(): DecomposeMatrixResults
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 -> scaleundefined

Returns DecomposeMatrixResults
The decomposed Matrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20830

destroy

destroy(): void
Destroys this Transform Matrix.

Returns void
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20919

getCSSMatrix

getCSSMatrix(): string
Returns a string that can be used in a CSS Transform call as a matrix property.undefined

Returns string
A string containing the CSS Transform matrix values.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20914

getX

getX(x: number, y: number): number
Returns the X component of this matrix multiplied by the given values. This is the same as x * a + y * c + e.
Parameters
- x: number
  The x value.
- y: number
  The y value.
Returns number
The calculated x value.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20877

getXRound

getXRound(x: number, y: number, round?: boolean): number
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
- x: number
  The x value.
- y: number
  The y value.
- Optionalround: boolean
  Math.round the resulting value? Default false.
Returns number
The calculated x value.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20897

getY

getY(x: number, y: number): number
Returns the Y component of this matrix multiplied by the given values. This is the same as x * b + y * d + f.
Parameters
- x: number
  The x value.
- y: number
  The y value.
Returns number
The calculated y value.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20886

getYRound

getYRound(x: number, y: number, round?: boolean): number
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
- x: number
  The x value.
- y: number
  The y value.
- Optionalround: boolean
  Math.round the resulting value? Default false.
Returns number
The calculated y value.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20908

invert

invert(): this
Invert the Matrix.undefined

Returns this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20754

loadIdentity

loadIdentity(): this
Reset the Matrix to an identity matrix.undefined

Returns this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20680

multiply

multiply(rhs: TransformMatrix, out?: TransformMatrix): TransformMatrix
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
- rhs: TransformMatrix
  The Matrix to multiply by.
- Optionalout: TransformMatrix
  An optional Matrix to store the results in.
Returns TransformMatrix
Either this TransformMatrix, or the out Matrix, if given in the arguments.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20715

multiplyWithOffset

multiplyWithOffset(src: TransformMatrix, offsetX: number, offsetY: number): this
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: offsetX * b + offsetY * d + ty.
Parameters
- src: 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 this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20727

rotate

rotate(angle: number): this
Rotate the Matrix.
Parameters
- angle: number
  The angle of rotation in radians.
Returns this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20703

scale

scale(x: number, y: number): this
Scale the Matrix.
Parameters
- x: number
  The horizontal scale value.
- y: number
  The vertical scale value.
Returns this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20696

setQuad

setQuad(
    x: number,
    y: number,
    xw: number,
    yh: number,
    quad?: Float32Array<ArrayBufferLike>,
): Float32Array
Performs the 8 calculations required to create the vertices of a quad based on this matrix and the given vertex coordinates.

The result is stored in TransformMatrix.quad, which is returned from this method.
Parameters
- x: number
  The x value of the top-left vertex of the quad.
- y: number
  The y value of the top-left vertex of the quad.
- xw: number
  The x value of the bottom-right vertex of the quad. This is the x + width.
- yh: number
  The y value of the bottom-right vertex of the quad. This is the y + height.
- Optionalquad: Float32Array<ArrayBufferLike>
  Optional Float32Array to store the results in. Otherwise uses the local quad array.
Returns Float32Array
The quad Float32Array.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20868

setToContext

setToContext(ctx: CanvasRenderingContext2D): CanvasRenderingContext2D
Copy the values from this Matrix to the given Canvas Rendering Context. This will use the Context.setTransform method.
Parameters
- ctx: CanvasRenderingContext2D
  The Canvas Rendering Context to copy the matrix values to.
Returns CanvasRenderingContext2D
The Canvas Rendering Context.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20799

setTransform

setTransform(
    a: number,
    b: number,
    c: number,
    d: number,
    tx: number,
    ty: number,
): this
Set the values of this Matrix.
Parameters
- 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 this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20820

transform

transform(
    a: number,
    b: number,
    c: number,
    d: number,
    tx: number,
    ty: number,
): this
Transform the Matrix.
Parameters
- 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 this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20739

transformPoint

transformPoint(x: number, y: number, point?: Vector2Like): Vector2Like
Transform a point in to the local space of this Matrix.
Parameters
- x: number
  The x coordinate of the point to transform.
- y: number
  The y coordinate of the point to transform.
- Optionalpoint: Vector2Like
  Optional Point object to store the transformed coordinates in.
Returns Vector2Like
The Point containing the transformed coordinates.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20748

translate

translate(x: number, y: number): this
Translate the Matrix.
Parameters
- x: number
  The horizontal translation value.
- y: number
  The vertical translation value.
Returns this
This TransformMatrix.
- Defined in node_modules/.pnpm/phaser@4.2.1/node_modules/phaser/types/phaser.d.ts:20688

Class TransformMatrix

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns TransformMatrix

Properties

a

b

c

d

decomposedMatrix

e

f

matrix

quad

Readonlyrotation

ReadonlyrotationNormalized

ReadonlyscaleX

ReadonlyscaleY

tx

ty

Methods

applyInverse

Parameters

Returns Vector2

applyITRS

Parameters

Returns this

copyFrom

Parameters

Returns this

copyFromArray

Parameters

Returns this

copyToArray

Parameters

Returns any[]

copyToContext

Parameters

Returns CanvasRenderingContext2D

copyWithScrollFactorFrom

Parameters

Returns this

decomposeMatrix

Returns DecomposeMatrixResults

destroy

Returns void

getCSSMatrix

Returns string

getX

Parameters

Returns number

getXRound

Parameters

Returns number

getY

Parameters

Returns number

getYRound

Parameters

Returns number

invert

Returns this

loadIdentity

Returns this

multiply

Parameters

Returns TransformMatrix

multiplyWithOffset

Parameters

Returns this

rotate

Parameters

Returns this

scale

Parameters

`Readonly`rotation

`Readonly`rotationNormalized

`Readonly`scaleX

`Readonly`scaleY