Sign in to follow this  
dbgamer

[web] Gameloop

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
[quote name='dbgamer' timestamp='1317754721' post='4869079']
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.
[/quote]
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
[quote name='LorenzoGatti' timestamp='1317811319' post='4869339']
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?
[/quote]

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

[code]
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;
}
};
[/code]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this