Question

I am learning HTML5 and JavaScript and am attempting to draw an animated image. I thought the easiest way to do this would be to create an image with the frames in a row, as below.

Image http://html5stuff.x10.mx/HTML5%20Test/alien_green_strip8.png

Then a only part of the image would be draw at a time. I followed this tutorial.

This is a link to what I have made:

html5stuff.x10.mx/HTML5%20Test/page.html

The problem is, the image isn’t being drawn. It’s something within the drawSprite function, because when I change it to a simple “ctx.drawImage(sprite.source, x, y)”, it does draw the image (just as a whole without the animation, obviously). Please note that though there is an option for rotating the image, I have not yet added support for that. Also, keys.js is not being used yet though it is included.

Answer 1

The reason is because sprite.imagenum is not defined when drawSprite is called.

This is because in some places you use imagenum and others imgnum, so correct that typo and you’re good to go!

---

TOTALLY OPTIONAL:

But now that thats answered lets take a look at your js to get a better idea of how to structure this. You have:

function Sprite(){
  var imagenum = null; //The number of images
  var width = null; //The width of each image
  var height = null; //The height on each image
  var xoffset = null; //The origin on each image
  var yoffset = null;
  var source = null; //The location of each image
}

function drawSprite(sprite, subimg, x, y, w, h, angle){
  ctx.drawImage(sprite.source, Math.floor(subimg) * sprite.width, 0, w * sprite.imagenum, h, x - sprite.xoffset * (w/sprite.width), y - sprite.yoffset * (h/sprite.height), w, h);
}

All those var statements are actually doing nothing. It should be:

function Sprite(){
  this.imagenum = null; //The number of images
  this.width = null; //The width of each image
  this.height = null; //The height on each image
  this.xoffset = null; //The origin on each image
  this.yoffset = null;
  this.source = null; //The location of each image
}

in order to correctly set them as you were envisioning. Also, you can rewrite drawSprite so that the sprites are drawing themselves, so that you don’t need to pass them as an argument:

// now we can use "this" instead of "sprite"
Spite.prototype.draw = function(subimg, x, y, w, h, angle){
    // put this on several lines just so we can see it easier
    ctx.drawImage(this.source,
      Math.floor(subimg) * this.width,
      0,
      w * this.imagenum, h,
      x - this.xoffset * (w/this.width),
      y - this.yoffset * (h/this.height),
      w, h);
    }

Then instead of:

drawSprite(img, index, 128, 128, 32, 32, 0); // img is a sprite

We can write:

img.draw(index, 128, 128, 32, 32, 0); // img is a sprite