Layaair DragonBones 龙骨动画的播放

时间：2024-04-14 09:35:25

                                    Layaair  DragonBones 龙骨动画的播放

本文要点：

  1. 龙骨动画的导入
  2. 龙骨动画的播放控制
  3. 龙骨动画的事件机制

官方文档入口

本节大概效果

Layaair DragonBones 龙骨动画的播放

龙骨动画的导入:

Layair 导入龙骨动画：

Layaair DragonBones 龙骨动画的播放                 Layaair DragonBones 龙骨动画的播放

一般导入到 Bin 目录的 Src目录里面，在这里 我创建了一个hero的目录

 

龙骨动画的加载和播放控制

这是一个 循环播放动画的例子

//这是一个 循环播放动画的例子

let templetStone: Laya.Templet = new Laya.Templet();
templetStone.on(Laya.Event.COMPLETE, this, () => {
    //创建第一个动画
    var skeleton: Laya.Skeleton;
    //从动画模板创建动画播放对象
    skeleton = templetStone.buildArmature(0);
    skeleton.pos(128, 665);
    //切换动画皮肤 使用标号为0的皮肤
    skeleton.showSkinByIndex(0);
    //播放
    skeleton.play(0, true);
    this.addChild(skeleton);
});
templetStone.loadAni("res/anima/stone/钱袋动画.sk");

这是一个 有两段 动画的例子， 主角的 空闲时动画 和 一个触发动画

//Hero动画
this.templetHero = new Laya.Templet();
this.templetHero.on(Laya.Event.COMPLETE, this, () => {
    //创建第一个动画
    // var skeleton: Laya.Skeleton;
    // //从动画模板创建动画播放对象
    this.skeletonHero = this.templetHero.buildArmature(0);
    this.skeletonHero.pos(350, 620);
    //切换动画皮肤 使用标号为0的皮肤
    this.skeletonHero.showSkinByIndex(0);
    //播放
    //this.skeletonHero.play(1, true);
    //动画事件
    this.skeletonHero.on(Laya.Event.LABEL, this, (event) => {
        let tEventData: Laya.EventData = event as Laya.EventData;
        if (tEventData.time > 100) {
            //console.log("动画事件 触发:", tEventData)
            Laya.SoundManager.playSound("res/sound/miming.mp3");//播放挖坑声音
        }
    });


    this.skeletonHero.on(Laya.Event.STOPPED, this, () => {
        this.isDigging = false
        this.ainPlayIdle()
        // console.log("Laya.Event.STOPPED this.isDigging :", this.isDigging)
    });
    this.ainPlayIdle()

    this.addChild(this.skeletonHero);


});
this.templetHero.loadAni("res/anima/hero/矿工once.sk");

这个是 播放 第一段 空闲动画 和 播放 触发动画

// 空闲动画
private ainPlayIdle() {
    this.skeletonHero.play(1, true);
}
//触发动画
private ainPlayDig() {
    // if (!this.isDigging) {
    //     this.isDigging = true
    this.skeletonHero.play(0, false);
    // }
}

龙骨动画的事件机制

在动画播放的时候 我们还可以 触发事件，比方说 我的触发动画里有一个 挖矿的动作。我需要在 锄头碰到石头的时候 播放一个音效。

在龙骨动画制作的时候添加一个事件

Layaair DragonBones 龙骨动画的播放

这样一来 在播放动画的时候 就可以触发一个事件

layaair  是通过 Laya.Event.LABEL 来接收事件的

//动画事件
this.skeletonHero.on(Laya.Event.LABEL, this, (event) => {
    let tEventData: Laya.EventData = event as Laya.EventData;
    if (tEventData.time > 100) {
        //console.log("动画事件 触发:", tEventData)
        Laya.SoundManager.playSound("res/sound/miming.mp3");//播放挖坑声音
    }
});

有里有另外一个知识点

循环播放

当skeleton.play(0,true)第二个参数为true时，每播放完一遍龙骨动画，会自动触发Event.COMPLET事件
skeleton.player.on(Event.COMPLETE,this,onComplete);

播放一次
当skeleton.play(0,false)第二个参数为false时，当前动画播放完成后，会自动触发Event.STOPED事件，而不是Event.COMPLETE事件
skeleton.on(Event.STOPPED, this, completeHandler);


 

相关文章