Class TransformMatrix

A Matrix used for display transformations for rendering.

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 types/phaser.d.ts:19315

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?: Math.Vector2): Math.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: Math.Vector2
  A Vector2, or point-like object, to store the results in.
Returns Math.Vector2
- Defined in types/phaser.d.ts:19551

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
- Defined in types/phaser.d.ts:19540

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
- Defined in types/phaser.d.ts:19468

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
- Defined in types/phaser.d.ts:19475

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[]
- Defined in types/phaser.d.ts:19510

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
- Defined in types/phaser.d.ts:19495

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
- Defined in types/phaser.d.ts:19488

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 -> scale

Returns DecomposeMatrixResults
- Defined in types/phaser.d.ts:19530

destroy

destroy(): void
Destroys this Transform Matrix.

Returns void
- Defined in types/phaser.d.ts:19611

getCSSMatrix

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

Returns string
- Defined in types/phaser.d.ts:19606

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
- Defined in types/phaser.d.ts:19573

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
- Defined in types/phaser.d.ts:19591

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
- Defined in types/phaser.d.ts:19581

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
- Defined in types/phaser.d.ts:19601

invert

invert(): this
Invert the Matrix.

Returns this
- Defined in types/phaser.d.ts:19462

loadIdentity

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

Returns this
- Defined in types/phaser.d.ts:19396

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
- Defined in types/phaser.d.ts:19427

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: offsetY * 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
- Defined in types/phaser.d.ts:19438

rotate

rotate(angle: number): this
Rotate the Matrix.
Parameters
- angle: number
  The angle of rotation in radians.
Returns this
- Defined in types/phaser.d.ts:19416

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
- Defined in types/phaser.d.ts:19410

setQuad

setQuad(
    x: number,
    y: number,
    xw: number,
    yh: number,
    quad?: Float32Array,
): 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
  Optional Float32Array to store the results in. Otherwises uses the local quad array.
Returns Float32Array
- Defined in types/phaser.d.ts:19565

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
- Defined in types/phaser.d.ts:19502

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
- Defined in types/phaser.d.ts:19521

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
- Defined in types/phaser.d.ts:19449

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
- Defined in types/phaser.d.ts:19457

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
- Defined in types/phaser.d.ts:19403

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 Math.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