合并loader加载过程

libs/loader.js

@@ -25,115 +25,199 @@ loader.prototype._setStartLoadTipText = function (text) {
 }
 
 loader.prototype._load = function (callback) {
-    this._loadIcons();
+    if (main.useCompress) {
-    this._loadAnimates();
+        this._load_async(callback);
-    this._loadMusic();
+    } else {
+        this._load_sync(callback);
+    }
+}
 
-    core.loader._loadMaterialImages(function () {
+loader.prototype._load_sync = function (callback) {
-        core.loader._loadExtraImages(function () {
+    this._loadAnimates_sync();
-            core.loader._loadAutotiles(function () {
+    this._loadMusic_sync();
-                core.loader._loadTilesets(callback);
+    core.loader._loadMaterials_sync(function () {
+        core.loader._loadExtraImages_sync(function () {
+            core.loader._loadAutotiles_sync(function () {
+                core.loader._loadTilesets_sync(callback);
             })
         })
     });
 }
 
-loader.prototype._loadIcons = function () {
+loader.prototype._load_async = function (callback) {
-    this.loadImage("materials", "icons.png", function (id, image) {
+    core.loader._setStartLoadTipText('正在加载资源文件...');
-        var images = core.splitImage(image);
+    var all = {};
-        for (var key in core.statusBar.icons) {
+
-            if (typeof core.statusBar.icons[key] == 'number') {
+    var _makeOnProgress = function (name) {
-                core.statusBar.icons[key] = images[core.statusBar.icons[key]];
+        if (!all[name]) all[name] = {loaded: 0, total: 0, finished: false};
-                if (core.statusBar.image[key] != null)
+        return function (loaded, total) {
-                    core.statusBar.image[key].src = core.statusBar.icons[key].src;
+            all[name].loaded = loaded;
+            all[name].total = total;
+            var allLoaded = 0, allTotal = 0;
+            for (var one in all) {
+                allLoaded += all[one].loaded;
+                allTotal += all[one].total;
             }
+            if (allTotal > 0) {
+                if (allLoaded == allTotal) {
+                    core.loader._setStartLoadTipText("正在处理资源文件... 请稍后...");
+                } else {
+                    core.loader._setStartLoadTipText('正在加载资源文件... ' + 
+                        core.formatSize(allLoaded) + " / " + core.formatSize(allTotal) + 
+                        " (" + (allLoaded / allTotal * 100).toFixed(2) + "%)");
+                }
+                core.loader._setStartProgressVal(allLoaded / allTotal * 100);
+            }
+        };
+    }
+    var _makeOnFinished = function (name) {
+        return function () {
+            setTimeout(function () {
+                all[name].finished = true;
+                for (var one in all) {
+                    if (!all[one].finished) return;
+                }
+                callback();
+            });
         }
+    }
+
+    this._loadAnimates_async(_makeOnProgress('animates'), _makeOnFinished('animates'));
+    this._loadMusic_async(_makeOnProgress('sounds'), _makeOnFinished('sounds'));
+    this._loadMaterials_async(_makeOnProgress('materials'), _makeOnFinished('materials'));
+    this._loadExtraImages_async(_makeOnProgress('images'), _makeOnFinished('images'));
+    this._loadAutotiles_async(_makeOnProgress('autotiles'), _makeOnFinished('autotiles'));
+    this._loadTilesets_async(_makeOnProgress('tilesets'), _makeOnFinished('tilesets'));
+}
+
+// ----- 加载资源文件 ------ //
+
+loader.prototype._loadMaterials_sync = function (callback) {
+    this._setStartLoadTipText("正在加载资源文件...");
+    this.loadImages("materials", core.materials, core.material.images, function () {
+        core.loader._loadMaterials_afterLoad();
+        callback();
     });
 }
 
-loader.prototype._loadMaterialImages = function (callback) {
+loader.prototype._loadMaterials_async = function (onprogress, onfinished) {
-    this._setStartLoadTipText("正在加载资源文件...");
+    this.loadImagesFromZip('project/materials/materials.h5data', core.materials, core.material.images, onprogress, function () {
-    if (main.useCompress) {
+        core.loader._loadMaterials_afterLoad();
-        this.loadImagesFromZip('project/materials/materials.h5data', core.materials, core.material.images, callback);
+        onfinished();
-    } else {
+    });
-        this.loadImages("materials", core.materials, core.material.images, callback);
+}
+
+loader.prototype._loadMaterials_afterLoad = function () {
+    var images = core.splitImage(core.material.images['icons']);
+    for (var key in core.statusBar.icons) {
+        if (typeof core.statusBar.icons[key] == 'number') {
+            core.statusBar.icons[key] = images[core.statusBar.icons[key]];
+            if (core.statusBar.image[key] != null)
+                core.statusBar.image[key].src = core.statusBar.icons[key].src;
+        }
     }
 }
 
-loader.prototype._loadExtraImages = function (callback) {
+// ------ 加载使用的图片 ------ //
+
+loader.prototype._loadExtraImages_sync = function (callback) {
     core.material.images.images = {};
-
-    var images = core.clone(core.images);
-
     this._setStartLoadTipText("正在加载图片文件...");
-    if (main.useCompress) {
+    core.loadImages("images", core.images, core.material.images.images, callback);
-        // Check .gif
-        var gifs = images.filter(function (name) {
-            return name.toLowerCase().endsWith('.gif');
-        });
-        images = images.filter(function (name) {
-            return !name.toLowerCase().endsWith('.gif');
-        });
-
-        this.loadImagesFromZip('project/images/images.h5data', images, core.material.images.images, callback);
-        gifs.forEach(function (gif) {
-            this.loadImage("images", gif, function (id, image) {
-                if (image != null) {
-                    core.material.images.images[gif] = image;
-                }
-            });
-        }, this);
-    } else {
-        this.loadImages("images", images, core.material.images.images, callback);
-    }
 }
 
-loader.prototype._loadAutotiles = function (callback) {
+loader.prototype._loadExtraImages_async = function (onprogress, onfinished) {
+    core.material.images.images = {};
+    var images = core.images;
+
+    // Check .gif
+    var gifs = images.filter(function (name) {
+        return name.toLowerCase().endsWith('.gif');
+    });
+    images = images.filter(function (name) {
+        return !name.toLowerCase().endsWith('.gif');
+    });
+
+    this.loadImagesFromZip('project/images/images.h5data', images, core.material.images.images, onprogress, onfinished);
+    // gif没有被压缩在zip中，延迟加载...
+    gifs.forEach(function (gif) {
+        this.loadImage("images", gif, function (id, image) {
+            if (image != null) {
+                core.material.images.images[gif] = image;
+            }
+        });
+    }, this);
+}
+
+// ------ 加载自动元件 ------ //
+
+loader.prototype._loadAutotiles_sync = function (callback) {
     core.material.images.autotile = {};
     var keys = Object.keys(core.material.icons.autotile);
     var autotiles = {};
-    var _callback = function () {
-        keys.forEach(function (v) {
-            core.material.images.autotile[v] = autotiles[v];
-        });
 
-        setTimeout(function () {
-            core.maps._makeAutotileEdges();
-        });
-
-        callback();
-    }
     this._setStartLoadTipText("正在加载自动元件...");
-    if (main.useCompress) {
+    this.loadImages("autotiles", keys, autotiles, function () {
-        this.loadImagesFromZip('project/autotiles/autotiles.h5data', keys, autotiles, _callback);
+        core.loader._loadAutotiles_afterLoad(keys, autotiles);
-    } else {
+        callback();
-        this.loadImages("autotiles", keys, autotiles, _callback);
+    });
+}
+
+loader.prototype._loadAutotiles_async = function (onprogress, onfinished) {
+    core.material.images.autotile = {};
+    var keys = Object.keys(core.material.icons.autotile);
+    var autotiles = {};
+
+    this.loadImagesFromZip('project/autotiles/autotiles.h5data', keys, autotiles, onprogress, function () {
+        core.loader._loadAutotiles_afterLoad(keys, autotiles);
+        onfinished();
+    });
+}
+
+loader.prototype._loadAutotiles_afterLoad = function (keys, autotiles) {
+   // autotile需要保证顺序
+   keys.forEach(function (v) {
+    core.material.images.autotile[v] = autotiles[v];
+    });
+
+    setTimeout(function () {
+        core.maps._makeAutotileEdges();
+    });
+}
+
+// ------ 加载额外素材 ------ //
+
+loader.prototype._loadTilesets_sync = function (callback) {
+    core.material.images.tilesets = {};
+    this._setStartLoadTipText("正在加载额外素材...");
+    this.loadImages("tilesets", core.tilesets, core.material.images.tilesets, function () {
+        core.loader._loadTilesets_afterLoad();
+        callback();
+    });
+}
+
+loader.prototype._loadTilesets_async = function (onprogress, onfinished) {
+    core.material.images.tilesets = {};
+    this.loadImagesFromZip('project/tilesets/tilesets.h5data', core.tilesets, core.material.images.tilesets, onprogress, function () {
+        core.loader._loadTilesets_afterLoad();
+        onfinished();
+    });
+}
+
+loader.prototype._loadTilesets_afterLoad = function () {
+    // 检查宽高是32倍数，如果出错在控制台报错
+    for (var imgName in core.material.images.tilesets) {
+        var img = core.material.images.tilesets[imgName];
+        if (img.width % 32 != 0 || img.height % 32 != 0) {
+            console.warn("警告！" + imgName + "的宽或高不是32的倍数！");
+        }
+        if (img.width * img.height > 32 * 32 * 3000) {
+            console.warn("警告！" + imgName + "上的图块素材个数大于3000！");
+        }
     }
 }
 
-loader.prototype._loadTilesets = function (callback) {
+// ------ 实际加载一系列图片 ------ //
-    core.material.images.tilesets = {};
-    core.tilesets = core.tilesets || [];
-    var _callback = function () {
-        // 检查宽高是32倍数，如果出错在控制台报错
-        for (var imgName in core.material.images.tilesets) {
-            var img = core.material.images.tilesets[imgName];
-            if (img.width % 32 != 0 || img.height % 32 != 0) {
-                console.warn("警告！" + imgName + "的宽或高不是32的倍数！");
-            }
-            if (img.width * img.height > 32 * 32 * 3000) {
-                console.warn("警告！" + imgName + "上的图块素材个数大于3000！");
-            }
-        }
-        callback();
-    }
-    this._setStartLoadTipText("正在加载额外素材...");
-    if (main.useCompress) {
-        this.loadImagesFromZip('project/tilesets/tilesets.h5data', core.tilesets, core.material.images.tilesets, _callback);
-    } else {
-        this.loadImages("tilesets", core.tilesets, core.material.images.tilesets, _callback);
-    }
-}
 
 loader.prototype.loadImages = function (dir, names, toSave, callback) {
     if (!names || names.length == 0) {
@@ -159,37 +243,6 @@ loader.prototype.loadImages = function (dir, names, toSave, callback) {
     }
 }
 
-loader.prototype.loadImagesFromZip = function (url, names, toSave, callback) {
-    if (!names || names.length == 0) {
-        if (callback) callback();
-        return;
-    }
-
-    core.unzip(url + "?v=" + main.version, function (data) {
-        var cnt = 1;
-        names.forEach(function (name) {
-            var imgName = name;
-            if (imgName.indexOf('.') < 0) imgName += '.png';
-            if (imgName in data) {
-                var img = new Image();
-                var url = URL.createObjectURL(data[imgName]);
-                cnt++;
-                img.onload = function () {
-                    cnt--;
-                    URL.revokeObjectURL(url);
-                    if (cnt == 0 && callback) callback();
-                }
-                img.src = url;
-                toSave[name] = img;
-            }
-        });
-        cnt--;
-        if (cnt == 0 && callback) callback();
-    }, null, false, function (percentage) {
-        core.loader._setStartProgressVal(percentage * 100);
-    });
-}
-
 loader.prototype.loadImage = function (dir, imgName, callback) {
     try {
         var name = imgName;
@@ -211,28 +264,63 @@ loader.prototype.loadImage = function (dir, imgName, callback) {
     }
 }
 
-loader.prototype._loadAnimates = function () {
+// ------ 从zip中加载一系列图片 ------ //
-    this._setStartLoadTipText("正在加载动画文件...");
+
-    if (main.useCompress) {
+loader.prototype.loadImagesFromZip = function (url, names, toSave, onprogress, onfinished) {
-        core.unzip('project/animates/animates.h5data?v=' + main.version, function (animates) {
+    if (!names || names.length == 0) {
-            for (var name in animates) {
+        if (onfinished) onfinished();
-                if (name.endsWith(".animate")) {
+        return;
-                    var t = name.substring(0, name.length - 8);
-                    if (core.animates.indexOf(t) >= 0)
-                        core.loader._loadAnimate(t, animates[name]);
-                }
-            }
-        }, null, true);
-    } else {
-        core.animates.forEach(function (t) {
-            core.http('GET', 'project/animates/' + t + ".animate?v=" + main.version, null, function (content) {
-                core.loader._loadAnimate(t, content);
-            }, function (e) {
-                main.log(e);
-                core.material.animates[t] = null;
-            }, "text/plain; charset=x-user-defined")
-        })
     }
+
+    core.unzip(url + "?v=" + main.version, function (data) {
+        var cnt = 1;
+        names.forEach(function (name) {
+            var imgName = name;
+            if (imgName.indexOf('.') < 0) imgName += '.png';
+            if (imgName in data) {
+                var img = new Image();
+                var url = URL.createObjectURL(data[imgName]);
+                cnt++;
+                img.onload = function () {
+                    cnt--;
+                    URL.revokeObjectURL(url);
+                    if (cnt == 0 && onfinished) onfinished();
+                }
+                img.src = url;
+                toSave[name] = img;
+            }
+        });
+        cnt--;
+        if (cnt == 0 && onfinished) onfinished();
+    }, null, false, onprogress);
+}
+
+// ------ 加载动画文件 ------ //
+
+loader.prototype._loadAnimates_sync = function () {
+    this._setStartLoadTipText("正在加载动画文件...");
+
+    core.animates.forEach(function (t) {
+        core.http('GET', 'project/animates/' + t + ".animate?v=" + main.version, null, function (content) {
+            core.loader._loadAnimate(t, content);
+        }, function (e) {
+            main.log(e);
+            core.material.animates[t] = null;
+        }, "text/plain; charset=x-user-defined")
+    });
+}
+
+loader.prototype._loadAnimates_async = function (onprogress, onfinished) {
+    core.unzip('project/animates/animates.h5data?v=' + main.version, function (animates) {
+        for (var name in animates) {
+            if (name.endsWith(".animate")) {
+                var t = name.substring(0, name.length - 8);
+                if (core.animates.indexOf(t) >= 0)
+                    core.loader._loadAnimate(t, animates[name]);
+            }
+        }
+        onfinished();
+    }, null, true, onprogress);
 }
 
 loader.prototype._loadAnimate = function (name, content) {
@@ -283,26 +371,36 @@ loader.prototype._loadAnimate = function (name, content) {
     }
 }
 
-////// 加载音频 //////
+// ------ 加载音乐和音效 ------ //
-loader.prototype._loadMusic = function () {
+
+loader.prototype._loadMusic_sync = function () {
+    this._setStartLoadTipText("正在加载音效文件...");
     core.bgms.forEach(function (t) {
         core.loader.loadOneMusic(t);
     });
+    core.sounds.forEach(function (t) {
+        core.loader.loadOneSound(t);
+    });
+    // 直接开始播放
+    core.playBgm(main.startBgm);
+}
 
-    this._setStartLoadTipText("正在加载音效文件...");
+loader.prototype._loadMusic_async = function (onprogress, onfinished) {
-    if (main.useCompress && core.musicStatus.audioContext) {
+    core.bgms.forEach(function (t) {
-        core.unzip('project/sounds/sounds.h5data?v=' + main.version, function (data) {
+        core.loader.loadOneMusic(t);
+    });
+    core.unzip('project/sounds/sounds.h5data?v=' + main.version, function (data) {
+        // 延迟解析
+        setTimeout(function () {
             for (var name in data) {
                 if (core.sounds.indexOf(name) >= 0) {
                     core.loader._loadOneSound_decodeData(name, data[name]);
                 }
             }
         });
-    } else {
+        onfinished();
-        core.sounds.forEach(function (t) {
+    }, null, false, onprogress);
-            core.loader.loadOneSound(t);
+
-        });
-    }
     // 直接开始播放
     core.playBgm(main.startBgm);
 }
@@ -317,19 +415,12 @@ loader.prototype.loadOneMusic = function (name) {
 }
 
 loader.prototype.loadOneSound = function (name) {
-    if (core.musicStatus.audioContext != null) {
+    core.http('GET', 'project/sounds/' + name + "?v=" + main.version, null, function (data) {
-        core.http('GET', 'project/sounds/' + name + "?v=" + main.version, null, function (data) {
+        core.loader._loadOneSound_decodeData(name, data);
-            core.loader._loadOneSound_decodeData(name, data);
+    }, function (e) {
-        }, function (e) {
+        main.log(e);
-            main.log(e);
+        core.material.sounds[name] = null;
-            core.material.sounds[name] = null;
+    }, null, 'arraybuffer');
-        }, null, 'arraybuffer');
-    }
-    else {
-        var music = new Audio();
-        music.src = 'project/sounds/' + name;
-        core.material.sounds[name] = music;
-    }
 }
 
 loader.prototype._loadOneSound_decodeData = function (name, data) {

libs/utils.js

@@ -392,6 +392,12 @@ utils.prototype.setTwoDigits = function (x) {
     return parseInt(x) < 10 ? "0" + x : x;
 }
 
+utils.prototype.formatSize = function (size) {
+    if (size < 1024) return size + 'B';
+    else if (size < 1024 * 1024) return (size/1024).toFixed(2) + "KB";
+    else return (size/1024/1024).toFixed(2) + "MB";
+}
+
 utils.prototype.formatBigNumber = function (x, onMap) {
     x = Math.floor(parseFloat(x));
     if (!core.isset(x)) return '???';
@@ -1227,7 +1233,7 @@ utils.prototype.http = function (type, url, formData, success, error, mimeType,
     };
     xhr.onprogress = function (e) {
         if (e.lengthComputable) {
-            if (onprogress) onprogress(e.loaded / e.total);
+            if (onprogress) onprogress(e.loaded, e.total);
         }
     }
     xhr.onabort = function () {

main.js

@@ -85,7 +85,7 @@ function main() {
         'data', 'enemys', 'icons', 'maps', 'items', 'functions', 'events', 'plugins'
     ];
     this.materials = [
-        'animates', 'enemys', 'items', 'npcs', 'terrains', 'enemy48', 'npc48'
+        'animates', 'enemys', 'items', 'npcs', 'terrains', 'enemy48', 'npc48', 'icons'
     ];
 
     this.statusBar = {

v2.x-final更新.txt

@@ -53,7 +53,7 @@
 大屏幕下放大游戏界面
 最近使用/最常使用的图块
 loader并行加载
-合并items.js
+（已完成！） 合并items.js
 增加fonts目录，全塔属性增加fonts引用
 
 -------------