javascript - 如何用动画实现纸娃娃？

Question

对于使用 Canvas 和 Javascript 的 2D 俯视游戏(想想 Zelda + Angular 色扮演游戏)，实现纸娃娃的最佳方式是什么，同时允许动画？

用 sprite-sheet 做动画很简单，但是添加纸娃娃(也就是说，能够“装备”元素和盔甲，并在屏幕上显示这些元素的视觉表现你的 Angular 色)，混合起来似乎并不容易，或者至少是一项非重复性任务。

例如，想象一下为挥剑的 Angular 色制作动画。一个带有动画的简单 Sprite 表就可以了。但是，如果您希望动画中的实际剑在装备不同的剑时发生变化怎么办？您是否创建了额外的 Sprite ，用不同的剑重复相同的动画？对于每件元素？对于每个 NPC？ (假设我也想要 NPC 的纸娃娃，而不仅仅是 Angular 色)

一个人可以做到这一点，并且只需要保持最少数量的可穿戴元素以限制所需的 Sprite 动画帧数。

我认为可以将 Angular 色动画分开，然后在 Angular 色动画之上/之下添加剑/元素动画。这样，不同的 Angular 色可以重复使用相同的项目动画，将其与他们的 Angular 色动画相匹配。但是每个项目仍然会有很多 Sprite 。 Angular 色必须相似。

有什么想法或建议吗？

(如果重要的话，我想我打算做的是让 NPC 没有任何纸娃娃，而玩家有 Angular 色动画 + 元素的每个变体都有动画。对于盔甲，它会匹配图形和尺寸播放器的。)

Answer 1

我想对于每组可穿戴元素，您都会有一系列可以放在播放器上的元素，例如:

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

然后在您的播放器设置中，您将拥有相同的数组；当然，在许多 Angular 色扮演游戏中，你不会从一整套令人敬畏的钻石盔甲开始，而是从皮革开始，也许还有一些不错的胸甲。

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 将是透明的，其想法是将它们与基本播放器图形合成，最后得到一个纸娃娃 Angular 色。为了减少开销，将这些图形放在一个 Sprite 表中并存储每个项目的 X、Y、宽度和高度可能是明智的，如下所示:

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

其中数组为[x, y, width, height]。这样做的缺点是只有一种尺寸，因此除非您的 Angular 色都是相同尺寸(实际上在基于图 block 的 RPG 中很有可能)，否则为每种尺寸的 Angular 色生成所有图形可能会很耗时。

您可以采用的另一种方法是使用 Canvas 绘图函数绘制图形，您可以在其中为 Helm 指定 x/y/宽度/高度，然后以您想要的任何尺寸绘制 Helm 。像这样:

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 对于奇数宽度的线是必需的 - see this thread .

无论哪种方式，这都将非常耗时，具体取决于您希望在每个 Angular 色上显示多少项目。