pixi.js
    Preparing search index...

    Class Transform

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

    // 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
    • Manages 2D transformation properties
    • Auto-updates matrix on changes
    • Supports observable changes
    • Common in display objects
    Index

    Constructors

    constructor

    Properties

    pivot position scale skew

    Accessors

    matrix rotation

    Methods

    setFromMatrix toString

    Constructors

    Properties

    pivot: ObservablePoint

    The pivot point of the container that it rotates around.

    // 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: ObservablePoint

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

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

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

    The scale factor of the object.

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

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

    The skew amount, on the x and y axis.

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

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

    Accessors

    • get matrix(): Matrix

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

      Returns Matrix

      // Get current matrix
      const matrix = transform.matrix;
      console.log(matrix.toString());
    • get rotation(): number

      The rotation of the object in radians.

      Returns number

      // 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;
      });
    • set rotation(value: number): void

      Parameters

      • value: number

      Returns void

    Methods

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

      Parameters

      • matrix: Matrix

        The matrix to decompose

      Returns void

      // 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)

    • Returns string

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods