Advice on bucket fill game object

Phaser 3
1

I need advice creating a bucket game object, that gets filled up to a certain level with liquid.
There will be multiple bucket shapes and sizes and the fill could be any color and even vary throughout the lifecycle, eg. think mixing colors of paint.

The sprite will have a background image, eg. a bitmap of the bucket.
Then there will be a polygon of the full filled contents, eg. various colors of paint, etc…
I was then hoping to mask the fill contents to show the level. eg. just a simple rect that clips the polygon from the bottom up to the level.

I have tried doing this with a Container, but ran into the limitation that children can be masked.

Therefore I was thinking the fill needs to be a separate sprite, but I am having trouble aligning that sprite with the various origins, scales, rotations, tweens, etc… that the bucket sprite could be in… it just works nicely and automatic with a Container.

Is there an example for creating a shape that is always overlayed on a sprite and maintains it’s offset when the sprite is moved, scaled and rotated?

Also what is the best way to debug things like this, ie. can you set a flag to draw bounds outlines and origin points around all gameobjects?

2

For anyone finding this later, I essentially used separate sprites (as I needed to mask) and mirror their position to the main one, in the update method. This isn’t a perfect solution as they seem to lag a step behind when tweening. So I am still interested to hear if there is a better way to overlay a gameobject on another gameobject? (or better, maintain a fixed local transform from another gameobject)