How to cut out a circle from a black background in Phaser 3

18 Views Asked by At

I am making a sidescroller Phaser 3 game and have been having issues with how to make a transparent circle around the player on a black background or how to move the player to the front after the circle and background are drawn (if i used a yellow circle instead of the transparent one).

I have tried using masks and drawing a transparent circle on top of the background but I can't get it to work. I also tried a yellow circle and black background but both a bit transparent to get a cave and light like look but I didn't know how to draw it behind the player and enemies.

This is my current code and result

this.blackBackground = this.add.graphics()
this.blackBackground.fillStyle(0x000000, 1)
this.blackBackground.fillRect(0, 0, this.cameras.main.width, this.cameras.main.height)

var holeRadius = 100
var holeX = this.player.x
var holeY = this.player.y

this.blackBackground.fillStyle(0x000000, 0)
this.blackBackground.fillCircle(holeX, holeY, holeRadius)

The first code shows this picture there should be a transparent circle around the player(the purple rectangle)

My original idea was to make a yellow circle and black background both a bit transparent but the player then isn't seen enough and I don't know how to fix that, I would also like to still cut out the circle so the yellow wouldnt be so dark

this.blackBackground = this.add.graphics()
this.blackBackground.fillStyle(0x000000, 0.9)
this.blackBackground.fillRect(0, 0, this.cameras.main.width, this.cameras.main.height)

var holeRadius = 100
var holeX = this.player.x
var holeY = this.player.y

this.blackBackground.fillStyle(0xffff00, 0.4)
this.blackBackground.fillCircle(holeX, holeY, holeRadius)

This is the second result

0

There are 0 best solutions below