Hi everyone,
I’m having an issue with my understanding of mask behaviour. I’ve got a circle image inside a container and then put another slightly smaller image on top to create a sort of border around it. To make sure I can use a variety of images I applied a circle mask I created from a graphics shape to the smaller image so that it always fits, even if its rectangular. I’ve added the shape to the container as well.
Container
- biggerImage
- graphics shape
- smallerImage with mask
Now I want to start moving the container around, with both images and the mask moving along relative to the container. My problem is that I can’t seem to make the mask move. After going through the documentation I understand that to change a masks position, you need to move the shape it was created from instead of the actual mask. By moving the container, I theoretically kind of move the shape as well, but as the actual position of the shape never really changes (it’s 0,0 - relative to the container it’s in) the mask doesn’t move an inch. It just sits at the scene origin (0,0) in the top left corner of my canvas.
I kind of understand why this is happening, but I can’t seem to figure out a solution. I thought about applying the mask to the whole container so that I don’t have to worry about relative position, but then my first image would also be affected by the mask, and that is not what I intented to do. Maybe there is a way to tell the mask to move along with the container instead of the shape itself or maybe someone has another solution to my problem. I’ve included a code example down below.
//create draggable container to move everything around
let container = this.add.container(200, 200).setInteractive({hitArea: new Phaser.Geom.Circle(0, 0, 20), hitAreaCallback: Phaser.Geom.Circle.Contains, draggable: true});
//create big circle image and add it to container
let biggerImage = this.add.image(0, 0, 'circleImage').setDisplaySize(40, 40).setTintFill(0xFFFFFF);
container.add(biggerImage);
//create smaller circle to use as a mask
let shape = this.make.graphics().fillCircle(0, 0, 15);
container.add(shape);
//create small rectangular image, apply mask and add it to container
let smallerImage = this.add.image(0, 0, 'rectImage').setMask(shape.createGeometryMask());
container.add(smallerImage);
This is what I want it to look like. Note how the smaller image of the guy is affected by the mask while the pink circle behind it is not. This works because I’ve set the position of the graphics shape to the position of the container it’s in. The mask will now always remain at that position, rather than 0,0, but it still doesn’t move:
After moving:
