浅谈动画编辑器

http://blog.chukong-inc.com/index.php/2012/03/17/浅谈动画编辑器/

动画编辑器有很多种，TexturePacker,Zwoptex,Tiled等切图、合图、拼图的都算是这个范畴。（其他的我也没有用过…）刚来公司时，做过一段时间编辑器的开发。下面就是我对咱们公司动画编辑器的理解。

动画编辑器由两个工具构成，一个是PictureEditor.exe,一个是AnimationEditor.exe。

前者是一个切图的工具，可以把一幅图分隔是几个小图，添加到一幅大图里面，然后省去原图种的透明部分，节省资源。最后 生成的文件是 一个大图和 一个plist文件，其中plist文件记录了，原始的一些切割后的小图在 大图中的位置。

后者是一个制作动画的工具，生成的文件是一个大图，和一个sprite文件(和plist类似的一个二进制文件)。Sprite记录的n个动画， 每个动画由数个动画帧构成，每个动画帧又由数个小图块构成。这些小图块就是前面切图工具，切出来的图块。

动画编辑器的整个结构大概就是这样。

最近美术总说起，动画编辑器做出来的动画，在动画编辑器里没有问题，在设备上有问题的现象。下面就说一下这个问题的原因 和解决方法。

Windows绘制的坐标系统是。 记录，以及绘制用的都是像素单位，图片的位置，大小等存储的都是整形

咱们用的cocos2d引擎的坐标系统是，采用openGL进行绘制，图片位置大小，最后会转化成纹理坐标，是浮点类型。

 

动画编辑器的坐标系统是，图片的位置，大小等存储的是整形。

 

一个5*5的图片，在下面这几种情况下，其中有个点的坐标是(0,0)。动画编辑器存储中心点的坐标依次是: （2，3）、（-3，3）、（2，-2）、（-3，-2）、

这个方块如果加到cocos2d上，保持中心点不变，中心点为锚点，左下角的坐标一次是(-0.5,0.5)、(-5.5,0.5)、(-0.5,-4.5)、(-5.5,-4.5)、。如下图这种情况一个5*5，和一个4*5的方块，在编辑器中贴着，中心点依次是(2,3);(7,3); 相接的边的下坐标点都是(5,0)。

放在cocos2d中便会是, 中心点保持不变，左边的方框，相接的边的下坐标点变成(4.5,0.5), 右边的方框仍旧是(5,0.5)。中间就会有缝隙，缝隙在放大的时候超过一个像素，会显示出来,这也是放大缩小时，缝隙时隐时现的原因。

解决的方法就是，不以中心点为基准(锚点)，进行绘制。和Windows绘制类似，以左上角(锚点)进行绘制。 一种 方案是，修改编辑器，把存储中心点的方式改为存储左上角点。另一种修改方案是，根据中心点，按照编辑器里面一样的计算方法，算出左上角点，这个需要修改解析动画类的对应方法。  第一种方案，需要把以前做的动画重新整理一遍，工作量较大，也容易出错。采用第2种方案：

修改前代码:

…

CCSprite *s;

…

s.anchorPoint = tile.anchorPt;//(0.5,0.5)

s.position = ccpAdd(position, tile.position);

修改后代码：

s.anchorPoint = ccp(0,1);

s.position = ccpAdd(position, ccp(tile.position.x-(int)rect.size.width/2 , tile.position.y+(int)rect.size.height/2));

其中 ccp(tile.position.x-(int)rect.size.width/2 , tile.position.y+(int)rect.size.height/2) 是模拟编辑器的计算方法，算出来的结果是整形。

由于编辑器动画对应的图片只有一张，没有区分retina和非retina，所以高清屏在读取tile 的position,和宽、高的时候都会除2，会出现很多0.5的数值。所以计算的时候需要还原回去，要不仍旧会出现断线，最终的计算代码是:

s.anchorPoint = ccp(0,1);

s.position = ccpAdd(position,   ccpMult(ccp(tile.position.x*CC_CONTENT_SCALE_FACTOR()-(int)(rect.size.width*CC_CONTENT_SCALE_FACTOR()/2) , tile.position.y*CC_CONTENT_SCALE_FACTOR()+(int)(rect.size.height*CC_CONTENT_SCALE_FACTOR()/2)), 1/CC_CONTENT_SCALE_FACTOR())

);

 

flip下：

s.position =  ccpAdd(position, ccpMult(ccp(( -tile.position.x*CC_CONTENT_SCALE_FACTOR()-(int)(rect.size.width*CC_CONTENT_SCALE_FACTOR())%2)-(int)(rect.size.width*CC_CONTENT_SCALE_FACTOR()/2) , tile.position.y*CC_CONTENT_SCALE_FACTOR()+(int)(rect.size.height*CC_CONTENT_SCALE_FACTOR()/2)), 1/CC_CONTENT_SCALE_FACTOR()));