javascript - 如何从TexturePacker生成的JSON读取 trim Sprite 的中心？

Question

在 this Udacity course ，我们必须读取 TexturePacker 生成的 JSON 文件从 Sprite 表计算 Sprite 的中心。我们必须考虑 Sprite 是否被 trim 。

带有未 trim Sprite 的 Sprite 表看起来像这样(绿色的空像素):

虽然带有 trim Sprite 的 Sprite 表看起来像这样(绿色的空像素):

正如您可能看出的那样，差异在于从最终的 spritesheet 文件中删除了空像素。

因此，如果我将 32x32 像素的 circle.png 文件添加到我的 TexturePacker spritesheet 中，并且图像的尺寸仅为 24x24，TexturePacker 会将图像 trim 为 24x24 并生成一个 png 文件这个大小(假设只有一个 Sprite )和以下 JSON 文件:

{"frames": [

{
    "filename": "circle.png",
    "frame": {"x":0,"y":0,"w":24,"h":24},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":5,"y":5,"w":24,"h":24},
    "sourceSize": {"w":34,"h":34},
    "pivot": {"x":0.5,"y":0.5}
}],
...
}

它详细说明了以下信息:

• frame: Sprite 表中 Sprite 的坐标、宽度和高度。
• trim :是否删除空像素。
• spriteSourceSize:原始图像中 trim 后的 Sprite 的坐标和大小。
• sourceSize:原始图像的大小。

我认为，为了获得图像的中心，计算sprite.frame.w/2和sprite.frame.h/2就足够了>，但是，根据类(class)，这个 javascript 应该计算中心:

//sprite is a javascript object that represents a sprite inside the 'frames' array
if (sprite.trimmed) {
            cx = sprite.spriteSourceSize.x - (sprite.sourceSize.w * 0.5);
            cy = sprite.spriteSourceSize.y - (sprite.sourceSize.h * 0.5);
}

也许这真的很简单，但我无法理解为什么他们使用spriteSourceSize，因为我们将读取 spritesheet 而不是原始图像。

Answer 1

在你的情况下，圆是居中的。

这提供的值与简单地除以帧大小时得到的值相同。

您的 Sprite (圆圈)也可能位于原始 Sprite 的左上角。右侧和底部均为透明像素。

spriteSourceSize: {"x":0, "y":0, "w":24, "h":24}

因此 x 和 y 坐标都是 0，而不是 5。您的计算将在 x 和 y 方向上偏离 5 个像素。

我看不到类(class)(需要登录)，但这就是计算所考虑的内容。