About render loop, ticks, and FPS

[wiseDev]

With 60 fps player sprite animation works fine, with 30fps it looks 'too fast'. If I change the sprite update speed, it will work fine with 30fps, but with 60fps it will look 'too slow'

How should I approach this? Do you recommend I cap the game at 30fps and set sprite updates accordingly? I say 30fps because I can't think of a device that won't run this at least at 30fps.

 

    game.loop = function() {
            if (GAMESTARTED) {
                delta = timestamp() - lastDelta;
                lastDelta = timestamp();
                keypress.check();
                render();
            }
            requestAnimationFrame(game.loop);
    };    

    function fps() {
        if ((timestamp() - lFrameTimer) > 1000) {
            FPS = FPSCounter;
            FPSCounter = 0;
            lFrameTimer = timestamp();
        }
    }

    function render() {    
            displayNextFrame();
            fps();
            FPSCounter = FPSCounter + 1;
            timerTicksPerFrame = delta * 0.015;
    }
    function timestamp() {
        return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
    }

Any advice will be appreciated. Thank you.

[mattstyles]

You don't show your animation code, your problem is there.

A fixed FPS is great but its not terribly realistic, there could be periodic system events that hog the cpu and occasionally nuke your FPS by causing a frame or 2 to run slowly, if you're reliant on that fixed FPS maybe bad things happen when you don't get it.

Your animation should not be dependent on your frame rate, that is your issue. Try passing your delta into your update functions to step the simulation forward by that amount. If your animation updates every 20ms then that is what should happen, if your framerate drops for a couple of frames then you would end up (maybe) missing a few frames. This results in jerky movement but your simulation is consistent, its just the render that misses as you struggle to keep up. Same thing for movement i.e. if it takes 1 second to move a tile in the world then that is how long it take, the FPS just dictates how many frames are shown during that second, not how far things have moved.

This is a good article on game loops, its not particularly applicable to JS as you're pretty much stuck with RAF (you can't draw quicker than this and JS timing functions are awful, even performance timers) but explains the concepts really well.

[wiseDev]

11 hours ago, mattstyles said:

You don't show your animation code, your problem is there.

A fixed FPS is great but its not terribly realistic, there could be periodic system events that hog the cpu and occasionally nuke your FPS by causing a frame or 2 to run slowly, if you're reliant on that fixed FPS maybe bad things happen when you don't get it.

Your animation should not be dependent on your frame rate, that is your issue. Try passing your delta into your update functions to step the simulation forward by that amount. If your animation updates every 20ms then that is what should happen, if your framerate drops for a couple of frames then you would end up (maybe) missing a few frames. This results in jerky movement but your simulation is consistent, its just the render that misses as you struggle to keep up. Same thing for movement i.e. if it takes 1 second to move a tile in the world then that is how long it take, the FPS just dictates how many frames are shown during that second, not how far things have moved.

This is a good article on game loops, its not particularly applicable to JS as you're pretty much stuck with RAF (you can't draw quicker than this and JS timing functions are awful, even performance timers) but explains the concepts really well.

     function displayNextFrame() {   
        updateSprite();   
        [..]
     }         
     function updateSprite() {       
         if (delta) {
                sprite.currentFrame += (delta / sprite.speed);
                if (Math.ceil(sprite.currentFrame) > sprite.frames) {
                            sprite.currentFrame = 0;
                            sprite.currentFrame += (delta / sprite.speed);
                }
         }

The code above is an uber simplification (take away two thousands lines) of what I have. I aim for what you said: jerky movement but consistent simulation. Any guess on why I am getting consistent movement but jerky simulation? And could you explain why JS timing functions are awful ?  Thank you for your time.

[DexterZ]

Just advance the frame if Delta  ^ _ ^ y  here's my implementation of animated sprite delta based.

public _Animate( pGameTime:number ) {

            if (! this._IsAnimated || this._AnimKeys == null) return;

            //--> Exit if not frame time
            //
            if ( pGameTime < this._DT ) { return; }

            //--> If not end frame set frame
            //
            if (this._Frame <= this._AnimKey.FrameEnd) {
                if (this._Frame < this._MaxFrame)
                {
                    this._AnimFrmCut = this._AnimFrmCuts[this._Frame];
                    this._AnimateSetFrame();
                }
            }

            //--> Advance frame
            //
            this._Frame++;

            //--> Loop
            //
            if (this._Frame > this._AnimKey.FrameEnd) {
                this._Frame = this._AnimKey.FrameStart;
            }

            //--> Next frame time
            //
            this._DT = pGameTime + this._AnimKey.PlayDT;

}//EndMethod