全局预加载文件

1 .把文件放到对应的文件夹内
2 .default.res.json

1 .resource数组内加上需要添加的资源
"resources": [
        {
            "url": "assets/CheckBox/checkbox_select_disabled.png",
            "type": "image",
            "name": "checkbox_select_disabled_png"
        },
        {
            "url": "assets/CheckBox/checkbox_select_down.png",
            "type": "image",
            "name": "checkbox_select_down_png"
        },
]
2 .groups 里面添加一个name为preload的资源组
3 .key里面添加所有的下面resources的name。（只添加第一次首次必须的资源）

3 .main.ts里面的逻辑

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

2 .private async runGame() {
        await this.loadResource()
//等资源加载完，才开始创建游戏场景
        this.initConfig()
        this.createGameScene()
    }


3 .private async loadResource() {
        try {
            const loadingView = new LoadingUI();
//先添加一个loading ui
            this.stage.addChild(loadingView);
            await RES.loadConfig("resource/default.res.json", "resource/");
//添加所有的资源目录
            await this.loadTheme();
            await RES.loadGroup("preload", 0, loadingView);
//添加preload 组内的所有的资源，添加资源的时候显
示loadingView ui
//第二个参数是添加资源的优先级
            this.stage.removeChild(loadingView);
//资源加载之后，删除loadingView
        }
        catch (e) {
            console.error(e);
        }
    }

RES资源加载模块

1 .RES:Egret将资源加载的功能放置于”RES“这个命名控件下，同时”RES“也是一个可选的模块
2 .搭配ResDepot，在游戏开发时，开发者可以对游戏的所有资源进行分组，这样可以避免不必要的网络流量和过多的资源消耗
3 .resource：当前游戏的资源都可以放到这里

1 .name:表示资源的唯一短名标识符
2 .type:表示资源类型
3 .url:表示当前资源文件的路径

4 .groups:预加载资源组的配置，每项是一个资源组

1 .name：表示资源组的组名
2 .keys：表示这个组里面包含哪些资源，里面的逗号分隔的每一个字符串，都与resource下的资源name相对应。同一个资源可以存在多个资源组内

5 .RES.loadConfig通常应该放在游戏最开始的地方，并且只执行一次。
6 .

直接加载

1 .RES.getResByUrl("路径的全部路径")

1 .可以灵活配置，比如根据游戏情节需要，下一步载入的资源会不同，直接读取方式可以动态组合配置，其中列出当前需要的资源
2 .外部文件方式用于加载固定资源，直接读取方式用于加载变化资源
3 .

预加载

1 .预加载资源可以在游戏启动时，也可以是某个面板被打开或场景切换。
2 .RES事件

RES.addEventListener( RES.ResourceEvent.GROUP_COMPLETE, 
                      this.onResourceLoadComplete, this )
事件RES.ResourceEvent.GROUP_COMPLETE延迟加载组资源加载完成事件。

RES.addEventListener( RES.ResourceEvent.GROUP_PROGRESS, 
                      this.onResourceProgress, this ); 
事件RES.ResourceEvent.GROUP_PROGRESS延迟加载组资源加载进度事件，单个加载完成会触发此事件

RES.addEventListener( RES.ResourceEvent.GROUP_LOAD_ERROR, 
                      this.onResourceLoadErr, this ); 
RES.loadGroup( "preload" );
事件RES.ResourceEvent.GROUP_LOAD_ERROR延迟加载组资源加载失败事件

private onResourceProgress( event:RES.ResourceEvent ):void { 
    if( event.groupName=="preload" ) 
    { 
        this.loadingView.setProgress( event.itemsLoaded,
                                      event.itemsTotal ); 
    } 
}
//判断当前加载的资源组


private onResourceLoadErr( event:RES.ResourceEvent ):void { 
    RES.loadGroup( event.groupName ); 
}
//失败之后继续加载

在复杂的网络环境中，可能会出现多次加载失败，这时我们需要在一定的失败次数之后停止加载，因为网络可能已经失去连接，那么我们可以对加载失败次数进行计数。假设有一个成员countGroupError用来计数加载失败次数，其初始值为0，则处理函数修改为：

private onResourceLoadErr( event:RES.ResourceEvent ):void { 
    if( ++this.countGroupError < 3 ){ 
        RES.loadGroup( event.groupName ); 
    } 
    else 
    { 
        /// 弹出网络失去连接提示等 
    } 
}

对于多个资源组同时加载的情况，countGroupError可以使用一个以groupName为键的哈希数组来记录每个资源组的加载失败次数。

