在 Slick2D 中使用具有不同大小精灵的精灵表答案

【问题标题】：Using a sprite sheet with different sized sprites in Slick2D在 Slick2D 中使用具有不同大小精灵的精灵表
【发布时间】：2012-03-14 09:17:49
【问题描述】：

我在 API 中搜索了SpriteSheet，但找不到任何关于如何制作具有不同大小精灵的精灵表的信息。

我正在使用的精灵表有一行 16x16px 的图块，它下面有一排 24x24px 的图块，下面是一排 8x8px 的图块，等等。

最初，我没有使用 Slick2D，而是使用 BufferedImage.getSubimage() 从精灵表的临时 BufferedImage 中获取每个精灵。这里有类似的方法可以使用吗？

【问题讨论】：

标签： java slick2d sprite-sheet

【解决方案1】：

我不相信在当前版本的 API 中可以直接创建子图像，至少在撰写本文时是这样。

但是，我可以想到三个可能的选项（除了自己添加所述方法调用的选项 - 毕竟是 open source）：

您可以从同一源 Image 实例化多个 SpriteSheet 对象，每个 Sprite 大小一个，如果您真的想将它们保存在同一个源文件中。
您可以获取Image 实例，并在其上调用getSubImage 以将Image 拆分为三张图像，每种尺寸一张（24x24、16x16 等）。然后，从这些子图像中，实例化SpriteSheets。
您可以根据大小将源文件拆分为单独的文件。也就是说，将 24x24 的精灵单元格放在一个文件中，将 16x16 的精灵单元格放在另一个文件中，依此类推。

【讨论】：

【解决方案2】：

您可以只保留一个 Image 并使用 Graphics 对象的 drawImage 方法的重载来指定在哪里绘制图像的哪一部分：

g.drawImage(image, x1, y1, x2, y2, srcX1, srcY1, srcX2, srcY2);

参见 [javadoc](http://slick.cokeandcode.com/javadoc/org/newdawn/slick/Graphics.html#drawImage(org.newdawn.slick.Image, float, float, float, float, float,浮动，浮动，浮动））

第一个参数是图片的实例。接下来的两个参数定义屏幕上渲染开始的点。 X2 和 y2 定义了渲染的终点。通常 x2 是 x1 + spriteWidth 并且 y2 是 y1 + spriteHeight，但是您可以更改这些值以绘制不同大小的精灵。最后四个参数的作用相同，但它们定义了将在屏幕上绘制的精灵表区域。

如果我们以您的示例为例，我们想从第三行绘制第二个图块，调用将如下所示：

int tileWidth = 8;
int tileHeight = 8;
int sourceX = 40;
int sourceY = 8; //as its the sec
int drawX = 34;
int drawY = 65;
g.drawImage(image, drawX, drawY, drawX + tileWidth, drawY + tileHeight
    , sourceX, sourceY, sourceX + tileWidth, sourceY + tileHeight);

当我使用 spritesheet 时，我在一些（非常罕见的情况下，主要是测试）和一个 sprite 类中有硬编码值，其中存储了源 x1、x2、y1 和 y2 值。我可以将一堆它们打包在列表或地图中，这样我就有了一个精灵索引。通常我会以某种方式生成定义，然后序列化列表，因此如果需要，我可以简单地重新加载该列表。

这是我的 XML 定义的一个简短示例（我将宽度和高度而不是 x2 和 y2 值存储在 xml 中，因为我发现它更易于阅读并且更便于手动编辑。反序列化后我计算 x2和 y1 值）：

<spriteSheet imageName="buildings" name="buildings">
  <sprite name="1x2 industry 01" spriteX="0" spriteY="0" width="50" height="112"/>
  <sprite name="1x2 quarters 01" spriteX="50" spriteY="0" width="50" height="112"/>
  <sprite name="1x1 spaceport 01" spriteX="243" spriteY="112" width="51" height="56"/>
      ...
</spriteSheet>

【讨论】：