Removing the shadow around sprite

Phaser 3
1

Hi there,

I create a sprite from a graphics object with the below code

      let graphics = this.add.graphics();  
      graphics.fillStyle(0xff0000);
      graphics.fillCircle(radius, radius, radius * 0.95);      
      graphics.generateTexture("BALL", radius * 2, radius * 2)
      let ball = this.physics.add.sprite(100, -100, "BALL");              
      graphics.destroy();

image

For some reason, there is a gray shadow around the circle. It is a bit difficult to see on the above desktop image but the gray shadow is quite visible on mobile devices. Is there a way to remove this?

Many thanks,

Doug

2

Hi @doug! Is that the issue, related to loosing sprite sharpness after scene restart post, you have posted here?

3

Hi @fselcukcan

Huge thanks for your help on two questions :slight_smile:

Yes, it is precisely that. Basically, after the restart of the scene the gray circle around the sprite loses its sharpness. Something like belowā€¦ If there is a way to remove that gray shadow, I think the circle will look just fine.

image

Thanks again for your help sir,

Doug

4

I have created this glitch. There seems no gray outline as you have mentioned:
code: https://glitch.com/~summer-limburger
demo: https://summer-limburger.glitch.me/

Can you check it out? You may have other things interfering.

5

Hi @fselcukcan

I am very grateful for your time and help, truly huge thanks!

I agree there is no gray area in your example. In fact, I also increased the radius in my game and the gray area was not visible.

I think this is something to do with the color combination and the size of the circle.

I lowered the radius, plus made the circle and background colors differ more, which creates a pixelated outer area that looks like a gray circle. You may see it at the below links:

Code: https://glitch.com/~fern-pyjama
Output: https://fern-pyjama.glitch.me/

Thanks,

Doug

6

That can be true. I am not sure how to avoid that. You can use tricks like stroking the circle with the same color as fill color maybe.

Now it is visible in your example I can see.

1 Like
7

Iā€™ll give it a try :slight_smile: Thank you sir

8

Please let me know how it goes. I wonder.

9

I have started to believe that is a color combination thing.

Phaser Examples has this example
and I have put it on glitch:

Playing with the background can change the stroke effect you are getting with your turquoise color.

1 Like
10

Agreed, thanks @fselcukcan

Your suggestion seems to work. I drew an outer circle with the background color during sprite generation. There is still a shadow effect but it softened for some reason. At least, I do not get the pixelated look after level transition.

Once again, huge thanks :slight_smile: Have a wonderful 2020!

11

Do you have a demo and link to code! I would like to see.

Cheers! Great new years to you too!

12

Hi again,

The shadowy area is still there but the pixelation does not seem happen after restart() for some reason. At least that is what I feel is the case in my game.

The project: https://glitch.com/~spectrum-ornament
The output: https://glitch.com/~spectrum-ornament

Basically I used two fillCircle() calls. Cheers :slight_smile:

My background is a gradient so that might be another reason. As the ball moves around the color transition is a softer one I suppose.

Doug

13

Are you sure it looks different than the original one. To me they all looks the same :slight_smile:
Also if you change the scene background I see there is no black-grayish not coded outline.

I have also realized a different thing that I will post as a new post:


As I click to restart the scene with a circle new color the non coded outline goes away. More click more it goes away. Strange.

1 Like
14

Many thanks @fselcukcan

The gray area is still there as you rightly point out but it looks softer for some reason after scene restart. In my game, when the first time the scene is loaded, the gray area looks like a shadow. However, after scene restart the edges became choppy without the outer circle. Although, it is the other way in your example; ie the shadow disappears after restartsā€¦

I will play with this a bit moreā€¦ Maybe, painting the outer circle with a color that transitions between the ball color and background color could help.

Cheers,

Doug

1 Like
15

Hi @fselcukcan

If you are interested in, I observe another funny behavior. I draw a triangle and keep restarting the scene, which then creates a super pixelated triangle.

Please check https://glitch.com/~rattle-headphones and keep clicking to restart the scene to observe the behavior. It is very oddā€¦

I ended up creating an issue https://github.com/photonstorm/phaser/issues/4934

Doug

16

Hi,
The problem is caused by reusing the same texture key from the cache several times.
You could create the texture in another scene, or destroy the texture every time you restart the scene:

this.input.on("pointerdown", pointer => {
    console.log(1);
    this.game.textures.remove('TRIANGLE'); // <------
    this.scene.restart({ fillColor: 0x00ff00 });
  });

Greetings.

1 Like
17

Many thanks @jjcapellan :slight_smile:

18

Then scene restart does not clear all at the end, as I understand. Is that so?
Maybe it is the same thing causes the circle getting smoother on restart I have mentioned. Same reason causing opposite effects due to some shape and antialiasing relation in your triangle case.

I wonder why opposite effects for circle and triangular.

19

Hi @fselcukcan,

I suppose the textures are global or at least stored independent of the scene I guessā€¦ When you clear them, it works fine.

I am very grateful for all your help,

Cheers,

Doug

20

Yes, they are. You are right. But why it causes this effect?

Although these resources are stored globally, is a scene restart not supposed to release its connection to all these resources?

Also why does it cause this effect is still another question on its own.