egret案例教程

egret案例教程

要求

a.使用DragonBonesPro导出序列帧json和png
b.有两个角色每个角色对应4个动作,点击按钮切换不同的动作
c.界面如下

2.步骤如下

A.打开DragonBonesPro导出序列帧




生成json和png文件

B.将json和png拖进egret项目中

C.demo分析
1.点击按钮小人A,小人B分别对应两套角色动作
2.点击动作1,动作2,动作3,动作4对应角色下的相应动作
D.开发步骤
1.因为Main.ts是入口,所以先在里面写逻辑

2.先搭建整体页面结构,先绘制一个背景

		var bg: egret.Shape = new egret.Shape;
        bg.graphics.beginFill(0xffffff);//填充颜色
        bg.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);//绘制矩形
        bg.graphics.endFill();//结束绘制工作
        this.addChild(bg);//添加到显示容器

2.因为有6个按钮,通过egret.TextField 中的egret.TouchEvent.TOUCH_TAP事件来实现按钮的功能.

		//小人A
        this.MyButton("小人A", 110, 70, 100, 100, 30,this.onClickA);
   
        //小人B
        this.MyButton("小人B", 110, 70, 250, 100, 30,this.onClickB);

        //动作1
        this.MyButton("动作1", 90, 50, 100, 200, 25,this.onAction1);
        
        //动作2
        this.MyButton("动作2", 90, 50, 230, 200, 25,this.onAction2);

        //动作3
        this.MyButton("动作3", 90, 50, 360, 200, 25,this.onAction3);

        //动作4
        this.MyButton("动作4", 90, 50, 490, 200, 25,this.onAction4);

因为在按钮的形成有些代码是冗余的所以单独抽成一个方法

private MyButton(text: string, width: number, height: number, x: number, y: number, size: number,listener:Function) {
        var label: egret.TextField = new egret.TextField();
        label.text = text;         //设置文本内容
        label.width = width;
        label.height = height;
        label.x = x;
        label.y = y;
        label.border = true;
        label.borderColor = 0x000000;
        label.size = size;                //设置字号大小
        label.textColor = 0x000000;     //设置字体颜色
        label.textAlign = egret.HorizontalAlign.CENTER;  //水平居中
        label.verticalAlign = egret.VerticalAlign.MIDDLE;  //垂直居中
        this.addChild(label);
        label.touchEnabled = true;
        label.addEventListener(egret.TouchEvent.TOUCH_TAP, listener, this);//设置点击事件
        // return label;
}

在写监听器事件之前,需要将序列帧全都加载进来,为了不造成内存的溢出,将所有的序列帧全部存到数组中,设置一个全局变量gd_MC,在切换角色时将小人A(gdA_MC)或者小人B(gdB_MC)时将数组里的对象赋值给全局变量实现切换角色动作的功能

private gdA_MC: egret.MovieClip[] = [];//存放小人A类的序列帧
    private gdB_MC: egret.MovieClip[] = [];//存放小人B类的序列帧
private gd_MC: egret.MovieClip[];//显示序列帧
//将所有序列帧加载进来
private getMC_gre() {
        let gdA_json: string[] = ["b-attack_json", "b-fall_json", "b-move_json", "b-win_json"];
        let gdA_png: string[] = ["b-attack_png", "b-fall_png", "b-move_png", "b-win_png"];
        let gdB_json: string[] = ["g-attack_json", "g-fall_json", "g-move_json", "g-win_json"];
        let gdB_png: string[] = ["g-attack_png", "g-fall_png", "g-move_png", "g-win_png"];
        console.log("getMC_gre");
        for (let i = 0; i < gdA_json.length; i++) {
            var part_mc: egret.MovieClip = this.getMC(gdA_json[i], gdA_png[i]);
            this.gdA_MC.push(part_mc);
        }
        // console.log("gdA_MC",this.gdA_MC);
        for (let i = 0; i < gdB_json.length; i++) {
            var part_mc: egret.MovieClip = this.getMC(gdB_json[i], gdB_png[i]);
            this.gdB_MC.push(part_mc);
        }
        console.log("getMC_gre_end");
    }

