How to make a muzzle flash?

I have a muzzle flash image. But I want it to flash :laughing: Right now it just sits there. Please help: Here is the link:
https://playcanvas.com/editor/scene/1056007

Hi @HTML_Celeb,

You can use a particle emitter for that, check out these two examples:

https://developer.playcanvas.com/en/tutorials/explosion-particle-effect/

https://developer.playcanvas.com/en/tutorials/flaming-fireball/

Thank you, but I just want to flash the image when the left mouse button is clicked.

Right, you can use the playcanvas tween library to animate the opacity on that material and make it flash. Check the last example on the following page:

https://developer.playcanvas.com/en/tutorials/tweening/

OK I have this:

  var flash = this.app.root.findByName('Image');
  

And when they click:

     flash.opacity = 0;

But it is still not working :confused:

You need to change the opacity on the element component, not on the entity:

flash.element.opacity = 0;

How do I add a delay between the flashes?

Use the playcanvas tween.js library I’ve sent above for that, it’s relatively simple to use and straightforward.

I am sorry, I just can’t seem to work :slightly_frowning_face:.

I try to do this:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

And:

await flash.element.opacity = 1;
await sleep(100);
await flash.element.opacity = 0;

But it wont let me use async and await!

Ah await works only on method calls, not on properties. Like this:

MyScript.prototype.myMethod = async function(){
   flash.element.opacity = 1;
   await sleep(100);
   flash.element.opacity = 0;
};

Though using setTimeout isn’t recommended for such things, you are much better writing a timer of yours in the script update method, or simpler use the delay() method of the playcanvas tween library.

Wait, what would I replace “myMethod” with?

Basically I was just indicating that you need to use async on the container method that will execute that code. That was an example.

OK, I see

OK, so far I have this:


Ak47Shoot.prototype.update = async function(dt) {
var flash = this.app.root.findByName('Image');
flash.element.opacity = 0;
document.body.onclick = function(){
flash.element.opacity = 1;
 await sleep(100);
 flash.element.opacity = 0;  
   };
};

But it still gives an error:


I would assume it says that because it (await) is in the onclick function too, but how do I fix that?

I solved it! Thanks for all the help!

1 Like