在 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 而不是原始图像。
最佳答案
在你的情况下,圆是居中的。
这提供的值与简单地除以帧大小时得到的值相同。
您的 Sprite (圆圈)也可能位于原始 Sprite 的左上角。右侧和底部均为透明像素。
spriteSourceSize: {"x":0, "y":0, "w":24, "h":24}
因此 x 和 y 坐标都是 0,而不是 5。您的计算将在 x 和 y 方向上偏离 5 个像素。
我看不到类(class)(需要登录),但这就是计算所考虑的内容。
关于javascript - 如何从TexturePacker生成的JSON读取 trim Sprite 的中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33055758/