• Spine 组件参考
    • Spine 属性
    • Spine 换装
    • Spine 顶点效果

    Spine 组件参考

    Spine 组件支持 Spine 导出的数据格式，并对骨骼动画（Spine）资源进行渲染和播放。

    spine

    选中节点，点击 属性检查器 下方的 添加组件 -> 渲染组件 -> Spine Skeleton 按钮，即可添加 Spine 组件到节点上。

    Spine 的脚本接口请参考 Skeleton API。

    Spine 属性

    属性功能说明
    Skeleton Data骨骼信息数据，拖拽 Spine 导出后的骨骼资源到该属性中
    Default Skin选择默认的皮肤
    Animation当前播放的动画名称
    Animation Cache Mode渲染模式，默认 REALTIME 模式。（v2.0.9 中新增）1. REALTIME 模式，实时运算，支持 Spine 所有的功能。2. SHARED_CACHE 模式，将骨骼动画及贴图数据进行缓存并共享，相当于预烘焙骨骼动画。拥有较高性能，但不支持动作融合、动作叠加，只支持动作开始和结束事件。至于内存方面，当创建 N(N>=3) 个相同骨骼、相同动作的动画时，会呈现内存优势。N 值越大，优势越明显。综上 SHARED_CACHE 模式适用于场景动画，特效，副本怪物，NPC 等，能极大提高帧率和降低内存。3. PRIVATE_CACHE 模式，与 SHARED_CACHE 类似，但不共享动画及贴图数据，所以在内存方面没有优势，仅存在性能优势。当想利用缓存模式的高性能，但又存在换装的需求，因此不能共享贴图数据时，那么 PRIVATE_CACHE 就适合你。
    Loop是否循环播放当前动画
    Premultiplied Alpha图片是否启用贴图预乘，默认为 True。当图片的透明区域出现色块时需要关闭该项，当图片的半透明区域颜色变黑时需要启用该项。
    Time Scale当前骨骼中所有动画的时间缩放率
    Debug Slots是否显示 slot 的 debug 信息
    Debug Bones是否显示骨骼的 debug 信息
    Debug Mesh是否显示 mesh 的 debug 信息
    Use Tint是否开启染色效果，默认关闭。（v2.0.9 中新增）
    Enable Batch是否开启动画合批，默认关闭。（v2.0.9 中新增）开启时，能减少 Drawcall，适用于大量且简单动画同时播放的情况。关闭时，Drawcall 会上升，但能减少 CPU 的运算负担，适用于复杂的动画。

    注意：当使用 Spine 组件时，属性检查器 中 Node 组件上的 Anchor 与 Size 属性是无效的。

    Spine 换装

    下面通过一个范例介绍 Spine 如何换装。我们将会通过替换插槽的 attachment 对象，将绿色框中的手臂替换为红色框中的手臂。

    spine-cloth

    • 首先在 层级管理器 中新建一个空节点，重命名为 goblingirl。在 属性检查器 中添加 Spine 组件，并将资源拖拽至 Spine 组件的 Skeleton Data 属性框中，然后将 Default Skin 属性设置成红色框中用于替换的皮肤。可更改 Spine 组件的 Animation 属性用于设置开发者想要播放的动画。

    spine-cloth

    • 再次新建一个空节点并重命名为 goblin，添加 Spine 组件，并将资源拖拽至 Spine 组件的 Skeleton Data 属性框中。然后将 Default Skin 属性设置成绿色框中想要替换的皮肤，如下图所示：

    spine-cloth

    • 在 资源管理器 中新建一个 JavaScript 脚本，编写组件脚本。脚本代码如下：
    1.  cc.Class({
    2.      extends: cc.Component,
    4.      properties: {
    5.          goblin: {
    6.              type: sp.Skeleton,
    7.              default: null,
    8.          },
    9.          goblingirl: {
    10.              type: sp.Skeleton,
    11.              default: null,
    12.          }
    13.      },
    15.      start () {
    16.          let parts = ["left-arm", "left-hand", "left-shoulder"];
    17.          for (let i = 0; i < parts.length; i++) {
    18.              let goblin = this.goblin.findSlot(parts[i]);
    19.              let goblingirl = this.goblingirl.findSlot(parts[i]);
    20.              let attachment = goblingirl.getAttachment();
    21.              goblin.setAttachment(attachment);
    22.          }
    23.      }
    24.  });
    • 然后将脚本组件挂载到 Canvas 节点或者其他节点上，即将脚本拖拽到节点的 属性检查器 中。再将 层级管理器 中的 goblingirl 节点和 goblin 节点分别拖拽到脚本组件对应的属性框中，并保存场景。

    spine-cloth

    • 点击编辑器上方的预览按钮，可以看到绿色框中的手臂已经被替换。

    spine-cloth

    Spine 顶点效果

    顶点效果只有当 Spine 处于 REALTIME 模式时有效，下面通过一个范例介绍 Spine 如何设置顶点效果。

    • 首先在 层级管理器 中新建一个空节点并重命名。然后在 属性检查器 中添加 Spine 组件，并将资源拖拽至 Spine 组件的 Skeleton Data 属性框中，设置好 Spine 组件属性。

    • 在 资源管理器 中新建一个 JavaScript 脚本，编写组件脚本。脚本代码如下：

    1.  cc.Class({
    2.      extends: cc.Component,
    4.      properties: {
    5.          skeleton : {
    6.              type: sp.Skeleton,
    7.              default: null,
    8.          }
    9.      },
    11.      start () {
    12.          this._jitterEffect = new sp.VertexEffectDelegate();
    13.          // 设置好抖动参数。
    14.          this._jitterEffect.initJitter(20, 20);
    15.          // 调用 Spine 组件的 setVertexEffectDelegate 方法设置效果。
    16.          this.skeleton.setVertexEffectDelegate(this._jitterEffect);
    17.      }
    18.  });

    • 然后将脚本组件挂载到 Canvas 节点或者其他节点上，即将脚本拖拽到节点的 属性检查器 中。再将 层级管理器 中的节点拖拽到脚本组件对应的属性框中，并保存场景。

    • 点击编辑器上方的预览按钮，即可看到 Spine 动画的顶点抖动的效果。关于代码可参考 SpineMesh 范例。