Class: Transform

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:50

The Transform class facilitates the manipulation of a 2D transformation matrix through user-friendly properties: position, scale, rotation, skew, and pivot.

Example

// Basic transform usage
const transform = new Transform();
transform.position.set(100, 100);
transform.rotation = Math.PI / 4; // 45 degrees
transform.scale.set(2, 2);

// With pivot point
transform.pivot.set(50, 50);
transform.rotation = Math.PI; // Rotate around pivot

// Matrix manipulation
const matrix = transform.matrix;
const position = { x: 0, y: 0 };
matrix.apply(position); // Transform point

Remarks

• Manages 2D transformation properties
• Auto-updates matrix on changes
• Supports observable changes
• Common in display objects

Standard

See

• Matrix For direct matrix operations
• ObservablePoint For point properties

Constructors

Constructor

> new Transform(options?): Transform

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:136

Parameters

options?

TransformOptions

Options for the transform.

Returns

Transform

Properties

_cx

> protected _cx: number

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:113

The X-coordinate value of the normalized local X axis, the first column of the local transformation matrix without a scale.

_cy

> protected _cy: number

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:123

The X-coordinate value of the normalized local Y axis, the second column of the local transformation matrix without a scale.

_matrix

> _matrix: Matrix

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:55

Internal

The local transformation matrix.

_rotation

> protected _rotation: number

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:108

The rotation amount.

_sx

> protected _sx: number

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:118

The Y-coordinate value of the normalized local X axis, the first column of the local transformation matrix without a scale.

_sy

> protected _sy: number

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:128

The Y-coordinate value of the normalized local Y axis, the second column of the local transformation matrix without a scale.

dirty

> protected dirty: boolean

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:129

observer

> protected observer: Observer<Transform>

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:130

pivot

> pivot: ObservablePoint

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:94

The pivot point of the container that it rotates around.

Example

// Center pivot
transform.pivot.set(sprite.width / 2, sprite.height / 2);

// Corner rotation
transform.pivot.set(0, 0);
transform.rotation = Math.PI / 4; // 45 degrees

position

> position: ObservablePoint

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:68

The coordinate of the object relative to the local coordinates of the parent.

Example

// Basic position setting
transform.position.set(100, 100);

// Individual coordinate access
transform.position.x = 50;
transform.position.y = 75;

scale

> scale: ObservablePoint

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:81

The scale factor of the object.

Example

// Uniform scaling
transform.scale.set(2, 2);

// Non-uniform scaling
transform.scale.x = 2; // Stretch horizontally
transform.scale.y = 0.5; // Compress vertically

skew

> skew: ObservablePoint

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:106

The skew amount, on the x and y axis.

Example

// Apply horizontal skew
transform.skew.x = Math.PI / 6; // 30 degrees

// Apply both skews
transform.skew.set(Math.PI / 6, Math.PI / 8);

Accessors

matrix

Get Signature

> get matrix(): Matrix

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:150

The transformation matrix computed from the transform's properties. Combines position, scale, rotation, skew, and pivot into a single matrix.

Example

// Get current matrix
const matrix = transform.matrix;
console.log(matrix.toString());

See

• Matrix For matrix operations
• Transform.setFromMatrix For setting transform from matrix

Returns

Matrix

rotation

Get Signature

> get rotation(): number

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:199

The rotation of the object in radians.

Example

// Basic rotation
transform.rotation = Math.PI / 4; // 45 degrees

// Rotate around pivot point
transform.pivot.set(50, 50);
transform.rotation = Math.PI; // 180 degrees around pivot

// Animate rotation
app.ticker.add(() => {
    transform.rotation += 0.1;
});

See

• Transform#pivot For rotation point
• Transform#skew For skew effects

Returns

number

Set Signature

> set rotation(value): void

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:200

Parameters

value

number

Returns

void

Methods

_onUpdate()

> _onUpdate(point?): void

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:156

Internal

Called when a value changes.

Parameters

point?

ObservablePoint

Returns

void

setFromMatrix()

> setFromMatrix(matrix): void

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:179

Decomposes a matrix and sets the transforms properties based on it.

Parameters

matrix

Matrix

The matrix to decompose

Returns

void

Example

// Basic matrix decomposition
const transform = new Transform();
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

transform.setFromMatrix(matrix);
console.log(transform.position.x); // 100
console.log(transform.rotation); // ~0.785 (π/4)

See

• Matrix#decompose For the decomposition logic
• Transform#matrix For getting the current matrix

toString()

> toString(): string

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:159

Returns

string

updateSkew()

> protected updateSkew(): void

Defined in: node_modules/pixi.js/lib/utils/misc/Transform.d.ts:158

Called when the skew or the rotation changes.

Returns

void