【egret学习之路】UI加载和Spine转Dragbones的

一、UI加载、以及按钮事件

class testSkin extends eui.Component {
    constructor() {
        super();
        this.addEventListener(eui.UIEvent.COMPLETE,this.onComplete,this);
        this.skinName = "resource/eui_skins/testui.exml";
    }
    protected createChildren() {
        super.createChildren();
        console.log("createChildren")
    }

    private onComplete():void{
        console.log("onCompletSe");
        // 返回逻辑
        this.btnReturn.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=> {
            console.log("this is btn return")
        }, this );

        // 返回逻辑
        this.btnGo.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=> {
            console.log("this is btn go")
        }, this );
    }
      // 这里的按钮对象需要和ui文件标记一样（感觉不错的设计），这样加载后变量自动被赋值
      private btnReturn:eui.Button;
      private btnGo:eui.Button;
}
// 加载方式
 private _testSkin:testSkin;

 this._testSkin = new testSkin;
 this.addChild(this._testSkin)

二、Spine转Dragbones：资源的加载路径有所不同，egert是使用"_"扩展名的方式作为key加载资源的，这里我原有的资源是spine，需要导入到龙骨工具然后导出对应的格式即可

 var timer:egret.Timer = new egret.Timer(20, 0);
        timer.addEventListener(egret.TimerEvent.TIMER, this.onTimeUpdate, this);
        this.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.onTimeComplete, this);
        timer.start();  

        var dragonbonesData = RES.getRes("skeleton_1_ske_json");
        var textureData = RES.getRes("skeleton_1_tex_json");
        var texture = RES.getRes("skeleton_1_tex_png");
        
        var dragonbonesFactory: dragonBones.EgretFactory = new dragonBones.EgretFactory();
        dragonbonesFactory.addDragonBonesData(dragonBones.DataParser.parseDragonBonesData(dragonbonesData));
        dragonbonesFactory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texture, textureData));
        this.armature = dragonbonesFactory.buildArmature("armatureName");
        this.addChild(this.armature.getDisplay());

        this.armature.display.x = this.stage.stageWidth * 0.5;
        this.armature.display.y = this.stage.stageHeight - 10;
        /**
         * 开启大时钟这步很关键
         * */
        dragonBones.WorldClock.clock.add(this.armature);

   private onTimeUpdate():void{
         dragonBones.WorldClock.clock.advanceTime(0.02)
    }

    private onTimeComplete():void{
         console.log("update finish")
    }

三、滑动屏幕，物件产生移动

        // 龙舟
        this.boat = this.createBitmapByName("boat_png");
        this.boat.x = this.stage.stageWidth * 0.5
        this.boat.y = this.stage.stage.height - 200
         
        // 触摸界面滑动龙舟
        var offsetX:number;
        var offsetY:number;
        var boatBeginX:number;
        function startMove(e:egret.TouchEvent):void{
            offsetX = e.stageX
            boatBeginX = this.boat.x
            this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, onMove, this);
        }
        function onMove(e:egret.TouchEvent):void{
            var offset1 =  e.stageX - offsetX
            this.boat.x = boatBeginX + offset1
        }
        function stopEnd(e:egret.TouchEvent):void{
             this.stager.removeEventListener(egret.TouchEvent.TOUCH_MOVE, onMove, this);
        }
        this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, startMove, this);

        this.addChild(this.boat);