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
}
结果(谷歌浏览器右键打开检查选择手机模式查看)