What is wrong with my game loop/mechanic?
- by elias94xx
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); };
