LayaAir之骨骼動(dòng)畫(huà)(基礎(chǔ))

LayaAir可以是用DragonBone和Spine生成的骨骼動(dòng)畫(huà)文件,但是需要將他們的動(dòng)畫(huà)文件進(jìn)行轉(zhuǎn)化,轉(zhuǎn)化后的文件才能夠被LayaAir識(shí)別.而無(wú)論是DragonBone還是Spine都不是LayaAir官方工具,轉(zhuǎn)化的安全和兼容性有些問(wèn)題,這是一個(gè)坑.
到目前為止此轉(zhuǎn)化有2個(gè)問(wèn)題:
①對(duì)版本的支持 , 存在遲滯性
②只支持圖集模式
無(wú)論怎么樣 , 總算是部分支持 . 現(xiàn)在先以DragonBone為例講解骨骼動(dòng)畫(huà).
Ⅰ, DragonBone骨骼動(dòng)畫(huà) , 以Rooster_Ani為例:

一 : 開(kāi)始導(dǎo)出DragonBone骨骼動(dòng)畫(huà)文件:

①,導(dǎo)出DB文件 , 由于我的LayaAir , DB轉(zhuǎn)換工具支持DB版本范圍是 4.5~5.1.0 , 所以:

②,DB導(dǎo)出的骨骼文件有三個(gè) : ske 骨骼文件 , tex.json 紋理文件 , tex.png 紋理圖片

二:使用LayaAir轉(zhuǎn)換DragonBone骨骼動(dòng)畫(huà)格式

①,打開(kāi)龍骨導(dǎo)出工具 , 進(jìn)行導(dǎo)出(注意,源文件:DragonBone文件夾上;LayaAir轉(zhuǎn)換的文件夾下)

②,將導(dǎo)出的文件(2個(gè)),導(dǎo)入到項(xiàng)目中,注意放在bin中:

三:代碼

①,基本核心
private rooster_dragonbone : Laya.Skeleton = null;

        //顯示DragonBone骨骼動(dòng)畫(huà)
        this.initDragonAni( true , "rooster_eat_anim");
     /**
     * 初始化DragonBone骨骼動(dòng)畫(huà)
     * @param {boolean} $autoPlay 是否自動(dòng)播放
     * @param {string} $name 動(dòng)畫(huà)的名稱(chēng)
     */
    private initDragonAni( $autoPlay : boolean ,  $name : string ) : void{
        this.rooster_dragonbone = new Laya.Skeleton();
        Laya.stage.addChild( this.rooster_dragonbone );
        this.rooster_dragonbone.pos( 410 , 600 );
        this.rooster_dragonbone.load("dragonbone/rooster/Rooster_Ani.sk" , Laya.Handler.create( this, () : void => {
            this.mouse2DragonBone( true );
            if(!$autoPlay || !$name){
                this.rooster_dragonbone.stop();
            }else{
                this.showDragonAni( $name );
            }
        } ));
    }

    private mouse2DragonBone( $isAdd : boolean ) : void {
        if( this.rooster_dragonbone ){
            console.log("ccccccc");
            if($isAdd){
                let $event : Laya.Event = new Laya.Event();
                $event.type = Laya.Event.COMPLETE;
                this.rooster_dragonbone.player.on( Laya.Event.COMPLETE , this , this.onDragonBoneHandler , [$event]);
            }else{
                this.rooster_dragonbone.player.off( Laya.Event.COMPLETE , this , this.onDragonBoneHandler  );
            }
        }
    }

        private onDragonBoneHandler( $e : Laya.Event ) : void{
        console.log("ok");
        switch($e.type){
            case Laya.Event.COMPLETE:
            console.log(`DragonBone 動(dòng)畫(huà)播放完畢!!!`);
            break;
        }
    }

    private showDragonAni( $name : string ) : void{
        if( this.rooster_dragonbone && $name){
            this.rooster_dragonbone.play( $name , true );
        }
    }

注意:
1,骨骼動(dòng)畫(huà)一定要循環(huán)播放才會(huì)觸發(fā)Complete事件.有點(diǎn)坑......
2,如果不調(diào)用this.rooster_dragonbone.stop();則播放默認(rèn)動(dòng)作:

結(jié)果:

