how to set duration of a text sprite in pixijs

[Roberto]

Hello everyone!

I have just started learning a bit of Pixi.js and I was wondering if someone could help me figure out how to set the duration of a sprite. Basically, what I am trying to do is make a word appear for a given number of frames/milliseconds (say, for 50 ms) and then have it replace with another immediately after. Can anyone give me a hint of how to accomplish this?

Thank you in advance,

-Roberto 

[b10b]

Possibly the easiest standalone way would be to use the Javascript function setTimeout():

https://www.w3schools.com/jsref/met_win_settimeout.asp

More complex methods would be using frameworks with delta time updates, tween libraries (e.g. GSAP etc), or other custom timing approaches.  I personally favour frameworks with delta time updates at their core, and PixiJs offers an inbuilt tool towards this:

https://pixijs.download/dev/docs/PIXI.Ticker.html

[Roberto]

Thanks! Would you mind providing a simple example of how to accomplish this with PixiJS, so that I can build on it?

[tonygruz]

JavaScript setTimeout(expression, timeout); runs the code/function once after the timeout. It is a time based code execution method that will execute script only one time when the interval is reached, and not repeat again unless you gear it to loop the script by nesting the setTimeout object inside of the function it calls to run. If geared to loop, it will keep firing at the interval unless you call clearTimeout(). If you want something to happen one time after some seconds Then use setTimeout... because it only executes one time when the interval is reached.

setTimeout(function() {
  console.log('Wait 3 seconds and I appear just once');
}, 3000);

 

[rickberon]

On 9/30/2021 at 11:08 AM, Roberto said:

Would you mind providing a simple example of how to accomplish this with PixiJS, so that I can build on it?

setTimeout() and setInterval() functions allow you to execute a piece of JavaScript code/function at a certain point in the future. setInterval repeats the call, setTimeout only runs it once.

setTimeout(expression, timeout); runs the code/function once after the timeout. It is a time based code execution method that will execute script only one time when the interval is reached, and not repeat
again unless you gear it to loop the script by nesting the setTimeout object inside of the function it calls to run. If geared to loop, it will keep firing at the interval unless you call clearTimeout(). If you want
something to happen one time after some seconds Then use setTimeout... because it only executes one time when the interval is reached.

setTimeout(function() {
  console.log('Wait 3 seconds and I appear just once');
}, 3000);

setInterval(expression, timeout); runs the code/function repeatedly, with the length of the timeout between each repeat. It is a time interval based code execution method that has the native ability to repeatedly
run specified script when the interval is reached. It should not be nested into its callback function by the script author to make it loop, since it loops by default. It will keep firing at the interval unless you call
clearInterval(). If you want to loop code for animations or clocks Then use setInterval.

setInterval(function() {
  console.log('Every 3 seconds I appear on your console');
}, 3000)