关闭

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

标签: html5游戏制作egret
2897人阅读 评论(0) 收藏 举报
分类:

/*

前一篇的链接:

使用的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模块,则可以立即载入配置中的资源组,或者动态创建配置中存在的资源组,进行实际的资源加载了。

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:36487次
    • 积分:1032
    • 等级:
    • 排名:千里之外
    • 原创:67篇
    • 转载:8篇
    • 译文:0篇
    • 评论:9条
    最新评论