I’m trying to use a circle graphic as a mask for transitions in a game I’m making. I couldn’t find a way to increase the size of an existing graphic so I had the idea to redraw it when a flag is triggered in the update method. This worked without any issues on my work PC but I’ve done some tests on lower spec office PCs and mobile phones and the frame rate really tanks.
In the create method I create the graphic and counter. The counter is used for the masks diameter:
Hi @samme, thank you for the reply. I’ve tried to clear the graphic each time. It’s helped the performance a little, but not much.
Tweening the graphic’s scale is really confusing me because it is moving the graphic off screen for some reason. I have no idea why because if I create a tween to scale a sprite, the sprite stays in place.
I’ve stripped most of the code out of the game to test and show this, so my create now has:
and then if I use a tween to scale the mask using:
this.bgMaskTween = this.game.add.tween(this.mask.scale).to({x: 2, y: 2}, Phaser.Timer.SECOND * 3, null, true);
I can see that the mask has scaled up via the tween but it moves off to the bottom right of the screen. My intention here is that the bg is masked and revealed over 2 or 3 seconds, staying in the center of the screen. Do you have any idea what could be happening?