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

WBOY
Lepaskan: 2016-05-17 09:08:46
asal
1938 orang telah melayarinya

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

  1. {<br>
  2.   "assetRoot": "url/to/assets",<br>
  3.   "bundles": [<br>
  4.   {<br>
  5.         "name": "unique bundle name",<br>
  6.         "contents": [<br>
  7.         "relative/path/to/asset.jpg",<br>
  8.         "another/asset.mp3"<br>
  9.           ]<br>
  10.   },<br>
  11.   "autoDownload": true<br>
  12. }<br>
  13. var gal = new GameAssetLoader("http://path.to/gal.manifest");<br>
  14. // Load the GAL. If manifest indicates autoDownload, this call will<br>
  15. // start loading assets one by one.<br>
  16. gal.init(function() {<br>
  17. // Called when the library is initialized<br>
  18. });
复制代码
<br>        更完整的代码,可以参考GitHub上的源代码<br> <br>        4.2) 如何实现批处理的下载<br> <br>        再获得了资源列表之后,就要开始资源的下载。显然,需要这样的方法。<br> <br>
  1. AssetManager.prototype.downloadAll = function(downloadCallback) {<br>
  2.   for (var i = 0; i
  3.   var path = this.downloadQueue[i];<br>
  4.   var img = new Image();<br>
  5.   var that = this;<br>
  6.   img.addEventListener("load", function() {<br>
  7.         // coming soon<br>
  8.   }, false);<br>
  9.   img.addEventListener("error", function() {<br>
  10.   // coming soon<br>
  11.   }, false);<br>
  12.   img.src = path;<br>
  13. }<br>
  14. }<br>
  15. <br>
    
    Salin selepas log masuk
  16. 下载的过程中,一般情况下都需要一个进度条,来显示完成的情况,所以必须对AssetManager进行计数。<br>
  17. <br>
  18. <br>
  19. <br>
    
    Salin selepas log masuk
  20. function AssetManager() {<br>
  21.   this.successCount = 0;<br>
  22.   this.errorCount = 0;<br>
  23.   this.downloadQueue = [];<br>
  24. }<br>
  25. <br>
  26. AssetManager.prototype.isDone = function() {<br>
  27.   return (this.downloadQueue.length == this.successCount + this.errorCount);<br>
  28. }<br>
  29. AssetManager.prototype.getProcess = function() {<br>
  30.   return (this.successCount + this.errorCount)/this.downloadQueue.length;<br>
  31. }
复制代码
<br>        显然,也需要对每个img的load和error事件,进行计数。还请注意downloadAll函数有个参数叫做downloadCallback,在资源下载完成以后,通知此函数,进入游戏过程中。<br> <br>
  1. img.addEventListener("load", function() {<br>
  2.   that.successCount += 1;<br>
  3.   if (that.isDone()) {<br>
  4.         downloadCallback();<br>
  5.   }<br>
  6. }, false);<br>
  7. img.addEventListener("error", function() {<br>
  8.   that.errorCount += 1;<br>
  9.   if (that.isDone()) {<br>
  10.         downloadCallback();<br>
  11.   }<br>
  12. }, false
复制代码
<br>        4.3) 游戏中的不同关卡<br> <br>        游戏通常是分关卡的,完全没有必要在一开始就将游戏的所有资源下载到本地,毕竟不是每个玩家都会将游戏通关。为了按需下载,比较完备的资源加载器,应该可以对每个资源配上一个标签或者属性,可以标志它属于哪一关。每一关的开始,只下载和本关相关联的资源,在每一关结束的时候,在去下载下一关的资源。不仅减少用户的不必要的等待时间,还可以有效的减少服务器的压力。<br> <br>        5.资源加载器的具体实现<br> <br>        5.1 PreloadJS<br> <br>        官方网站:http://www.createjs.com/#!/PreloadJS/download<br> <br>        开源代码:https://github.com/CreateJS/PreloadJS/<br> <br>        专门用于资源下载的类库,非常好用,考虑的也非常全面,首先推荐的一款软件,尤其是读者不希望加载特别大的游戏引擎是,这款软件可以作为首选。<br> <br>        具体的例子可以参考:https://github.com/CreateJS/PreloadJS/tree/master/examples<br> <br> (未完待续)<br> <br>
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!