Question

This is a question that bugs me for quite a long time. Say, I need to introduce a ragdoll character animation to the page. Obviously, each body part of such a character is an image, and the number of these images can get quite large depending on the character complexity and the number of characters. If these characters were static (in fact, DOM animation is still possible, but is potentially a lot slower), I could use CSS background sprites, but when it comes down to using canvas, it seems like you have to resort to loading all the images one-by-one, which will probably have an impact on the page loading time.

Additionally, I’d like to use some framework that allows persistent objects to be created on canvas, like paper.js or fabric.js, and handles the redraw cycle.

While I recognize this as a trivial (yet time-consuming) task to write a parser that would read an XML/JSON description of a character and create the objects based on the coordinates, I wonder if there are any such tools already created and used, that I might not know of.

What I’d like to use is a structure like this:

character : {
  image : 'characters.png',
  body : {
    head : {
      width : 40,
      height : 50,
      xOff : 50,
      yOff : 125
    }
    // Other parts follow
  }
}

Are there any frameworks or game engines that would allow creation of objects from such a structure? What is the best way for loading multiple images into a canvas?

Thanks for any advice.

UPD. Added some detail.

Answer 1

There is an overloaded version of drawImage for this:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// where image: valid image
//          sx: source slice x position
//          sy: source slice y position
//          sWidth:  source slice width
//          sHeight: source slice height
//       same for dx etc.

So you could simply use the same approach as in CSS backgrounds sprites.

References:

• MDN: Canvas tutorial: Slicing