# Removing the shadow around sprite

**URL:** <https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721>\
**Category:** Phaser 3\
**Created:** [December 28, 2019, 10:47am UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721 "2019-12-28T10:47:03Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 28, 2019, 10:47am UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/1 "2019-12-28T10:47:04Z")

</div>

Hi there,

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

```javascript
      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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/f11896c0eaa1372851520d9f696ef09de1d3d64b.png)

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

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 28, 2019, 12:09pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/2 "2019-12-28T12:09:39Z")

</div>

Hi @doug! Is that the issue, related to loosing sprite sharpness after scene restart post, you have posted [here](https://phaser.discourse.group/t/what-is-the-best-practice-for-level-management/4717/5)?

---

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 28, 2019, 12:41pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/3 "2019-12-28T12:41:34Z")

</div>

Hi @fselcukcan

Huge thanks for your help on two questions 🙂

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3c9632d493de8bc58e0d4a004d312592cffe0577.png)

Thanks again for your help sir,

Doug

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 28, 2019, 3:01pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/4 "2019-12-28T15:01:21Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 28, 2019, 3:46pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/5 "2019-12-28T15:46:46Z")

</div>

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](https://glitch.com/~fern-pyjama)  
Output: [https://fern-pyjama.glitch.me/](https://fern-pyjama.glitch.me/)

Thanks,

Doug

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 28, 2019, 3:50pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/6 "2019-12-28T15:50:50Z")

</div>

> [@doug](#):
>
> I think this is something to do with the color combination and the size of the circle.

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.

---

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 28, 2019, 3:51pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/7 "2019-12-28T15:51:51Z")

</div>

I’ll give it a try 🙂 Thank you sir

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 28, 2019, 4:05pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/8 "2019-12-28T16:05:35Z")

</div>

Please let me know how it goes. I wonder.

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 28, 2019, 4:27pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/9 "2019-12-28T16:27:36Z")

</div>

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

Phaser Examples has [this example](https://labs.phaser.io/edit.html?src=src%5Cgame%20objects%5Cgraphics%5Cprimitive%20types.js)  
and I have put it on glitch:

> **[phaser3-graphics](https://glitch.com/~phaser3-graphics)**
>
> phaser3 graphics objects 🎏 Glitch is the friendly community where everyone can discover & create the best apps on the web.

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

---

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 28, 2019, 4:35pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/10 "2019-12-28T16:35:23Z")

</div>

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 🙂 Have a wonderful 2020!

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 28, 2019, 4:46pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/11 "2019-12-28T16:46:46Z")

</div>

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

Cheers! Great new years to you too!

---

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 28, 2019, 5:35pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/12 "2019-12-28T17:35:18Z")

</div>

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](https://glitch.com/~spectrum-ornament)  
The output: [https://glitch.com/~spectrum-ornament](https://glitch.com/~spectrum-ornament)

Basically I used two fillCircle() calls. Cheers 🙂

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

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 28, 2019, 9:57pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/13 "2019-12-28T21:57:15Z")

</div>

Are you sure it looks different than the original one. To me they all looks the same 🙂  
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:

> **[Glitch](https://glitch.com/edit/#!/jealous-jonquil)**
>
> Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

  
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.

---

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 29, 2019, 7:07am UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/14 "2019-12-29T07:07:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 29, 2019, 3:33pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/15 "2019-12-29T15:33:09Z")

</div>

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](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](https://github.com/photonstorm/phaser/issues/4934)

Doug

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [December 29, 2019, 5:12pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/16 "2019-12-29T17:12:12Z")

</div>

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:

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

```

Greetings.

---

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 29, 2019, 5:16pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/17 "2019-12-29T17:16:28Z")

</div>

> [@jjcapellan](#):
>
> this.game.textures.remove(‘TRIANGLE’);

Many thanks @jjcapellan 🙂

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 29, 2019, 9:16pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/18 "2019-12-29T21:16:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![doug](https://avatars.discourse-cdn.com/v4/letter/d/dbc845/32.png) [@doug](https://phaser.discourse.group/u/doug)\
**Post date:** [December 31, 2019, 12:39pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/19 "2019-12-31T12:39:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 31, 2019, 1:23pm UTC](https://phaser.discourse.group/t/removing-the-shadow-around-sprite/4721/20 "2019-12-31T13:23:48Z")

</div>

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.