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

How to store information to properly display multiple images that makeup a single game character/object/NPC?

本文关键字：游戏角色 单个 对象 NPC 图像 显示 存储 何存储 信息      更新时间：2023-09-26

很抱歉，我不太确定如何表达。

我是在最近发现HTML5 Canvas元素的强大功能后才开始接触2D游戏开发的。这是我的第一个基本项目，我要学习其中的诀窍。这款游戏将允许玩家加入游戏，并在一张地图上与坦克战斗。他们击杀的越多，他们可以解锁和使用的高级坦克就越多。

但是，我有点纠结于如何在游戏中绘制坦克(至少是正确的)。每辆坦克都有三个图像:坦克的车身，炮塔，以及坦克开火时将被吸引到游戏中的坦克炮弹。当然，当游戏加载坦克时，它需要知道放置这些图像的正确位置。所有的坦克都有不同的尺寸，所以我不能让游戏每次都把车体和炮塔装在相同的位置。当坦克的身体被绘制到画布上时，炮塔当然需要相对于这个相应的身体来绘制。

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

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

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

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

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

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

,

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

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

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

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

相关文章：