I'm working on a 2D transform system that has the following requirements:
Transforms can have children
Transforms have anchor points/origins that offset them
Children should honor the parent's origin for translation
Rotations occur relative to the local origin (i.e. objects rotate around their origin rather than the parent's)
As an example of what I'm looking for: - You add red square in the middle of the screen and center its origin - You add a white square, center its origin, scale it down slightly and make it a child of the red square - Every frame you rotate both squares by a fixed amount
What you should see is a red square rotating around its center in the middle of the screen and a white square rotating inside the red square.
The way that I'm doing it now is something like this:
c = child; p = child.parent; c.local_transform.translate(c.translation); c.local_transform.rotate(c.rotation); c.local_transform.scale(c.scale); c.local_transform.translate(c.origin.inverse()); c.local_transform.translate(p.origin); c.world_transform = c.local_transform * p.world_transform;
This doesn't fully work however. The red square appears in the center and rotates around its origin but the white square seems to rotate both around its origin AND the world origin (i.e. the top left corner of the window).
What am I missing?