定义一个方法得到序列帧对象

private getMC(json: string, png: string): any {

        // console.log("进入到getMC方法中")
        var data = RES.getRes(json);
        // console.log("data", data);
        var txtr = RES.getRes(png);
        // console.log("加载完getMC方法参数")
        var mcFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(data, txtr);
        var part_mc: egret.MovieClip = new egret.MovieClip(mcFactory.generateMovieClipData("FramesAnimation"));
        part_mc.x = this.width / 2;
        part_mc.y = 500;
        // console.log("即将出getMC方法")
        return part_mc;
        /*this.addChild(this.mc);
        this.mc.gotoAndPlay(0, 9999);*/

}

完整代码:

class Main extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
        // this.loadResource();/**/
    }

    private onAddToStage(event: egret.Event) {

        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin

            context.onUpdate = () => {

            }
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }

        this.runGame().catch(e => {
            console.log(e);
        })
    }

    private onGroupComplete() {

    }

    private async runGame() {
        this.createGameScene();
        this.loadResource();

    }

    private async loadResource() {

        await RES.loadConfig("resource/default.res.json", "resource/");
        await RES.loadGroup("preload");
        /* var bg: egret.Bitmap = new egret.Bitmap(RES.getRes("b_attack_json#4_attack_0"));
         this.addChild(bg);

         //动画
         var tw = egret.Tween.get(bg);
         tw.to({},1000);*/


    }

    private textfield: egret.TextField;

    /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
        var bg: egret.Shape = new egret.Shape;
        bg.graphics.beginFill(0xffffff);//填充颜色
        bg.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);//绘制矩形
        bg.graphics.endFill();//结束绘制工作
        this.addChild(bg);//添加到显示容器
        console.log("display indexes:",
            this.getChildIndex(bg));
        //小人A
        var label_A: egret.TextField = this.MyButton("小人A", 110, 70, 100, 100, 30);
        this.addChild(label_A);
        label_A.touchEnabled = true;
        label_A.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickA, this);//设置点击事件

        //小人B
        var label_B: egret.TextField = this.MyButton("小人B", 110, 70, 250, 100, 30);
        this.addChild(label_B);
        label_B.touchEnabled = true;
        label_B.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickB, this);//设置点击事件


        //动作1
        var action1: egret.TextField = this.MyButton("动作1", 90, 50, 100, 200, 25);
        this.addChild(action1);
        action1.touchEnabled = true;
        action1.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onAction1, this);//设置点击事件


        //动作2
        var action2: egret.TextField = this.MyButton("动作2", 90, 50, 230, 200, 25);
        this.addChild(action2);
        action2.touchEnabled = true;
        action2.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onAction2, this);//设置点击事件

        //动作3
        var action3: egret.TextField = this.MyButton("动作3", 90, 50, 360, 200, 25);
        this.addChild(action3);
        action3.touchEnabled = true;
        action3.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onAction3, this);//设置点击事件

        //动作4
        var action4: egret.TextField = this.MyButton("动作4", 90, 50, 490, 200, 25);
        this.addChild(action4);
        action4.touchEnabled = true;
        action4.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onAction4, this);//设置点击事件

        //动作显示框
        var label_bor: egret.TextField = new egret.TextField();
        label_bor.width = 280;
        label_bor.height = 250;
        label_bor.x = 190;
        label_bor.y = 390;
        label_bor.border = true;
        label_bor.borderColor = 0x000000;
        this.addChild(label_bor);
    }
    private mc: egret.MovieClip;
    private gender_json: string[];
    private gender_png: string[];
    private gdA_json: string[] = ["b-attack_json", "b-fall_json", "b-move_json", "b-win_json"];
    private gdA_png: string[] = ["b-attack_png", "b-fall_png", "b-move_png", "b-win_png"];
    private gdB_json: string[] = ["g-attack_json", "g-fall_json", "g-move_json", "g-win_json"];
    private gdB_png: string[] = ["g-attack_png", "g-fall_png", "g-move_png", "g-win_png"];
    /**
     * 小人A
     */
    private onClickA(e: egret.TouchEvent) {
        console.log("A");
        this.gender_json = this.gdA_json;
        this.gender_png = this.gdA_png;
    }
    /**
     * 小人B
     */
    private onClickB(e: egret.TouchEvent) {
        console.log("B");
        this.gender_json = this.gdB_json;
        this.gender_png = this.gdB_png;
    }

    /**
     * 动作1
     */
    private onAction1(e: egret.TouchEvent) {
        console.log("1");
        if (this.gender_json && this.gender_png) {
            this.getMC(this.gender_json[0], this.gender_png[0]);
        }
    }

    /**
     * 动作2
     */
    private onAction2(e: egret.TouchEvent) {
        console.log("2");
        if (this.gender_json && this.gender_png) {
            this.getMC(this.gender_json[1], this.gender_png[1]);
        }
    }

    /**
     * 动作3
     */
    private onAction3(e: egret.TouchEvent) {
        console.log("3");
        if (this.gender_json && this.gender_png) {
            this.getMC(this.gender_json[2], this.gender_png[2]);
        }
    }

    /**
     * 动作4
     */
    private onAction4(e: egret.TouchEvent) {
        console.log("4");
        if (this.gender_json && this.gender_png) {
            this.getMC(this.gender_json[3], this.gender_png[3]);
        }
    }

    private getMC(json: string, png: string) {
        if (this.mc) {
            this.removeChild(this.mc);
        }

        var data = RES.getRes(json);
        var txtr = RES.getRes(png);
        var mcFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(data, txtr);
        this.mc = new egret.MovieClip(mcFactory.generateMovieClipData("FramesAnimation"));
        console.log("mc", this.mc);
        this.mc.x = this.width / 2;
        this.mc.y = 500;
        this.addChild(this.mc);
        this.mc.gotoAndPlay(0, 9999);

    }

    private MyButton(text: string, width: number, height: number, x: number, y: number, size: number): any {
        var label: egret.TextField = new egret.TextField();
        label.text = text;         //设置文本内容
        label.width = width;
        label.height = height;
        label.x = x;
        label.y = y;
        label.border = true;
        label.borderColor = 0x000000;
        label.size = size;                //设置字号大小
        label.textColor = 0x000000;     //设置字体颜色
        label.textAlign = egret.HorizontalAlign.CENTER;  //水平居中
        label.verticalAlign = egret.VerticalAlign.MIDDLE;  //垂直居中
        return label;
    }


}

