Multiple animation in canvas

Question

I want to animate 2 figures on my page. Therefore I use Javascript. The problem is that I can't define which "sprite" he has to take. Because I can't add some Parameters like the object "animation" to the gameLoop()-method, because of the requestAnimationFrame. Any idea how I can solve this?

var animation,
    image,
    canvas,
    stopAtLastFrame = false,
    amountAnimation = 0,
    amountAnimated = 1;

image = new Image();

function sprite (options) {
    var that = {},
        frameIndex = 0,
        currentRow = 0,
        currentColumn = 0,
        tickCount = 0,
        rowOfLastFrame = 0,
        columnOfLastFrame = 0,
        ticksPerFrame = options.ticksPerFrame,
        numberOfFrames = options.numberOfFrames,
        numberOfColumns = options.totalColumns,
        numberOfRows = options.totalRows,
        widthOfOneFrame = options.width/numberOfColumns,
        heightOfOneFrame = options.height/numberOfRows;

    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    rowOfLastFrame = numberOfRows-1;
    columnOfLastFrame = numberOfColumns - 1 - ((numberOfRows *numberOfColumns) - numberOfFrames);

    that.render = function () {
        that.context.save();
        that.context.scale(0.5,0.5);
        // Clear the canvas
        that.context.clearRect(0, 0, that.width, that.height);
        // Draw the animation
        that.context.drawImage(
            that.image,
            currentColumn * widthOfOneFrame,
            currentRow * heightOfOneFrame,
            widthOfOneFrame,
            heightOfOneFrame,
            0,
            0,
            widthOfOneFrame,
            heightOfOneFrame);
        that.context.restore();
        if(rowOfLastFrame==currentRow && columnOfLastFrame==currentColumn && amountAnimated==amountAnimation)
        {
            stopAtLastFrame=true;
        }
    };

    that.update = function () {
        tickCount += 1;
        if (tickCount > ticksPerFrame) {
            tickCount = 0;
                if (frameIndex < numberOfFrames-1) {
                frameIndex++;
                currentColumn++;
                if (currentColumn == numberOfColumns) {
                    currentRow++;
                    currentColumn = 0;
                }
            }else{
                amountAnimated++;
                frameIndex=0;
                currentColumn=0;
                currentRow=0;
            }
        }
    };
    return that;
}

function gameLoop () {
    if(stopAtLastFrame==true)
    {
        stopAtLastFrame=false;
    }
    else
    {
        window.requestAnimationFrame(gameLoop);

        animation.update();
        animation.render();
    }
}

function startAnimation(canvas, imageUrl, amount){
    canvas = document.getElementById(canvas);
    canvas.width = 7680/4;
    canvas.height = 2880/4;
    image.src = imageUrl;
    amountAnimation=amount;
    animation = sprite({
        context: canvas.getContext("2d"),
        width: 7684,
        height: 2880,
        image: image,
        numberOfFrames:16,
        totalRows : 4,
        totalColumns: 4,
        ticksPerFrame:  5
    });
    gameLoop();
}

startAnimation("imageAnimation", "img/16.png", 3);
startAnimation("imageAnimation2", "img/32.png", 5);

In this example I pretend that my spritesheets are the same size and columns, just to test the code. This doesn't work of course, but this is what I need:

function gameLoop (animation) {
        if(stopAtLastFrame==true)
        {
            stopAtLastFrame=false;
        }
        else
        {
            window.requestAnimationFrame(gameLoop(animation));

            animation.update();
            animation.render();
        }
    }

Answer 1

requestAnimationFrame function is not allowed to pass your own parameter, one solution/trick is bound that gameLoop function to sprite object, so that we can access this as sprite object.

as example: http://jsfiddle.net/XQpzU/6110/

Your code can be modified as:

    var animation,
        image,
        canvas,
        stopAtLastFrame = false,
        amountAnimation = 0,
        amountAnimated = 1;

    image = new Image();

    function sprite (options) {
        var that = {},
            frameIndex = 0,
            currentRow = 0,
            currentColumn = 0,
            tickCount = 0,
            rowOfLastFrame = 0,
            columnOfLastFrame = 0,
            ticksPerFrame = options.ticksPerFrame,
            numberOfFrames = options.numberOfFrames,
            numberOfColumns = options.totalColumns,
            numberOfRows = options.totalRows,
            widthOfOneFrame = options.width/numberOfColumns,
            heightOfOneFrame = options.height/numberOfRows;

        that.context = options.context;
        that.width = options.width;
        that.height = options.height;
        that.image = options.image;
        rowOfLastFrame = numberOfRows-1;
        columnOfLastFrame = numberOfColumns - 1 - ((numberOfRows *numberOfColumns) - numberOfFrames);

        that.render = function () {
            that.context.save();
            that.context.scale(0.5,0.5);
            // Clear the canvas
            that.context.clearRect(0, 0, that.width, that.height);
            // Draw the animation
            that.context.drawImage(
                that.image,
                currentColumn * widthOfOneFrame,
                currentRow * heightOfOneFrame,
                widthOfOneFrame,
                heightOfOneFrame,
                0,
                0,
                widthOfOneFrame,
                heightOfOneFrame);
            that.context.restore();
            if(rowOfLastFrame==currentRow && columnOfLastFrame==currentColumn && amountAnimated==amountAnimation)
            {
                stopAtLastFrame=true;
            }
        };

        that.update = function () {
            tickCount += 1;
            if (tickCount > ticksPerFrame) {
                tickCount = 0;
                    if (frameIndex < numberOfFrames-1) {
                    frameIndex++;
                    currentColumn++;
                    if (currentColumn == numberOfColumns) {
                        currentRow++;
                        currentColumn = 0;
                    }
                }else{
                    amountAnimated++;
                    frameIndex=0;
                    currentColumn=0;
                    currentRow=0;
                }
            }
        };
        that.gameLoop = gameLoop.bind(that);
        return that;
    }

    function gameLoop () {
        if(stopAtLastFrame==true)
        {
            stopAtLastFrame=false;
        }
        else
        {
            // this will be your sprite

            window.requestAnimationFrame(this.gameLoop);

            animation.update();
            animation.render();
        }
    }

    function startAnimation(canvas, imageUrl, amount){
        canvas = document.getElementById(canvas);
        canvas.width = 7680/4;
        canvas.height = 2880/4;
        image.src = imageUrl;
        amountAnimation=amount;
        animation = sprite({
            context: canvas.getContext("2d"),
            width: 7684,
            height: 2880,
            image: image,
            numberOfFrames:16,
            totalRows : 4,
            totalColumns: 4,
            ticksPerFrame:  5
        });
        animation.gameLoop();
    }

    startAnimation("imageAnimation", "img/16.png", 3);
    startAnimation("imageAnimation2", "img/32.png", 5);