diff --git a/_server/editor.js b/_server/editor.js index 9bd90184..3da2558c 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -11,6 +11,7 @@ function editor() { if (string.indexOf(substring) > -1){ message = 'Script Error: See Browser Console for Detail'; } else { + if (url) url = url.substring(url.lastIndexOf('/')+1); message = [ 'Message: ' + msg, 'URL: ' + url, diff --git a/docs/personalization.md b/docs/personalization.md index e8b6f810..ded9701f 100644 --- a/docs/personalization.md +++ b/docs/personalization.md @@ -51,7 +51,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 在地图编辑器中绘图时，下拉框选中“背景层”或“前景层”即可在对应的图层上绘图。 -其中背景层和前景层仅为静态绘图（不支持动画），但可以使用自动元件（autotile）。 +其中背景层和前景层可以使用任何素材，以及使用自动元件（autotile）。 可以使用`showBgFgMap`, `hideBgFgMap`, `setBgFgBlock`等事件对背景和前景图层进行操作。 diff --git a/libs/control.js b/libs/control.js index aca04d4d..f8a49d01 100644 --- a/libs/control.js +++ b/libs/control.js @@ -70,7 +70,7 @@ control.prototype.setRequestAnimationFrame = function () { } // Global Animate - if (core.animateFrame.globalAnimate && core.isPlaying()) { + if (core.animateFrame.globalAnimate && core.isPlaying() && core.isset(core.status.floorId)) { if (timestamp-core.animateFrame.globalTime>core.animateFrame.speed && core.isset(core.status.globalAnimateObjs)) { @@ -81,9 +81,21 @@ control.prototype.setRequestAnimationFrame = function () { } if ((core.status.autotileAnimateObjs.blocks||[]).length>0) { + var groundId = (core.status.maps||core.floors)[core.status.floorId].defaultGround || "ground"; + var blockIcon = core.material.icons.terrains[groundId]; core.status.autotileAnimateObjs.status++; core.status.autotileAnimateObjs.blocks.forEach(function (block) { - core.drawAutotile(core.canvas.event, core.status.autotileAnimateObjs.map, block, 32, 0, 0, core.status.autotileAnimateObjs.status); + var cv = core.isset(block.name)?core.canvas[block.name]:core.canvas.event; + cv.clearRect(block.x * 32, block.y * 32, 32, 32); + if (core.isset(block.name)) { + if (block.name == 'bg') { + core.canvas.bg.drawImage(core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32); + } + core.drawAutotile(cv, core.status.autotileAnimateObjs[block.name+"map"], block, 32, 0, 0, core.status.autotileAnimateObjs.status); + } + else { + core.drawAutotile(cv, core.status.autotileAnimateObjs.map, block, 32, 0, 0, core.status.autotileAnimateObjs.status); + } }) } diff --git a/libs/core.js b/libs/core.js index 4e87bdd9..41153ef0 100644 --- a/libs/core.js +++ b/libs/core.js @@ -177,7 +177,7 @@ function core() { // 动画 'globalAnimateObjs': [], 'boxAnimateObjs': [], - 'autotileAnimateObjs': {}, + 'autotileAnimateObjs': {"status": 0, "blocks": [], "map": null, "bgmap": null, "fgmap": null}, 'animateObjs': [], }; this.status = {}; diff --git a/libs/maps.js b/libs/maps.js index ac08d2dd..dca3c6b4 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -384,6 +384,17 @@ maps.prototype.drawBlock = function (block, animate, dx, dy) { dx = dx || 0; dy = dy || 0; + if (core.isset(block.name)) { + core.canvas[block.name].clearRect(block.x * 32, block.y * 32, 32, 32); + if (block.name == 'bg') { + var groundId = (core.status.maps||core.floors)[core.status.floorId].defaultGround || "ground"; + var blockIcon = core.material.icons.terrains[groundId]; + core.canvas.bg.drawImage(core.material.images.terrains, 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32); + } + core.canvas[block.name].drawImage(image, x * 32, y * 32, 32, 32, block.x * 32, block.y * 32, 32, 32); + return; + } + core.canvas.event.clearRect(block.x * 32 + dx, block.y * 32 + dy, 32, 32); core.canvas.event.drawImage(image, x * 32, y * height + height-32, 32, 32, block.x * 32 + dx, block.y * 32 + dy, 32, 32); if (height>32) { @@ -415,7 +426,7 @@ maps.prototype.getBgFgMapArray = function (floorId, name) { } ////// 背景/前景图块的绘制 ////// -maps.prototype.drawBgFgMap = function (floorId, canvas, name) { +maps.prototype.drawBgFgMap = function (floorId, canvas, name, animate) { floorId = floorId || core.status.floorId; var width = core.floors[floorId].width || 13; var height = core.floors[floorId].height || 13; @@ -428,10 +439,15 @@ maps.prototype.drawBgFgMap = function (floorId, canvas, name) { for (var y = 0; y < height; y++) { if (arr[y][x]>0) { var block = core.maps.initBlock(x, y, arr[y][x]); + this.addInfo(block); + block.name = name; if (core.isset(block.event)) { var id = block.event.id, cls = block.event.cls; - if (cls == 'autotile') + if (cls == 'autotile') { core.drawAutotile(canvas, arr, block, 32, 0, 0); + if (animate) + core.status.autotileAnimateObjs.blocks.push(core.clone(block)); + } else if (cls == 'tileset') { var offset = core.icons.getTilesetOffset(id); if (offset!=null) { @@ -443,13 +459,20 @@ maps.prototype.drawBgFgMap = function (floorId, canvas, name) { canvas.drawImage(core.material.images.airwall, 32*x, 32*y); } } - else - canvas.drawImage(core.material.images[cls], 0, core.material.icons[cls][id] * 32, 32, 32, x * 32, y * 32, 32, 32); + else { + if (animate) { + this.drawBlock(block); + this.addGlobalAnimate(block); + } + else { + canvas.drawImage(core.material.images[cls], 0, core.material.icons[cls][id] * 32, 32, 32, x * 32, y * 32, 32, 32); + } + } } } } } - + core.status.autotileAnimateObjs[name+"map"] = core.clone(arr); } ////// 绘制某张地图 ////// @@ -511,8 +534,8 @@ maps.prototype.drawMap = function (mapName, callback) { } }); - core.maps.drawBgFgMap(mapName, core.canvas.bg, "bg"); - core.maps.drawBgFgMap(mapName, core.canvas.fg, "fg"); + core.maps.drawBgFgMap(mapName, core.canvas.bg, "bg", true); + core.maps.drawBgFgMap(mapName, core.canvas.fg, "fg", true); } if (main.mode=='editor'){ @@ -531,7 +554,6 @@ maps.prototype.drawMap = function (mapName, callback) { core.status.floorId = mapName; core.status.thisMap = core.status.maps[mapName]; var drawEvent = function(){ - core.status.autotileAnimateObjs = {"status": 0, "blocks": [], "map": null}; var mapData = core.status.maps[core.status.floorId]; var mapBlocks = mapData.blocks; @@ -1214,24 +1236,23 @@ maps.prototype.addGlobalAnimate = function (b) { block.status = 0; core.status.globalAnimateObjs.push(block); - } ////// 删除一个或所有全局动画 ////// -maps.prototype.removeGlobalAnimate = function (x, y, all) { +maps.prototype.removeGlobalAnimate = function (x, y, all, name) { if (main.mode=='editor' && main.editor.disableGlobalAnimate) return; if (all) { core.status.globalAnimateObjs = []; - core.status.autotileAnimateObjs = {}; + core.status.autotileAnimateObjs = {"status": 0, "blocks": [], "map": null, "bgmap": null, "fgmap": null}; return; } - core.status.globalAnimateObjs = core.status.globalAnimateObjs.filter(function (block) {return block.x!=x || block.y!=y;}); + core.status.globalAnimateObjs = core.status.globalAnimateObjs.filter(function (block) {return block.x!=x || block.y!=y || block.name!=name;}); // 检查Autotile if (core.isset(core.status.autotileAnimateObjs.blocks)) { - core.status.autotileAnimateObjs.blocks = core.status.autotileAnimateObjs.blocks.filter(function (block) {return block.x!=x || block.y!=y;}); + core.status.autotileAnimateObjs.blocks = core.status.autotileAnimateObjs.blocks.filter(function (block) {return block.x!=x || block.y!=y || block.name!=name;}); core.status.autotileAnimateObjs.map[y][x] = 0; }