如何处理尺寸不一致的Sprite板?


14

对于具有spritesheet 不均匀精灵的尺寸,我怎么可以得到边界,矩形为每个精灵(即蓝色框下面的图片/我只画了几个例子)?

我想确定的是: offset_x, offset_y, width, height

在此处输入图片说明

到目前为止,我仅使用了所有精灵都具有相同尺寸的精灵表。在那种情况下,只需要指定x和y偏移即可获得特定的精灵。然而,对于spritesheets 非均匀的尺寸,这并不工作。

编辑:阅读完评论和答案后,我改写了我的问题,以使其更具包容性。在游戏中使用Spritesheet的实际过程。以前,该问题包含以下要点:人们为什么会生成尺寸不一致的Spritesheet,以及我该如何处理。


1
在我看来,它们都具有相同的大小,没有用颜色填充的空间只是alpha设置为零的像素。
德里克(Derek)2012年

Answers:


8

大多数尺寸不同的Sprite表单通常都具有某种元数据,且该Sprite的锚点位于何处。有很多工具可以执行一些操作,例如去除完整的Alpha像素并为您提供所需的数据,以免手动生成此数据。

如果您没有此元数据,则必须自己编写。最准确的方法是您在问题中说的一种方法,那就是手工完成。这可能需要一段时间,但可能比制作新的精灵更快。


尽管基于自动检测的方法有其用途,但实际上它们是挑剔且容易出错的。您已经需要元数据作为精灵的原点(您的精灵确实有一个原点,对吗?),因此额外的数据几乎不会成为负担。美工应该总是比您的应用更好地了解单个子画面的大小。
史蒂文·斯塔德尼基

+1。提供带有sprite的元数据可以确保理智地解决它。
Bartek Banachewicz

5

您可以对图像进行分析以找到每个子画面的边界矩形,对这些边界矩形进行排序(也许通过增加最小值X,然后是Y),然后将获得一组与子画面的框架相对应的边界区域。

由于此过程可能会相对昂贵,因此您可能希望离线进行此操作,例如,将其作为游戏构建过程的一部分。然后,您可以将边界区域信息序列化为与相应的精灵图图像一起存储的文件。在运行时,您同时加载了图像和边界定义文件,并且获得了访问每个单独的精灵所需的信息。

不过,说起来容易做起来难。本质上,您将需要进行特征检测,尤其是斑点检测,这些都是机器视觉问题。您还可以将图像阈值化(黑白)并使用边缘检测技术。在这些链接上,这些技巧背后的相关数学要比我能更好地解释,并且在您不愿意自己实现该数学的情况下,有一些可用的库可以为您提供帮助。以下链接对我来说似乎是最有前途的:


1
+1。我同意,这需要一些计算机感知/图像处理技能才能找到正确的精灵范围。有时甚至可能是不可能的,例如,如果您看乌龟到外壳的动画。相对于其他动画帧,将很难确定该位置的正确位置。至于原因:这很可能是由于对纹理空间的最佳利用。通常,带有坐标的文件应附带此类Spritesheet,但如果您只是从Google图片搜索中获取该文件,则可能缺少此信息。
布姆扎克

您提出了一个很好的观点:我的答案没有解决精灵起源的问题;这只会导致找到紧密拟合的边界矩形,并且对于具有不均匀精灵的图纸,了解每个帧的原点非常重要。除非您做出一些(可能是特定于域的)假设,例如,原点始终是(宽度/ 2,最大Y)或类似的值,否则很难自动做到这一点。

4

我为这种不均匀的Spritesheet制作了自己的工具。它允许编辑偏移量等。这是一个截图,可以给您一个想法:

在此处输入图片说明


看起来您创建了一个统一的Spritesheet,其中仅包含非均匀动画中的一个动画?还是我误解了?
2012年

不,我打开了一个不均匀的Spritesheet,并在Sprite周围绘制了一个矩形(该矩形会自动缩小到正确的大小)。一旦我通过重复创建动画就可以播放每个动画并根据需要调整偏移量。
匿名者2012年

好像是您在此处制作的非常整洁的工具。介意分享工具?
eckyputrady 2012年

@eckyputrady,对不起,但是还远远不够,但是我推荐了另一个工具(这基本上启发了我)。您可以在这里找到它:colourclash.com/sprite_buddy/sprite_buddy.html
Anonymouse

0

检出Texturepacker

http://www.texturepacker.com/

它输出这样的文件(取决于您的首选设置)

    {
    "filename": "image_front_1",
    "frame": {"x":1,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":2,"w":36,"h":40},
    "sourceSize": {"w":36,"h":40}
},
{
    "filename": "image_front_2.png",
    "frame": {"x":36,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":36,"h":42},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_3.png",
    "frame": {"x":71,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_4.png",
    "frame": {"x":106,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
}

使用此数据,您可以轻松地从图像中抓取单独的矩形。


这不是使用哪种技术的问题。在我看来,仅用工具的链接及其输出示例来回答是不够的。
MichaelHouse

-1

spritebuddy.com对我来说很棒。在网站本身上找不到任何帮助,但是此Google网上论坛帖子对此做了很好的解释。它可以自动推测精灵的边界,让您对其进行调整,并可以将其排列为动画序列。然后,它会以JSON或XML格式为所有这些文件吐出一个元数据文件。然后,您要做的就是解析游戏中的数据文件以获得正确的边界矩形。


1
这不是使用哪种技术的问题。此外,其中一项评论中已建议使用此工具。
MichaelHouse

我更新了答案,但不同意它没有回答OP的问题:“我想确定的是:offset_x,offset_y,宽度,高度。” 没有指定是否必须在游戏运行时(这将非常不正常)或之前发生。关于“编辑:[...]我改写了我的问题,以使其更具包容性。这是我在游戏中使用Spritesheet的实际过程。” 我使用spritebuddy生成了适当的JSON文件,然后在游戏中对其进行解析以获得所需的数据。
CletusW

1
@CletusW:好的答案将说明该工具为什么对您的过程如此有效,如何工作以及如何帮助等等。我应该能够阅读您的答案,然后知道如何选择工具或编写自己的工具。如果您链接到自己喜欢的示例,那只是一个奖励,而不是答案的实质。
肖恩·米德迪奇
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.