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预加载界面时，此时会有短暂的黑屏。可将html背景色设置为白色或其他颜色，感觉比黑屏要好一些。

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/572994.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java 等待唤醒机制,Java线程等待唤醒机制

java 等待唤醒机制,Java线程等待唤醒机制

记录面试过程中被问到的几个需要手写代码的小案例1.请手写出线程的等待唤醒机制案例中两个线程&#xff1a;SyncSetThread设置学生信息&#xff0c;SyncGetThread用来获取学生信息&#xff0c;在Student实体中提供一个标记属性flag&#xff0c;记录当前是否有数据。等待唤醒机制…
阅读更多...
Xshell实现Windows上传文件到Linux主机

Xshell实现Windows上传文件到Linux主机

经常有这样的需求&#xff0c;我们在Windows下载的软件包&#xff0c;如何上传到远程Linux主机上&#xff1f;还有如何从Linux主机下载软件包到Windows下&#xff1b;之前我的做法现在看来好笨好繁琐&#xff0c;不过也达到了目的&#xff0c;笨人有本方法嘛&#xff1b; 我是怎…
阅读更多...
织梦自适应php源码,DEDE织梦PHP源码响应式建筑设计类网站织梦模板(自适应手机端)...

织梦自适应php源码,DEDE织梦PHP源码响应式建筑设计类网站织梦模板(自适应手机端)...

模板名称&#xff1a;响应式建筑设计类网站织梦模板(自适应移动端) 利于SEO优化模板详情&#xff1a;织梦最新内核开发的模板&#xff0c;该模板属于企业通用、HTML5响应式、建筑设计类企业使用&#xff0c;一款适用性很强的模板&#xff0c;基本可以适合各行业的企业网站&…
阅读更多...
mac本用WTG(Windows To Go)安装Win10到移动硬盘

mac本用WTG(Windows To Go)安装Win10到移动硬盘

准备工作&#xff1a; 一个空的 USB 3.0 移动硬盘&#xff08;在安装 WTG 时候会将这个硬盘清空重新并分区&#xff0c;注意备份好数据。USB 3.0 的优盘是不行的&#xff0c;即使安装成功&#xff0c;系统的运行速度会奇慢&#xff09; 原版Windows 10 安装镜像&#xff08;建议…
阅读更多...
js初步简单的编程代码

js初步简单的编程代码

简单图片切换编码demo图片地址自行替换 简单图片切换编码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml" …
阅读更多...
安卓文本编辑器php cpp,开源的Android富文本编辑器

安卓文本编辑器php cpp,开源的Android富文本编辑器

RichEditor基于原生EditTextspan实现的Android富文本编辑器github地址&#xff1a;https://github.com/yuruiyin/RichEditor组件描述该组件是基于原生EditTextspan的方式实现的&#xff0c;旨在提供一个功能齐全且使用方便的Android富文本编辑器。主要支持了加粗斜体等行内样式…
阅读更多...
python gif 透明,Python3+试点批量处理简单的GIF到PNG并透明地去除背景色,python3Pillow,gif,转成,png,透明化,去掉...

python gif 透明,Python3+试点批量处理简单的GIF到PNG并透明地去除背景色,python3Pillow,gif,转成,png,透明化,去掉...

1. 安装Pillow, 只用这个应该也可以&#xff0c;2. 安装 cImage下载后解压&#xff0c;拷贝image.py到你python安装目录的 Lib\site-packages 中。from PIL import Imageimport osimport imagedef get_imlist(path):"""返回目录中所有gif图像的文件名列表图像的…
阅读更多...
matlab求半衰期,如何使用GLD和GDX价差来估计均值回归的半衰期

matlab求半衰期,如何使用GLD和GDX价差来估计均值回归的半衰期

计算均值回归时间序列的半衰期我们可以通过例中GLD和GDX的均值回归差价来计算均值回归半衰期。MATLAB代码可以从epchan. com/book/example? _ 5. m获得。(这个程序的第一部分与example7 2. m.相同。)%在此播入example7_2. m%Insert example7 2. m in the beginning hereprevzb…
阅读更多...
框架错误汇总

框架错误汇总

1.struts标签&#xff0c;在body中输入代码发现值栈不存在&#xff0c; 即<s:debug></s:debug>没有起作用 1 <body>2 3 4 测试url标签<br>5 <s:url value"index.jsp" var"surl"></s:url><br>6 <s:url value&…
阅读更多...
初次进入oracle数据库,Oracle数据库的初次使用

初次进入oracle数据库,Oracle数据库的初次使用

oracle数据库的初次使用&#xff1a;oracle自带了用户 system /system管理员用户 scott/tiger用户初次使用&#xff1a;创建表空间(此处为使用默认的用户scott/tiger)在控制台&#xff1a;1.使用system/system用户登录语句&#xff1a;sqlplus system/system2.赋予用户权限&…
阅读更多...
oracle+循环插入sql,SQL server，Oracle循环插入百万数据

