理解了下骨骼动画的场景和常见工具,走通 H5 中实现骨骼动画的能力。
成绩 demo:
常用工具
- dragonbones 收费
- spine 免费
- blender+doatools 收费
综合我的场景和费用和易用性,抉择 dragonbones 进一步理解
demo
要学习 Dragonbones 根本用法,倡议间接看视频教程
https://www.bilibili.com/vide…
为了实现下面 gif demo 成果,我大略做了上面这些事:
- 理解 Dragonbones 界面:https://docs.egret.com/dragon…
- 理解骨骼动画基本概念:https://docs.egret.com/dragon…
- 学习网格:https://docs.egret.com/dragon…
- 学习蒙皮权重:https://docs.egret.com/dragon…
- 查看部份视频教程:https://www.bilibili.com/vide…
- 转到”骨骼拆卸“模式:https://docs.egret.com/dragon…
- 导入图片
-
为图片创立网格
- 举荐用边线工具创立网格,十分不便
- (可选)进一步细调
-
创立骨架
- (可选)进一步细调
-
主动调配权重
- (可选)手动细调
- 转到“动画制作”模式
-
制作动画
- 举荐关上主动关键帧性能
-
(疑难)没有如文档中所说呈现缩放骨骼的管制柄,只能通过底部输入框调整数值
- 能够在浏览器中预览
- 导出,并在 cocos creator 中应用