Cocos Creator 优化，帧动画优化

最新推荐文章于 2025-10-15 14:17:00 发布

原创

最新推荐文章于 2025-10-15 14:17:00 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cocos-creator #游戏开发

本文介绍了针对游戏中帧动画存在的大量空白部分问题进行的优化方案。通过切图并记录偏移量，在播放时还原帧位置，从而减少包体、内存占用和drawcall。核心代码展示了如何实现这一优化，包括使用PngClipper工具进行裁切和调整锚点坐标。

需求背景·：在游戏中使用了大量的帧动画，并且为了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._