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

原创 2015年11月19日 01:39:53

/*

前一篇的链接:

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

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Egret 性能优化总结

## 来自官方的优化建议详见:http://edn.egret.com/cn/article/index/id/287 少使用Alpha混合。 显式停止计时器,让它们准备好进行垃圾回收。 使用事件侦听...

egret了解学习之资源加载

前戏:一个游戏的过程,首先是资源的加载了,图片声音什么的。加载好之后就进入了第一个场景,也就是从入口函数main.ts的createGameScene进去的。当然第一个场景可能也会有好几个页面,那么反...
  • vipzjh
  • vipzjh
  • 2017年05月10日 08:46
  • 774

解决egret跨域问题

服务器设置header:“Access-Control-Allow-Origin:* ”
  • wkyb608
  • wkyb608
  • 2015年07月05日 13:38
  • 3162

解决前端Html5和Egret跨域请求Http数据的例子

转载自:http://blog.csdn.net/sujun10 作者:弃天笑 一、服务端修改Header 最主要是服务端支持服,返回的时候必须增加一个Header AddHeade...

ViewPager无限轮播,加载网络数据,ImageLoader加载图片并缓存到SD卡上

ViewPager无限轮播,加载网络数据,ImageLoader加载图片并缓存到SD卡上 原创 2017年08月22日 16:27:57   首先要在清单文件里添加网络权限      引入...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

前端解决跨域问题的8种方案(最新最全)

原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 ...
  • Joyhen
  • Joyhen
  • 2014年03月20日 16:52
  • 172013

解决前端Html5和Egret跨域请求Http数据的例子

最近在做平台的接入,需要做一些像其他web服务器请求相关数据的功能。那么就遇到了一个跨域请求网络数据的问题了。这里记录一下相关的解决方案。一、服务端修改Header 最主要是服务端支持服,返回的时候必...
  • sujun10
  • sujun10
  • 2017年06月08日 20:22
  • 4553

【Egret】 2D 使用中的一些疑难解决技巧!

1.问题:声音在ios上无法播放 解决方法:①首先需要预加载一个声音 ②然后目前只有点击之后才能播放声音,不能默认播放 2.问题:滚动条问题 ...
  • arvin0
  • arvin0
  • 2016年03月23日 10:55
  • 3548

小程序已死?我们拭目以待吧

微信小程序于1于9日正式上线,上线的时候我写了一篇文章《微信小程序刷爆朋友圈的秘密》,当然那几天也是吵得最热闹的几天。从我的文章中,我对小程序是看好的。当然那几天各路媒体也都悉数发表各种新闻评论,一时...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5游戏制作之路_03_egret的资源加载机制
举报原因:
原因补充:

(最多只允许输入30个字)