【干货】用2D资源实现3D动画效果

项目背景

在设计好游戏的整体视觉后，让整个游戏“动”起来就成了最迫切需要解决的问题。动起来的小鸡才会更加可爱！作为一款3D视角的互动小游戏，互动性自然是最重要的。动效的设计一方面能够让画面活起来，另一方面使用户能立即获得操作反馈，提升游戏体验。

一、小鸡动效设计

初始设计了呼吸、张望、跳跃3个动作，在待机状态下随机循环播放，穿插衔接，让画面中的小鸡持续在活动。同时设计了4个反馈类的动效：喂食、抚摸、生蛋、收集，用户在进行游戏操作的时候能对应得到快速的反馈。

1）C4D动效制作：当时刚刚入职，项目时间紧迫，用骨骼做动效时间上来不及（其实是那时候还不会0.0），于是采用了快捷的变形器+PSR的形式，快速完成了动效的制作。

2）AE导出Lottie：把C4D渲染导出的序列帧，以单张的形式导入AE（序列帧格式插件无法导出），用bodymovin插件导出json格式的Lottie动画。

bodymovin输出设置：

导出的Lottie文件，demo方便前端搭建时进行预览（用谷歌浏览器就能直接打开进行预览）；images的图片可以用TinyPNG网站进行压缩，可以减小体积。

三维动画效果演示：

3）补做骨骼动画：后续考虑到视频动画等的演绎，在小鸡的动效上线后抽时间把骨骼动画也做了出来。

二、3D动画转2D

C4D制作的动画序列帧体积较大，8个裸鸡基础动作就高达14M，严重拉低了游戏的加载速度和性能，影响用户体验。为此需要寻找一种新的动效实现方式，既能保留3D的动画效果，又能减小体积保证游戏的性能。3D动效导出的序列帧占用最多的是不断重复的每一帧画面像素，然而每一个画面都是这么些内容，只是每一帧之间有细微的区别。如果能把相同的像素内容整合起来，几十张的序列帧简化成一张图片，将3D的动画序列帧以2D资源的单张图片+关键帧来实现的话，就可以极大地减小体积。

DragonBones龙骨软件可以在2D资源的基础上，利用骨骼结合锚点变形的方式，在龙骨软件上重制2D动效，就可以模拟出3D的动画效果。（不要问为什么不用Spine，因为要钱TwT）正逢装扮中心玩法要上线，旧的格式每增加一个皮肤，就要再增加14M的体积，是完全无法实现的。

1）Ps拆解：带皮肤的也是一样的处理方式，C4D只需要渲染单张PNG图片，然后在Photoshop中对图片进行拆分，并把底层被挖掉的图片填补完整，避免动画过程中穿帮。

2）Ps导出龙骨格式：需要从龙骨软件里把插件安装到Photoshop去，在龙骨顶栏菜单帮助-PSD导出插件安装指引，按照指引安装好插件。然后在Photoshop顶栏菜单界面文件-脚本-导出到DragonBones，就可以在龙骨软件中打开了。所有图层的位置会跟Photoshop中的位置对齐。

3）在龙骨中制作动画：B站有且只有一个系列教程，自己学去吧~

4）输出龙骨格式的动画文件进行交付：其中贴图文件又可以放到TinyPNG进行一次压缩。

部分用户可能会遇到无法导出的情况，原因是龙骨软件的公司Egret白鹭科技在2022年6月初破产了，不再对龙骨软件提供服务和更新......解决方案是到https://nodejs.org/en官网下载一个nodejs软件安装上去，然后复制它新的这个node.exe，替换掉龙骨安装路径下的node文件就可以了。

3D动画效果和龙骨动画效果对比：

通过3D向2D资源的转化，把序列帧中重复出现的像素精简到一张贴图上，并以代码的形式运行动画，优化了接近30倍的体积。同时实现了模板化换肤的功能，减少设计制作和前端搭建的工作量，真正意义上实现了事半功倍。

3D动画效果和龙骨动画资源对比：

三、文件分层-组合倍增

为了进一步减少每个龙骨贴图中重复的道具，继续优化体积，于是重新对游戏的动画逻辑进行了梳理。将小鸡的动画进行拆解，分出道具层和小鸡层，通过把不同的道具与10个基础动作组合的形式，满足更多的应用场景。(新增了欢迎、激动、回家3个新动效，同时把喂饲料和喂金盆整合成了一个动效）

选择对应的一个基础动作，结合相应的道具进行表达，借此实现了应用场景动画的倍增

中层小鸡基础动作 + 前层道具 / 后层道具

总结

用2D资源的龙骨动画重新实现3D资源的C4D动画，优化了30倍的文件体积、减少了设计师和前端一半的工作量、实现了模板化的换肤功能，极大地提升了游戏性能的同时，还保障了优质的游戏体验。