Enable Animate block & autotile in Bg/Fg

_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,

docs/personalization.md

@@ -51,7 +51,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
 
 在地图编辑器中绘图时，下拉框选中“背景层”或“前景层”即可在对应的图层上绘图。
 
-其中背景层和前景层仅为静态绘图（不支持动画），但可以使用自动元件（autotile）。
+其中背景层和前景层可以使用任何素材，以及使用自动元件（autotile）。
 
 可以使用`showBgFgMap`, `hideBgFgMap`, `setBgFgBlock`等事件对背景和前景图层进行操作。
 

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);
+                        }
                     })
                 }
 

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 = {};

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
+                    else {
-                        canvas.drawImage(core.material.images[cls], 0, core.material.icons[cls][id] * 32, 32, 32, x * 32, y * 32, 32, 32);
+                        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.bg, "bg", true);
-        core.maps.drawBgFgMap(mapName, core.canvas.fg, "fg");
+        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;
     }