Faking a mask inside a container

Examples
1

As of Phaser v3.80, masks always render in global coordinates, so if you put a mask source inside a container, you will get the wrong effect. A workaround is to put an invisible game object inside the container, then copy its global transform values to the real mask source outside the container.

this.events.on("prerender", () => {
  const {
    tx,
    ty,
    scaleX,
    scaleY,
    rotationNormalized
  } = maskProxy.getWorldTransformMatrix();

  mask
    .setPosition(tx, ty)
    .setScale(scaleX, scaleY)
    .setRotation(rotationNormalized);
});
2 Likes