json动画_spine骨骼动画基础一文通

如果你看到这篇文章,请不要看下去了,因为我要给你推荐另一款骨骼软件DragonBones
因为:1. DragonBones是开源的项目,
2. DragonBones操作方便性很好
3. DragonBones也兼容所有主流平台 及主流引擎
4. 官方教程制作精良,便于入门
5. 一键导入PSD等功能,真的非常棒
6. 网格 碰撞 权重蒙皮 骨骼约束 斜切 序列帧 等 spine PRO才有的功能全都有,免费!
7. 即使还要用spine 学会DragonBones之后spine基本也会了

DragonBones 官方网站​dragonbones.com

一 界面介绍

二 快捷键

• 左键点下拖动 : 框选
• 右键点下拖动 : 拖动画布
• 滚轮 : 放大缩小
• ctrl+F : 缩小
• ctrl + shift +F : 放大
• ESC : 取消选择
• 双击空白区域: 取消选择
• N : 创建骨骼

三 PS素材导入

切好图(分好图层)的素材才可以导入

1.安装插件:LayersToPNG.jsx

① 下载LayersToPNG.jsx

http://dh70.top/tools/LayersToPNG.jsx​dh70.top

② 将下载好的LayersToPNG.jsx拷贝到:

PS安装目录PresetsScripts 下

2 PS中 的素材要切好图 以我的一副灵魂画作为例: 每个将来要动的部位要分一个图层

3 调用脚本转化

注意千万不要用空图层,会转换失败

转换完成后在PSD文件目录下生产一个 image 文件夹 内含个分层PNG 和一个JSON配置文件

可能是脚本版本的原因 我的JSON文件在images文件夹里 后续有问题 往下进行

4. 在spine里导入数据

导入数据

选择json文件,并给数据命名

如果出现下述错误(老版会出现)

那是因为images文件夹导入有误,请手动导入一下:

在最下面自己选路径导入

导入成功

四 创建骨骼 //绘制父子关系骨骼树

1.按N开始绘制,

2. 选中骨骼原点

3. 鼠标左键单击创建新的子骨骼原点

4. 选中新的原点 , ctrl+左键点击要与骨骼联动的图片选中它,松开ctrl

5. 找好轴点,绘制骨骼

6. 绘制骨骼的子骨骼 //ctrl点选图片 后画出骨骼

7. 绘制其他骨骼 //点选父节点 ctrl点选图片 后画出骨骼

五. 制作帧动画

制作帧动画系统和其他类Flash动画原理基本一致 插入关键帧 再自动补帧 也可以调整线性

经过半小时的努力,制作了一只丑陋的灵魂鹿 //哈哈哈哈哈