H5手游页游的资源版本管理(带Egret例子)

12 篇文章 0 订阅
10 篇文章 7 订阅

Html5网络游戏和网页游戏,是属于打开浏览器就可以直接玩的,而且是边玩边下载的游戏。
由于每个版本更新,只是更新一小部分资源,如果每次进行版本更新都导致用户重新加载全部游戏资源,那么会导致用户消耗的流量以及不能快速进入游戏,严重影响体验。所以需要对网络资源加载这一块做深入的分析研究,拿出一个资源管理方案。

一般浏览器都会有缓存url对应的中资源,只有当url改变的时候才会进行重新加载,根据这个特性,我们可以详细制定一套资源管理方案。

本文相关信息

  1. 完整的资源管理方案和分析
  2. JavaScript/TypeScript/Egret语言
  3. EgretWing开发工具
  4. 提供完整的Egret资源管理例子,点击下载

一、几种资源版本控制方式

1.随机方式

每次加载资源的时候,后面加个随机参数,确保每次都是获取到最新的服务器资源,这种简单而粗暴,但是一般是在内网调试以及个别配置文件才使用这种方式。例如加载资源版本配置文件本身的时候:

RES.getResByUrl("resource/version.txt?v=" + Math.random(),this.onVersionTxt,this);

2.总版本号控制

每次都获取最新资源,真是太浪费了,所以根据特性,出个根据版本号,也就是说每次发版本的时候,定制了一个版本,比如采用日期:20170731,统一配置在config.json配置文件。

config.json
{
    "debug": true,
    "showLog": -1,
    "version": "20170731"
}

在游戏中实际使用代码

url = url + "?v=10" + config.version; //输出结果:url = url + "?v=20170710";
RES.getResByUrl(url, this.onSeverList, this);

这种方式可以通过修改配置文件来控制文件版本号.也可以增加多个版本号来控制不同的资源,这样控制版本号的粒度会更细,更加优化网络加载。

"uiVersion": "20170710",
"roleVersion": "20170713"

虽然按照模块分了,但是事实上,每次游戏发布之后,并不会更新所有的美术资源或者某个模块资源其实只更新了几个文件,所以这样也是会造成网络流量的浪费。

3.每个文件定制版本号

为了得到更好的网络性能,只有把粒度做得更细才行,所以会有一种为每个网络文件定制一个版本号的机制了。一般可以采用文件生成日期时间或者采用svn的版本号,这个可以根据自己项目的具体情况,各有优劣。

二、版本号获取生成方式

  1. 采用文件生成日期时间
  2. svn的版本号

三、版本号保存规则

通过制定不同的版本保本规则,可以使得记录版本号的文件尽量小,同时使用也比较方便。

1.直接记录每个文件

这种其实也是简单粗暴,直接为每个文件生成对应的时间或者svn版本号,最终生成一个大文件。这个做法就是文件稍微有点大,因为要记录每个文件,后面会有优化技巧介绍。

// url路径 + 时间日期版本号
resource/default.res.json,2017813;
resource/assets/bg.jpg,2017814;
resource/assets/egret_icon.png,2017815;
resource/config/description.json,20170816

在游戏中,则把url和日期进行对应存起来就可以了,通过url找到对应的版本号,然后组合成新的url。这样可以随时控制每个资源的版本号了。

url = resource/default.res.json?v=2017813;
url = resource/assets/bg.jpg?v=2017814;

2.根据资源类型(或者文件夹名字)保存

游戏中的资源会分成不同的类型,放在不同的文件夹,那么可以根据这个特点来保存.

//模块名字 + 版本号
mornui,2017813;
config,2017814;
scenes,2017815;

这里写图片描述

3.自定义二进制格式

采用自定义二进制,可以做得更加细化了。比如可以把同个模块下的路径只记录一次,然后根据顺序和规则来只记录模块下面的单个文件。大概的结构顺序可以是这样:

//模块
mornui
//模块里的一个小包
bag
//小包的详细文件
bag.json
bag.png
=============
bless
bless.json
bless.png

甚至还可以把相同的名字给保存起来等等,可以自由根据自己想要的来进行组合。

4.优化版本号文件体积技巧

可以记录最多文件的版本号,只要是这个版本号的都不记录,游戏中url没有对应版本号,都自动使用这个默认版本号。比如之前介绍的第一种文件记录方式可以这样修改:

