What is wrong with my game loop/mechanic?
Posted
by
elias94xx
on Game Development
See other posts from Game Development
or by elias94xx
Published on 2012-09-22T22:03:35Z
Indexed on
2012/09/23
3:50 UTC
Read the original article
Hit count: 294
I'm currently working on a 2d sidescrolling game prototype in HTML5 canvas. My implementations so far include a sprite, vector, loop and ticker class/object.
Which can be viewed here: http://elias-schuett.de/apps/_experiments/2d_ssg/js/
So my game essentially works well on todays lowspec PC's and laptops.
But it does not on an older win xp machine I own and on my Android 2.3 device.
I tend to get ~10 FPS
with these devices which results in a too high delta value, which than automaticly gets fixed to 1.0
which results in a slow loop.
Now I know for a fact that there is a way to implement a super smooth 60
or 30
FPS loop on both devices. Best example would be: http://playbiolab.com/
I don't need all the chunk and debugging technology impact.js offers.
I could even write a super simple game where you just control a damn square and it still wouldn't run on a equally fast 30
or 60
fps.
Here is the Loop class/object I'm using.
It requires a requestAnimationFrame
unify function. Both devices I've tested my game on support requestAnimationFrame
, so there is no interval fallback.
var Loop = function(callback) {
this.fps = null;
this.delta = 1;
this.lastTime = +new Date;
this.callback = callback;
this.request = null;
};
Loop.prototype.start = function() {
var _this = this;
this.request = requestAnimationFrame(function(now) {
_this.start();
_this.delta = (now - _this.lastTime);
_this.fps = 1000/_this.delta;
_this.delta = _this.delta / (1000/60) > 2 ? 1 : _this.delta / (1000/60);
_this.lastTime = now;
_this.callback();
});
};
Loop.prototype.stop = function() { cancelAnimationFrame(this.request); };
© Game Development or respective owner