Notification Bar

Recommended Posts


I'm after some advice, i'm trying to figure out the most efficient way of emulating the behaviour of the commentary bar within Football Manager series.

In essence a notification bar, which shows up intermittently and displays text highlights:

Now, i've already done a little groundwork and have a renderBox() function that when called, will display bar and message, then disappear.

I'm wondering though what is the most efficient way of the achieving random intermitten display behaviour?

Would anybody recommend a setTimeout approach, I have also wondered about firing it on boolean triggers.

Appreciate any feedback.


Share this post

Link to post
Share on other sites

Boolean triggers?

If you want something to happen in the future, then you are very limited for choice.

setTimeout, setInterval, using your own counter that increments on requestAnimationFrame or keep a timestamp and poll periodically. I think that's about it, there may be some more creative solutions out there.

Of those, I reckon setInterval is the absolute simplest, but, it's flawed enough I wouldn't recommend it (for this small rendering task it is fine though), setTimeout is only slightly more complicated.

If you already have a rendering loop that fires as close to 60 fps as it can get though, implementing a counter or a timestamp should both be simple enough. A counter would work by incrementing each frame, when a certain number is reached, flip the colours—this would tie it to frame rate though. Generally being frame-rate tied is a little smelly, but, for this sort of task would probably be fine, you aren't tracking any type of actual translation (movement) and it would only slow down when the fps slows down, in which case you couldn't render it any faster anyway. A timestamp, comparing the now time to the last time you flipped it, would also be reasonably simple, probably.

Bare in mind the 'absolute' simplest browser-based way of doing this is with CSS animations because it saves you working out how to program it. Given you aren't using CSS, this might be less attractive as a solution to you.

Share this post

Link to post
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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.