From a4e3bd904f52a59a98529e6095fc7ac58dbe5659 Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Sun, 17 May 2020 00:44:23 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6loader=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E8=BF=87=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- libs/loader.js | 407 +++++++++++++++++++++++++++------------------ libs/utils.js | 8 +- main.js | 2 +- v2.x-final更新.txt | 2 +- 4 files changed, 258 insertions(+), 161 deletions(-) diff --git a/libs/loader.js b/libs/loader.js index 8f4ea8f6..0252d88a 100644 --- a/libs/loader.js +++ b/libs/loader.js @@ -25,115 +25,199 @@ loader.prototype._setStartLoadTipText = function (text) { } loader.prototype._load = function (callback) { - this._loadIcons(); - this._loadAnimates(); - this._loadMusic(); + if (main.useCompress) { + this._load_async(callback); + } else { + this._load_sync(callback); + } +} - core.loader._loadMaterialImages(function () { - core.loader._loadExtraImages(function () { - core.loader._loadAutotiles(function () { - core.loader._loadTilesets(callback); +loader.prototype._load_sync = function (callback) { + this._loadAnimates_sync(); + this._loadMusic_sync(); + core.loader._loadMaterials_sync(function () { + core.loader._loadExtraImages_sync(function () { + core.loader._loadAutotiles_sync(function () { + core.loader._loadTilesets_sync(callback); }) }) }); } -loader.prototype._loadIcons = function () { - this.loadImage("materials", "icons.png", function (id, image) { - var images = core.splitImage(image); - 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._load_async = function (callback) { + core.loader._setStartLoadTipText('正在加载资源文件...'); + var all = {}; + + var _makeOnProgress = function (name) { + if (!all[name]) all[name] = {loaded: 0, total: 0, finished: false}; + return function (loaded, total) { + 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) { - this._setStartLoadTipText("正在加载资源文件..."); - if (main.useCompress) { - this.loadImagesFromZip('project/materials/materials.h5data', core.materials, core.material.images, callback); - } else { - this.loadImages("materials", core.materials, core.material.images, callback); +loader.prototype._loadMaterials_async = function (onprogress, onfinished) { + this.loadImagesFromZip('project/materials/materials.h5data', core.materials, core.material.images, onprogress, function () { + core.loader._loadMaterials_afterLoad(); + onfinished(); + }); +} + +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) { - // 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); - } + core.loadImages("images", core.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.loadImagesFromZip('project/autotiles/autotiles.h5data', keys, autotiles, _callback); - } else { - this.loadImages("autotiles", keys, autotiles, _callback); + this.loadImages("autotiles", keys, autotiles, function () { + core.loader._loadAutotiles_afterLoad(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 () { - this._setStartLoadTipText("正在加载动画文件..."); - if (main.useCompress) { - 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]); - } - } - }, 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") - }) +// ------ 从zip中加载一系列图片 ------ // + +loader.prototype.loadImagesFromZip = function (url, names, toSave, onprogress, onfinished) { + if (!names || names.length == 0) { + if (onfinished) onfinished(); + 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 && 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("正在加载音效文件..."); - if (main.useCompress && core.musicStatus.audioContext) { - core.unzip('project/sounds/sounds.h5data?v=' + main.version, function (data) { +loader.prototype._loadMusic_async = function (onprogress, onfinished) { + core.bgms.forEach(function (t) { + 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 { - core.sounds.forEach(function (t) { - core.loader.loadOneSound(t); - }); - } + onfinished(); + }, null, false, onprogress); + // 直接开始播放 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.loader._loadOneSound_decodeData(name, data); - }, function (e) { - main.log(e); - core.material.sounds[name] = null; - }, null, 'arraybuffer'); - } - else { - var music = new Audio(); - music.src = 'project/sounds/' + name; - core.material.sounds[name] = music; - } + core.http('GET', 'project/sounds/' + name + "?v=" + main.version, null, function (data) { + core.loader._loadOneSound_decodeData(name, data); + }, function (e) { + main.log(e); + core.material.sounds[name] = null; + }, null, 'arraybuffer'); } loader.prototype._loadOneSound_decodeData = function (name, data) { diff --git a/libs/utils.js b/libs/utils.js index 7cd1ff71..1698c02e 100644 --- a/libs/utils.js +++ b/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 () { diff --git a/main.js b/main.js index be30e993..6409434c 100644 --- a/main.js +++ b/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 = { diff --git a/v2.x-final更新.txt b/v2.x-final更新.txt index 680d4953..9d9991d1 100644 --- a/v2.x-final更新.txt +++ b/v2.x-final更新.txt @@ -53,7 +53,7 @@ 大屏幕下放大游戏界面 最近使用/最常使用的图块 loader并行加载 -合并items.js +（已完成！） 合并items.js 增加fonts目录，全塔属性增加fonts引用 -------------