3

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

使用 sprite-sheet 制作动画很简单，但是添加纸娃娃（也就是说，能够“装备”物品和盔甲，并在角色上显示这些物品的视觉表示）混合并没有看起来很容易，或者至少是一项非重复性的任务。

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

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

我认为可以将角色动画分开，然后在角色动画的顶部/下方添加剑/物品动画。这样，不同的角色可以重复使用相同的项目动画，将其与他们的角色动画相匹配。但是对于每个项目，您仍然会有很多精灵。角色必须相似。

有什么想法或建议吗？

（如果重要的话，我想我打算做的是让 NPC 没有任何纸娃娃，并且玩家有角色动画 + 每种物品的动画。对于盔甲，它将与玩家的身材和尺寸相匹配.)

4

1 回答 1

0

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

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 将是透明的，想法是将它们与基本的播放器图形合成，最终得到一个纸娃娃角色。为了减少开销，将这些图形放在单个精灵表中并存储每个项目的 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]。这样做的缺点是只有一个大小，所以除非你的角色都是相同的大小（实际上在基于图块的 RPG 中完全可能），为每个大小的角色生成所有图形可能会很耗时。

您可以使用的另一种方法是使用画布绘图功能绘制图形，其中您可以为头盔指定 ax/y/width/height，然后以您希望的任何尺寸绘制头盔。像这样的东西：

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 是必需的 -请参阅此线程。

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

于 2013-01-20T15:59:30.700 回答