Using drawCircle in update method

Phaser 2 / CE
1

Hi guys,

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:

this.counter = 100;	
this.mask = this.game.add.graphics(0, 0);

Then in the update method, when the flag is triggered I can increase the diameter of the mask until it fills the screen:

		if(this.updateFlag >= 0)
	{
		this.mask.beginFill(0xffffff);
		this.mask.drawCircle(this.game.world.centerX, this.game.world.centerY, this.counter);
		this.mask.anchor.setTo(0.5);
		this.counter += 30;

		if(this.counter >= 2250)
		{
			this.counter = 100;
			this.createEndScreen(this.updateFlag);
			delete this.updateFlag;
		}
	}

I guess I’m doing this pretty badly and there’s a better way to handle this? Any help would be appreciated. Thanks

2

You can tween the graphic’s scale property.

If you redraw the graphic, make sure you clear it each time.

3

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:

		this.bg = this.game.add.image(0, 0, 'bg');
	this.mask = this.game.add.graphics(0, 0);
	this.mask.beginFill(0xffffff);
	this.mask.drawCircle(this.game.world.centerX, this.game.world.centerY, 100);
	this.mask.endFill();
	this.mask.anchor.setTo(0.5);
	this.bg.mask = this.mask;

and this masks the background like so:

mask1
mask11272×738 3.26 KB

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);

this happens:

mask2
mask21272×708 2.3 KB

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?

4 
this.mask = this.game.add.graphics(this.game.world.centerX, this.game.world.centerY);
this.mask.beginFill(0xffffff);
this.mask.drawCircle(0, 0, 100);
this.mask.endFill();
1 Like
5

@samme perfect, thank you very much!