oracle+循环插入sql,SQL server，Oracle循环插入百万数据

SQL server&#xff0c;Oracle循环插入百万数据SQL server&#xff0c;Oracle循环插入百万数据压测时常需要往数据库插入大量数据&#xff0c;下面是我往两个数据库插入数据时用的脚本declare maxSum int,lid nvarchar(64), -- lid为表idcid int,userid nvarchar(64),oper_time…
阅读更多...
jquery 通过submit()方法 提交表单示例

jquery 通过submit()方法 提交表单示例

jquery 通过submit()方法 提交表单示例&#xff1a; 本示例&#xff1a;以用户注册作为例子。使用jquery中的submit()方法实现表单提交。 注&#xff1a;本示例仅提供了对表单的验证&#xff0c;本例只用选用了三个字段作为测试。 用户点击提交按钮时&#xff0c;触发点击事件&…
阅读更多...
php background-image,css background-image属性怎么用

php background-image,css background-image属性怎么用

css background-image属性为元素设置背景图像&#xff0c;语法为&#xff1a;background-image:url(图片路径)。设置的背景图像会占据元素的全部尺寸&#xff0c;包括内边距和边框&#xff0c;但不包括外边距。css background-image属性怎么用&#xff1f;作用&#xff1a;为元…
阅读更多...
webstorm

webstorm

问题描述&#xff1a;webstorm打开文件夹&#xff0c;文件夹内的文件不能全部显示&#xff0c;如图 原因&#xff1a;配置文件xml出错 解决方法&#xff1a;删除文件夹内的idea文件&#xff0c;再用webstrom重新打开就行╮(╯▽╰)╭转载于:https://www.cnblogs.com/chenluomen…
阅读更多...
linux文件句柄数满,linux文件句柄数超出系统限制怎么办？

linux文件句柄数满,linux文件句柄数超出系统限制怎么办？

1、问题阐述&#xff1a;too many open files&#xff1a;顾名思义即打开过多文件数。不过这里的files不单是文件的意思&#xff0c;也包括打开的通讯链接(比如socket)&#xff0c;正在监听的端口等等&#xff0c;所以有时候也可以叫做句柄(handle)&#xff0c;这个错误通常也可…
阅读更多...
linux 内核编译不能打字,linux系统升级后，手动编译的kernel无法启动问题

linux 内核编译不能打字,linux系统升级后，手动编译的kernel无法启动问题

linux系统升级后&#xff0c;手动编译的kernel无法启动问题linux系统升级后&#xff0c;手动编译的kernel无法启动问题做开发相关&#xff0c;需要编译3.18的kernel&#xff0c;x86_64的&#xff0c;但是我的deepin升级v20之后&#xff0c;编译的kernel就无法启动了&#xff0c…
阅读更多...
arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）

arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）

前言 关于本篇功能实现用到的 api 涉及类看不懂的&#xff0c;请参照 esri 官网的 arcgis api 3.x for js&#xff1a;esri 官网 api&#xff0c;里面详细的介绍 arcgis api 3.x 各个类的介绍&#xff0c;还有就是在线例子&#xff1a;esri 官网在线例子&#xff0c;这个也是学…
阅读更多...
SVN版本管理trunk及branch相关merge操作

SVN版本管理trunk及branch相关merge操作

先说说什么是branch。按照Subversion的说法&#xff0c;一个branch是某个development line&#xff08;通常是主线也即trunk&#xff09;的一个拷贝&#xff0c;见下图&#xff1a; branch存在的意义在于&#xff0c;在不干扰trunk的情况下&#xff0c;和trunk并行开发&#xf…
阅读更多...
线程之间通信 等待（wait）和通知（notify）

线程之间通信 等待（wait）和通知（notify）

线程通信概念&#xff1a; 线程是操作系统中独立的个体&#xff0c;但这些个体如果不经过特殊的处理就不能成为一个整体&#xff0c;线程之间的通信就成为整体的必用方式之一。当线程存在通信指挥&#xff0c;系统间的交互性会更强大&#xff0c;在提高CPU利用率的同时还会对线…
阅读更多...
女生适合linux运维吗,女生适不适合做Linux运维工程师进入IT行业?

女生适合linux运维吗,女生适不适合做Linux运维工程师进入IT行业?

很多人对于女生做Linux运维工程师进入IT还有都存在质疑。因为大多数人认为女生不适合IT行业&#xff0c;IT is a men’sworld&#xff0c;女生学IT是件匪夷所思的事情。在传统的思维当中&#xff0c;女生只适合从事像教师、会计、公务员等稳定的职业。然而&#xff0c;这一莫名…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023