Graphics to Sprite creates pixelated edges

Phaser 3
1

Hi there,

I have the latest sprite and have the following code:

let graphics = this.add.graphics();  
            
graphics.fillStyle(0xFF0000);
graphics.fillCircle(radius, radius, radius * 0.95);
graphics.fillStyle(0xffffff);
graphics.fillCircle(radius, radius, radius * 0.1);
graphics.generateTexture("BALL", radius * 2, radius * 2)

let ball = this.physics.add.sprite(this.platformWidth / 2, -100, "BALL");

The ball unfortunately has pixelated edges. In fact, there is almost a gray circle around the ball and that area specifically gets pixelated. This happens especially when I restart my scene as I move from one level to the next in my game.

I’d be grateful if you have any pointer on the issue?

Thanks,

Doug

2

If the edges are getting “thicker” with each restart, you may be inadvertently stacking duplicate sprites (or scenes?) on top of each other.

Also, you probably want to remove (destroy) graphics after you generate the texture.

1 Like
3

Many thanks for your help