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

时间:2014-06-11 21:23:50

标签: javascript html5 canvas

很抱歉这个令人困惑的标题,我不太确定如何说出来。

我刚刚发现了HTML5的Canvas元素的强大功能后,才开始进行2D游戏开发。我是第一个学习绳索的基础项目。这个游戏将允许玩家加入游戏,并基本上在坦克的单一地图上战斗。他们获得的杀戮越多,他们可以解锁和使用的高等级坦克就越多。

但是,我有点坚持如何将坦克拉入游戏(至少是正确的)。每个坦克有三个图像:坦克的主体,炮塔和当坦克开火时,坦克炮弹将被吸引到游戏中。当然,当游戏加载坦克时,它需要知道放置这些图像的正确位置。所有坦克都有不同的尺寸,因此我根本无法告诉游戏每次都在同一个地方加载身体和炮塔。当坦克的主体被拉到画布上时,炮塔当然需要相对于相应的身体绘制。

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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

  • 转换为地图上的所需位置
  • 然后使用-width / 2和-height / 2的偏移量绘制drawImage。

例如,

假设你的tankBase精灵宽38px,高59px。

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

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

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