HTML5 游戏开发 之 资源加载篇(2)
四) 下载过程的管理
4.1) 如何管理成千上百的资源
在游戏开发的过程中,很有可能会有成千上百张图片。最直接的方式,是将这些图片编写在代码中,但是图片的名字很容易改变的,会造成大量的维护工作,甚至影响代码的打包和发布。我的同事Boris,在他的代码演示库中,给出了一个参考实现方式,如下。这种方式,可以保证,在需要修改或者调整资源名称或者路径的时候,不需要接触代码。
更完整的代码,可以参考GitHub上的源代码
4.2) 如何实现批处理的下载
再获得了资源列表之后,就要开始资源的下载。显然,需要这样的方法。
显然,也需要对每个img的load和error事件,进行计数。还请注意downloadAll函数有个参数叫做downloadCallback,在资源下载完成以后,通知此函数,进入游戏过程中。
4.3) 游戏中的不同关卡
游戏通常是分关卡的,完全没有必要在一开始就将游戏的所有资源下载到本地,毕竟不是每个玩家都会将游戏通关。为了按需下载,比较完备的资源加载器,应该可以对每个资源配上一个标签或者属性,可以标志它属于哪一关。每一关的开始,只下载和本关相关联的资源,在每一关结束的时候,在去下载下一关的资源。不仅减少用户的不必要的等待时间,还可以有效的减少服务器的压力。
5.资源加载器的具体实现
5.1 PreloadJS
官方网站:http://www.createjs.com/#!/PreloadJS/download
开源代码:https://github.com/CreateJS/PreloadJS/
专门用于资源下载的类库,非常好用,考虑的也非常全面,首先推荐的一款软件,尤其是读者不希望加载特别大的游戏引擎是,这款软件可以作为首选。
具体的例子可以参考:https://github.com/CreateJS/PreloadJS/tree/master/examples
(未完待续)
4.1) 如何管理成千上百的资源
在游戏开发的过程中,很有可能会有成千上百张图片。最直接的方式,是将这些图片编写在代码中,但是图片的名字很容易改变的,会造成大量的维护工作,甚至影响代码的打包和发布。我的同事Boris,在他的代码演示库中,给出了一个参考实现方式,如下。这种方式,可以保证,在需要修改或者调整资源名称或者路径的时候,不需要接触代码。
- {
- "assetRoot": "url/to/assets",
- "bundles": [
- {
- "name": "unique bundle name",
- "contents": [
- "relative/path/to/asset.jpg",
- "another/asset.mp3"
- ]
- },
- "autoDownload": true
- }
- var gal = new GameAssetLoader("http://path.to/gal.manifest");
- // Load the GAL. If manifest indicates autoDownload, this call will
- // start loading assets one by one.
- gal.init(function() {
- // Called when the library is initialized
- });
更完整的代码,可以参考GitHub上的源代码
4.2) 如何实现批处理的下载
再获得了资源列表之后,就要开始资源的下载。显然,需要这样的方法。
- AssetManager.prototype.downloadAll = function(downloadCallback) {
- for (var i = 0; i < this.downloadQueue.length; i++) {
- var path = this.downloadQueue[i];
- var img = new Image();
- var that = this;
- img.addEventListener("load", function() {
- // coming soon
- }, false);
- img.addEventListener("error", function() {
- // coming soon
- }, false);
- img.src = path;
- }
- }
- <pre>
- 下载的过程中,一般情况下都需要一个进度条,来显示完成的情况,所以必须对AssetManager进行计数。<strong><strong>
- </strong></strong>
-
- <pre lang="html">
- function AssetManager() {
- this.successCount = 0;
- this.errorCount = 0;
- this.downloadQueue = [];
- }
-
- AssetManager.prototype.isDone = function() {
- return (this.downloadQueue.length == this.successCount + this.errorCount);
- }
- AssetManager.prototype.getProcess = function() {
- return (this.successCount + this.errorCount)/this.downloadQueue.length;
- }
显然,也需要对每个img的load和error事件,进行计数。还请注意downloadAll函数有个参数叫做downloadCallback,在资源下载完成以后,通知此函数,进入游戏过程中。
- img.addEventListener("load", function() {
- that.successCount += 1;
- if (that.isDone()) {
- downloadCallback();
- }
- }, false);
- img.addEventListener("error", function() {
- that.errorCount += 1;
- if (that.isDone()) {
- downloadCallback();
- }
- }, false
4.3) 游戏中的不同关卡
游戏通常是分关卡的,完全没有必要在一开始就将游戏的所有资源下载到本地,毕竟不是每个玩家都会将游戏通关。为了按需下载,比较完备的资源加载器,应该可以对每个资源配上一个标签或者属性,可以标志它属于哪一关。每一关的开始,只下载和本关相关联的资源,在每一关结束的时候,在去下载下一关的资源。不仅减少用户的不必要的等待时间,还可以有效的减少服务器的压力。
5.资源加载器的具体实现
5.1 PreloadJS
官方网站:http://www.createjs.com/#!/PreloadJS/download
开源代码:https://github.com/CreateJS/PreloadJS/
专门用于资源下载的类库,非常好用,考虑的也非常全面,首先推荐的一款软件,尤其是读者不希望加载特别大的游戏引擎是,这款软件可以作为首选。
具体的例子可以参考:https://github.com/CreateJS/PreloadJS/tree/master/examples
(未完待续)
【HTML5 游戏开发 之 资源加载篇(2)】相关文章
5. 微软的HTML游戏开发资源 - Build new games
6. html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄
7. html5游戏开发-零基础开发RPG游戏-开源讲座(一)
8. html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现 ... ...
本文来源:https://www.51html5.com/a645.html
上一篇:CSS3的文字阴影—Text-Shadow
下一篇:详解微博发言框的@功能
﹝HTML5 游戏开发 之 资源加载篇(2)﹞相关内容
- 游戏开发技术的新革命!丰富多彩的HTML5游戏
- 零基础开发RPG游戏开源讲座(四)-游戏脚本化&地图跳转
- Web移动开发:前端开发学习资源集合
- HTML5游戏开发工具:GameMaker 8.X
- HTML5游戏开发工具:Make Games with Construct 2
- html5游戏开发引擎大全
- HTML5游戏开发 之 循环的控制(3)
- HTML5游戏开发 之 循环的控制(1)
- HTML5游戏开发 之 循环的控制(2)
- HTML5游戏开发工具推荐:IMPACT