Home > Article > Web Front-end > HTML5 游戏开发之资源加载篇(2)

HTML5 游戏开发之资源加载篇(2)

WBOYOriginal: 2016-05-17 09:08:461914browse

四) 下载过程的管理 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
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;
}
}
```
 
```
下载的过程中，一般情况下都需要一个进度条，来显示完成的情况，所以必须对AssetManager进行计数。 
```
 
```
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 （未完待续）

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript this 的一些学习总结Next article：一款带有发光动画的HTML5表单

See more

HTML5 游戏开发 之 资源加载篇(2)

Related articles

HTML5 游戏开发之资源加载篇(2)