总结:在写界面时,将按钮绑定点击事件,如果有需求通过点击某一事物让界面局部有变化,只要在相应的控件上的事件里实现相应的逻辑代码,让点击时监听器起作用.还有要学会查看相应的API,关注函数中的属性以及可以绑定的事件.用到的技术:绘制工具,序列帧,文本框,数组元素的添加

=============================

优化:

之前实现时,点击按钮没有选中的标记,而且必须先通过点击角色小人,点击相应的动作才会出现序列帧.
优化的功能为点击按钮时,背景颜色会发生改变,在最初状态会默认一个角色和动作,让界面有一个默认的样子,在点击动作后,直接可以切换小人相应的动作

界面初始状态,默认在主舞台上,直接添加小人A动作1的序列帧

private async loadResource() {

        await RES.loadConfig("resource/default.res.json", "resource/");
        await RES.loadGroup("preload");
        this.getMC_gre();
        //默认角色和动作
        this.gd_MC = this.gdA_MC;
        this.mc = this.gd_MC[0];
        this.addChild(this.mc);
        this.mc.gotoAndPlay(0, -1);

}

按钮起始状态

protected createGameScene(): void {
		var bg: egret.Shape = new egret.Shape;
        bg.graphics.beginFill(0xffffff);//填充颜色
        bg.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);//绘制矩形
        bg.graphics.endFill();//结束绘制工作
        this.addChild(bg);//添加到显示容器
        console.log("display indexes:",
            this.getChildIndex(bg));
        

        //小人A

        var buttonA: egret.TextField = this.MyButton("小人A", 110, 70, 100, 100, 30, this.onClickA);
        this.button_role.push(buttonA);
        buttonA.backgroundColor = 0x1AE6BD;//#B3D52B
        //小人B
        var buttonB: egret.TextField = this.MyButton("小人B", 110, 70, 250, 100, 30, this.onClickB);
        this.button_role.push(buttonB);
        console.log("button_role", this.button_role);

        //动作1
        let button1: egret.TextField = this.MyButton("动作1", 90, 50, 100, 200, 25, this.onAction1);
        this.button_action.push(button1);
        button1.backgroundColor = 0x2BD5D;//#B3D52B


        //动作2
        let button2: egret.TextField = this.MyButton("动作2", 90, 50, 230, 200, 25, this.onAction2);
        this.button_action.push(button2);

        //动作3
        let button3: egret.TextField = this.MyButton("动作3", 90, 50, 360, 200, 25, this.onAction3);
        this.button_action.push(button3);

        //动作4
        let button4: egret.TextField = this.MyButton("动作4", 90, 50, 490, 200, 25, this.onAction4);
        this.button_action.push(button4);
        console.log("this.button_action", this.button_action);
        //动作显示框
        var label_bor: egret.TextField = new egret.TextField();
        label_bor.width = 280;
        label_bor.height = 250;
        label_bor.x = 190;
        label_bor.y = 390;
        label_bor.border = true;
        label_bor.borderColor = 0x000000;
        this.addChild(label_bor);
}

