开始用白鹭引擎开发

本文将介绍如何开始使用白鹭引擎进行游戏开发,从基础的环境配置到初步的图形绘制,带你走进2D游戏开发的世界。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//////////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (c) 2014-present, Egret Technology.
//  All rights reserved.
//  Redistribution and use in source and binary forms, with or without
//  modification, are permitted provided that the following conditions are met:
//
//     * Redistributions of source code must retain the above copyright
//       notice, this list of conditions and the following disclaimer.
//     * Redistributions in binary form must reproduce the above copyright
//       notice, this list of conditions and the following disclaimer in the
//       documentation and/or other materials provided with the distribution.
//     * Neither the name of the Egret nor the
//       names of its contributors may be used to endorse or promote products
//       derived from this software without specific prior written permission.
//
//  THIS SOFTWARE IS PROVIDED BY EGRET AND CONTRIBUTORS "AS IS" AND ANY EXPRESS
//  OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
//  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
//  IN NO EVENT SHALL EGRET AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
//  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
//  LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;LOSS OF USE, DATA,
//  OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
//  LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
//  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
//  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
//////////////////////////////////////////////////////////////////////////////////////

class Main extends egret.DisplayObjectContainer {



    public constructor() {
        super();

        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
        this.touchEnabled = true;
        console.log("开始你的表演");
    }

    private touchHandle(event: egret.TouchEvent) {

    }

    private async initWidget() {
        console.log("initWidget");
        let bgShap = new egret.Shape();
        bgShap.graphics.beginFill(0x00FF00, 1);
        let width = this.stage.width;
        let height = this.stage.height;
        bgShap.graphics.drawRect(0, 0, width, height);
        bgShap.graphics.endFill();
        bgShap.x = 100;
        bgShap.y = 40;
        this.addChild(bgShap);
    }

    private onAddToStage(event: egret.Event) {
        let hint = "onAddToStage  ";
        console.log(hint + "event = " + event.toString());

        let timerUpdate: number = 0;
        let timerPause: number = 0;
        let timerResume: number = 0;
        let timerCatch: number = 0;

        egret.lifecycle.addLifecycleListener((context) => {

            // custom lifecycle plugin

            context.onUpdate = () => {
                // console.log("onUpdate " + timerUpdate);
                // timerUpdate++;
            }
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
            console.log("onPause " + timerPause);
            timerPause++;
        }


        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
            console.log("onResume " + timerResume);
            timerResume++;
        }

        this.initWidget().catch(e => {
            console.log("initWidget().catch");
            console.error(e);
        })
        // this.runGame().catch(e => {
        //     console.log(e);
        //     console.log("catch " + timerCatch);
        //     timerCatch++;
        // })
    }

    private async runGame() {
        console.log("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() {
        console.log("loadResource");
        try {
            const loadingView = new LoadingUI();
            this.stage.addChild(loadingView);
            await RES.loadConfig("resource/default.res.json", "resource/");
            await RES.loadGroup("preload", 0, loadingView);
            this.stage.removeChild(loadingView);
        }
        catch (e) {
            console.error(e);
        }
    }

    private textfield: egret.TextField;

    /**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene() {
        console.log("createGameScene");
        let sky = this.createBitmapByName("bg_jpg");
        this.addChild(sky);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;

        let topMask = new egret.Shape();
        topMask.graphics.beginFill(0x000000, 0.5);
        topMask.graphics.drawRect(0, 0, stageW, 172);
        topMask.graphics.endFill();
        topMask.y = 33;
        this.addChild(topMask);

        let icon = this.createBitmapByName("egret_icon_png");
        this.addChild(icon);
        icon.x = 26;
        icon.y = 33;

        let line = new egret.Shape();
        line.graphics.lineStyle(2, 0xffffff);
        line.graphics.moveTo(0, 0);
        line.graphics.lineTo(0, 117);
        line.graphics.endFill();
        line.x = 172;
        line.y = 61;
        this.addChild(line);


        let colorLabel = new egret.TextField();
        colorLabel.textColor = 0xffffff;
        colorLabel.width = stageW - 172;
        colorLabel.textAlign = "center";
        colorLabel.text = "Hello Egret";
        colorLabel.size = 24;
        colorLabel.x = 172;
        colorLabel.y = 80;
        this.addChild(colorLabel);

        let textfield = new egret.TextField();
        this.addChild(textfield);
        textfield.alpha = 0;
        textfield.width = stageW - 172;
        textfield.textAlign = egret.HorizontalAlign.CENTER;
        textfield.size = 24;
        textfield.textColor = 0xffffff;
        textfield.x = 172;
        textfield.y = 135;
        this.textfield = textfield;


    }

    /**
     * 根据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) {
        console.log("createBitmapByName name = " + name);
        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: string[]) {
        let parser = new egret.HtmlTextParser();

        console.log("startAnimation result = " + result);

        let textflowArr = result.map(text => parser.parse(text));
        let textfield = this.textfield;
        let count = 0;
        let tw = egret.Tween.get(textfield);
        let change = () => {

            if (count === 0) {
                count = 1;
            } else {
                count = 0;
            }

            // let alength = textflowArr.length;
            // if (count >= alength) {
            //     count = 0;
            // }
            let textFlow = textflowArr[0];

            console.log("change count = " + count);
            // 切换描述内容
            // Switch to described content
            textfield.textFlow = textFlow;
            if (count % 2) {
                tw.to({ "alpha": 1 }, 500);
            } else {
                tw.to({ "alpha": 0 }, 500);
            }
            tw.call(change, this);
            tw.wait(5000);
        };

        change();
    }
}

 

画图记得牢:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值