骨骼动画实践
2020-02-23 393浏览
- 1. ⻣骨骼动画实践 李李振⽂文(Viktorli) 腾讯
- 2.• 骨骼动画介绍 • 宠物项目实践技术点 • 遇到的问题点及解决方案 • 性能优化
- 3.帧动画 骨骼动画
- 4.骨骼动画 • 资源体积更小 • 多角色可共用一套动作数据 • 动作可以自由组合 • 动画更逼真 • 对处理器的性能要求更高
- 5.
- 6.
- 7.
- 8.骨架 躯干 左臂 插槽 右臂 脖子 左腿 左大腿 左小腿 右腿 右小腿 右大腿 盆骨 腰带 裤衩
- 9.
- 10.
- 11.
- 12.付费 免费，国产！ 运行库众多 运行库较少 功能更多 功能相对少，但作者不断完善中 普及程度高，可选的设计公司更多 可以与作者直接交流提需求！
- 13.SPINE基础库 PIXI Three.js 性能 60FPS 60FPS webgl ✅ ✅ 体积 API/文档 293KB+63.9 ✅✅ ✅ ✅ ✅ ✅ KB 499KB+70KB ✅✅ ✅✅✅ Cocos2dhtml5 PlayCanvas 60FPS ✅ 510KB+50.7 KB ✅✅ 活跃度 总结 ✅ 轻量 活跃度及API都不错 与SPINE团队合作较紧密 ✅ 支持3d，库偏大 项目仅 需要2d ✅ 太旧，无人维护状态 ✅ 封装得很易用 API太少 文档和示例缺失
- 14.
- 15.技术实现：实时换装
- 16.技术实现：实时换装
- 17.技术实现：实时换装
- 18.技术实现：分享GIF
- 19.技术实现：分享GIF
- 20.技术实现：分享GIF
- 21.技术实现：分享GIF
- 22.问题：展示错乱
- 23.问题：展示错乱
- 24.问题：蒙皮类动画闪烁
- 25.问题：mesh类动画闪烁
- 26.问题：mesh类动画闪烁
- 27.小结 • 熟读源码 • 与作者交流
- 28.性能调优 CPU 40% GPU 内存增 量 67% 100M
- 29.耗电 发热 卡顿 崩溃
- 30.
- 31.性能调优：CPU/GPU占用 • 减少每一帧运动的骨骼及网格数量 • 将待机动作（idle）改成隔几秒动一次 • APP切换到后台时停止动画
- 32.性能调优：CPU/GPU占用 13% CPU 40% 34% GPU 67% 优化后 优化前
- 33.性能调优：减少内存占用 图片 单倍图 37M 双倍图 38M 精简的动作数据 14M 完整的动作数据 49M
- 34.性能调优：减少内存占用 • 暴露私有接口spineJsonParser
- 35.性能调优：减少内存占用 文件大小 精简动作数据(4个) 201KB 完整动作数据(70个) 3.5MB
- 36.性能调优：减少内存占用 49M 18M
- 37.性能调优：切换好友内存泄漏 1,375,000 内存值(KB) 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/示例、推荐简历