因为有点击单个按钮,其它按钮会变成白色,因此将所有按钮存入成员变量数组中,以便在其它按钮事件中可以获取到其它按钮的状态,因此改写获取文本框对象的类

private MyButton(text: string, width: number, height: number, x: number, y: number, size: number, listener: Function): egret.TextField {
        var label: egret.TextField = new egret.TextField();
        label.text = text;         //设置文本内容
        label.width = width;
        label.height = height;
        label.x = x;
        label.y = y;
        label.border = true;
        label.borderColor = 0x000000;
        label.size = size;                //设置字号大小
        label.textColor = 0x000000;     //设置字体颜色
        label.textAlign = egret.HorizontalAlign.CENTER;  //水平居中
        label.verticalAlign = egret.VerticalAlign.MIDDLE;  //垂直居中
        this.addChild(label);
        label.background = true;
        label.touchEnabled = true;
        label.addEventListener(egret.TouchEvent.TOUCH_TAP, listener, this);//设置点击事件
        return label;
}

在createGameScene()添加,例如小人A

var buttonA: egret.TextField = this.MyButton("小人A", 110, 70, 100, 100, 30, this.onClickA);
        this.button_role.push(buttonA);
        buttonA.backgroundColor = 0x1AE6BD;//初始状态的颜色

在各个控件的事件里面添加切换按钮颜色的代码,因为只有两个按钮,所以直接就通过获取小人数组里的对象,设置颜色

private onClickA(e: egret.TouchEvent) {
        console.log("A");
        if (this.gdA_MC) {
            this.button_role[0].backgroundColor = 0x1AE6BD;
            this.button_role[1].backgroundColor = 0xffffff;
            this.gd_MC = this.gdA_MC;
            let num:number=0;
            if(this.mc){
                for(let i = 0; i < this.gdB_MC.length;i++){
                    if(this.mc==this.gdB_MC[i]){
                        num=i;
                    }
                }
                this.removeChild(this.mc);
                this.mc = this.gd_MC[num];
                this.addChild(this.mc);
                this.mc.gotoAndPlay(0, -1);
            }
        }
    }

点击小人实现序列帧切换的效果,是通过获取成员变量数组里的值和当前的显示出来的序列帧进行对比,得到数组的索引(如果数组有更好得到数组索引的方法,后续改进),最后移除当前的序列帧,添加新的序列帧

