Javascript 如何使用动画实现纸张玩偶？

对于使用Canvas和Javascript的2D自上而下的游戏（想想Zelda+一个RPG），在允许动画的同时实现纸玩偶的最佳方式是什么

使用精灵表制作动画非常简单，但在混合中添加纸玩偶（也就是说，能够“装备”物品和盔甲，并在角色上显示这些物品的视觉表现）似乎并不容易，或者至少是一项不重复的任务

例如，想象为挥舞剑的角色设置动画。一个带有动画的简单精灵表就可以了。但是，如果您希望动画中的实际剑在配备不同剑时发生变化，该怎么办？您是否创建了其他精灵，用不同的剑重复相同的动画？每一项呢？对于每一个NPC？（假设我也想为NPC制作纸娃娃，而不仅仅是角色）

可以这样做，只需将可穿戴物品的数量保持在最低限度，以限制所需的精灵动画帧数

我认为可以将角色动画分开，然后在角色动画的上/下添加剑/物品动画。这样，不同的角色可以重用相同的项目动画，将其与角色动画相匹配。但你仍然会有很多精灵的每一个项目。角色必须相似

有什么想法或建议吗

---

（如果有关系的话，我想我计划做的是让NPC不带任何纸玩偶，玩家拥有角色动画+各种物品的动画。对于盔甲，它将匹配玩家的体型和尺寸。）

我想，对于每一套可穿戴物品，你都会有一系列可以放在玩家身上的物品，例如：

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

然后在你的播放器设置中，你将拥有相同的数组；当然，在很多RPG中，你并不是从一整套令人敬畏的钻石甲开始，而是从皮革开始，也许还有一种很好的胸甲

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
}

这些PNG将是透明的，其想法是将这些PNG与基本的播放器图形合成，最终得到一个纸玩偶角色。为了减少开销，最好将这些图形放在一张精灵表中，并存储每个项目的X、Y、宽度和高度，如下所示：

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

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();
}

其中数组为[x，y，宽度，高度]。这样做的缺点是只有一个尺寸，因此除非您的角色都是相同的尺寸（实际上在基于平铺的RPG中很可能），否则为每个尺寸的角色生成所有图形可能会很耗时

另一种方法是使用画布绘制功能绘制图形，可以为头盔指定x/y/宽度/高度，然后根据需要绘制任意大小的头盔。大概是这样的：

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

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();
}

上述功能将+绘制到屏幕上。0.5对于奇数宽度的线是必需的-

---

无论哪种方式，这都会很耗时，具体取决于您希望在每个角色上看到的项目数量。

每个肢体可能在空间中都有一个点和一个角度，除此之外，我希望您喜欢数学！