Spine

在编辑器中使用

Galacean 编辑器内置了对 Spine 动画的支持,无需额外下载或配置,开箱即用,大大简化了开发流程。本章节为大家介绍如何在 Galacean 编辑器中使用 Spine 动画。

编辑器版本依赖请参照:版本/性能章节

1. 从 Spine 编辑器导出资产

第一步,需要从 Spine 编辑器导出你的 Spine 动画素材,你可以在《Spine用户指南》 中找到完整的步骤, 说明如何:

  1. 导出 skeleton 和 animation 数据
  2. 导出包含 skeleton 图像的 texture atlases

下面展示了 spine 导出资产的一个简要流程:

  1. 完成动画制作后,单击 Spine 菜单>导出 ,打开导出窗口
Export panel in Spine editor
  1. 选择导出窗口左上角的二进制 ( 推荐使用二进制,以二进制格式而不是JSON格式导出,会使文件体积更小,加载更快
Export window in Spine editor
  1. 勾选上,纹理图集的打包复选框
Click packing texture atlas button in Export window
  1. 点击 打包设置

这里建议勾选 2 的幂数预乘溢出两项请勿勾选 完成打包设置后,点击确定 Texture pack window in Spine Editor

  1. 回到导出窗口,选择导出文件夹后,点击导出
Click export button in texture pack window
  1. 将会得到三个如下文件:
Spine assets in folder

spineboy.skel 包含了 skeleton animation 数据,spineboy.atlas 包含了 texture atlas 信息,导出的图片可能有多张,每张图片都代表了 texture altas 中的一页

2. 在 Galacean 编辑器中导入资产

从 Spine 编辑器导出资产后,第二步就要将资产导入至 Galacean 编辑器了。打开编辑器后,将导出的文件直接拖入到资产面板中,即可完成上传

Drag spine assets into Galacean editor

也可以点击资产面板的上传按钮进行上传:

Use upload button to upload spine assets

上传完成后,在资产面板中能够看到上传的 spine 素材。

SpineSkeletonData 资产

Spine skeleton data asset icon

SpineSkeletonData 资产存储了 skeleton 数据,以及对生成的 SpineAtlas 资产的引用 点击资产后,能够在检查器中预览 Spine 动画,预览面板中能够切换皮肤动画片段

Spine skeleton data preview

SpineAtlas 资产

Spine atlas asset

SpineAtlas 资产存储了texture atlas 文件,并包含了其对所需 Texture 资产的引用。 点击资产后,能够在检查器中查看其引用的 Texture 资产,以及 Spine 的图集信息

Spine atlas preview

资产更新

如若需要更新你的 Spine 资产。从 Spine 编辑器中重新导出资产,并再次导入到 Galacean 编辑器中覆盖原有文件即可。

3. 添加 Spine 动画

完成资产上传后,第三步,需要将 Spine 动画添加至场景中。一共有三种方式:

  1. 拖入添加

拖入添加是最快捷的一种方式。点击 SpineSkeletonData 资产,按住后拖动到视图区,就能快速创建一个添加了 SpineAnimationRenderer 组件的实体,并指定资产为刚刚选中的 SpineSkeletonData 资产。

Drag Spine skeleton data asset into viewport
  1. 快速添加

点击左上角的快速添加按钮,选择 2D Object>SpineAnimationRenderer

Quick add Spine animation renderer

添加完成后,能够看到一个新的实体,挂载了 SpineAnimationRenderer 组件;点击 Resource 属性,选择上传的 SpineSkeletonData 资产,就能看到 Spine 动画啦

Select spine skeleton data asset in component panel
  1. 手动添加

手动添加的方式与快速添加类似,不过需要在节点树中手动创建一个新的实体,并通过检查器的 AddComponent 按钮添加 SpineAnimationRenderer 组件

Use add component to add spine animation renderer

添加了 SpineAnimationRenderer 组件后,同样需要指定组件的 Resource,也就是 SpineAnimationRenderer 组件要渲染的 SpineSkeletonData 资产。

SpineAnimationRenderer 组件配置

以上三种添加 Spine 动画的方法实际上本质其实是相同的,都是通过给实体 添加 SpineAnimationRenderer 组件 ,来让 Spine 动画添加至场景中的。

SpineAnimationRenderer 组件的配置如下:

Spine animation renderer component config

通过 SpineAnimationRenderer 组件能够配置 Spine 动画的资产以及默认状态:

  • Resource:Spine 动画的资源 ( SpineSkeletonData 资产 )
  • Animation:默认播放的动画名称
  • Loop:默认播放的动画是否循环
  • Skin:默认的皮肤名称
  • Scale:默认的缩放系数
  • Priority:渲染优先级

4. 项目导出

最终,完成场景编辑器后,可以参考项目导出流程,导出编辑器项目。





下一章节:在代码中使用 Galacean Spine 运行时

这篇文档对您有帮助吗?