Gradient circle

Phaser 3
1

Is it possible to create a uniform gradient in a drawn circle? When I use fillGradientStyle it uses a gradient on internal triangles.
It can be seen in this example https://labs.phaser.io/view.html?src=src\game%20objects\graphics\primitives\arc%20gradient%20filled.js

2

Great question, I am struggling with this myself. Anyone have thoughts on how to accomplish this?

Edit: Nvm, figured it out

3

Well, how did you figure it out?

4

One way to do it:

this.graphics = this.add.graphics();

        const shape = this.make.graphics();

        //  Create a hash shape Graphics object
        shape.fillStyle(0xffffff);

        //  You have to begin a path for a Geometry mask to work
        shape.fillCircle(50, 50, 100)

        const mask = shape.createGeometryMask();

        this.graphics.setMask(mask);

modified this example:

https://labs.phaser.io/edit.html?src=src/display/masks/geometry%20mask/graphics%20mask.js&v=3.55.2

I used extra steps: draw garphics to a renderTexture, save that renderTexture as an image with a KEY.
Then I can use the images as is, and I can destroy the graphics and renderTextures.

const posX = 100
        const posY = 100
        
        const size = 600
        const gradient1 = 0xff0000
        const gradient2 = 0xffff00

        //create graphic: a large rectangle
        let rectangle = this.add.graphics();
        rectangle.setVisible(false);
        rectangle.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);
        rectangle.fillRect(0, 0, size, size);

        let rt1 = this.add.renderTexture(0, 0, size, size);
        let rt2 = this.add.renderTexture(0, 0, size, size);

        rt1.draw(rectangle);
        rt2.draw(rectangle);

        let eraser = this.add.circle(0, 0, size / 2, 0x000000)
        eraser.setVisible(false);

        //erase the circle from the first rect
        rt1.erase(eraser, size / 2, size / 2)

        //erase the rect with the cutout from the second rect, creating the circle with gradient
        rt2.erase(rt1, 0, 0)

        //the center of the renderTexture has offset of (size / 2)
        rt2.x = posX - (size / 2)
        rt2.y = posY - (size / 2)

        //save the rendertexture with a key 
        rt2.saveTexture("gradientCircle1")
        this.add.image(posX, posY, "gradientCircle1").setOrigin(0.5).setScale(1)

        rt2.destroy()
        rt1.destroy()
        eraser.destroy()
        rectangle.destroy()```
1 Like