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

Question

抱歉，标题令人困惑，我不太确定如何措辞。

在最近发现 HTML5 的 Canvas 元素的强大功能后，我刚刚开始从事 2D 游戏开发。我正在进行我的第一个基本项目来学习诀窍。这款游戏将允许玩家加入游戏，基本上在一张 map 上与坦克作战。他们获得的杀戮越多，他们可以解锁和使用的高级坦克就越多。

但是，我有点困惑如何将坦克绘制到游戏中(至少是正确的)。每个坦克都有三个图像:坦克的车身、炮塔和坦克开火时会被吸引到游戏中的坦克炮弹。当然，当游戏加载坦克时，它需要知道放置这些图像的正确位置。所有坦克都有不同的尺寸，因此我根本无法让游戏每次都将车体和炮塔加载到相同的位置。当坦克的车身被绘制到 Canvas 上时，炮塔当然需要相对于这个相应的车身来绘制。

那么我应该如何存储这些信息？我是否在代码中放置一个硬编码对象，其中包含每个坦克的炮塔偏移列表？

我希望我清楚地解释了我的问题。如果您有任何疑问，请询问。 :)

Answer 1

处理多个尺寸的 Sprite 的一种方法是使用每个 Sprite 的中心点而不是通常的左上角来定义每个 Sprite 的位置。

这样，每个水箱的大小在定位时就无关紧要了。

要实现中心点定位，您可以:

• 翻译到 map 上的所需位置
• 然后以 -width/2 和 -height/2 的偏移量绘制图像。

一个例子，

假设您的 TankBase Sprite 宽 38 像素，高 59 像素。

然后绘制以x/y==[100,100]为中心的tankBase，你可以这样做:

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

这是一个演示:http://jsfiddle.net/m1erickson/V9uEr/