Question

I’ve drawn a tile map:

http://www.exeneva.com/html5/movingTankExample/

Here’s my startup code:

function startUp() {
  drawScreen();   
  // Draw the tank
  context.drawImage(tileSheet, tankSourceX, tankSourceY, tileWidth, tileHeight, tankX, tankY, tileWidth, tileHeight);
}

drawScreen() draws the tile map. I want to draw the tank after the tile map, but without putting it in drawScreen() because I want to animate and move the tank later on (without having to call drawScreen() again.

Why doesn’t my tank show up?

Answer 1

I’m gessing you don’t read the link I’ve passed you on your last answer and took the aprouch of the other guy with seemed easiest. tisk, tisk…

Anyway, to solve this, you will have to draw your tank inside the drawScreen() method as before, but you will have to call the animation function of the tank from inside the key moviment events. This way, the tank will draw stopped when not moving and draw animated when moving as your original question.

Edit:

I’ve got your entire code now on my machine and here are the steps to solve your problem, since I’ve gave you many hints, now I’ll give you the code as you want:

1- The code responsible for the initialization of the animation and select the frame of the animation to be shown is inverted. The counter frameIndex need to be initialized before the tankSourceX and tankSourceY:

// Counter to keep track of the current index of animationFrames
var frameIndex = 0;
// Tank tiles
var tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
var tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight; 

2- Place theses variables that define the frame inside the animation function, whre you change the animation frame, so the frameIndex changes the tankSourceX and tankSourceY values:

function animateMovement() { 
    // Animation frames
    frameIndex += 1;
    if (frameIndex == animationFrames.length) {
        frameIndex = 0;
    }
tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight; 
}

3- Your drawing and animation function can be called by your event handlers or by a interval like on the begining:

var animateInterval = setInterval(animateMoviment, 200);
var drawingInterval = setInterval(drawScreen, 200);

4- Initialize a variable as the tank state:

var tankState = "stopped";

5- On the animation function, put a check for this variable to change the frames:

function animateMovement() { 
    if (tankState == "moving") {
        // Animation frames
        frameIndex += 1;
        if (frameIndex == animationFrames.length) {
            frameIndex = 0;
        }
        tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
        tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight; 
    }
}

6- Change your event handlers to set the tankState as moving:

e = e?e:window.event;
tankState = "moving";
...

7- Reset the tankState on the keyup event:

document.onkeyup = function(e) {
    tankMoveX = 0;
    tankMoveY = 0;
    tankState = "stopped";
}

Off course you can call the animate and draw functions on the key event handlers and eliminate the intervals, but this way you can add more animations to be runned on the same function that do not wait for the players input, like NPC’s (non plaing characters).