JavaScript Canvas sprite animation speed

Question

I have a problem with canvas animation. I'm working with this tutorial . It's quite simple, but now I want to make animation with 60 fps. I tried setInterval(Update, 1000/60) , and of course it's working but now there is a problem with the sprite. Its animation is too fast. Is there any way to make 60fps and slow down the character sprite animation (to look more natural) ?

I'm sorry that I don't have live example, but it's a little bit hard to create one without ftp for sprites.

the code:

var canvas;
var ctx;
var dx = 10;
var x = 30;
var y = 0;
var WIDTH = 1000;
var HEIGHT = 340;
var tile1 = new Image ();
var posicao = 0;
var NUM_POSICOES = 3;

    function KeyDown(e){
        switch (e.keyCode) {
            case 39: 
                if (x + dx < WIDTH){
                    x += dx;
                    posicao++;
                    if(posicao == NUM_POSICOES)
                        posicao = 1;
                }
                break;   
        case 37:
            if (x + dx < WIDTH){
                    x -= dx;
                    posicao++;
                    if(posicao == NUM_POSICOES)
                        posicao = 1;
                }

        }
    }
    function KeyUp(e){
        posicao = 0;
    }
    function Draw() {   
        tile1.src = posicao+".png";
        ctx.drawImage(tile1, x, y);
    }
    function LimparTela() {
        ctx.fillStyle = "rgb(233,233,233)";   
        ctx.beginPath();
        ctx.rect(0, 0, WIDTH, HEIGHT);
        ctx.closePath();
        ctx.fill();   
    }
    function Update() {
        LimparTela();   
        Draw();
    }
    function Start() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        return setInterval(Update, 1000/60);
    }
        window.addEventListener('keydown', KeyDown);
        window.addEventListener('keyup', KeyUp);
Start();

Answer 1

Just an idea, a simple fix you could try adding extra frames to the spritesheet? This will also improve your animation without worrying about breaking something else :)

Answer 2

You can "throttle" the Update() to execute less often.

var counter=5;

function Update() {
    if(--counter>0){ return; };
    LimparTela();   
    Draw();
    counter=5;
}

If the user presses a key you can force the animation by setting the counter to 0.

function KeyDown(e){
    switch (e.keyCode) {
        case 39: 
            if (x + dx < WIDTH){
                x += dx;
                posicao++;
                if(posicao == NUM_POSICOES)
                    posicao = 1;
            }
            // zero the counter to force the animation now
            counter=0;
            break;   
    case 37:
        if (x + dx < WIDTH){
                x -= dx;
                posicao++;
                if(posicao == NUM_POSICOES)
                    posicao = 1;
            }
            // zero the counter to force the animation now
        counter=0;
    }
}

Answer 3

Whenever you move your sprite, you should divide the number of pixels moved by the number of frames per second. For instance, if you want to move him dx pixels per second at 60fps, define var fps = 60; as a global variable and do x += dx/fps; when you move him. What was the frame rate before? 30fps or something? Whatever it was, if you want it to go the same speed as before at 60fps, make your dx equal to however many pixels it traveled per second by multiplying your previous dx by the fps. So if it was moving at 10px per frame at 30fps, make var dx = 300; .