Cocos实例5：动态加载Spine动画以及挂点的生成案例

动态加载Spine动画以及挂点的生成案例

动态加载Spine动画

• 把资源放在resources目录下
  
• 编写脚本

@ccclass('LoadSpine')
export class LoadSpine extends Component {
    start() {
        resources.loadDir("raptor/raptor-pro",sp.SkeletonData,(err,data)=>{
            if(err){
                console.log(err);
                return;
            }else{
                let comp = this.node.getComponent(sp.Skeleton);
                comp.skeletonData = data[0];
                comp.setAnimation(0,"walk",true);
            }
        })
    }

    update(deltaTime: number) {
        
    }
}

• 运行
  

创建挂点

在实际情况中，经常会遇到需要在骨骼动画的某个部位上挂载一个节点，让节点跟随骨骼动画一起运动而且不至于显得生硬。这种情况就可以通过绑定挂点的方式来解决。
实现 Spine 挂点有两种方式：1.通过编辑器可视化编辑；2.通过脚本生成。

• 编辑器实现
  1. 先创建好要挂载的spine节点
  2. 在spine节点下创建一个空节点命名为targetNode,在targetNode下创建要挂载的节点（这里创建一个SpriteFrame）。
     
  3. 选中 Spine 节点，在 属性检查器 中将 Skeleton 组件的 Sockets 属性设置为 1(Sockets 属性是当前spine组件需要维护的挂点数组，如果需要把自定义的节点挂载到骨骼上，就必须先设置该属性)。这里只挂载一个节点，所以设置为1即可。
     
  4. 当设置了挂点数组长度后，会发现每个元素都有一个“path”和“target”属性。Path 是一个列表，列表中会列出动画所有的骨骼，选择该挂点想要挂载的目标骨骼，这里选择尾巴为目标骨骼。然后把层级管理器中创建的targetNode 节点拖拽到 Target 属性框中。在场景编辑器 中就看到星星挂在了龙动画的尾巴上。
     
     这里为什么不直接把要挂载的SpriteFrame节点作为目标节点，而是另外创建了一个空节点作为要挂载的SpriteFrame的父节点绑定到骨骼上呢？
     实际上挂点的绑定是相对动画的骨骼而言的，那么相对UI节点的位置/旋转/缩放都会无效。详情可参阅：CocosCtreator知识点5:2D渲染组件Spine Skeleton详解
     所以新建的targetNode节点相当于一个缓冲节点。
  5. 保存&&预览
     
     可以看到星星会跟随尾巴一起甩动，看起来星星本身就像是骨骼的一部分一样。
• 脚本实现
  1. 步骤1、2和在编辑器中实现是一样的。
  2. 编写脚本

@ccclass('SpineAttach')
export class SpineAttach extends Component {
    @property(sp.Skeleton)
    dragon: sp.Skeleton = null;
    @property(Node)
    attachNode: Node = null;
    onLoad() {
        
    }
    start() {
        let new_soket = new sp.Skeleton.SpineSocket("root/hip/tail1/tail2/tail3/tail4/tail5/tail6/tail7/tail8/tail9/tail10",this.attachNode);
        this.dragon.sockets!.push(new_soket);
        this.dragon.sockets! = this.dragon.sockets!;
    }

    update(deltaTime: number) {
        
    }
}

代码中的SpineSocket有两个参数对应骨骼路径和目标节点。
为什么在push(new_soket);之后还要 this.dragon.sockets! = this.dragon.socket。
通过代码添加socket，也就是this.dragon.sockets!.push(new_soket);
如果到这里保存运行会发现挂点没有生效。
这是因为当直接修改数组元素时，引擎可能不会认为这是一个属性变更，不会触发组件的属性更新。this.skeleton!.sockets = this.skeleton!.sockets; 这样的赋值操作，实际上是强制重新赋值整个数组，告诉引擎数组内容发生了变化，引擎会刷新相关视图，使添加的socket生效。