掘金 阅读 ( ) • 2024-04-17 17:14

最近遇到一个bug,plist制作的动画,在creator中会抖动,排查定位了很久,最终确定是plist里面offset导致的,花了点时间详细了解了下。

offset的含义

offset的含义: trim透明像素前后,中心点的偏移。

在这篇文章中,有详细介绍offset的计算方式

image.png

$$

offsetX = ( trimWidth/2 + left ) - originWidth/2 $$

化简后:

$$ offsetX = (trimWidth- originWidth)/2 +left $$

所以问题的关键就在于trimWidth-originWidth的结果是否能被2整除

大胆假设

在c++里面,假设计算offset的代码如下

int value = (50-1)/2;

因为类型为int,所以不能整除就会被丢弃掉小数,这也是导致出现0.5bug的原因。

制作测试例

基于以上假想设计测试例:图片宽100,从25-78有像素,也就是有53个实际像素 image.png 代入公式计算,是肯定会出现小数点的

(53-100)/2 + 25
  -47   /2 + 25
    -23.5  + 25 = -1.5

TexturePacker的结果

<key>frame</key>
<string>{{2,2},{54,100}}</string> // 54
<key>offset</key>
<string>{1,0}</string>
<key>rotated</key>
<false/>
<key>sourceColorRect</key>
<string>{{24,0},{54,100}}</string>// 可以看到是从24开始的读取像素的
<key>sourceSize</key>
<string>{100,100}</string>

CocosStudio的结果

image.png

<key>frame</key>
<string>{{2,2},{53,100}}</string> // 53
<key>offset</key>
<string>{1,0}</string>
<key>rotated</key>
<false />
<key>sourceSize</key>
<string>{100,100}</string>

结论

我们发现2个不同的软件打包plist,宽度出现了1像素的偏差,这就是导致这个问题的原因,根本原因还是TrimDiff无法被2整除导致的

尽量使用TexturePacker来打包plist,少踩坑!

至于为什么texturePacker将53变为54,可能是为了照顾到offset如果为小数,在解析上会出现性能问题。

大胆猜测:texturePacker当发现trimDiff无法被2整除时,会自动调整尺寸。

cocos creator 会出现这个问题么

我尝试做了一个测试例,并配置了自动图集,构建好后找到合图的信息数据,如下:

[[{ "name": "img_08", "rect": [111, 222, 87, 87], "offset": [0, 0], "originalSize": [231, 231], "capInsets": [0, 0, 0, 0] }], [0], 0, [0], [0], [0]],
[[{ "name": "img_04", "rect": [3, 403, 48, 47], "offset": [-0.5, 0], "originalSize": [231, 231], "capInsets": [0, 0, 0, 0] }], [0], 0, [0], [0], [0]],
[[{ "name": "img_17", "rect": [188, 76, 64, 64], "offset": [-0.5, 0.5], "originalSize": [231, 231], "capInsets": [0, 0, 0, 0] }], [0], 0, [0], [0], [0]],
[[{ "name": "img_11", "rect": [3, 222, 102, 102], "offset": [-0.5, 0.5], "originalSize": [231, 231], "capInsets": [0, 0, 0, 0] }], [0], 0, [0], [0], [0]],
[[{ "name": "img_14", "rect": [75, 388, 66, 66], "offset": [-0.5, -0.5], "originalSize": [231, 231], "capInsets": [0, 0, 0, 0] }], [0], 0, [0], [0], [0]],
[[{ "name": "img_12", "rect": [113, 3, 67, 67], "offset": [0, 0], "originalSize": [231, 231], "capInsets": [0, 0, 0, 0] }], [0], 0, [0], [0], [0]],
[[{ "name": "img_09", "rect": [3, 3, 104, 104], "offset": [-0.5, 0.5], "originalSize": [231, 231], "capInsets": [0, 0, 0, 0] }], [0], 0, [0], [0], [0]],
[[{ "name": "img_06", "rect": [183, 315, 66, 67], "offset": [-0.5, 0], "originalSize": [231, 231], "capInsets": [0, 0, 0, 0] }], [0], 0, [0], [0], [0]]

发现offset0.5的情况,验证后和rect.width - originalSize.width不能被2整除的结论是正确的,很显然creator是能够正常处理好这种问题的。