CODEWITHSUNDEEP
javascripthtmlcanvas
Filthy_Rich
Filthy_Rich

Reputation: 665

Canvas - How do you animate multiple images at once?

I've just hit a problem when trying to animate multiple images (players) at once on a HTML5 game that I've been working on. When moving one player at a time it works perfectly fine, but when another player connects I begin to run into some issues.

As you can see in the code I have below, I'm using clearRect() to stop the players previous position from being on the canvas during animation. This poses an issue for me, as when I come to animate the second player, it will remove the first player from the canvas.

I feel like I've coded myself into a bit of a corner here, but was hoping someone could reveal a possible solution for my problem.

Thanks in advance.

var players = [];

function Player(number, startX, startY, endX, endY) {
    this.number = number;
    this.startX = startX;
    this.startY = startY;
    this.endX = endX;
    this.endY = endY;
}


Player.prototype.update = function() {
    var startY = this.startY;
    var startX = this.startX;
    var endY = this.endY;
    var endX = this.endX;
    var playerY = startY;
    var playerX = startX;
    var playerInterval = setInterval(function() {
        playerContext.clearRect(0,0,2000,2000);
        if(playerY < endY) {
            playerY += 2.5;
        }

        if(playerY > endY) {
            playerY -= 2.5;
        }

        if(playerX < endX) {
            playerX += 2.5;
        }

        if(playerX > endX) { 
            playerX -= 2.5;
        }

        playerContext.fillText('0', playerX, playerY, 50, 25);

        if(playerY == endY && playerX == endX) {
            clearInterval(playerInterval);
        }

    });
};

function drawPlayers() {
    for (var i = 0; i < data.length; i++) {
        var startX = data[i].startX / 2;
        var startY = data[i].startY / 2;
        var endX = data[i].x / 2;
        var endY = data[i].y / 2;

        var number = data[i].number;
        var player = new Player(number, startX, startY, endX, endY);
        players.push(player);
    }
    drawEach();
}
drawPlayers();


function drawEach() {
    for (var i = 0; i < players.length; i++) {
        var thisPlayer = players[i];
        thisPlayer.update();
    }
}

Upvotes: 0

Views: 633

Answers (1)

user977221
user977221

Reputation:

Move playerContext.clearRect(0,0,2000,2000); out of the player object.

Your issue is that your game loop is determined on a player by player basis. The setInterval should become a global operation on the canvas, meaning that there should only be one update method acting on all the players. Not only does having a bunch of intervals at the same time cause a performance hit, but it makes it difficult if not impossible to clear the canvas without clearing other players.

Something like the following would work.

var playerInterval = setInterval(function() {
  for(var i = 0; i < players.length; ++i) {
    players[i].update(); // updates player position
  }
  clearBoard();
  redraw();
}, INTERVAL);

Also, if you are only looking to support modern browsers or don't mind finding a polyfill, you could consider using requestAnimationFrame.

Upvotes: 1

Related Questions