HTML5游戏制作之路_03_egret的资源加载机制

/*

前一篇的链接：

使用的egret版本为2.5

*/

h5支持矢量图（目测），自带的那个例子可以自由缩放，可以自适应(这让我很爽)。在egret里面叫bitmap(位图)实际上这个名称并不规范我觉得，因为位图自由缩放会失真。

一.

我们先看下halloworld的资源方式：

在2.5版本中，在resource文件夹的default.res.json文件来定义，也就是通过json文件。

json学习的笔记：json学习笔记 很浅显的。

配置文件中的“resource”我们可以视为资源库，当前游戏使用到的资源都可以放到这里。

“resource”下每一项资源配置信息都包含三个属性：

• name：表示这个资源的唯一短名标识符。

• type：表示资源类型。

• url：表示当前资源文件的路径。

“groups”是预加载资源组的配置，每项是一个资源组。

• 每一个资源组须包含两个属性：

• name：表示资源组的组名

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

如果你有大量资源需要处理，编写配置文件，我们提供了可视化资源配置文件处理软件，可参考Res Depot

我们在groups中添加一个新组：

我们定义了一个组叫bitmap，这个组中有个图片是egretIcon，他对应着地址中的asset中的egret_icon.jpg。

接下来再代码中来调用这张图片，并加以显示：

新建一个ts文件(ts包含了js，是微软的js，是js的下一代标准)，然后把上一节的代码复制粘贴到这里：

日常开发游戏时，我们通常会在游戏中使用很多资源素材，例如图片，音频等。这些资源往往在运行时才被加载到内存中。而对于Egret而言，所有的资源全部存储在服务器端。当用户打开游戏时，Egret会将预先设定好的资源下载到用户本地计算机中，然后转载到内存，以便使用。

对于外部资源使用RES.ResourceLoader，注意ResourceLoader是命名空间是RES，不是egret，我们直接使用这个类的方法来加载资源。

若需要在初始化完成后再做一些处理，监听ResourceEvent.CONFIG_COMPLETE事件即可。

当然，载入配置也难保证完全不出差错，所以最好监听 ResourceEvent.CONFIG_LOAD_ERROR事件，并在处理函数做一些error log处理之类。

注意：RES.loadConfig()通常应写在整个游戏最开始初始化的地方，并且只执行一次。

下面给出这个类的全部代码：

/** * Created by 13641 on 2015/11/19. */class BitMap extends egret.DisplayObjectContainer{    //创建一个位图类型的变量logo,注意egret的命名空间在2.5版本中是小写，其他版本不知。    private logo:egret.Bitmap;    //    //入口方法    public constructor() {        super();        //指定方法        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.MainClass, this);    }    //自己的逻辑入口类    public MainClass():void{        //调用        this.loadResources();    }    /**     * 资源加载方法，只是加载，并不会显示     * 就像把豆子放进盒子里管理，我们想看到要从盒子里吧豆子拿出来     */    private loadResources():void{        //使用下面的方法来加载资源        //RES是资源管理的命名空间        //先添加了监听事件，当组资源载入完毕，会调用此类中的回调函数onRemoveFromStage        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onRemoveFromStage,this);        //载入整个项目中的资源描述，也就是一个json文件        //loadConfig函数做执行的动作即为初始化RES资源加载模块。该函数包含两个参数，        // 第一个参数是resource.json文件的完整路径，第二个参数是配置中每个资源项url相对路径的基址。        // 例如配置里的bgImage资源项填的url是assets/bg.jpg，加载时将会拼接为相对路径：resources/assets/bg.jpg。        RES.loadConfig("resource/default.res.json","resource/");//注意参数，后面开始多加了个s，编译没有报错        //加载json文件中的一个group        RES.loadGroup("bitmap");    }    /**     * 定义回调函数，资源加载完成后加载图片     * @param event :回调函数事件     */    private onRemoveFromStage(event:RES.ResourceEvent):void{        //注意：egret.Bitmap是一个类        this.logo = new egret.Bitmap();        //获取纹理资源，复制给logo        this.logo.texture = RES.getRes("egretIcon");        //吧位图添加到列表中加以显示，addChild，和cocos引擎很像吧~~        this.addChild(this.logo);    }}

记得更改index.html的配置，刷新下网页，效果如下：

成功。初次之外，还可以直接加载资源：

直接读取方式

直接读取方式，就是免去了加载配置文件的过程。直接将资源加载配置内容以参数方式给出。

资源相对路径的基址仍为resources/。则直接读取的代码：

class Main extends egret.DisplayObjectContainer {    public constructor() {        super();        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);    }    private onAddToStage(event:egret.Event) {        RES.getResByUrl('/resource/assets/bg.jpg',this.onComplete,this,RES.ResourceItem.TYPE_IMAGE);    }    private onComplete(event:any):void {        var img: egret.Texture = <egret.Texture>event;        var bitmap: egret.Bitmap = new egret.Bitmap(img);        this.addChild(bitmap);    }}

两种读取方式对比说明

很显然，直接读取的方式直截了当，一步到位，没必要建立单独的配置文件，也不用侦听CONFIG_COMPLETE事件。

并且这两种方式的结果是等效的。即直接读取方式RES.parseConfig执行完毕，相当于文件读取方式CONFIG_COMPLETE事件被调度时。此时资源加载配置已经读入RES模块，则可以立即载入配置中的资源组，或者动态创建配置中存在的资源组，进行实际的资源加载了。

直接读取方式的另一个优点就是，可以灵活配置，比如根据游戏情节需要，下一步载入的资源会不同。直接读取方式就可以动态组合配置，其中只列出当前需要的资源。

但是前一种很规范，具体用哪个看实际情况