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

Filed under:
|
|

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

Related posts about 2d

Related posts about html5