Javascript canvas animate sprite walking

Question

I am trying to get a sprite to walk over a background image with canvas. Ideally, I would do this all on one canvas, but using two seems to be more efficient and easier.

What I have so far:

Fiddle 1

and

Fiddle 2

Code from fiddle 1, working on the simplest form of the animation:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var spritePosition = 0;
var spriteWidth = 50;
var spriteHeight = 225;
var spriteCount = 17;
var spritePlayCount = 0;
var maxSpritePlays = 3;

var sheet = new Image();
sheet.onload = function () {
    animate();
}
sheet.src = "https://s33.postimg.cc/dapcxzmvj/sprite_walk.png";

var fps = 15;



function animate() {
    setTimeout(function () {

        if (spritePlayCount < maxSpritePlays) {
            requestAnimationFrame(animate);
        }

        // Drawing code goes here
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(sheet,
        spritePosition * spriteWidth, 0, spriteWidth, spriteHeight,
        0, 0, spriteWidth, spriteHeight);

        spritePosition++;
        if (spritePosition > spriteCount - 1) {
            spritePosition = 0;
            spritePlayCount++;
        }

    }, 1000 / fps);
}

I want to be able to get this to walk correctly, and understand how it works. I see both use something along the lines of sprite.width and sprite.height , which I figured would be width/columns and height/rows but those dont seem to work properly.

Answer 1

Your coordinates are all wrong. Your spriteWidth and spriteHeight values don't match at all the ones of your spritesheet .

Also, your logic is only updating the x axis, while your sprite sheet is set up on multiple rows.
You'll need to update this logic so that you do update both the x and y source positions.

Finally, don't mix setTimeout and requestAnimationFrame like that. They never go well together. To achieve 15FPS, you can quite easily run an requestAnimationFrame loop, which will fire at 60FPS, and simply draw only every four frames (60FPS / 4 => 15FPS).

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var xIndex = 0; var yIndex = 0; var cols = 5; var rows = 4; var spriteWidth = 265; var spriteHeight = 200; var sheet = new Image(); sheet.onload = function() { animate(); } sheet.src = "https://i.stack.imgur.com/eL5yV.png"; var frame = 0; function animate() { requestAnimationFrame(animate); // 60FPS / 4 => 15FPS if ((++frame) % 4 > 0) return; ctx.clearRect(0, 0, canvas.width, canvas.height); // update the current column xIndex = (xIndex + 1) % cols; // update the current row if x is 0 yIndex = xIndex === 0 ? (yIndex + 1) % rows : yIndex; // three cells are empty on the last row... if (yIndex === (rows - 1) && xIndex === 2) xIndex = yIndex = 0; // update both sourceX and sourceY ctx.drawImage(sheet, xIndex * spriteWidth, yIndex * spriteHeight, spriteWidth, spriteHeight, 0, 0, spriteWidth, spriteHeight); } 

 <canvas id="canvas" width=350 height=350></canvas>