private onClickA(e: egret.TouchEvent) {
        console.log("A");
        if (this.gdA_MC) {
            this.button_role[0].backgroundColor = 0x1AE6BD;
            this.button_role[1].backgroundColor = 0xffffff;
            this.gd_MC = this.gdA_MC;
            let num:number=0;
            if(this.mc){
                for(let i = 0; i < this.gdB_MC.length;i++){
                    if(this.mc==this.gdB_MC[i]){
                        num=i;
                    }
                }
                this.removeChild(this.mc);
                this.mc = this.gd_MC[num];
                this.addChild(this.mc);
                this.mc.gotoAndPlay(0, -1);
            }
        }
}

完整代码:

class Main extends egret.DisplayObjectContainer {

    private mc: egret.MovieClip;
    private gender_json: string[];
    private gender_png: string[];

    private gdA_MC: egret.MovieClip[] = [];
    private gdB_MC: egret.MovieClip[] = [];
    private gd_MC: egret.MovieClip[];
    private button_role: egret.TextField[] = [];
    private button_action: egret.TextField[] = [];

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
        // this.loadResource();/**/
    }

    private onAddToStage(event: egret.Event) {

        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin

            context.onUpdate = () => {
            }
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }

        this.runGame().catch(e => {
            console.log(e);
        })
    }

    private onGroupComplete() {

    }

    private async runGame() {
        this.createGameScene();
        this.loadResource();

    }

    private async loadResource() {

        await RES.loadConfig("resource/default.res.json", "resource/");
        await RES.loadGroup("preload");
        this.getMC_gre();
        //默认角色和动作
        this.gd_MC = this.gdA_MC;
        this.mc = this.gd_MC[0];
        this.addChild(this.mc);
        this.mc.gotoAndPlay(0, -1);

    }

    private textfield: egret.TextField;

    /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
        var bg: egret.Shape = new egret.Shape;
        bg.graphics.beginFill(0xffffff);//填充颜色
        bg.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);//绘制矩形
        bg.graphics.endFill();//结束绘制工作
        this.addChild(bg);//添加到显示容器
        console.log("display indexes:",
            this.getChildIndex(bg));
        

        //小人A

        var buttonA: egret.TextField = this.MyButton("小人A", 110, 70, 100, 100, 30, this.onClickA);
        this.button_role.push(buttonA);
        buttonA.backgroundColor = 0x1AE6BD;//#B3D52B
        //小人B
        var buttonB: egret.TextField = this.MyButton("小人B", 110, 70, 250, 100, 30, this.onClickB);
        this.button_role.push(buttonB);
        console.log("button_role", this.button_role);

        //动作1
        let button1: egret.TextField = this.MyButton("动作1", 90, 50, 100, 200, 25, this.onAction1);
        this.button_action.push(button1);
        button1.backgroundColor = 0x2BD5D;//#B3D52B


        //动作2
        let button2: egret.TextField = this.MyButton("动作2", 90, 50, 230, 200, 25, this.onAction2);
        this.button_action.push(button2);

        //动作3
        let button3: egret.TextField = this.MyButton("动作3", 90, 50, 360, 200, 25, this.onAction3);
        this.button_action.push(button3);

        //动作4
        let button4: egret.TextField = this.MyButton("动作4", 90, 50, 490, 200, 25, this.onAction4);
        this.button_action.push(button4);
        console.log("this.button_action", this.button_action);
        //动作显示框
        var label_bor: egret.TextField = new egret.TextField();
        label_bor.width = 280;
        label_bor.height = 250;
        label_bor.x = 190;
        label_bor.y = 390;
        label_bor.border = true;
        label_bor.borderColor = 0x000000;
        this.addChild(label_bor);

    }

    /**
     * 小人A
     */
    private onClickA(e: egret.TouchEvent) {
        console.log("A");
        if (this.gdA_MC) {
            this.button_role[0].backgroundColor = 0x1AE6BD;
            this.button_role[1].backgroundColor = 0xffffff;
            this.gd_MC = this.gdA_MC;
            let num:number=0;
            if(this.mc){
                for(let i = 0; i < this.gdB_MC.length;i++){
                    if(this.mc==this.gdB_MC[i]){
                        num=i;
                    }
                }
                this.removeChild(this.mc);
                this.mc = this.gd_MC[num];
                this.addChild(this.mc);
                this.mc.gotoAndPlay(0, -1);
            }
        }
    }

    /**
     * 小人B
     */
    private onClickB(e: egret.TouchEvent) {
        console.log("B");
        if (this.gdB_MC) {
            this.button_role[1].backgroundColor = 0x1AE6BD;
            this.button_role[0].backgroundColor = 0xffffff;
            this.gd_MC = this.gdB_MC;
            let num:number=0;
            if(this.mc){
                for(let i = 0; i < this.gdA_MC.length;i++){
                    if(this.mc==this.gdA_MC[i]){
                        num=i;
                    }
                }
                this.removeChild(this.mc);
                this.mc = this.gd_MC[num];
                this.addChild(this.mc);
                this.mc.gotoAndPlay(0, 9999);
            }
        }
    }

    /**
     * 动作1
     */
    private onAction1(e: egret.TouchEvent) {
        console.log("1");
        if (this.mc) {
            this.removeChild(this.mc);
        }
        if (this.gd_MC) {
            for (let i = 0; i < this.button_action.length; i++) {
                if (i == 0) {
                    this.button_action[0].backgroundColor = 0x2BD5D;
                } else {
                    this.button_action[i].backgroundColor = 0xffffff;
                }
            }
            this.mc = this.gd_MC[0];
            this.addChild(this.mc);
            this.mc.gotoAndPlay(0, 9999);
        }
    }

    /**
     * 动作2
     */
    private onAction2(e: egret.TouchEvent) {
        console.log("2");
        if (this.mc) {
            this.removeChild(this.mc);
        }
        if (this.gd_MC) {
            for (let i = 0; i < this.button_action.length; i++) {
                // console.log("循环", i);
                if (i == 1) {
                    this.button_action[1].backgroundColor = 0x2BD5D;
                } else {
                    this.button_action[i].backgroundColor = 0xffffff;
                }
            }
            this.mc = this.gd_MC[1];
            this.addChild(this.mc);
            this.mc.gotoAndPlay(0, 9999);
        }
    }

    /**
     * 动作3
     */
    private onAction3(e: egret.TouchEvent) {
        console.log("3");
        if (this.mc) {
            this.removeChild(this.mc);
        }
        if (this.gd_MC) {
            for (let i = 0; i < this.button_action.length; i++) {
                if (i == 2) {
                    this.button_action[2].backgroundColor = 0x2BD5D;
                } else {
                    this.button_action[i].backgroundColor = 0xffffff;
                }
            }
            this.mc = this.gd_MC[2];
            this.addChild(this.mc);
            this.mc.gotoAndPlay(0, 9999);
        }
    }

    /**
     * 动作4
     */
    private onAction4(e: egret.TouchEvent) {
        console.log("4");
        if (this.mc) {
            this.removeChild(this.mc);
        }
        if (this.gd_MC) {
            for (let i = 0; i < this.button_action.length; i++) {
                if (i == 3) {
                    this.button_action[3].backgroundColor = 0x2BD5D;
                } else {
                    this.button_action[i].backgroundColor = 0xffffff;
                }
            }
            this.mc = this.gd_MC[3];
            this.addChild(this.mc);
            this.mc.gotoAndPlay(0, 9999);
        }
    }

    //
    private getMC_gre() {
        let gdA_json: string[] = ["b-attack_json", "b-fall_json", "b-move_json", "b-win_json"];
        let gdA_png: string[] = ["b-attack_png", "b-fall_png", "b-move_png", "b-win_png"];
        let gdB_json: string[] = ["g-attack_json", "g-fall_json", "g-move_json", "g-win_json"];
        let gdB_png: string[] = ["g-attack_png", "g-fall_png", "g-move_png", "g-win_png"];
        console.log("getMC_gre");
        for (let i = 0; i < gdA_json.length; i++) {
            var part_mc: egret.MovieClip = this.getMC(gdA_json[i], gdA_png[i]);
            this.gdA_MC.push(part_mc);
        }
        for (let i = 0; i < gdB_json.length; i++) {
            var part_mc: egret.MovieClip = this.getMC(gdB_json[i], gdB_png[i]);
            this.gdB_MC.push(part_mc);
        }
        console.log("getMC_gre_end");
    }

    private getMC(json: string, png: string): any {
        // console.log("进入到getMC方法中")
        var data = RES.getRes(json);
        // console.log("data", data);
        var txtr = RES.getRes(png);
        // console.log("加载完getMC方法参数")
        var mcFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(data, txtr);
        var part_mc: egret.MovieClip = new egret.MovieClip(mcFactory.generateMovieClipData("FramesAnimation"));
        part_mc.x = this.width / 2;
        part_mc.y = 500;
        // console.log("即将出getMC方法")
        return part_mc;
        /*this.addChild(this.mc);
        this.mc.gotoAndPlay(0, 9999);*/
    }

    private MyButton(text: string, width: number, height: number, x: number, y: number, size: number, listener: Function): egret.TextField {
        var label: egret.TextField = new egret.TextField();
        label.text = text;         //设置文本内容
        label.width = width;
        label.height = height;
        label.x = x;
        label.y = y;
        label.border = true;
        label.borderColor = 0x000000;
        label.size = size;                //设置字号大小
        label.textColor = 0x000000;     //设置字体颜色
        label.textAlign = egret.HorizontalAlign.CENTER;  //水平居中
        label.verticalAlign = egret.VerticalAlign.MIDDLE;  //垂直居中
        this.addChild(label);
        label.background = true;
        label.touchEnabled = true;
        label.addEventListener(egret.TouchEvent.TOUCH_TAP, listener, this);//设置点击事件
        return label;
    }


}