若同时启动多个资源组一起加载，比如在加载preload前，我们希望先加载一个更小的loading资源组，以提供显示preload组加载进度的素材，可以使用RES.loadGroup()的第2个参数priority，为loading组传入一个优先级更高的数字，来迫使loading组在preload前加载完成，代码如下：

RES.loadGroup("loading",1);  
RES.loadGroup("preload",0);

动态创建资源组

var keys: Array<string> = new Array<string>(); 
keys.push("bgImage2"); 
keys.push("bgImage3"); 
keys.push("bgImage4"); 
keys.push("bgImage5"); 
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, 
                     this.onbgloadComplete, this); 
RES.createGroup("bgload",keys);

读取资源文件

1 .同步 RES.getRes(name:string):any：只能获取一已经缓存过的资源，比如之前调用过的loadGroup()被预加载的资源
2 .异步 RES.getResAsync(name:string,compFunc:Function,thisObject:any):void :可以获取配置中含有的所有资源项，如果缓存中存在，直接调用回调函数，如果不存在，就启动网络加载文件并解析后回调
3 .通过url获取资源
RES.getResByUrl(url:string, compFunc:Function, thisObject:any,type:string=""):void :用于获取不在配置中的资源，通常不建议使用这个接口，至于那些不适合填写在配置中的资源，才会采用这种方式
4 .RES.getRes可直接获取资源文件，RES.getResAsync、RES.getResByUrl需要增加回调函数，并在回调函数中获取资源

资源的缓存机制

1 .default.res.json 中resource节点下配置的每个资源加载项，都在第一次加载成功后使用name作为key在内存缓存下来
2 .再次请求时，直接从内存缓存里面取，别的组再次加载这个资源的时候，也会直接从缓存里得到结果，不会重复发起加载请求
3 .

释放资源

1 .RES在第一次加载资源后，会将这个资源缓存下来，施放资源的方法为res.destoryRes。
2 .传入资源文件的name，就可以清理对应的缓存。传入资源组名，可以清理整个资源组里所有的资源对应的缓存，还可以传入url，销毁getResByUrl加载的资源
3 .由于目前js里没有弱引用字典，无法实现资源自动回收，所以需要手动销毁资源，ios中，资源会一直被占用而不会被施放，直到页面被关闭.所以控制包体大小非常重要
4 .内置文件类型解析器

1 .RES.ResourceItem.TYPE_BIN 解析为原始的二进制文件
2 .RES.ResoourceItemTYPE_IMAGE 解析为egret.Texture对象
3 .

二进制加载图片

1 .优势

2 .webP格式好像不支持：WebP 是今天在座各类图片格式中最年轻的一位，它于 2010 年被提出， 是 Google 专为 Web 开发的一种旨在加快图片加载速度的图片格式，它支持有损压缩和无损压缩。WebP 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身

3 .JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。两大电商网站对大图的处理，是 JPG 图片应用场景的最佳写照：打开淘宝首页，我们可以发现页面中最醒目、最庞大的图片，一定是以 .jpg 为后缀的

缺点：有损压缩

4 .png格式：前面我们提到，复杂的、色彩层次丰富的图片，用 PNG 来处理的话，成本会比较高，我们一般会交给 JPG 去存储。考虑到 PNG 在处理线条和颜色对比度方面的优势，我们主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等。此时我们再次把目光转向性能方面堪称业界楷模的淘宝首页，我们会发现它页面上的 Logo，无论大小，还真的都是 PNG 格式

5 .Base64:文本文件、依赖编码、小图标解决方案。Base64 并非一种图片格式，而是一种编码方式。Base64 和雪碧图一样，是作为小图标解决方案而存在的。在了解 Base64 之前，我们先来了解一下雪碧图。

6 .SVG 关键字：文本文件、体积小、不失真、兼容性好.SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。可缩放，不变行。SVG 是文本文件。我们既可以像写代码一样定义 SVG，把它写在 HTML 里、成为 DOM 的一部分，也可以把对图形的描述写入以 .svg 为后缀的独立文件（SVG 文件在使用上与普通图片文件无异）。这使得 SVG 文件可以被非常多的工具读取和修改，具有较强的灵活性

7 .这里最推荐的是利用 webpack 来进行 Base64 的编码——webpack 的 url-loader 非常聪明，它除了具备基本的 Base64 转码能力，还可以结合文件大小，帮我们判断图片是否有必要进行 Base64 编码。

除此之外，市面上免费的 Base64 编解码工具种类是非常多样化的，有很多网站都提供在线编解码的服务，大家选取自己认为顺手的工具就好