代码段

65 阅读1分钟
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();
        }

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

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

    }

    private async 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);
        }
    }

    /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
    
    }

}

修改egretProperties.json,在modules加入game,然后运行下egret build -e就行了

 在srr下新建文件夹 common,在common下新建模板TypeScript

class GameUtil {
	 /**
     * 获取舞台高度
     */
    public static getStageHeight(): number {
        return egret.MainContext.instance.stage.stageHeight
    }

    /*
     * 获取舞台宽度
     */
    public static getStageWidth(): number {
        return egret.MainContext.instance.stage.stageWidth
    }

    /**
     * 根据name关键字创建一个Bitmap对象name属性请参考resources/resource.json配置文件的内容
     */
    public static createBitmapByName(name: string, type: string = 'png') {
        let result = new egret.Bitmap()
        let texture: egret.Texture = RES.getRes(name + '_' + type)
        result.texture = texture
        return result
    }

    /**
     * 根据name关键字创建一个MovieClip对象name属性请参考resources/resource.json配置文件的内容。
     */
    public static createMovieClipByName(name:string): egret.MovieClip {

        let data_stay: any = RES.getRes(name + "_json")
        console.log(data_stay)
        let texture_stay: egret.Texture = RES.getRes(name + "_png")
        let mcFactory_stay: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(data_stay, texture_stay)
        return new egret.MovieClip(mcFactory_stay.generateMovieClipData(name))
    }
}

修改LoadingUI.ts

修改LoadingUI.ts,让进度条居中显示

class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {

    public constructor() {
        super();
        this.createView();
    }

    private textField: egret.TextField;

   private createView(): void {
        this.textField = new egret.TextField()
        this.addChild(this.textField)
        this.textField.width = 480
        this.textField.height = 100
        this.textField.x = (GameUtil.getStageWidth() - this.textField.width) / 2
        this.textField.y = (GameUtil.getStageHeight() - this.textField.height) / 2
        this.textField.textAlign = "center"
        this.textField.text = `Loading...0%`
    }

    public onProgress(current: number, total: number): void {
        let per = current * 100 / total
        this.textField.text = `Loading...${per.toFixed(0)}%`
    }
}

实现BaseScene类

class BaseScene extends egret.DisplayObjectContainer {

    public constructor() {
        super()
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.initView, this)
    }

    protected initView() {
    }
}

在项目中删除本项目不需要的资源文件添加本项目需要的就好

添加背景图片

在Main.ts的createGameScene方法中添加背景图片

 /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
    let container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer()
        this.addChild(container)

        let bg: egret.Bitmap = GameUtil.createBitmapByName('bg', 'jpg')
        container.addChild(bg)
        // 因为使用了fixedWide模式,自己根据舞台宽高,重新设置背景图片大小(会被裁剪)
        let ratioW = GameUtil.getStageWidth() / bg.width
        let ratioH = GameUtil.getStageHeight() / bg.height
        let ratio = bg.width / bg.height
        if (ratioW > ratioH) {
            bg.width = GameUtil.getStageWidth()
            bg.height = bg.width / ratio
        } else {
            bg.height = GameUtil.getStageHeight()
            bg.width = bg.height * ratio
        }
        bg.x = (GameUtil.getStageWidth() - bg.width) / 2
    }

结果(谷歌浏览器右键打开检查选择手机模式查看)