运行在安卓设备上
1.发布成android




用android studio 2019打开

打开MainActivity运行之前需要安装一个android模拟器,夜神模拟器,安装成功之后出现的界面

使用Android Studio与夜神模拟器开发调试
1.进入到夜神安装目录（如cd D:\Program Files\NOX\Nox\bin）
2.打开命令行窗口,可以在地址栏上输入cmd就会进入当前路径的窗口下

3.执行命令: nox_adb.exe connect 127.0.0.1:62001,连接模拟器
4.如果连接不上,重启模拟器
返回android studio界面



出现窗口按取消cancel,出现界面

优化:

加入两个场景

场景1使用粒子
1.先导出粒子文件

做好效果和纹理后,导出json 和png

从github上下载egret-game-library-master
在egretProperties.json中配置particle 模块配置到libsrc文件夹下

{
  "engineVersion": "5.2.16",
  "compilerVersion": "5.2.16",
  "template": {},
  "target": {
    "current": "web"
  },
  "modules": [
    {
      "name": "egret"
    },
    {
      "name": "game"
    },
    {
      "name": "tween"
    },
    {
      "name": "assetsmanager"
    },
    {
      "name": "promise"
    },
    {
      "name":"particle",
      "path":"C:\\Users\\Administrator.USER-20190423KY\\Desktop\\egret-game-library-master\\particle\\libsrc"
    }
  ],
 
  "targets": {
    "android": {
      "appname": "demo",
      "packagename": "com.companyname"
    }
  }
}

再加载进来,

private async loadResource() {

        await RES.loadConfig("resource/default.res.json", "resource/");
        await RES.loadGroup("preload");
        this.getMC_gre();
        //默认角色和动作
        this.gd_MC = this.gdA_MC;
        this.mc = this.gd_MC[0];
        this.addChild(this.mc);
        this.mc.gotoAndPlay(0, -1);

        //场景
        this.button_bg[0].backgroundColor = 0x1AE6BD;
        var texture = RES.getRes("snow_png");
        var config = RES.getRes("snow_json");
        this.system = new particle.GravityParticleSystem(texture, config);
        this.system.x = 0;
        this.system.y = 0;
}

当点击场景1时可以出现效果,在点击后取消效果(某些原因后续再写)