Laya Spine骨骼动画使用

准备工作

需要导入laya.spine.jsspine-core-X.X.js两个类库

资源文件都放在同一文件夹下

资源文件存放示例.png

PS:注意Laya.Spine相关的类是否存在,没有则需要替换LayaAir.d.ts

代码实现

//保存文件路径   
private aniPath:string = "../laya/assets/res/animation/spineboy-pma.skel";
private template :Laya.SpineTempletBinary;
private skeleton:Laya.SpineSkeleton;
//用于记录动画动作
private index: number = -1;

//创建新的动画模板
this.template = new Laya.SpineTempletBinary();
//加载动画文件
this.template.loadAni(this.aniPath);
//将动画文件在舞台上播放
this.template.on(Laya.Event.COMPLETE,this,()=>{
    this.skeleton = this.template.buildArmature();
    //在舞台上加入
    Laya.stage.addChild(this.skeleton);
    this.skeleton.pos(Laya.Browser.width/3,Laya.Browser.height/2 + 50);
    //动画大小缩放
    this.skeleton.scale(0.5,0.5);
    this.skeleton.on(Laya.Event.STOPPED, this, this.play)
    this.play();
});
private play(): void {
    console.log(`动作切换${this.index}`);
    //循环所有动作index并依次播放,getAnimNum()为得到动画的数量
    if(++this.index >= this.skeleton.getAnimNum()) {
        this.index = 0
    }
    this.skeleton.play(this.index, false);
}

PS:无法通过修改容器大小的方式修改其中动画大小,只能通过动画缩放

你可能感兴趣的:(Laya Spine骨骼动画使用)