Question

使用Canvas＆amp ;;进行2D自上而下游戏（Think Zelda + RPG）。 Javascript，实现纸质多边形的最佳方式是什么，同时允许动画？

使用精灵表制作动画非常简单，但添加纸娃娃（即，能够'装备'物品和装甲，以及这些物品的视觉表示显示在你的角色），混合似乎并不容易，或者至少是一个非重复的任务。

例如，想象一下摆动剑的角色的动画。一个带动画的简单精灵表就可以了。但是如果你想要在装备不同的剑时动画中的实际剑会改变怎么办？你用不同的剑创造了重复相同动画的额外精灵吗？对于每件商品？对于每个NPC？（假设我也想要NPC的纸娃娃，而不仅仅是角色）

一个可以这样做，并且只保留最少数量的可穿戴物品，以限制所需的精灵动画帧数。

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

有任何想法或建议吗？

（如果重要的话，我认为我正在计划做的是让NPC没有任何纸质玩偶，玩家可以为每件物品添加角色动画+动画。对于盔甲，它将与图形和尺寸相匹配玩家。）

Answer 1

我正在考虑每件可穿戴物品，你可以在玩家身上放置一系列物品，例如：

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

然后在您的播放器设置中，您将拥有相同的阵列;当然在许多角色扮演游戏中你都没有从一整套令人敬畏的钻石盔甲开始，你从皮革开始，也许是一种好的胸板。

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]
}

数组是[x，y，width，height]。这样做的缺点是只有单个大小，所以除非你的角色大小相同（实际上在基于区块的RPG中很可能），否则为每个大小的角色生成所有图形可能会很费时间。

你可以采用的另一种方法是使用画布绘制功能绘制图形，你可以在其中指定x / y /宽度/高度来表示头盔，然后以任意大小绘制头盔。像这样：

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

上述功能在屏幕上绘制一个+。对于宽度为奇数的行 - see this thread。

，0.5是必需的

无论哪种方式，这将耗费时间，具体取决于您希望在每个角色上看到多少项目。

如何用动画实现纸娃娃？

1 个答案: