Question

For a 2D top-down game (Think Zelda + an RPG) using Canvas & Javascript, what is the best way to implement paper-dolling, while allowing animations?

Doing animations with a sprite-sheet is simple enough, but adding paper-dolling (that is, being able to ‘equip’ items and armour, and have a visual representation of these items show on your character), to the mix doesn’t seem an easy, or at least a non-repetative task.

For example, imagine animating a character swinging a sword. A simple sprite-sheet with the animation would work. But what if you wanted the actual sword within the animation to change when a different sword is equipped? Do you create additional sprites repeating the same animation with the different sword? And for every item? And for each NPC? (Assuming I wanted paper-dolling for the NPCs as well, and not just the character)

One could do that, and just keep to a minimum number of wearable items to in order to limit number of sprite animation frames required.

I think it might be possible to have the character animations seperate, and then add the sword/item animations on-top/below the character animations. That way, different characters can reuse the same item animation, matching it to their character animation. But you would still have a lot of sprites for each item. And characters would have to be similar.

Any thoughts or suggestions?

(If it matters, what I think I am planning on doing is having NPC’s without any paper-dolling, and the player having character animations + animations for each variation of the items. For armour, it will match the figure and dimensions of the player.)

Answer 1

I’m thinking for each wearable set of items you would have an array of items that you could put on the player, for example:

var AwesomeDragonProofDiamondArmour =
{
    head: 'awesome-diamond-helmet.png',
    chest: 'awesome-diamond-chest.png',
    legs: 'awesome-diamond-legs.png',
    boots: 'awesome-diamond-boots.png'
};

And then in your player settings you would have the same array; of course in many RPGs you don’t start with a full set of awesome diamond armour, you start with leathers and perhaps a sort of good chestplate.

var RubbishLeatherArmour =
{
    head:   'rubbish-leather-helmet.png',
    chest:  'rubbish-leather-chest.png',
    legs:   'rubbish-leather-legs.png',
    boots:  'rubbish-leather-boots.png'
};

var SortOfGoodSteelArmour =
{
    head:   'sort-of-good-steel-helmet.png',
    chest:  'sort-of-good-steel-chest.png',
    legs:   'sort-of-good-steel-legs.png',
    boots:  'sort-of-good-steel-boots.png'
};

var Player =
{
    head:   RubbishLeatherArmour.head,
    chest:  SortOfGoodSteelArmour.chest,
    legs:   RubbishLeatherArmour.legs,
    boots:  RubbishLeatherArmour.boots
}

These PNGs would be transparent, the idea being that you composite these with the basic player graphics and you end up with a paper dolled character. To decrease overhead it might be wise to put these graphics in a single sprite sheet and store the X, Y, width and height of each item, like this:

var RobustMetalArmour = 
{
    head: [120, 120, 20, 20],
    chest: [140, 120, 20, 20],
    legs: [160, 120, 20, 30],
    boots: [180, 120, 20, 10]
}

Where the array is [x, y, width, height]. This has the disadvantage of only being a single size, so unless your characters are all the same size (actually quite possible in a tile based RPG) it may be time consuming to produce all the graphics for each size of character.

The other way you can go about it is to draw the graphics with canvas drawing functions, in which you could specify a x/y/width/height for say a helmet, then you draw the helmet at any size that you wish. Something like this:

function drawPlus(ctx, x, y, size, colour)
{
    ctx.lineWidth = 1;
    ctx.strokeStyle = colour;
    ctx.beginPath();
    ctx.moveTo(x + 0.5, y + 0.5 - size);
    ctx.lineTo(x + 0.5, 0.5 + y);
    ctx.lineTo(x + 0.5 + size, 0.5 + y);
    ctx.moveTo(x + 0.5 - size, y + 0.5);
    ctx.lineTo(x + 0.5, 0.5 + y);
    ctx.lineTo(x + 0.5, 0.5 + y + size);
    ctx.stroke();
    ctx.closePath();
}

The above function draws a + to the screen. The 0.5 is necessary for lines that are of odd widths – see this thread.

Either way this will be time consuming depending on how many items you want to be visible on each character.