骨骼动画实践

1. ⻣骨骼动画实践李李振⽂文(Viktorli) 腾讯

2. • ⻣骨骼动画介绍 • 宠物项⽬目实践技术点 • 遇到的问题点及解决⽅方案 • 性能优化

3. 帧动画⻣骨骼动画

4. ⻣骨骼动画 • 资源体积更更⼩小 • 多⻆角⾊色可共⽤用⼀一套动作数据 • 动作可以⾃自由组合 • 动画更更逼真 • 对处理理器器的性能要求更更⾼高

5.

6.

7.

8. ⻣骨架躯⼲干左臂插槽右臂脖⼦子左腿左⼤大腿左⼩小腿右腿右⼩小腿右⼤大腿

9.

10.

11.

12. 付费免费，国产！运⾏行行库众多运⾏行行库较少功能更更多功能相对少，但作者不不断完善中普及程度⾼高，可选的设计公司更更多可以与作者直接交流提需求！

13. SPINE基础库 PIXI Three.js 性能 60FPS 体积 API/⽂文档 ✅ 293KB+63. ⭐⭐⭐⭐ 9KB ✅ 499KB+70 KB ⭐⭐⭐ Cocos2d- html5 PlayCanvas 60FPS ✅ 510KB+50. 7KB ⭐ 活跃度总结 ✅ 轻量量活跃度及API都不不错与SPINE团队合作较紧密 ✅ ⽀支持3d，库偏⼤大项⽬目仅需要2d ❌ 60FPS webgl 太旧，⽆无⼈人维护状态 ❌ 封装得很易易⽤用 API太少⽂文档和示例例缺失

14.

15. 技术实现：实时换装

16. 技术实现：实时换装

17. 技术实现：实时换装

18. 技术实现：分享GIF

19. 技术实现：分享GIF

20. 技术实现：分享GIF

21. 技术实现：分享GIF

22. 问题：展示错乱

23. 问题：展示错乱

24. 问题：蒙⽪皮类动画闪烁

25. 问题：mesh类动画闪烁

26. 问题：mesh类动画闪烁

27. ⼩小结 • 熟读源码 • 与作者交流

28. 性能调优 40% CPU 67% GPU 内存增量量 100M

29. 耗电发热卡顿崩溃

30.

31. 性能调优：CPU/GPU占⽤用 • 减少每⼀一帧运动的⻣骨骼及⽹网格数量量 • 将待机动作（idle）改成隔⼏几秒动⼀一次 • APP切换到后台时停⽌止动画

32. 性能调优：CPU/GPU占⽤用 12.8% CPU 40% 34% GPU 67% 优化后优化前

33. 性能调优：减少内存占⽤用单倍图 37.2M 双倍图 38.2M 精简的动作数据 14M 完整的动作数据 49M

34. 性能调优：减少内存占⽤用 • 暴暴露露私有接⼝口spineJsonParser

35. 性能调优：减少内存占⽤用⽂文件⼤大⼩小精简动作数据(4个) 201KB 完整动作数据(70个) 3.5MB

36. 性能调优：减少内存占⽤用 49M 18M

37. 性能调优：切换好友内存泄漏漏 1,100,000 825,000 550,000 275,000 0 时间

38. 性能调优：切换好友内存泄漏漏

39. 性能调优：切换好友内存泄漏漏

40. 性能调优：切换好友内存泄漏漏

41. 性能调优：切换好友内存泄漏漏切换12个好友 JS内存增⻓长 GPU内存增⻓长 18M 90M

42. 性能调优：切换好友内存泄漏漏同⼀一种宠物模型对象复⽤用，切换好友宠物就相当于换装 JS内存增量量优化优化后优化前 5M 18M

43. 性能调优：切换好友内存泄漏漏换装纹理理复⽤用主动释放不不再使⽤用的纹理理 GPU内存增量量优化优化后优化前 30M 90M

44. 性能调优：切换好友内存泄漏漏从排⾏行行榜切换回来之后，销毁好友的宠物数据，回收内存

45. 回顾 • ⻣骨骼动画基础知识点 • 编辑器器选择、开发引擎的选择 • 技术实现：实时换装、GIF截图 • 问题点：素材错位、蒙⽪皮类动画闪烁 • 性能优化：CPU/GPU/内存的优化

46. 总结 • 减少待机动画频率，降低CPU/GPU压⼒力力 • 动作及素材⽂文件做成按需加载，减少内存占⽤用，也能提⾼高访问速度 • 模型/纹理理尽可能地复⽤用，减少内存占⽤用 • 使⽤用临时⽅方案或者规范来解决紧急问题，但需要深究最佳⽅方案，避免背负技术债 • 阅读源码、与原作者交流能帮助我们选择更更好的⽅方案解决问题 • 发布标准的制定，使⽤用参照物对⽐比

47. 谢谢

48. 邮箱：viktorli@qq.com 欢迎索要PPT/示例例、推荐简历