// url路径 + 时间日期版本号
2017815;
resource/assets/egret_icon.png,2017815;
resource/config/description.json,20170816

其中

resource/default.res.json和resource/assets/bg.jpg

没有了,那么在游戏中使用的时候,当在版本控制容器找不到对应的版本号的时候,就直接那2017815作为版本号,实际url变成这样

url = resource/default.res.json?v=2017815;
url = resource/assets/bg.jpg?v=2017815;

如果资源数量庞大的话,会打打减小版本配置文件的大小(比如上1w条资源的时候)。

四、Egret的资源版本使用例子解析

我们来通过一个完整可运行的Egret例子来解析从加载版本配置文件到游戏中实际处理的过程。
这里写图片描述

1.用Egret创建game的项目(带有相关的资源)

2.加载版本文件

版本控制文件的名字为version.txt的文本,游戏中加载

RES.getResByUrl("resource/version.txt?v=" + 
Math.random(),this.onVersionTxt,this,RES.ResourceItem.TYPE_TEXT);

onVersionTxt中解析并且存放

private onVersionTxt(version:string):void
{
    //解析版本数据,然后放到egret自带的版本控制类里面
    console.log("version string:" + version);
    var urlObj:Object = {};
    //切割出每一条资源
    var arys:string[] = version.split(";");
    var len:number = arys.length;
    //第一个是默认版本好2,不用处理
    for(var i:number = 1; i < len; i++)
    {
        //分析出url和版本号
        var temp:string[] = arys[i].split(",");
        urlObj[temp[0]] = temp[1];
    }
    RES.registerVersionController(new EgretVersion(arys[0],urlObj));
    //初始化Resource资源加载库
    //initiate Resource loading library
    RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
    RES.loadConfig("resource/default.res.json", "resource/");
}

EgretVersion.ts是用来控制url的版本控制文件的,egret提供了基类。

class EgretVersion extends RES.VersionController
{
    /** key是url,value是版本号 **/
    private urlObj:Object;
    /** 默认版本号 */
    private defaultVersion:string;

    constructor(defaultVersion:string,urlObj:Object)
    {
        super();
        this.defaultVersion = defaultVersion;
        this.urlObj = urlObj;
    }
    getVirtualUrl(url:string):string
    {
        //把程序里使用到的url增加相应的版本号
        var version:string = this.urlObj[url];
        if(version)
        {
            url = url + "?v=" + version;
        }
        else
        {
            //使用默认版本号
            url = url + "?v=" + this.defaultVersion;
        }
        console.log("带有版本号的url:" + url);
        return url;
    }
}

其他的代码都是Egret自动生成了,例子就是这么简单,主要是解析和组合类。
最终编译运行结果:
这里写图片描述
输出日志

带有版本号的url:resource/default.res.json?v=2017813
带有版本号的url:resource/assets/bg.jpg?v=2017814
带有版本号的url:resource/assets/egret_icon.png?v=2017815
带有版本号的url:resource/config/description.json?v=20170816

五、实际项目使用的配置和大小

实际项目中有1w条左右各资源,所以光记录文本文件(采用了默认版本号了)就有几十k(assets.bin),zip压缩之后有4.3k(assets.cfg)。
这里写图片描述
当然,这个还是会进一步游戏的,最终准备采用自定义二进制文件来保存,争取到达性能最优化。

