Cocos Creator 优化，帧动画优化

需求背景·：在游戏中使用了大量的帧动画，并且为了drawcall的优化使用了 cocos的自动合集功能，因为帧动画的动作效果需要统一 所以图片会有大量空白部分，虽然cocos有自己的trim，但在自动合图时空白部分还是会产生大量的空白部分，所以有了本优化方案。

优化优点：帧动画图片小了可以有效减少包体、内存，以及drawcall。

优化思路:核心的游戏逻辑为帧动画，所以在切图后记录切掉的偏移量在播放帧动画时候还原，即可。

1、第一步是切图，本人使用的是nodejs处理，可自行选择，脚本会放在下边。

2、第二步是 还原 帧动画的 位置，核心代码如下

let sfrc: cc.Rect = sf._spriteFrame.getRect();
                let sfOfs: cc.Vec2 = cc.v2(sf._spriteFrame.getOffset().x, sf._spriteFrame.getOffset().y);
                this.sp.node.anchorX = 0.5 - (sfOfs.x / sfrc.width);
                this.sp.node.anchorY = 0.5 - (sfOfs.y / sfrc.height);

                this.sp.spriteFrame = sf._spriteFrame;

                this.offsetY = sf._spriteFrame.getOriginalSize().height * 0.5;
                let v2: cc.Vec2 = cc.v2(sf._spriteFrame.getOffset().x, sf._spriteFrame.getOffset().y);
                this.sp.node.y = this.offsetY + v2.y + sf._OffsetY;
                this.sp.node.x = (sf._OffsetXL - sf._OffsetXR) / 2 + v2.x;

SpriteFrameOffset 类记录 偏移等信息

private m_sp: cc.SpriteFrame = null;
	private m_path: string = null;
	private SpriteFrameOffset: cc.Vec4 = new cc.Vec4(0, 0, 0, 0);   //左 下    x偏移  y偏移 

	public constructor(sp: cc.SpriteFrame, path: string) {
		this.m_sp = sp;
		this.m_path = path;
		let offset = MyApp.dl.ResOffset_ResOffset[path + ".png"] as ResOffset_ResOffset;
		if (offset) {
			this.SpriteFrameOffset = new cc.Vec4(offset.Life, offset.Right, offset.Down, offset.Up);
		}
	}

文件附上

文件新增了 帧动画 裁切 功能

更新文件