Scaling a group with sprites where some have masks breaks the masks

[JesperJohansson]

I'm working on a "fake zoom" function that looks like this:

class Zoomer extends Phaser.Group {
  zoom = (amount = { x: 1.5, y: 1.5 }) => {
    this.x = -((amount.x * (this.game.width / 2)) - (this.game.width / 2));
    this.y = this.game.camera.bounds.y - (amount.x * (this.game.height * 1.15));
    this.scale.setTo(amount.x, amount.y);
  }
}

The zooming itself works and goes where I want it to but all the masks in the group stay where they are and don't scale at all.

This is how I usually create masks on a Phaser.Sprite:

  createMask() {
    const graphics = this.game.add.graphics(this.x, this.y);
    graphics.beginFill(0xFFFFFF);
    graphics.drawRect(0, 0, this.width, this.height);
    this.addChild(graphics);
    this.mask = graphics;
  }

 

How can I make the group scaling/repositioning include the group's sprites' masks as well?

Edited January 16, 2018 by JesperJohansson
removed tweens for less code

[JesperJohansson]

It seems like I have to make another group for each sprite that I want to use a mask on for it to work correctly. If someone has a better solution please tell! :/

[samme]

I think masks are intended to be children of game.world only. You would have to scale or position them separately.