• Advertisement
Sign in to follow this  

[web] Gameloop

This topic is 2332 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello!
I am creating a HTML5 game engine & I have a few questions regarding the game loop. Note: I'm not really looking for the most accuracy, nor do I care about compatibility. I'm looking for the best performance.

1. setinterval vs requestAnimationFrame? I understand the differences with regards to timing, but is there really a good argument to use setinterval over requestAnimationFrame?

2. I created a Timer class that uses one of the above methods [requestAnimationFrame for now] to call Timer.Tick() on a set FPS. I need Main.Draw() & Main.Update() to be called on each tick. Would performance take a hit if a "Tick Event" fired off each time the Timer.Tick() was called? Listeners would be set up in Main to listen for each "Tick Event" and fire off the Update/Draw function.



Thank you very much for any advice!

Share this post


Link to post
Share on other sites
Advertisement

2. I created a Timer class that uses one of the above methods [requestAnimationFrame for now] to call Timer.Tick() on a set FPS. I need Main.Draw() & Main.Update() to be called on each tick. Would performance take a hit if a "Tick Event" fired off each time the Timer.Tick() was called? Listeners would be set up in Main to listen for each "Tick Event" and fire off the Update/Draw function.

I don't know what your Timer class does internally, but if it simply calls the update and draw functions once per frame I can't imagine how it could contain wasteful processing or indirection. The common ways to use timers inefficiently are drawing more frames than needed, busy waiting, and performing updates in too many unnecessarily small timesteps, all three of which are highly implausible if you use setInterval or requestAnimationFrame.
Can you post code?

Share this post


Link to post
Share on other sites

I don't know what your Timer class does internally, but if it simply calls the update and draw functions once per frame I can't imagine how it could contain wasteful processing or indirection. The common ways to use timers inefficiently are drawing more frames than needed, busy waiting, and performing updates in too many unnecessarily small timesteps, all three of which are highly implausible if you use setInterval or requestAnimationFrame.
Can you post code?


Yeah, sure. I might be overly concerned with performance, worrying about things that won't effect it much. Here's the settimeout version (having problems with requestAnimationFrame):


Engine.Time = function () {
this.timeBetweenFrames = SECOND / 30;
this.previousTime = 0;
this.delta = 0;
this.customEvent = document.createEvent("Event");
this.running = false;

return this;
};

Engine.Time.prototype = {
Init: function () {
this.previousTime = new Date().getTime();
this.running = true;

this.customEvent.initEvent("Update", false, false);

var self = this;
setTimeout(function() { self.Update(); }, this.timeBetweenFrames);

return this;
},

Update: function () {
if (this.running == false) return;

var currentTime = new Date().getTime();
this.delta = (currentTime - this.previousTime) / SECOND; // Constant
this.previousTime = currentTime;

document.dispatchEvent(this.customEvent);
var self = this;
setTimeout(function() { self.Update(); }, this.timeBetweenFrames);

return this;
},


Stop: function () {
this.running = false;

return this;
}
};

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement