如何存储信息以正确显示构成单个游戏字符/对象/NPC的多个图像？

Question

抱歉，标题太混乱了，我不太确定该怎么说。

我刚刚进入2D游戏开发后，最近发现HTML5 5的画布元素的力量。我的第一个基本项目是学习诀窍。这个游戏将允许玩家加入一个游戏，基本上在一个单一的地图上与坦克战斗。他们杀得越多，他们能解锁和使用的坦克就越高。

但是，我被困在如何吸引坦克进入游戏(至少是正确的)。每个坦克有三个图像:坦克的身体，炮塔，和一个坦克的外壳，将吸引游戏时坦克开火。当然，当游戏加载一个坦克，它需要知道正确的位置，以放置这些图像。所有的坦克都有不同的大小，所以我根本不能告诉游戏加载的身体和炮塔在相同的地点，每次。当坦克的主体被画到画布上时，炮塔当然需要相对于这个相应的物体来绘制。

那我该怎么保存这些信息呢？我是否在包含每个坦克的炮塔偏移列表的代码中添加了一个硬编码对象？

我希望我能清楚地解释我的问题。如果你有什么问题，请问。：:)

Answer 1

处理多个大小精灵的一种方法是使用中心点而不是通常的左上角定义每个精灵的位置。

这样，每个坦克的大小在定位时都是无关紧要的。

要实现中点定位，您可以：

• 翻译成地图上想要的位置
• 然后是drawImage，偏移量为-宽度/2和-高/2.

一个例子，

假设您的tankBase雪碧宽38 is，高59 is。

然后，要绘制以x/y=100,100为中心的tankBase，可以这样做：

ctx.translate(100,100);
ctx.drawImage(tankBase,-38/2,-59/2);

这里有一个演示：http://jsfiddle.net/m1erickson/V9uEr/