Skeletal animation of Layaair (Basic)

Layaair can be skeletal animation files created with Dragonbone and spine, but they need to be converted and converted to be layaair recognized. And neither dragonbone nor spine is the official tool of Layaair, Conversion of security and compatibility there are some problems, this is a pit.
There are 2 problems with this conversion so far:
① support for version, hysteresis
② only supported in Atlas mode
Anyway, it's part of the support. Now let's take dragonbone as an example to explain skeletal animation.
Ⅰ, Dragonbone skeletal animation, take Rooster_ani as an example:

One: Start exporting the dragonbone skeleton animation file:
①, export DB file, because of my layaair, DB Conversion Tool support DB version range is 4.5~5.1.0, so:

②,DB exported skeleton file has three: Ske skeleton file, Tex.json texture file, tex.png texture picture

Two: Use Layaair to convert dragonbone skeletal animation format
①, open the keel Export tool to export (note that the source file: Dragonbone folder; Layaair converted folder)

②, import the exported files (2) into the project and note them in the bin:

Three: Code
①, Basic core
Private Rooster_dragonbone:Laya.Skeleton = null;

        Show Dragonbone skeletal animation This.initdragonani (true, "Rooster_eat_anim"); /** * Initialize Dragonbone skeletal animation * @param {Boolean} $autoPlay whether to play automatically * @param {string} $name the name of the animation */Private in        Itdragonani ($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 ("C            CCCCCC ");                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 animation has finished playing!!!            `);        Break            }} Private Showdragonani ($name: string): void{if (this.rooster_dragonbone && $name) {        This.rooster_dragonbone.play ($name, true); }    }

Attention:
1, skeletal animation must be looped to trigger the complete event. A bit of a pit ...
2, if This.rooster_dragonbone.stop () is not called, the default action is played:

Results:

②, extending mouse events
Adding mouse responses to 2D skeletal animations in Layaair is complex. The following slowly introduces:
A, look for the response area:

        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;   // 若不设置的话, 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 );            }        } ));

Note: To let the animation stop, you can get laya.rectangle, the result is as follows:

This corresponds to the dragonbone relationship (lower right area block):

B, Solution
because it is not possible to adjust the laya.rectangle of a skeletal animation, you need to animate the skeleton (parent layer) and use the parent layer to assume the response.
Private rooster_father_dragonbone:Laya.Sprite = null;
//Show Dragonbone skeletal animation
This.initdragonani (True, "Rooster_eat_anim");

    /** * Initialize Dragonbone skeletal animation * @param {Boolean} $autoPlay whether to play automatically * @param {string} $name the name of the animation */privat E 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 ();            After loading, we can get the valid bounds let W = bound.width, H = bound.height;   This.rooster_dragonbone.width = W; If not set, This.rooster_dragonbone.width and Node.height are 0 This.rooster_dragoNbone.height = H; This.rooster_dragonbone.pos (W/2, H/2);            Bone node offset (W/2,H/2), which overlaps the upper-left corner of the animation area with the position of the proxy node (upper-left corner) 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 ("C            CCCCCC ");                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 animation has finished playing!!!            `);            Break            Case Laya.Event.MOUSE_DOWN:console.log (' Dragonbone animation clicked ');        Break            }} Private Showdragonani ($name: string): void{if (this.rooster_dragonbone && $name) {        This.rooster_dragonbone.play ($name, true); }    }

Show:

Console printing:

Skeletal animation of Layaair (Basic)