class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {
public constructor() {
super();
// 当被添加到舞台的时候触发 (被添加到舞台,说明资源组已经加载完成)
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.createView,this);
}
private loadlable: egret.BitmapText;
private loadImg: egret.Bitmap // loading图标
private shape:egret.Shape = new egret.Shape();
private createView(): void {
this.width=this.stage.stageWidth;
this.height=this.stage.stageHeight;
//背景色
let bg:egret.Shape = this.shape;
bg.graphics.beginFill(0x40BDC9);
bg.graphics.drawRect(0, 0, this.width, this.height);
bg.graphics.endFill();
this.addChild(this.shape);
// 加载位图字体
this.loadlable = new egret.BitmapText();
this.loadlable.font = RES.getRes("gameFonts_fnt");;
this.loadlable.textAlign = "center";
this.loadlable.verticalAlign = "middle";
this.loadlable.width = 140;
this.loadlable.height = 80;
this.loadlable.x = this.width / 2 - this.loadlable.width / 2;
this.loadlable.y = this.height / 2 + this.loadlable.height / 2;
this.addChild(this.loadlable);
// loading图标
this.loadImg = new egret.Bitmap();
this.loadImg.texture=RES.getRes("loader_png");
this.loadImg.anchorOffsetX = this.loadImg.width / 2;
this.loadImg.anchorOffsetY = this.loadImg.height / 2;
this.loadImg.x = this.width / 2;
this.loadImg.y = this.height / 2;
this.addChild(this.loadImg);
}
public onProgress(current: number, total: number): void {
// 计算百分比
let per = Math.floor((current / total) * 100);
this.loadlable.text = `${per}%`;
}
}
2、main.ts里的代码没有变，但是loadResource方法里的加载顺序要搞清楚。核心关键点。
private async runGame() {
RES.setMaxLoadingThread(1); //防加载卡死
await this.loadResource();
this.createGameScene();
}
private async loadResource() {
try {
await RES.loadConfig("resource/default.res.json", "resource/");
const loadingView = new LoadingUI();
//加载loading组
await RES.loadGroup("loading");
this.stage.addChild(loadingView);
await this.loadTheme();
await RES.loadGroup("preload", 0, loadingView);
this.stage.removeChild(loadingView);
}
catch (e) {
console.error(e);
}
}
class LoadingUI extends eui.Component {
public lblLoader: eui.BitmapLabel;
public constructor() {
super();
this.skinName = "resource/skins/LoadingSkin.exml";
}
public setProgress(current: number, total: number):void {
// 计算百分比
let per = Math.floor((current / total) * 100);
this.lblLoader.text = `${per}%`;
}
}
2、main.ts源码：
class Main extends eui.UILayer {
private loadingView: LoadingUI;
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());
//初始化Resource资源加载库
RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
RES.loadConfig("resource/default.res.json", "resource/");
/*this.runGame().catch(e => {
console.log(e);
})*/
}
/**
* 配置文件加载完成,开始预加载皮肤主题资源和preload资源组。
* Loading of configuration file is complete, start to pre-load the theme configuration file and the preload resource group
*/
private onConfigComplete(event:RES.ResourceEvent):void {
RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
// load skin theme configuration file, you can manually modify the file. And replace the default skin.
//加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
var theme = new eui.Theme("resource/default.thm.json", this.stage);
theme.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
RES.loadGroup("loading");
}
private isThemeLoadEnd: boolean = false;
/**
* 主题文件加载完成,开始预加载
*/
private onThemeLoadComplete(): void {
this.isThemeLoadEnd = true;
this.createScene();
}
private isResourceLoadEnd: boolean = false;
/**
* 资源组加载完成
*/
private onResourceLoadComplete(event:RES.ResourceEvent):void {
if (event.groupName == "loading") {
RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
this.isResourceLoadEnd = true;
this.createScene();
}
if(event.groupName == 'preload'){
this.startCreateScene();
this.stage.removeChild(this.loadingView);
}
}
private createScene(){
if(this.isThemeLoadEnd && this.isResourceLoadEnd){
//设置加载进度界面
this.loadingView = new LoadingUI();
this.stage.addChild(this.loadingView);
// 加载preload资源组
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR,this.onResourceLoadError,this);
RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.onResourceProgress,this);
RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR,this.onItemLoadError,this);
RES.loadGroup("preload");
}
}
/**
* 资源组加载出错
* The resource group loading failed
*/
private onItemLoadError(event:RES.ResourceEvent):void {
console.warn("Url:" + event.resItem.url + " has failed to load");
}
/**
* 资源组加载出错
*/
private onResourceLoadError(event:RES.ResourceEvent):void {
//TODO
console.warn("Group:" + event.groupName + " has failed to load");
//忽略加载失败的项目
this.onResourceLoadComplete(event);
}
/**
* preload资源组加载进度
*/
private onResourceProgress(event:RES.ResourceEvent):void {
if (event.groupName == "preload") {
this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);
}
}
/**
* 创建场景界面
*/
protected startCreateScene(): void {
console.log('start')
this.playsc1();
}
public sc1: eui.Component;
protected playsc1():void{
var sc1: eui.Component = new GameLogo();
this.stage.addChild(sc1);
this.sc1 = sc1;
}
}
3、default.thm.json
{
"skins": {
"eui.Button": "resource/eui_skins/ButtonSkin.exml",
"eui.CheckBox": "resource/eui_skins/CheckBoxSkin.exml",
"eui.HScrollBar": "resource/eui_skins/HScrollBarSkin.exml",
"eui.HSlider": "resource/eui_skins/HSliderSkin.exml",
"eui.Panel": "resource/eui_skins/PanelSkin.exml",
"eui.TextInput": "resource/eui_skins/TextInputSkin.exml",
"eui.ProgressBar": "resource/eui_skins/ProgressBarSkin.exml",
"eui.RadioButton": "resource/eui_skins/RadioButtonSkin.exml",
"eui.Scroller": "resource/eui_skins/ScrollerSkin.exml",
"eui.ToggleSwitch": "resource/eui_skins/ToggleSwitchSkin.exml",
"eui.VScrollBar": "resource/eui_skins/VScrollBarSkin.exml",
"eui.VSlider": "resource/eui_skins/VSliderSkin.exml",
"eui.ItemRenderer": "resource/eui_skins/ItemRendererSkin.exml",
"LoadingUI": "resource/skins/LoadingSkin.exml",
"GameLogo": "resource/skins/GameLogo.exml"
},
"autoGenerateExmlsList": true,
"exmls": [
"resource/eui_skins/ButtonSkin.exml",
"resource/eui_skins/CheckBoxSkin.exml",
"resource/eui_skins/HScrollBarSkin.exml",
"resource/eui_skins/HSliderSkin.exml",
"resource/eui_skins/ItemRendererSkin.exml",
"resource/eui_skins/PanelSkin.exml",
"resource/eui_skins/ProgressBarSkin.exml",
"resource/eui_skins/RadioButtonSkin.exml",
"resource/eui_skins/ScrollerSkin.exml",
"resource/eui_skins/TextInputSkin.exml",
"resource/eui_skins/ToggleSwitchSkin.exml",
"resource/eui_skins/VScrollBarSkin.exml",
"resource/eui_skins/VSliderSkin.exml",
"resource/skins/GameLogo.exml",
"resource/skins/LoadingSkin.exml"
],
"path": "resource/default.thm.json"
}