Egret资源管理解决方案
關于egret開發H5頁游,資源管理和加載的一點看法。
一 多json文件管理
二 資源歸類和命名
三 exml文件編寫規范
四 資源預加載、分步加載、偷載
五 資源文件group分組
六 ResUtils,多json文件管理類
七 ResUtils,資源組加載管理類
八 開發中遇到的一點問題?
?
一?多json文件管理
當多人協作時,添加資源時常因為資源文件修改而導致svn沖突。
根據各人不同負責的模塊,將資源文件劃分。
原來的
default.res.json可以修改為
login.res.json hall.res.json game.res.json sound.res.json ...新建的文件需要配置一下,否則無法使用,配置方法見下面《八 開發中遇到的一點問題》。?
?
二 資源歸類和命名
asset文件夾下,分類存放圖片。根據項目可自行劃分。
?
為了防止多個文件中資源命名沖突,軟件只有檢測單文件中命名沖突,沒有自動檢測多文件命名沖突的功能。
所以可以加前綴解決。
login_loginbtn login_logohall_roombg hall_setbtngame_bg game_option ....?
對于公用的圖片,尤其是login、hall、game中通用的按鈕和背景,可以單獨放在common資源組中,以備復用。
一來防止圖片多次加載,導致發包體積過大。二來修改按鈕圖片時,只需修改一處即可。
com_btn0 com_btn1 com_box0 com_box1 com_panelbg ...?
?
?三 exml文件編寫規范
編寫Exml文件時,為了二次修改,便于查找閱讀,可以效仿Flash多圖層的存放元件。
優點:
1. 當查找時,可以根據圖層名查找到圖片或文本。
2. 點擊圖層左側眼鏡,可隱藏該圖層的所有組件。
缺點:
1. 單擊選擇時,只能選擇最上層Group,而不能穿透Group選擇到另一層的組件...比如直接點擊界面是無法選擇Logo這個文本的。(注:wing3.0已經解決了這個問題)
2. group折疊時,無法一目了然當前所有組件。
?
?
四 資源預加載、實時加載、偷載
1. 黑屏 ?
在進入preload預加載界面時,此時會有短暫的黑屏??蓪tml背景色設置為白色或其他顏色,感覺比黑屏要好一些。
2.?預加載
打開場景。 從preload進入login場景時,預先加載login界面的資源,給出加載loading界面,加載完成后再進入login。
?
?
?
3. 實時加載
預加載只加載用戶一進入場景時所見資源,其他該場景資源,比如彈框資源等,在使用時再實時加載。這樣可以大大減少用戶進入場景等待時間。
在打開彈框時,給出loading動畫,加載完后再顯示彈框。
?
?
?
?
彈框除了資源,還有http請求顯示的數據,這個請求也需要時間等待,未返回數據前,界面數據為空,或者顯示之前請求的數據,等加載完成再顯示更新。
如下圖,當http請求無返回數據時,界面是空的,或者是之前請求的數據。
?
當http請求返回數據時,再更新該彈框。
?
?
?
3. 偷載
進入某場景后,用戶可能不會馬上進行某些操作。進入場景后即刻加載該場景所用資源。不用顯示loading畫面,在用戶不知的情況完成加載。
?
五 資源文件group分組
資源文件可按照場景、彈框、通用來分組。
場景必須資源:preload、login、hall、game
大廳中彈框資源:option、rank、mission、skill、roleInfo
聲音資源:sound
通用資源:common
根據項目可自行細分。
資源組劃分的目的,就是將資源分類管理,方便在加載時使用。
在進入login場景時,只加載login資源組。打開設置彈框時,只加載option資源組。
?
?
?六?ResUtils,多json文件管理類
六、七代碼部分參考了Egret論壇某人的代碼,略微修改了一下。首先感謝這位仁兄分享自己的代碼,其次我忘了他叫啥了- -! 。。。
ResUtils.ts
/*** 資源加載工具類,* 支持多個resource.json文件加載*/ class ResUtils {private static instance:ResUtils;private _configs: Array<any>;private _onConfigComplete: Function;private _onConfigCompleteTarget: any;public static getInstance():ResUtils{if(this.instance == null){this.instance = new ResUtils();}return this.instance;}/*** 構造函數*/public constructor() {this._configs = new Array<any>();}/*** 添加一個配置文件* @param jsonPath resource.json路徑* @param filePath 訪問資源路徑*/public addConfig(jsonPath: string,filePath: string): void {this._configs.push([jsonPath,filePath]);}/*** 開始加載配置文件* @param $onConfigComplete 加載完成執行函數* @param $onConfigCompleteTarget 加載完成執行函數所屬對象*/public loadConfig($onConfigComplete: Function,$onConfigCompleteTarget: any): void {this._onConfigComplete = $onConfigComplete;this._onConfigCompleteTarget = $onConfigCompleteTarget;this.loadNextConfig();}/*** 加載*/private loadNextConfig(): void {//加載完成if(this._configs.length == 0) {this._onConfigComplete.call(this._onConfigCompleteTarget);this._onConfigComplete = null;this._onConfigCompleteTarget = null;return;}var arr: any = this._configs.shift();RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE,this.onConfigCompleteHandle,this);RES.loadConfig(arr[0],arr[1]);}/*** 加載完成* @param event*/private onConfigCompleteHandle(event: RES.ResourceEvent): void {RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE,this.onConfigCompleteHandle,this);this.loadNextConfig();} }?
//加載多個資源文件ResUtils.getInstance().addConfig("resource/test.json","resource/"); ResUtils.getInstance().addConfig("resource/test2.json","resource/"); ResUtils.getInstance().loadConfig(this.onConfigComplete, this);
?
?七 ResUtils,資源組加載管理類
?ResUtils.ts
/*** 資源加載* 支持單個或多個資源組加載*/ class ResUtils extends BaseClass {/**保存資源組名*/private groups: any;/*** 構造函數*/public constructor() {super();this.groups = {};RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.onResourceLoadProgress,this);RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR,this.onResourceLoadError,this);}/*** 加載資源組,靜默加載(無回調函數)* @group 資源組(支持字符串和數組)*/ public loadGroupQuiet(group){var groupName:string = this.combGroupName(group);RES.loadGroup(groupName);}/*** 加載資源組,帶加載完成回調* @group 資源組(支持字符串和數組)* @onComplete 加載完成回調* @thisObject 回調執行對象* @priority 優先級*/ public loadGroup(group, onComplete:Function, thisObject:any, priority:number = 1){var groupName:string = this.combGroupName(group);this.groups[groupName] = [onComplete,null,thisObject];RES.loadGroup(groupName);}/*** 加載資源組,帶加載進度* @group 資源組(支持字符串和數組)* @onComplete 加載完成回調* @onProgress 加載進度回調* @thisObject 回調執行對象*/public loadGroupWithPro(group ,onComplete: Function,onProgress: Function,thisObject: any): void {var groupName:string = this.combGroupName(group);this.groups[groupName] = [onComplete,onProgress,thisObject];RES.loadGroup(groupName);}/*** 組合資源組名。單個資源組直接返回。多個資源組則重新命名。* @group 新資源組名*/ private combGroupName(group){if(typeof(group) == "string"){return group;}else{var len = group.length;var groupName:string = "";for(var i=0;i<len;i++){groupName += group[i];}RES.createGroup(groupName,group,false); //是否覆蓋已經存在的同名資源組,默認 falsereturn groupName;}}/*** 資源組加載完成*/private onResourceLoadComplete(event: RES.ResourceEvent): void {var groupName: string = event.groupName;console.log("資源組加載完成:" + groupName);if(this.groups[groupName]) {var loadComplete: Function = this.groups[groupName][0];var loadCompleteTarget: any = this.groups[groupName][2];if(loadComplete != null) {loadComplete.call(loadCompleteTarget);}this.groups[groupName] = null;delete this.groups[groupName];}}/*** 資源組加載進度*/private onResourceLoadProgress(event: RES.ResourceEvent): void {var groupName: string = event.groupName;if(this.groups[groupName]) {var loadProgress: Function = this.groups[groupName][1];var loadProgressTarget: any = this.groups[groupName][2];if(loadProgress != null) {loadProgress.call(loadProgressTarget,event);}}}/*** 資源組加載失敗*/private onResourceLoadError(event: RES.ResourceEvent): void {console.log(event.groupName + "資源組有資源加載失敗");this.onResourceLoadComplete(event);} }
?
測試加載
var res:ResUtils = ResUtils.getInstance(); //res.loadGroupQuiet("login"); //res.loadGroup("login", ()=>{ console.log("login load complete")}, this); //res.loadGroupWithPro("login", // ()=>{console.log("login load complete")}, // (e:RES.ResourceEvent)=>{console.log("login progress",e.itemsLoaded,e.itemsTotal)},this); res.loadGroupQuiet(["preload","login"]);?
?八 開發中遇到的一點問題?
但是在egret wing2.5中,default.des.json改名后,就會使用不正常了。
找不到路徑下的資源。
?
?
解決以上問題,需要在 項目-項目屬性-資源 中添加配置文件。
?
轉載于:https://www.cnblogs.com/gamedaybyday/p/6079694.html
總結
以上是生活随笔為你收集整理的Egret资源管理解决方案的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2.apache模块mod_rpaf ,
- 下一篇: scikit_learn 官方文档翻译(