使用egret白鹭引擎开发h5游戏的入门demo

使用egret开发h5游戏的入门demo

main类代码

基本的代码如下所示,都写了注释,应该很好懂的。就不再一步一步分析了:

/**
 * 定义全局变量
 */
//定义一个透明度的值用来判断是否需要隐藏或者显示
var number: number;
//定义一个值来表示是图片序号
var count: number = 1;
//定义三个按钮
let button = new eui.Button();
let button3 = new eui.Button();
let button2 = new eui.Button();
//定义一个位图对象
let sky = new egret.Bitmap();
/**
 * main方法
 */
class Main extends eui.UILayer {


    protected createChildren(): void {
        super.createChildren();

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

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

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

        //inject the custom material parser
        //注入自定义的素材解析器
        let assetAdapter = new AssetAdapter();
        egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());


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

    private async runGame() {
        await this.loadResource()
        this.createGameScene();
        const result = await RES.getResAsync("description_json")
        this.startAnimation(result);
        await platform.login();
        const userInfo = await platform.getUserInfo();
        console.log(userInfo);

    }

    private async loadResource() {
        try {
            const loadingView = new LoadingUI();
            this.stage.addChild(loadingView);
            await RES.loadConfig("resource/default.res.json", "resource/");
            await this.loadTheme();
            await RES.loadGroup("preload", 0, loadingView);
            this.stage.removeChild(loadingView);
        }
        catch (e) {
            console.error(e);
        }
    }

    private loadTheme() {
        return new Promise((resolve, reject) => {
            // load skin theme configuration file, you can manually modify the file. And replace the default skin.
            //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
            let theme = new eui.Theme("resource/default.thm.json", this.stage);
            theme.addEventListener(eui.UIEvent.COMPLETE, () => {
                resolve();
            }, this);

        })
    }



    private textfield: egret.TextField;
    /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {

        var result: egret.Bitmap = new egret.Bitmap();
        //定义位图对象
        var texture: egret.Texture = RES.getRes("bg_jpg");
        var texture2: egret.Texture = RES.getRes("aa_jpg");
        var texture3: egret.Texture = RES.getRes("bb_jpg");
        var texture4: egret.Texture = RES.getRes("cc_png");
        //判断
        if (count == 1) {
            //默认显示图1
            result.texture = texture;
            //在重新创建场景的时候,也就是按钮4进行返回的时候,把图片设置成之前的图片序号count的值
        } else if (count == 2) {
            result.texture = texture2;
        } else if (count == 3) {
            result.texture = texture3;
        } else if (count == 4) {
            result.texture = texture4;
        }

        //赋值给全局位图对象
        sky = result;
        // sky = this.createBitmapByName("bg_jpg");
        //给当前对象添加子元素
        this.addChild(sky);
        //取出舞台的宽高
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        //把舞台宽高复制给当前的场景
        sky.width = stageW;
        sky.height = stageH;

        /**
         * 创建按钮1  显示/隐藏
         */
        button = new eui.Button();
        button.label = "显示/隐藏";
        button.horizontalCenter = 0;
        // button.verticalCenter = 0;
        button.$setX(200);
        button.$setY(800);
        //给当前对象添加按钮子元素
        this.addChild(button);
        //监听事件
        button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, sky);

