# How Phaser can make a flashing animation of sprite?

**URL:** <https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503>\
**Category:** Phaser 3\
**Created:** [March 3, 2019, 2:27pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503 "2019-03-03T14:27:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 3, 2019, 2:27pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/1 "2019-03-03T14:27:49Z")

</div>

here is an example of such animation [https://www.youtube.com/watch?v=wxd9NZrt73o&feature=youtu.be](https://www.youtube.com/watch?v=wxd9NZrt73o&feature=youtu.be)

I’ll be appreciated of any hints or googles.

Thank you 🙂

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 3, 2019, 2:46pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/2 "2019-03-03T14:46:40Z")

</div>

Try `setTint()` in combination with a tween.

[Link to Sprite docs](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Sprite.html)

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 3, 2019, 2:52pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/3 "2019-03-03T14:52:17Z")

</div>

thank you good sir.

Diving into it…

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 3, 2019, 2:59pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/4 "2019-03-03T14:59:36Z")

</div>

Actually, I just tried it and it does not work 😕  
Guess it is not that easy, sorry

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 3, 2019, 3:28pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/5 "2019-03-03T15:28:22Z")

</div>

This works 🙂  
https://codepen.io/yandeu/embed/preview/wOWaPr?height=300&slug-hash=wOWaPr&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 3, 2019, 5:54pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/6 "2019-03-03T17:54:59Z")

</div>

for some reason it doesn’t work for me

[https://monosnap.com/file/n851DenQvOhy2pGYtmlgwiNiM2d1Wc](https://monosnap.com/file/n851DenQvOhy2pGYtmlgwiNiM2d1Wc)

I think it is because the sprite has a big transparent sides. No?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 3, 2019, 5:59pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/7 "2019-03-03T17:59:36Z")

</div>

It looks like you are not using the same scale for sprite and graphics.

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 3, 2019, 6:01pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/8 "2019-03-03T18:01:05Z")

</div>

I don’t use scale at all

[https://monosnap.com/file/uRuyTtXekbcvtnoacldObYu5xvfXyB](https://monosnap.com/file/uRuyTtXekbcvtnoacldObYu5xvfXyB)

the example is absolutely the same just with me assets

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 3, 2019, 6:02pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/9 "2019-03-03T18:02:47Z")

</div>

Can you please upload your image and I will test it as soon as I’m home on my computer? (In about 3-5 hours)

Edit:  
Ooh I just saw that you are using an Atlas. Maybe because of this it does not work? Anyways, I will test it later if this topic has not been resolved till then.

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 3, 2019, 6:12pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/10 "2019-03-03T18:12:20Z")

</div>

yes, you right.

I’ve just tested using a single image without multiatlas and it works.

For some reason this method doesn’t work with atlas

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 3, 2019, 6:29pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/11 "2019-03-03T18:29:46Z")

</div>

I was trying to use frame data. The result gets a bit better, but not perfect still

[https://monosnap.com/file/gBILhCWK3HdoQyvfjTNfryRLtS8Qcn](https://monosnap.com/file/gBILhCWK3HdoQyvfjTNfryRLtS8Qcn)

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 3, 2019, 6:55pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/12 "2019-03-03T18:55:07Z")

</div>

[https://github.com/oduvan/phaser3-my-examples](https://github.com/oduvan/phaser3-my-examples) - here is a project, you can simple `npm start` it

here is an actual code I’m experimenting with [https://github.com/oduvan/phaser3-my-examples/blob/master/flashing.html](https://github.com/oduvan/phaser3-my-examples/blob/master/flashing.html)

assets can be found here [https://github.com/oduvan/phaser3-my-examples/tree/master/assets](https://github.com/oduvan/phaser3-my-examples/tree/master/assets)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 3, 2019, 10:07pm UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/13 "2019-03-03T22:07:32Z")

</div>

I have fixed it!

You where not that far away from the solution. You have to use

```javascript
graphics.fillRect(frame.x, frame.y, frame.cutWidth, frame.cutHeight)

```

https://codepen.io/yandeu/embed/preview/jJryEX?height=300&slug-hash=jJryEX&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 4, 2019, 6:38am UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/14 "2019-03-04T06:38:35Z")

</div>

it works perfect

Thank you

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 4, 2019, 7:30am UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/15 "2019-03-04T07:30:28Z")

</div>

Looks like this method work for WebGL only, but doesn’t work for canvas.

This is how changing to canvas looks like [https://monosnap.com/file/f3ycfQ8ub926OletEVo2Tc5xxH2l4l](https://monosnap.com/file/f3ycfQ8ub926OletEVo2Tc5xxH2l4l)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 4, 2019, 10:38am UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/16 "2019-03-04T10:38:31Z")

</div>

Many features work only with WebGL. WebGL is just more powerful than canvas. I personally do not see any use case for the canvas renderer any more. WebGL support is very good and works well on almost all devices. See [webglstats](https://webglstats.com/).

Or do you have an use case where you absolutely need canvas?

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 4, 2019, 10:54am UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/17 "2019-03-04T10:54:32Z")

</div>

Thank you for the link with stats.

I’ll focus on WebGL as well then. I had an issue with using WebGL with Electron, which was fixed by simply switching to canvas, but I’ll probably get back the that issue if statistics is so dramatic.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 4, 2019, 10:59am UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/18 "2019-03-04T10:59:34Z")

</div>

Hope you’ll find a way to fix it. I have never used WebGL in conjunction with Electron before.

---

<div class="post-metadata">

**Author:** ![oduvan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/oduvan/32/441_2.png) [@oduvan](https://phaser.discourse.group/u/oduvan)\
**Post date:** [March 4, 2019, 11:01am UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/19 "2019-03-04T11:01:31Z")

</div>

with such an awesome community support - no way I can’t find it 🙂

Thanks again for your help.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 4, 2019, 11:10am UTC](https://phaser.discourse.group/t/how-phaser-can-make-a-flashing-animation-of-sprite/1503/20 "2019-03-04T11:10:40Z")

</div>

You’re welcome 🤗

I do also love Phaser and its community. For me Phaser is the best game framework!

It makes me very happy to help others while learning new things 😍