如何從TexturePacker生成的JSON中讀取trimmed sprite的中心？

Question

在this Udacity course中，我們必須讀取由TexturePacker生成的JSON文件，以從spritesheet計算精靈的中心。我們必須考慮精靈是否被修剪。

與修剪精靈的spritesheet看起來像這樣（綠色空像素）：

雖然有微調精靈的spritesheet看起來像這樣（綠色空像素）：

您可能會發現，區別在於從最終的spritesheet文件中刪除了空像素。因此，如果我將一個circle.png文件的32x32像素添加到我的TexturePacker spritesheet中，並且圖像的尺寸僅爲24x24，那麼TexturePacker會將圖像裁剪至24x24並生成一個此大小的png文件（假設只有一個子畫面）及以下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} 
}], 
... 
} 

它詳述了以下信息：

• 幀：座標，寬度和spritesheet內的子畫面的高度。
• 修整：空像素是否被移除。
• spriteSourceSize：原始圖像中被修剪的精靈的座標和大小。
• sourceSize：原始圖像的大小。

我認爲，爲了獲得圖像的中心，這足以計算sprite.frame.w/2和sprite.frame.h/2，但據的過程中，這個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

在你的情況下，圓是居中。

這提供了與簡單劃分幀大小時相同的值。

你的精靈（圓圈）也可能位於原始精靈的左上角。透明像素都在右側和底部。

spriteSourceSize：{ 「×」：0， 「Y」：0， 「W」：24， 「H」：24}

所以x和y座標都爲0，而不是5.你的計算將在x和y方向上偏離5個像素。

我看不到路線（它需要登錄），但這是這種計算考慮到的。