Sprite Sheet Editor修剪每帧中的空白区域的原理说明

source on github

在Sprite Sheet Editor 0.5.0版本中，我加入了我加入了修剪空白的功能。这个功能将每帧图像的上下左右的空白全部清空，然后再将所有清空了空白的帧绘制在一张大的sheet上，从而使最终sheet文件尺寸尽可能的小。

但是，对于动画来说，所有帧的尺寸应该是统一的，这样才能实现正确对位。所以，一个完整的动作的帧的大小，应该以这个动作所有帧的有效像素的外延来确定。

看看这张图，就清楚了：

加入这个动作由两帧组成，第一帧占据左下角，第二帧占据右上角，那么整个动作的帧的尺寸就应该以第一帧和第二帧的宽高的最大值来确定。也就是图中的虚线部分。

所以，Sprite Sheet Editor 在保存操作的同时，将动作的修剪尺寸和原始尺寸（实际在程序中用于动作的尺寸，也就是上面说的最大值）同时保存在元数据当中，在使用它的时候，利用这些数据还原。

以一帧的数据为例，下面是以XML格式保存的元数据中的一帧的定义。

其中，x和y定义这一帧在整个sheet中的绝对位置；w和h定义这一帧在sheet中的宽高；ox和oy的值如果不为0，说明此帧被修剪过，它的实际宽高应该是ow和oh，而相对于实际宽高的偏移则是ox和oy。

 1<frame>
 2  <x>100</x>
 3  <y>120</y>
 4  <w>37</w>
 5  <h>124</h>
 6  <ox>-9</ox>
 7  <oy>-3</oy>
 8  <ow>131</ow>
 9  <oh>130</oh>
10</frame>

原理见下图：

红色的点就是该帧在整个sheet中的坐标位置，虚线矩形框代表该帧在程序中使用的实际宽高（就是trim之前的宽高），而实线矩形框代表该帧在sheet中保存的宽高。