Pixi.js Container Scale and Rotation Effects on Children

In Pixi.js, the display hierarchy operates as a tree structure where transformations applied to a parent Container automatically propagate down to all of its child elements. This article explains how scaling and rotating a parent container affects the visual output, spatial positioning, and coordinate systems of its children, and how you can work with these inherited transformations in your projects.

How Transformation Inheritance Works

Pixi.js uses a hierarchical scene graph. Every Container has a local transform matrix and a world transform matrix. When you modify the scale or rotation of a parent container, Pixi.js updates the parent’s local transform. During the rendering loop, Pixi.js multiplies this parent transform by each child’s local transform to calculate the child’s worldTransform. This means any change to the parent is mathematically applied to the children, even though the children’s local property values remain unchanged.

What Happens When You Scale the Parent Container?

When you change a parent’s scale (e.g., parent.scale.set(2)):

• Visual Size: All child elements will visually scale up or down to match the parent’s scale factor.
• Positioning: The distance between the children and the parent’s registration point (pivot) scales proportionally. If a child is positioned at local coordinate x: 50 inside a parent container, and the parent is scaled by 2, the child will visually appear 100 pixels away from the parent’s origin on the screen.
• Local vs. World Properties: The child’s local scale property (e.g., child.scale.x) remains 1 (or whatever its original local scale was). However, its actual rendered size in global screen space doubles.

What Happens When You Rotate the Parent Container?

When you rotate a parent container (e.g., parent.rotation = 0.5):

• Visual Rotation: All child elements rotate visually by the same angle.
• Orbital Movement: Children do not just rotate in place; they rotate around the parent’s pivot point. They maintain their relative angle and distance to the parent’s origin, acting like a rigid, connected object.
• Local vs. World Properties: The child’s local rotation or angle properties do not change. The rotation you see on screen is the cumulative result of the parent’s rotation and the child’s local rotation.

Non-Uniform Scaling and Rotation (Skewing)

If you apply non-uniform scaling to a parent container (scaling X and Y by different factors, such as parent.scale.set(2, 1)) and then rotate either the parent or the child, the child elements will experience a visual distortion known as skewing or shearing. This is a natural mathematical consequence of matrix multiplication and is important to keep in mind when designing complex animations.

How to Calculate Global Coordinates

Because local coordinates do not change when a parent is scaled or rotated, you cannot rely on child.x or child.y to find where a child is on the screen. To get the true, transformed position, scale, or rotation of a child, you must use Pixi’s coordinate conversion methods:

• child.toGlobal(new PIXI.Point(0,0)) returns the absolute screen/canvas coordinates of the child, taking all parent scales, rotations, and positions into account.
• child.worldTransform contains the final multiplied matrix representing the absolute position, scale, and rotation of the child in the global space.