HTML5游戲開發之資源加載篇(2)

四) 下載過程的管理

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. }
    
16. 下載的過程中，一般情況下都需要一個進度條，來顯示完成的情況，所以必須對AssetManager進行計數。
    
17. 
    
18. 
    
20. function AssetManager() {
    
21. this.successCount = 0;
    
22. this.errorCount = 0;
    
23. this.downloadQueue = [];
    
24. }
    
25. 
    
26. AssetManager.prototype.isDone = function() {
    
27. return (this.downloadQueue.length == this.successCount + this.errorCount);
    
28. }
    
29. AssetManager.prototype.getProcess = function() {
    
30. return (this.successCount + this.errorCount)/this.downloadQueue.length;
    
31. }

顯然，也需要對每個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

（未完待續）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com