视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML5游戏开发之资源加载篇(2)
2020-11-27 15:16:18 责编:小采
文档


四) 下载过程的管理

4.1) 如何管理成千上百的资源

在游戏开发的过程中,很有可能会有成千上百张图片。最直接的方式,是将这些图片编写在代码中,但是图片的名字很容易改变的,会造成大量的维护工作,甚至影响代码的打包和发布。我的同事Boris,在他的代码演示库中,给出了一个参考实现方式,如下。这种方式,可以保证,在需要修改或者调整资源名称或者路径的时候,不需要接触代码。

  1. {
  2. "assetRoot": "url/to/assets",
  3. "bundles": [
  4. {
  5. "name": "unique bundle name",
  6. "contents": [
  7. "relative/path/to/asset.jpg",
  8. "another/asset.mp3"
  9. ]
  10. },
  11. "autoDownload": true
  12. }
  13. var gal = new GameAssetLoader("http://path.to/gal.manifest");
  14. // Load the GAL. If manifest indicates autoDownload, this call will
  15. // start loading assets one by one.
  16. gal.init(function() {
  17. // Called when the library is initialized
  18. });

更完整的代码,可以参考GitHub上的源代码

4.2) 如何实现批处理的下载

再获得了资源列表之后,就要开始资源的下载。显然,需要这样的方法。

  1. AssetManager.prototype.downloadAll = function(downloadCallback) {
  2. for (var i = 0; i < this.downloadQueue.length; i++) {
  3. var path = this.downloadQueue[i];
  4. var img = new Image();
  5. var that = this;
  6. img.addEventListener("load", function() {
  7. // coming soon
  8. }, false);
  9. img.addEventListener("error", function() {
  10. // coming soon
  11. }, false);
  12. img.src = path;
  13. }
  14. }

  15. 下载的过程中,一般情况下都需要一个进度条,来显示完成的情况,所以必须对AssetManager进行计数。



  16. function AssetManager() {
  17. this.successCount = 0;
  18. this.errorCount = 0;
  19. this.downloadQueue = [];
  20. }

  21. AssetManager.prototype.isDone = function() {
  22. return (this.downloadQueue.length == this.successCount + this.errorCount);
  23. }
  24. AssetManager.prototype.getProcess = function() {
  25. return (this.successCount + this.errorCount)/this.downloadQueue.length;
  26. }

显然,也需要对每个img的load和error事件,进行计数。还请注意downloadAll函数有个参数叫做downloadCallback,在资源下载完成以后,通知此函数,进入游戏过程中。

  1. img.addEventListener("load", function() {
  2. that.successCount += 1;
  3. if (that.isDone()) {
  4. downloadCallback();
  5. }
  6. }, false);
  7. img.addEventListener("error", function() {
  8. that.errorCount += 1;
  9. if (that.isDone()) {
  10. downloadCallback();
  11. }
  12. }, 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

(未完待续)

下载本文
显示全文
专题