RPGViewer图片资源提取工具 作者:Van 说明: 下载RPGViewer之后,不要忘记同时下载RPGViewerSupportFile。解压RPGViewer后,将RPGViewerSupportFile拷贝到解压之后的目录,然后选择“解压到当前文件夹”即可。 有需要的朋友可以为研究之用 郑重声明 本程序提供的导入导出功能仅供个人学习研究之用,图像之版权属相关公司所有,请勿将提取的图片或导入修改后的图象文件用于其它用途 功能简介 一、浏览 执行文件菜单的打开。如果你是第一次查看这个游戏,RPGViewer会弹出对话框让你选择游戏的路径,一般选择游戏主程序所在目录即可 之后就可以用浏览菜单或者浏览工具栏查看游戏的图片了。 如果遇到不支持的图片格式或者读取图片时发生错误,RPGViewer会在状态栏显示相关的出错信息。 二、搜索 可以根据文件名查找图片。支持查找的游戏列表详见附录1 搜索支持模糊查找、区分大小写和正则表达式,正则表达式的具体定义参见附录3 三、导出(支持bmp、jpg、png和mng格式,mng格式的说明参见附录2。另外支持导出为三国群英传的SHP格式) RPGViewer提供三种导出功能: 1、当前帧 导出当前显示的图片 2、当前图片 当图片仅有一帧时,和导出“当前帧”相同。否则将导出该图片的所有帧。 3、所有图片 导出所有图片(!注意:如果图片有多帧,那么此功能会导出所有帧!) 注:有些导出图片的高度是负的,可能在某些图片浏览器不能正常显示。建议使用Irfanview或PhotoShop进行查看和编辑 全部导出功能会将所有的图片导出到目标文件夹,文件名依次为1-1.bmp,2-1.bmp... 四、导入(支持bmp、gif、jpg和png格式) 你可以导入bmp或者png(支持透明色和alpha通道)格式的图片(注:“导入”操作只是引入了一个替换的标记,此时并未进行实际的替换) 如果想取消对当前图片的替换可以使用“导入”菜单的“还原” 全部图像都替换完之后,执行“导入”菜单的“保存”,所作的替换就会生效 五、压缩包操作 可以提取游戏数据包的所有文件,并支持部分游戏的文件替换。支持解包和替换的游戏列表详见附录1 附录1: 浏览和导出支持以下游戏: 大宇:轩辕剑系列(2代、3代、4代以及它们的外传)、轩辕伏魔录,仙剑1(DOS&WIN;版)、新仙剑、仙剑2、仙剑3和仙剑3外传 智冠:金庸群侠传(光盘&硬盘版)、武林群侠传、三国群侠传、天龙八部(部分) 奥汀:三国群英传1~6、幻世录1~2 宇峻:绝代双骄1~3、幻想三国志1、2 弘煜:风色幻想1、SP&2、3、4 光谱:富甲天下3、富甲天下4 汉堂:阿玛迪斯战记、天地劫-神魔至尊传、天地劫序传-幽城幻剑录、天地劫外章-寰神结 新瑞狮:吕布与貂蝉、反三国志、天河传说 目标:秦殇、秦殇前传-复活 金山:新剑侠情缘、月影传说、剑侠情缘2、地雷战、决战朝鲜 KOEI:三国志1~5(头像文件)、三国志6~11、SanInternet、SanBattleField、英杰传系列、 太阁4~5,信长之野望3Win版、信长之野望6(头像文件)、信长之野望7~12、 真三国无双3、 水浒传天命之誓&天导108星、成吉思汗4、王国兴亡录 TGL:神奇传说——远征奥德赛1&2、神奇传说1~3、战国美少女1&2 Falcom:伊苏1、伊苏2(部分图片调色板不对)、英雄传说6(部分)、失落的羽翼、圣界的奇迹、绯苍幻想曲 ego:圣魔大战、新圣魔大战、艾伦希亚战记、红泪、苍月、魔法少年、永远的羁绊、我的美丽天使、秘境传说、乱世奇缘 KEY:Kanon、AIR KID:梦之翼、Never7、Ever17、秋之回忆1~3、秋之回忆-想君 ELF:龙骑士4、同级生2(DOS&Win;版)、下级生 Illusion:欲望的血液4、尾行2、尾行3、BattleRaper2、人工少女2、波动少女1.5、波动少女2 SoftMax:西风狂诗曲 NWC:英雄无敌2、英雄无敌3 EIDOS:盟军敢死队-使命召唤&深入敌后 UBI:英雄无敌5测试版 其它:郑问之三国志 字体:三国志2~5、San9&10;(存为png格式可以保留alpha通道)、MagicWin 导入支持以下游戏: 三1~5头像,三6~10,三11的头像,英杰传系列,大航海4,信长7、8、11、12,成吉思汗4,王国兴亡录 地雷战 三国群英传1~3的PAK文件(仅限于其的SHP格式)(注:未经严格测试,替换前请一定要备份,以避免不必要的损失) 部分支持信长12和三国志11的bin文件的导入 注: 曹操传的meff不支持导入 查找和解包支持以下游戏: 大宇:CPK(仙剑3和仙剑3外传) 奥汀:PAK(三国群英传1~3、幻世录1、幻世录2)、PCK(三国群英传4&5) 宇峻:*Combat.dat、*Man.dat、*Role.dat(幻想三国志1、2) 弘煜:BMP、FACE、MANBMP、MAPBMP(风色幻想1&SP;)、PAK(风色幻想2)、JBF(风色幻想3&4) 汉堂:DAT(幽城幻剑录、寰神结) TGL:PAC(神奇传说3、远征奥德赛1&2)、PAK(战国美少女2) Falcom:YS(伊苏1)、ED6_DT??.dat(英雄传说6) ego:DAT、TPF(乱世奇缘) KID:DAT ELF:ARC illusion:PP SoftMax:ZMK(西风狂诗曲) NWC:AGG(英雄无敌2)、LOD(英雄无敌3) EIDOS:DIR(盟军敢死队) UBI:PAK(英雄无敌5测试版) 替换支持以下游戏: 奥汀:PAK(三国群英传1~3) 附录2: mng导出格式简介 此格式对应多帧的PNG图片,效果类似于GIF动画,但支持RGB+alpha通道并且无损压缩。可以使用IrfanView、XnView查看,GIMP编辑(相关支持软件可以去http://www.libpng.com/pub/mng/mngapps.html查看) MNG IE插件:http://entropymine.com/jason/mng4ie/(可以到http://free.ys168.com/?pigspy下载,里面提供了注册文件reg.dat和卸载文件unreg.dat) 装了该插件之后可以直接用IE打开mng文件 注1、此导出格式仅适用于生成动画(具体包括:轩辕剑的tsw图片,绝代双骄2&3、幻想三国志1&2的战斗和法术图片,金山的ASF.PAK,西风狂诗曲的OBC文件) 注2、如果用这种格式保存帧数太多、图像范围太大的图片(比如全屏幕的法术),可能需要花较多的时间生成,同时生成的图片也可能会比较大) 注3、你可以使用相关工具进一步减少mng的尺寸(比如使用delta-PNG方式压缩) 注4、当提取当前帧时,会自动保存为png格式 附录3: 正则表达式 具体参见http://msdn2.microsoft.com/en-us/library/k3zs4axe(en-us,VS.80).aspx的“Regular Expression Syntax” 一些正则表达式的例子: 严格匹配face:^face$ 模糊查找face:face 查找mFace???.shp的文件:mFace...\.shp$
Egret H5 是一种基于HTML5游戏开发引擎,其渲染流程可以简单描述为以下几个步骤: 1. 准备阶段:在渲染之前,需要完成游戏资源的加载和初始化工作。这包括图片、声音、动画和其他资源的加载,以及游戏场景和界面的初始化设置。 2. 创建场景:Egret H5通过场景与层的概念来管理游戏的元素。在创建场景时,会设置游戏画布的大小和位置,同时创建不同的层,用于容纳游戏的不同元素。 3. 加载场景元素:在此阶段,需要加载游戏的场景元素,如角色、背景、道具等。这些元素可以是静态的图片,也可以是可交互的动画。加载完成后,这些元素将被添加到对应的场景层。 4. 渲染循环:Egret H5通过渲染循环不断更新画面,实现动态效果。渲染循环是一个不断循环的过程,每一帧都会执行各种更新和渲染操作。 5. 更新元素状态:在每个渲染循环,需要更新游戏各个元素的状态,包括位置、旋转、缩放等。这些更新会基于各种因素,如用户输入、游戏逻辑等。 6. 碰撞检测:在游戏,需要检测元素之间的碰撞,以便触发相应的事件。Egret H5通过检测元素的位置和形状来实现碰撞检测,一旦发生碰撞,会触发相应的逻辑处理。 7. 渲染画面:在每一帧更新之后,需要将更新后的画面渲染到屏幕上。Egret H5通过调用浏览器的Canvas或WebGL API来实现画面的渲染工作。 总的来说,Egret H5的渲染流程包括准备阶段、场景创建、元素加载、渲染循环、更新状态、碰撞检测和画面渲染。通过这些流程,Egret H5能够实现丰富多样的交互效果,让开发者能够灵活地创建优秀的HTML5游戏
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值