Jump to content

how to set duration of a text sprite in pixijs


Roberto
 Share

Recommended Posts

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 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 6 months later...

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);

 

Link to comment
Share on other sites

  • 3 months later...
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)


 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...