        /**
        * 创建按钮2 更换图片
        */
        button2 = new eui.Button();
        button2.label = "更换图片";
        button2.horizontalCenter = 0;
        // button2.verticalCenter = 0;
        button2.$setX(200);
        button2.$setY(900);
        //给当前对象添加按钮子元素
        this.addChild(button2);
        //添加监听事件
        button2.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick2, this);

        /**
        * 创建按钮3 切换场景
        */
        button3 = new eui.Button();
        button3.label = "切换场景";
        button3.horizontalCenter = 0;
        // button2.verticalCenter = 0;
        button3.$setX(200);
        button3.$setY(1000);
        //给当前对象添加按钮子元素
        this.addChild(button3);
        //添加监听事件
        button3.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick3, this);

    }
    /**
     * 根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。
     * Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
     */
    private createBitmapByName(name: string): egret.Bitmap {
        let result = new egret.Bitmap();
        let texture: egret.Texture = RES.getRes(name);
        result.texture = texture;
        return result;
    }
    /**
     * 描述文件加载成功,开始播放动画
     * Description file loading is successful, start to play the animation
     */
    private startAnimation(result: Array<any>): void {
        let parser = new egret.HtmlTextParser();

        let textflowArr = result.map(text => parser.parse(text));
        let textfield = this.textfield;
        let count = -1;
        let change = () => {
            count++;
            if (count >= textflowArr.length) {
                count = 0;
            }
            let textFlow = textflowArr[count];

            // 切换描述内容
            // Switch to described content
            textfield.textFlow = textFlow;
            let tw = egret.Tween.get(textfield);
            tw.to({ "alpha": 1 }, 200);
            tw.wait(2000);
            tw.to({ "alpha": 0 }, 200);
            tw.call(change, this);
        };

        change();
    }

    /**
     * 点击按钮1执行的方法
     * Click the button
     */
    private onButtonClick(e: egret.TouchEvent) {
        //判断透明度为0,既隐藏的时候,先把number透明度设置为显示,既number=1;
        if (number == 0) {
            number = 1;
            //设置组件的透明度为不透明,既显示
            this.$setAlpha(1);
            console.log("执行了按钮1的不透明显示");
        } else {
            number = 0
            //设置组件的透明度为全透明,既隐藏
            this.$setAlpha(0);
            console.log("执行了按钮1的透明显示");
        }

    }

    /**
    * 点击按钮2更换图片
    * Click the button
    */
    private onButtonClick2(e: egret.TouchEvent) {
        //判断透明度为0,既隐藏的时候,先把number透明度设置为显示,既number=1;再执行切换图片的方法
        if (number == 0) {
            number = 1;
        }
        this.removeChildren();
        var result: egret.Bitmap = new egret.Bitmap();
        var texture: egret.Texture = RES.getRes("bg_jpg");
        var texture2: egret.Texture = RES.getRes("aa_jpg");
        var texture3: egret.Texture = RES.getRes("bb_jpg");
        var texture4: egret.Texture = RES.getRes("cc_png");
        //如果图片是1,那就切换到图2
        if (count == 1) {
            result.texture = texture2;
            count++;
            //如果图片是2,那就切换到图3
        } else if (count == 2) {
            result.texture = texture3;
            count++;
            //如果图片是3,那就切换到图4
        } else if (count == 3) {
            result.texture = texture4;
            count++;
        } else if (count == 4) {
            //如果增加到4,说明下一张图片就是循环的第一张图片,重设图片为图片1
            result.texture = texture;
            //设置图片的序号count为1
            count = 1;
        }


        //赋值给全局位图变量
        sky = result;
        //添加子元素
        this.addChild(sky);
        /**
        * 重新创建按钮1
        */
        button = new eui.Button();
        button.label = "显示/隐藏";
        button.horizontalCenter = 0;
        // button.verticalCenter = 0;
        button.$setX(200);
        button.$setY(800);
        //增加按钮到当前舞台
        this.addChild(button);
        //增加按键监听事件
        button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, sky);
        //增加三个按钮
        this.addChild(button);
        this.addChild(button2);
        this.addChild(button3);
    }

    /**
    * 点击按钮3切换场景的方法
    * Click the button
    */
    private onButtonClick3(e: egret.TouchEvent) {

        //移除sky场景
        this.removeChild(sky);
        //定义位图对象
        var result: egret.Bitmap = new egret.Bitmap();
        var texture: egret.Texture = RES.getRes("dd_jpg");
        //显示你的图片1
        result.texture = texture;
        this.addChild(result);
        let button = new eui.Button();
        button.label = "返回";
        button.horizontalCenter = 0;
        // button.verticalCenter = 0;
        button.$setX(200);
        button.$setY(1000);
        //添加返回按钮
        this.addChild(button);
        button.icon = RES.getRes("button_png");
        //添加监听事件
        button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClickBack, this);
        //重设透明度为1,防止切换回来是透明图片
        number = 1;
    }
    /**
     * 点击按钮4返回的方法
     */
    private onButtonClickBack(e: egret.TouchEvent) {
        //移除所有元素
        this.removeChildren();
        //重新创建之前的场景
        this.createGameScene();
    }
}

index展示页:
在这里插入图片描述点击【显示/隐藏】
在这里插入图片描述点击【更换图片】:
在这里插入图片描述在这里插入图片描述在这里插入图片描述点击【切换场景】:
在这里插入图片描述点击【返回】:
在这里插入图片描述详细完整代码,后续贴出!


版权声明:本文为qq_21650491原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。