Rotation on center pivot not maintained with multiple containers.

Expected Behavior

I set the pivot point to center on an outer and an inner container, and then add one rectangle to the inner container.

When I set an angle on the inner container the rectangle rotates on its center point. I would expect the same on the outer container, but that’s not happening.

Current Behavior

Setting the outer container has the correct rotation, but the center point moves.

Possible Solution

Unfortunately I don’t know what’s causing it, so that makes it hard to offer a solution.

Steps to Reproduce

I’ve created 3 fiddles for you to see what’s going on.

This one shows the correct rotation on the inner container: https://jsfiddle.net/y3j2tLd8/15/

This one shows the incorrect rotation on the outer container: https://jsfiddle.net/y3j2tLd8/13/

This one shows that the rotation becomes correct on the outer container if I move the y position to the outer container (no idea why that affects it): https://jsfiddle.net/y3j2tLd8/14/

Environment

• pixi.js version: 6.0.0
• Browser & Version: Chrome 88 (or any other modern browser)
• OS & Version: Mac OS 11.2.2
• Running Example: https://jsfiddle.net/y3j2tLd8/13/

[bigtimebuddy]

You need to offset the pivot of the outer Container. https://jsfiddle.net/bigtimebuddy/Lx370h5b/

Please keep in mind that pivot and position are basically the same thing in PixiJS. Pivot defines the origin for children of a Container and position is the local position in the parent’s coordinate space. In CSS and other rendering systems the origin and pivot are sometimes treated separately. It’s a quirk about PixiJS that takes getting use to.

[bigtimebuddy]

You’re welcome, good luck!