CocosCreator中Spine动画的挂点层级问题

问题：

在CocosCreator中，spine挂点的层级总是在spine的上层，无法嵌入spine内部层级的，永远在spine的最上层。比如想要给角色添加一个翅膀（翅膀也是spine）,或者人物->人物+坐骑如何实现？

思考：

1.直接调整节点层级
2.挂点使用多相机渲染？
3.使用插槽？
4.多节点调整遮挡关系？
5.美术做成品（带翅膀或坐骑），在需要显示的时候显示？
6.动态修改spine sketondata控制部位显隐？

Answer

1.直接调整节点层级肯定不行

如图当角色有其他动作，比如攻击、跳起、受击等动作时，翅膀无法跟随角色。

2.挂点使用多相机渲染

最理想的就是通过挂点绑定，然后又可以把挂点适配到spine的显示层级中。
根据需要，先创建2个相机，设置渲染分组，一个相机先渲染翅膀，另一个后渲染角色，把翅膀绑定到角色挂点的目标节点上去。

这里就用默认的相机（default层）渲染角色，sp_layer0渲染翅膀

调整一下相机的渲染优先级，值越小越先渲染

调整一下相机的渲染掩码，让渲染翅膀的相机只渲染翅膀

调整翅膀节点的节点层级

调整下相机的帧缓冲，清除不需要的缓冲像素
后渲染的相机帧缓冲选择depth only

翅膀的挂点在角色的挂点数组中，设置角色的挂点，并把翅膀拖拽到角色挂点的目标节点上。

预览运行：

处理角色+翅膀可行，翅膀只需要在角色下面就行，处理多个遮挡就不太合适了，3个以上的相机处理起来就很麻烦了。

3.使用插槽

插槽一般用于动态修改图片信息，常用于动作相同的皮肤更换，不太适合想这种附带在角色身上的动作变化（有动作的翅膀/武器/坐骑等）。

4.多节点调整遮挡关系

前面绑定挂点都是一样的，但翅膀会在角色的上层，这时创建一个角色覆盖在上面。

可以看到翅膀在角色的下层了，而且会跟随角色动作。
但该方案只适用于部分场景，对于穿插在角色骨骼中的节点就无法适用，比如坐骑，可能角色的部分纹理显示在坐骑的下面，部分纹理显示在坐骑的上面。

5.美术做成品（带翅膀或坐骑），在需要显示的时候显示？

相对无脑，比较费“美术同事”，不考虑。

6.动态修改spine sketondata控制部位显隐

举个例子：

如图，我们通过修改代码，让左边的翅膀显示在角色的后面显示，右边的翅膀在角色的前面显示。

spine是由bone和slot的attachment（贴图）组成的。
按照方法4调整遮挡关系，如下

编写测试脚本：
通过骨骼名获取到翅膀对应的骨骼（和获取插槽一样）
通过修改bone的active属性来控制骨骼的显隐

import { _decorator, Component, MeshRenderer, Node, sp } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('TestSp')
export class TestSp extends Component {

    @property(sp.Skeleton)
    chibang0: sp.Skeleton = null;

    @property(sp.Skeleton)
    chibang1: sp.Skeleton = null;
    
    

    start() {
        this.setBonues();
    }
    /**
     * 让翅膀0左边的翅膀隐藏，翅膀1右边的翅膀隐藏
     */
    setBonues(){
        // 翅膀0左边的翅膀隐藏
        let bone0 = this.chibang0.findBone('zuocibang4');
        bone0.active = false;
        //翅膀1右边的翅膀隐藏
        let bone1 = this.chibang1.findBone('zuocibang3');
        bone1.active = false;
    }
}

把脚本挂到角色节点上，对应的属性引用
运行预览：

可以看到，角色左边的翅膀在上面，右边的翅膀在下面。
这样角色+坐骑的遮挡关系也可以同理实现。

总结：

以上方案6相对适用环境多，也可以避免多相机遮挡控制的局限性。以上实例最多处理2、3个骨骼的遮挡关系，如果需要处理更多、更复杂的骨骼，可以考虑封装一个sortBoneLayer的方法，原理是一样的，找到骨骼，显隐骨骼。处理量是相对的，如果超过10个以上就不要考虑了，拼UI都费劲。