Galacean 编辑器内置了对 Spine 动画的支持,无需额外下载或配置,开箱即用,大大简化了开发流程。本章节为大家介绍如何在 Galacean 编辑器中使用 Spine 动画。
编辑器版本依赖请参照:版本/性能章节
第一步,需要从 Spine 编辑器导出你的 Spine 动画素材,你可以在《Spine用户指南》 中找到完整的步骤, 说明如何:
下面展示了 spine 导出资产的一个简要流程:
Spine 菜单
>导出
,打开导出窗口这里建议勾选 2 的幂数
;预乘
和溢出
两项请勿勾选
完成打包设置后,点击确定
spineboy.skel 包含了 skeleton animation 数据,spineboy.atlas 包含了 texture atlas 信息,导出的图片可能有多张,每张图片都代表了 texture altas 中的一页
从 Spine 编辑器导出资产后,第二步就要将资产导入至 Galacean 编辑器了。打开编辑器后,将导出的文件直接拖入到资产面板中,即可完成上传
也可以点击资产面板的上传按钮进行上传:
上传完成后,在资产面板中能够看到上传的 spine 素材。
SpineSkeletonData 资产存储了 skeleton 数据,以及对生成的 SpineAtlas 资产的引用
点击资产后,能够在检查器中预览 Spine 动画,预览面板中能够切换皮肤
和动画片段
:
SpineAtlas 资产存储了texture atlas 文件,并包含了其对所需 Texture 资产的引用。 点击资产后,能够在检查器中查看其引用的 Texture 资产,以及 Spine 的图集信息
如若需要更新你的 Spine 资产。从 Spine 编辑器中重新导出资产,并再次导入到 Galacean 编辑器中覆盖原有文件即可。
完成资产上传后,第三步,需要将 Spine 动画添加至场景中。一共有三种方式:
拖入添加是最快捷的一种方式。点击 SpineSkeletonData 资产,按住后拖动到视图区,就能快速创建一个添加了 SpineAnimationRenderer 组件的实体,并指定资产为刚刚选中的 SpineSkeletonData 资产。
点击左上角的快速添加按钮,选择 2D Object
>SpineAnimationRenderer
,
添加完成后,能够看到一个新的实体,挂载了 SpineAnimationRenderer 组件;点击 Resource 属性,选择上传的 SpineSkeletonData 资产,就能看到 Spine 动画啦
手动添加的方式与快速添加类似,不过需要在节点树中手动创建一个新的实体,并通过检查器的 AddComponent 按钮添加 SpineAnimationRenderer 组件
添加了 SpineAnimationRenderer 组件后,同样需要指定组件的 Resource,也就是 SpineAnimationRenderer 组件要渲染的 SpineSkeletonData 资产。
以上三种添加 Spine 动画的方法实际上本质其实是相同的,都是通过给实体 添加 SpineAnimationRenderer 组件
,来让 Spine 动画添加至场景中的。
SpineAnimationRenderer 组件的配置如下:
通过 SpineAnimationRenderer 组件能够配置 Spine 动画的资产以及默认状态:
最终,完成场景编辑器后,可以参考项目导出流程,导出编辑器项目。