[TIL] 学习骨骼动画

了解了下骨骼动画的场景和常见工具，走通 H5 中实现骨骼动画的能力。

成果 demo：

常用工具

• dragonbones 免费
• spine 收费
• blender+doatools 免费

综合我的场景和费用和易用性，选择 dragonbones 进一步了解

demo

要学习 Dragonbones 基本用法，建议直接看视频教程

https://www.bilibili.com/vide...

为了实现上面 gif demo 效果，我大概做了下面这些事：

1. 了解 Dragonbones 界面：https://docs.egret.com/dragon...
2. 了解骨骼动画基本概念：https://docs.egret.com/dragon...
3. 学习网格：https://docs.egret.com/dragon...
4. 学习蒙皮权重：https://docs.egret.com/dragon...
5. 查看部份视频教程：https://www.bilibili.com/vide...
6. 转到”骨骼装配“模式：https://docs.egret.com/dragon...
7. 导入图片

8. 为图片创建网格

   • 推荐用边线工具创建网格，非常方便
   • （可选）进一步细调

9. 创建骨架

   • （可选）进一步细调

10. 自动分配权重

    • （可选）手动细调
11. 转到“动画制作”模式

12. 制作动画

    • 推荐打开自动关键帧功能

    • （疑问）没有如文档中所说出现缩放骨骼的控制柄，只能通过底部输入框调整数值

      • 
13. 可以在浏览器中预览
14. 导出，并在 cocos creator 中使用