②,擴(kuò)展鼠標(biāo)事件
在LayaAir中為2D骨骼動(dòng)畫(huà)加mouse響應(yīng)是復(fù)雜的.下邊慢慢介紹:
a,尋找響應(yīng)區(qū)域:

        this.rooster_dragonbone.load("dragonbone/rooster/Rooster_Ani.sk" , Laya.Handler.create( this, () : void => {
            let bound : Laya.Rectangle = this.rooster_dragonbone.getBounds(); // 加載完畢之后才能拿到有效的bounds
            let W = bound.width, H = bound.height;
            this.rooster_dragonbone.width = W;   // 若不設(shè)置的話, this.rooster_dragonbone.width與node.height均為0
            this.rooster_dragonbone.height = H;
            this.rooster_dragonbone.graphics.drawRect(0, 0, bound.width, bound.height, "#ff00ee");
            this.mouse2DragonBone( true );
            if(!$autoPlay || !$name){
                this.rooster_dragonbone.stop();
            }else{
                this.showDragonAni( $name );
            }
        } ));

注意:讓動(dòng)畫(huà)停止,方可獲取Laya.Rectangle,運(yùn)行結(jié)果如下:

這個(gè)和DragonBone的關(guān)系對(duì)應(yīng)(右下區(qū)域塊):

b,解決方案
因?yàn)椴豢赡苷{(diào)整骨骼動(dòng)畫(huà)的Laya.Rectangle , 所以需要為骨骼動(dòng)畫(huà)套一層(父層),用父層來(lái)承擔(dān)響應(yīng).
private rooster_father_dragonbone : Laya.Sprite = null;
//顯示DragonBone骨骼動(dòng)畫(huà)
this.initDragonAni( true , "rooster_eat_anim");

    /**
     * 初始化DragonBone骨骼動(dòng)畫(huà)
     * @param {boolean} $autoPlay 是否自動(dòng)播放
     * @param {string} $name 動(dòng)畫(huà)的名稱(chēng)
     */
    private initDragonAni( $autoPlay : boolean ,  $name : string ) : void{
        this.rooster_father_dragonbone = new Laya.Sprite();
        this.rooster_father_dragonbone.mouseEnabled = this.rooster_father_dragonbone.mouseThrough = true;
        this.rooster_dragonbone = new Laya.Skeleton();
        this.rooster_father_dragonbone.addChild( this.rooster_dragonbone );
        Laya.stage.addChild( this.rooster_father_dragonbone );
        this.rooster_father_dragonbone.pos( 100 , 600 );
        this.rooster_dragonbone.load("dragonbone/rooster/Rooster_Ani.sk" , Laya.Handler.create( this, () : void => {
            let bound : Laya.Rectangle = this.rooster_dragonbone.getBounds(); // 加載完畢之后才能拿到有效的bounds
            let W = bound.width, H = bound.height;
            this.rooster_dragonbone.width = W;   // 若不設(shè)置的話, this.rooster_dragonbone.width與node.height均為0
            this.rooster_dragonbone.height = H;
            this.rooster_dragonbone.pos(W/2, H/2); // 骨骼節(jié)點(diǎn)偏移(W/2,H/2),使動(dòng)畫(huà)區(qū)域的左上角與proxy節(jié)點(diǎn)的位置(左上角)重合
            this.rooster_father_dragonbone.width = W;
            this.rooster_father_dragonbone.height = H;
            this.rooster_father_dragonbone.graphics.drawRect(0, 0, bound.width, bound.height, "#ff00ee");
            this.mouse2DragonBone( true );
            if(!$autoPlay || !$name){
                this.rooster_dragonbone.stop();
            }else{
                this.showDragonAni( $name );
            }
        } ));
    }

    private mouse2DragonBone( $isAdd : boolean ) : void {
        if( this.rooster_dragonbone ){
            console.log("ccccccc");
            if($isAdd){
                let $event : Laya.Event = new Laya.Event();
                $event.type = Laya.Event.COMPLETE;
                this.rooster_dragonbone.player.on( Laya.Event.COMPLETE , this , this.onDragonBoneHandler , [$event]);
                $event = new Laya.Event();
                $event.type = Laya.Event.MOUSE_DOWN;
                this.rooster_father_dragonbone.on( Laya.Event.MOUSE_DOWN , this , this.onDragonBoneHandler , [$event] );
            }else{
                this.rooster_dragonbone.player.off( Laya.Event.COMPLETE , this , this.onDragonBoneHandler  );
                this.rooster_father_dragonbone.off( Laya.Event.MOUSE_DOWN , this , this.onDragonBoneHandler  );
            }
        }
    }

    private onDragonBoneHandler( $e : Laya.Event ) : void{
        console.log("ok");
        switch($e.type){
            case Laya.Event.COMPLETE:
            console.log(`DragonBone 動(dòng)畫(huà)播放完畢!!!`);
            break;
            case Laya.Event.MOUSE_DOWN:
            console.log(`DragonBone 動(dòng)畫(huà)被單擊`);
            break;
        }
    }

    private showDragonAni( $name : string ) : void{
        if( this.rooster_dragonbone && $name){
            this.rooster_dragonbone.play( $name , true );
        }
    }

顯示:

控制臺(tái)打印: