抱歉,标题令人困惑,我不太确定如何措辞。
在最近发现 HTML5 的 Canvas 元素的强大功能后,我刚刚开始从事 2D 游戏开发。我正在进行我的第一个基本项目来学习诀窍。这款游戏将允许玩家加入游戏,基本上在一张 map 上与坦克作战。他们获得的杀戮越多,他们可以解锁和使用的高级坦克就越多。
但是,我有点困惑如何将坦克绘制到游戏中(至少是正确的)。每个坦克都有三个图像:坦克的车身、炮塔和坦克开火时会被吸引到游戏中的坦克炮弹。当然,当游戏加载坦克时,它需要知道放置这些图像的正确位置。所有坦克都有不同的尺寸,因此我根本无法让游戏每次都将车体和炮塔加载到相同的位置。当坦克的车身被绘制到 Canvas 上时,炮塔当然需要相对于这个相应的车身来绘制。
那么我应该如何存储这些信息?我是否在代码中放置一个硬编码对象,其中包含每个坦克的炮塔偏移列表?
我希望我清楚地解释了我的问题。如果您有任何疑问,请询问。 :)
最佳答案
处理多个尺寸的 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);
关于javascript - 如何存储信息以正确显示构成单个游戏角色/对象/NPC 的多个图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24172825/