Dynamic canvas

_server/blockly/MotaAction.g4

@@ -1290,7 +1290,7 @@ loadBgm_s
 
 /* loadBgm_s
 tooltip : loadBgm: 预加载某个背景音乐，之后可以直接播放
-helpUrl : https://h5mota.com/games/template/docs/#/event?id=playbgm%EF%BC%9A%E6%92%AD%E6%94%BE%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90
+helpUrl : https://h5mota.com/games/template/docs/#/event?id=loadBgm%ef%bc%9a%e9%a2%84%e5%8a%a0%e8%bd%bd%e4%b8%80%e4%b8%aa%e8%83%8c%e6%99%af%e9%9f%b3%e4%b9%90
 default : ["bgm.mp3"]
 colour : this.soundColor
 var code = '{"type": "loadBgm", "name": "'+EvalString_0+'"},\n';
@@ -1303,7 +1303,7 @@ freeBgm_s
 
 /* freeBgm_s
 tooltip : freeBgm: 释放背景音乐的缓存
-helpUrl : https://h5mota.com/games/template/docs/#/event?id=playbgm%EF%BC%9A%E6%92%AD%E6%94%BE%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90
+helpUrl : https://h5mota.com/games/template/docs/#/event?id=freeBgm%ef%bc%9a%e9%87%8a%e6%94%be%e4%b8%80%e4%b8%aa%e8%83%8c%e6%99%af%e9%9f%b3%e4%b9%90%e7%9a%84%e7%bc%93%e5%ad%98
 default : ["bgm.mp3"]
 colour : this.soundColor
 var code = '{"type": "freeBgm", "name": "'+EvalString_0+'"},\n';

editor-mobile.html

@@ -445,7 +445,6 @@
         <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
-        <div id="dymCanvas"></div>
     </div>
 </div>
 <!-- */</script> -->

editor.html

@@ -430,7 +430,6 @@
         <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
-        <div id="dymCanvas"></div>
     </div>
 </div>
 <!-- */</script> -->

index.html

@@ -145,7 +145,6 @@
         <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
-        <div id="dymCanvas"></div>
     </div>
 </div>
 <script src='libs/thirdparty/mid.min.js'></script>

libs/control.js

@@ -1340,108 +1340,13 @@ control.prototype.checkBlock = function () {
 
 ////// 阻击事件（动画效果） //////
 control.prototype.snipe = function (snipes) {
-
+    // 阻击改成moveBlock事件完成
-    var scan = {
+    var actions = [];
-        'up': {'x': 0, 'y': -1},
+    snipes.forEach(function (t) {
-        'left': {'x': -1, 'y': 0},
+        actions.push({"type": "move", "loc": [t.x, t.y], "steps": [t.direction], "time": 500, "keep": true, "async": true});
-        'down': {'x': 0, 'y': 1},
+    });
-        'right': {'x': 1, 'y': 0}
+    actions.push({"type": "waitAsync"});
-    };
+    core.insertAction(actions);
-
-    snipes.forEach(function (snipe) {
-        var x=snipe.x, y=snipe.y, direction = snipe.direction;
-        snipe.nx = x+scan[snipe.direction].x;
-        snipe.ny = y+scan[snipe.direction].y;
-
-        core.removeGlobalAnimate(x, y);
-
-        var block = core.getBlock(x,y).block;
-
-        var cls = block.event.cls;
-        var height = block.event.height || 32;
-
-        snipe.animate = block.event.animate || 1;
-        snipe.blockIcon = core.material.icons[cls][block.event.id];
-        snipe.blockImage = core.material.images[cls];
-        snipe.height = height;
-
-        var damageString = core.enemys.getDamageString(block.event.id, x, y);
-        var damage = damageString.damage, color = damageString.color;
-
-        snipe.damage = damage;
-        snipe.color = color;
-        snipe.block = core.clone(block);
-
-    })
-
-    var finishSnipe = function () {
-        snipes.forEach(function (t) {
-            core.removeBlock(t.x, t.y);
-            var nBlock = core.clone(t.block);
-            nBlock.x = t.nx; nBlock.y = t.ny;
-            core.status.thisMap.blocks.push(nBlock);
-            core.drawBlock(nBlock);
-            core.addGlobalAnimate(nBlock);
-        });
-        core.syncGlobalAnimate();
-        core.updateStatusBar();
-        return;
-    }
-
-    if (core.status.replay.replaying) {
-        finishSnipe();
-    }
-    else {
-        core.waitHeroToStop(function() {
-
-            core.lockControl();
-
-            var time = 500, step = 0;
-
-            var animateCurrent = 0;
-            var animateTime = 0;
-
-            core.canvas.damage.textAlign = 'left';
-
-            var animate=window.setInterval(function() {
-
-                step++;
-                animateTime += time / 16;
-                if (animateTime >= core.values.animateSpeed) {
-                    animateCurrent++;
-                    animateTime = 0;
-                }
-
-                snipes.forEach(function (snipe) {
-                    var x=snipe.x, y=snipe.y, direction = snipe.direction;
-
-                    var dx = scan[direction].x*2*step, dy = scan[direction].y*2*step;
-                    var nowX = 32*x+dx, nowY = 32*y+dy;
-
-                    // 清空上一次
-                    core.clearMap('damage', nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32);
-                    core.canvas.event.clearRect(nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32);
-                    core.canvas.event2.clearRect(nowX-2*scan[direction].x, nowY-2*scan[direction].y-32, 32, 32)
-
-                    core.drawBlock(snipe.block, animateCurrent, dx, dy);
-
-                    if (core.hasItem('book')) {
-                        // drawDamage
-                        core.fillBoldText(core.canvas.damage, snipe.damage, snipe.color, nowX+1, nowY+31);
-                    }
-
-                })
-
-                if (step==16) { // 移动完毕
-                    clearInterval(animate);
-                    finishSnipe();
-                    // 不存在自定义事件
-                    if (core.status.event.id==null)
-                        core.unLockControl();
-                }
-            }, time/16);
-        });
-    }
 }
 
 ////// 更改天气效果 //////

libs/core.js

@@ -720,6 +720,10 @@ core.prototype.deleteCanvas = function (name) {
     core.ui.deleteCanvas(name);
 }
 
+core.prototype.deleteAllCanvas = function () {
+    core.ui.deleteAllCanvas();
+}
+
 core.prototype.drawBlock = function (block, animate, dx, dy) {
     core.maps.drawBlock(block, animate, dx, dy);
 }

libs/events.js

@@ -9,7 +9,11 @@ events.prototype.init = function () {
     this.eventdata = functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a.events;
     this.events = {
         'battle': function (data, core, callback) {
-            //core.autosave(true);
+            // 正在执行自定义事件：不允许战斗
+            if (core.status.event.id == 'action') {
+                if (core.isset(callback)) callback();
+                return;
+            }
             core.battle(data.event.id, data.x, data.y);
             if (core.isset(callback))
                 callback();
@@ -20,13 +24,22 @@ events.prototype.init = function () {
                 callback();
         },
         'openDoor': function (data, core, callback) {
-            //core.autosave(true);
+            // 正在执行自定义事件：不允许开门
+            if (core.status.event.id == 'action') {
+                if (core.isset(callback)) callback();
+                return;
+            }
             core.openDoor(data.event.id, data.x, data.y, true, function () {
                 if (core.isset(callback)) callback();
                 core.replay();
             });
         },
         'changeFloor': function (data, core, callback) {
+            // 正在执行自定义事件：不允许切换楼层
+            if (core.status.event.id == 'action') {
+                if (core.isset(callback)) callback();
+                return;
+            }
             var heroLoc = {};
             if (core.isset(data.event.data.loc))
                 heroLoc = {'x': data.event.data.loc[0], 'y': data.event.data.loc[1]};
@@ -1691,13 +1704,11 @@ events.prototype.moveImage = function (code, to, opacityVal, time, callback) {
 
     var step = 0;
     var per_time = 10, steps = parseInt(time / per_time);
-    var preOpac = parseFloat(core.dymCanvas[name].canvas.style.opacity), opacStep;
+    var preOpac = parseFloat(core.dymCanvas[name].canvas.style.opacity), opacStep = 0;
     if (core.isset(opacityVal)) {
         opacityVal = core.calValue(opacityVal);
         opacStep = (opacityVal - preOpac) / steps;
     }
-    else
-        opacStep = 0;
     
     var moveStep = function () {
         preOpac += opacStep;

libs/maps.js

@@ -370,29 +370,13 @@ maps.prototype.drawBlock = function (block, animate, dx, dy) {
     // none：空地
     if (block.event.id=='none') return;
 
-    var cls = block.event.cls, height = block.event.height || 32;
+    var cls = block.event.cls;
 
-    var image, x, y;
+    var blockInfo = this.__getBlockInfo(block);
+    if (blockInfo == null) return;
+    var image = blockInfo.image, x = blockInfo.bx, y = blockInfo.by, height = blockInfo.height;
+    if (!blockInfo.isTileset) x = (animate||0)%(block.event.animate||1);
 
-    if (cls == 'tileset') {
-        var offset = core.icons.getTilesetOffset(block.event.id);
-        if (offset == null) return;
-        image = core.material.images.tilesets[offset.image];
-        x = offset.x;
-        y = offset.y;
-    }
-    else if (cls == 'autotile') return;
-    // 空气墙的单独处理
-    else if (block.id==17) {
-        if (!core.isset(core.material.images.airwall)) return;
-        image = core.material.images.airwall;
-        x = y = 0;
-    }
-    else {
-        image = core.material.images[cls];
-        x = (animate||0)%(block.event.animate||1);
-        y = core.material.icons[cls][block.event.id];
-    }
     dx = dx || 0;
     dy = dy || 0;
 
@@ -776,6 +760,93 @@ maps.prototype.getBlockCls = function (x, y, floorId, showDisable) {
     return null;
 }
 
+maps.prototype.__getBlockInfo = function (block) {
+    var image, bx, by, height = block.event.height || 32;
+    var faceIds = {}, isTileset = false;
+    if (block.event.cls == 'tileset') {
+        var offset = core.icons.getTilesetOffset(block.event.id);
+        if (offset==null) {
+            return null;
+        }
+        bx = offset.x;
+        by = offset.y;
+        image = core.material.images.tilesets[offset.image];
+        isTileset = true;
+    }
+    // 不支持autotile
+    else if (block.event.cls == 'autotile') {
+        return null;
+    }
+    // 空气墙；忽略事件
+    else if (block.id==17) {
+        if (!core.isset(core.material.images.airwall)) return null;
+        image = core.material.images.airwall;
+        bx = by = 0;
+    }
+    else {
+        image = core.material.images[block.event.cls];
+        bx = 0;
+        by = core.material.icons[block.event.cls][block.event.id];
+        faceIds = block.event.faceIds||{};
+    }
+    return {
+        "image": image,
+        "bx": bx,
+        "by": by,
+        "height": height,
+        "isTileset": isTileset,
+        "faceIds": faceIds
+    };
+}
+
+maps.prototype.__moveBlockCanvas = function (image, bx, by, height, nowX, nowY, opacity, headCanvas, bodyCanvas, damageCanvas) {
+    // 重绘block & 重定位
+    if (headCanvas != null) {
+        core.dymCanvas[headCanvas].clearRect(0, 0, 32, height);
+        core.dymCanvas[headCanvas].drawImage(image, bx * 32, by * height, 32, height - 32, 0, 0, 32, height - 32);
+        core.relocateCanvas(headCanvas, nowX - core.bigmap.offsetX, nowY+32-height - core.bigmap.offsetY);
+        core.setOpacity(headCanvas, opacity);
+    }
+    if (bodyCanvas != null) {
+        core.dymCanvas[bodyCanvas].clearRect(0, 0, 32, 32);
+        core.dymCanvas[bodyCanvas].drawImage(image, bx * 32, by * height + height - 32, 32, 32, 0, 0, 32, 32);
+        core.relocateCanvas(bodyCanvas, nowX - core.bigmap.offsetX, nowY - core.bigmap.offsetY);
+        core.setOpacity(bodyCanvas, opacity);
+    }
+    if (damageCanvas != null) {
+        core.relocateCanvas(damageCanvas, nowX - core.bigmap.offsetX, nowY - core.bigmap.offsetY);
+        core.setOpacity(damageCanvas, opacity);
+    }
+}
+
+maps.prototype.__initBlockCanvas = function (block, height, x, y) {
+    var headCanvas = null, bodyCanvas = 'block'+x+"_"+y, damageCanvas = null;
+
+    core.createCanvas(bodyCanvas, 0, 0, 32, 32, 35);
+    if (height > 32) {
+        headCanvas = "blockHead"+x+"_"+y;
+        core.createCanvas(headCanvas, 0, 0, 32, height - 32, 55);
+    }
+    // 显伤
+    var damage = null, damageColor = null;
+    if ((block.event.cls == 'enemys' || block.event.cls == 'enemy48') && core.hasItem('book')
+        && block.event.displayDamage !== false) {
+        var damageString = core.enemys.getDamageString(block.event.id, x, y);
+        damage = damageString.damage; damageColor = damageString.color;
+    }
+    if (damage != null) {
+        damageCanvas = "blockDamage"+x+"_"+y;
+        core.createCanvas(damageCanvas, 0, 0, 32, 32, 65);
+        core.dymCanvas[damageCanvas].textAlign = 'left';
+        core.fillBoldText(core.dymCanvas[damageCanvas], damage, damageColor, 1, 31);
+    }
+    return {
+        "headCanvas": headCanvas,
+        "bodyCanvas": bodyCanvas,
+        "damageCanvas": damageCanvas
+    }
+}
+
 ////// 显示移动某块的动画，达到{“type”:”move”}的效果 //////
 maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
     time = time || 500;
@@ -791,35 +862,13 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
     core.removeBlock(x,y);
 
     block=block.block;
+    var blockInfo = this.__getBlockInfo(block);
+    if (blockInfo == null) {
+        if (core.isset(callback)) callback();
+        return;
+    }
+    var image = blockInfo.image, bx = blockInfo.bx, by = blockInfo.by, height = blockInfo.height, isTileset = blockInfo.isTileset, faceIds = blockInfo.faceIds;
 
-    var image, bx, by, height = block.event.height || 32;
-    var faceIds = {};
-    if (block.event.cls == 'tileset') {
-        var offset = core.icons.getTilesetOffset(block.event.id);
-        if (offset==null) {
-            if (core.isset(callback)) callback();
-            return;
-        }
-        bx = offset.x;
-        by = offset.y;
-        image = core.material.images.tilesets[offset.image];
-    }
-    // 不支持autotile
-    else if (block.event.cls == 'autotile') {
-        if (core.isset(callback)) callback();
-        return;
-    }
-    // 空气墙；忽略事件
-    else if (block.id==17) {
-        if (core.isset(callback)) callback();
-        return;
-    }
-    else {
-        image = core.material.images[block.event.cls];
-        bx = 0;
-        by = core.material.icons[block.event.cls][block.event.id];
-        faceIds = block.event.faceIds||{};
-    }
     // 要运行的轨迹：将steps展开
     var moveSteps=[];
     steps.forEach(function (e) {
@@ -846,32 +895,12 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
         'right': {'x': 1, 'y': 0}
     };
 
-    var animateValue = block.event.animate || 1;
+    var animateValue = block.event.animate || 1, animateCurrent = isTileset?bx:0, animateTime = 0;
-    var animateCurrent = 0;
+    var blockCanvas = this.__initBlockCanvas(block, height, x, y);
-    if (block.event.cls=='tileset') {
+    var headCanvas = blockCanvas.headCanvas, bodyCanvas = blockCanvas.bodyCanvas, damageCanvas = blockCanvas.damageCanvas;
-        animateCurrent = bx;
+    var opacity = 1;
-    }
-    var animateTime = 0;
 
-    var alpha = 1, name = 'move'+x+'_'+y;
+    core.maps.__moveBlockCanvas(image, animateCurrent, by, height, nowX, nowY, opacity, headCanvas, bodyCanvas, damageCanvas);
-    core.createCanvas(name, block.x - core.bigmap.offsetX, block.y * 32 +32 - height - core.bigmap.offsetY, 32, height, 45);
-    core.dymCanvas[name].textAlign = 'left';
-
-    // 显伤
-    var damage = null, damageColor = null;
-    if ((block.event.cls == 'enemys' || block.event.cls == 'enemy48') && core.hasItem('book')) {
-        var damageString = core.enemys.getDamageString(block.event.id, x, y);
-        damage = damageString.damage; damageColor = damageString.color;
-    }
-
-    var draw = function() {
-        core.dymCanvas[name].clearRect(0, 0, 32, height);
-        core.dymCanvas[name].drawImage(image, animateCurrent*32, by*height, 32, height, 0, 0, 32, height);
-        // 绘制显伤
-        if (damage != null)
-            core.fillBoldText(core.dymCanvas[name], damage, damageColor, 1, height-1);
-    };
-    draw();
 
     var animate=window.setInterval(function() {
 
@@ -881,31 +910,27 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
             animateTime = 0;
             if (animateCurrent>=animateValue) animateCurrent=0;
         }
-        if (block.event.cls=='tileset') {
+        if (isTileset) animateCurrent = bx;
-            animateCurrent = bx;
-        }
 
         // 已经移动完毕，消失
         if (moveSteps.length==0) {
-            if (keep) alpha=0;
+            if (keep) opacity=0;
-            else alpha -= 0.06;
+            else opacity -= 0.06;
-            if (alpha<=0) {
+            if (opacity<=0) {
                 delete core.animateFrame.asyncId[animate];
                 clearInterval(animate);
-                core.deleteCanvas(name);
+                core.deleteCanvas(headCanvas);
+                core.deleteCanvas(bodyCanvas);
+                core.deleteCanvas(damageCanvas);
                 // 不消失
                 if (keep) {
                     core.setBlock(id, nowX/32, nowY/32);
                     core.showBlock(nowX/32, nowY/32);
                 }
-                else {
-                    if (block.event.cls == 'enemys' || block.event.cls == 'enemy48')
-                        core.clearMap('damage', nowX, nowY, 32, 32);
-                }
                 if (core.isset(callback)) callback();
             }
             else {
-                core.dymCanvas[name].canvas.style.opacity = alpha;
+                core.maps.__moveBlockCanvas(image, animateCurrent, by, height, nowX, nowY, opacity, headCanvas, bodyCanvas, damageCanvas);
             }
         }
         else {
@@ -924,8 +949,7 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
             nowX+=scan[direction].x*2;
             nowY+=scan[direction].y*2;
             // 移动
-            core.relocateCanvas(name, nowX, nowY-height+32);
+            core.maps.__moveBlockCanvas(image, animateCurrent, by, height, nowX, nowY, opacity, headCanvas, bodyCanvas, damageCanvas);
-            draw();
             if (step==16) {
                 // 该移动完毕，继续
                 step=0;
@@ -952,36 +976,12 @@ maps.prototype.jumpBlock = function(sx,sy,ex,ey,time,keep,callback) {
     core.removeBlock(sx,sy);
 
     block=block.block;
-    var image, bx, by, height = block.event.height || 32;
+    var blockInfo = this.__getBlockInfo(block);
-    if (block.event.cls == 'tileset') {
+    if (blockInfo == null) {
-        var offset = core.icons.getTilesetOffset(block.event.id);
-        if (offset==null) {
-            if (core.isset(callback)) callback();
-            return;
-        }
-        bx = offset.x;
-        by = offset.y;
-        image = core.material.images.tilesets[offset.image];
-    }
-    // 不支持autotile
-    else if (block.event.cls == 'autotile') {
         if (core.isset(callback)) callback();
         return;
     }
-    // 空气墙；忽略事件
+    var image = blockInfo.image, bx = blockInfo.bx, by = blockInfo.by, height = blockInfo.height, isTileset = blockInfo.isTileset, faceIds = blockInfo.faceIds;
-    else if (block.id==17) {
-        if (core.isset(callback)) callback();
-        return;
-    }
-    else {
-        image = core.material.images[block.event.cls];
-        bx = 0;
-        by = core.material.icons[block.event.cls][block.event.id];
-    }
-
-    var alpha = 1;
-    core.setAlpha('route', alpha);
-    core.canvas.route.drawImage(image, bx*32, by * height, 32, height, block.x * 32, block.y * 32 +32 - height, 32, height);
 
     core.playSound('jump.mp3');
 
@@ -1009,35 +1009,27 @@ maps.prototype.jumpBlock = function(sx,sy,ex,ey,time,keep,callback) {
         curry = (curry * jump_count + ey) / (jump_count + 1.0);
     }
 
-    var animateValue = block.event.animate || 1;
+    var blockCanvas = this.__initBlockCanvas(block, height, sx, sy);
-    var animateCurrent = 0;
+    var headCanvas = blockCanvas.headCanvas, bodyCanvas = blockCanvas.bodyCanvas, damageCanvas = blockCanvas.damageCanvas;
-    var animateTime = 0;
+    var opacity = 1;
+
+    core.maps.__moveBlockCanvas(image, bx, by, height, drawX(), drawY(), opacity, headCanvas, bodyCanvas, damageCanvas);
+
     var animate=window.setInterval(function() {
 
-        animateTime += time / 16 / core.status.replay.speed;
-        if (animateTime >= core.values.animateSpeed) {
-            animateCurrent++;
-            animateTime = 0;
-            if (animateCurrent >= animateValue) animateCurrent = 0;
-        }
-        if (block.event.cls=='tileset') {
-            animateCurrent = bx;
-        }
-
         if (jump_count>0) {
-            core.clearMap('route', drawX(), drawY()-height+32, 32, height);
             updateJump();
-            core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, drawX(), drawY()-height+32, 32, height);
+            core.maps.__moveBlockCanvas(image, bx, by, height, drawX(), drawY(), opacity, headCanvas, bodyCanvas, damageCanvas);
         }
         else {
-            if (keep) alpha=0;
+            if (keep) opacity=0;
-            else alpha -= 0.06;
+            else opacity -= 0.06;
-            core.clearMap('route', drawX(), drawY()-height+32, 32, height);
+            if (opacity<=0) {
-            if (alpha<=0) {
                 delete core.animateFrame.asyncId[animate];
                 clearInterval(animate);
-                core.clearMap('route');
+                core.deleteCanvas(headCanvas);
-                core.setAlpha('route', 1);
+                core.deleteCanvas(bodyCanvas);
+                core.deleteCanvas(damageCanvas);
                 if (keep) {
                     core.setBlock(id, ex, ey);
                     core.showBlock(ex, ey);
@@ -1045,9 +1037,7 @@ maps.prototype.jumpBlock = function(sx,sy,ex,ey,time,keep,callback) {
                 if (core.isset(callback)) callback();
             }
             else {
-                core.setAlpha('route', alpha);
+                core.maps.__moveBlockCanvas(image, bx, by, height, drawX(), drawY(), opacity, headCanvas, bodyCanvas, damageCanvas);
-                core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, drawX(), drawY()-height+32, 32, height);
-                core.setAlpha('route', 1);
             }
         }
 
@@ -1068,66 +1058,47 @@ maps.prototype.animateBlock = function (loc,type,time,callback) {
         var block = core.getBlock(t[0],t[1],null,true);
         if (block==null) return;
         block=block.block;
-        var image, bx, by, height = block.event.height || 32;
+
-        if (block.event.cls == 'tileset') {
+        var blockInfo = core.maps.__getBlockInfo(block);
-            var offset = core.icons.getTilesetOffset(block.event.id);
+        if (blockInfo == null) return;
-            if (offset==null) {
+        var blockCanvas = core.maps.__initBlockCanvas(block, blockInfo.height, t[0], t[1]);
-                if (core.isset(callback)) callback();
+        var headCanvas = blockCanvas.headCanvas, bodyCanvas = blockCanvas.bodyCanvas, damageCanvas = blockCanvas.damageCanvas;
-                return;
+
-            }
-            bx = offset.x;
-            by = offset.y;
-            image = core.material.images.tilesets[offset.image];
-        }
-        // 不支持autotile
-        else if (block.event.cls == 'autotile') {
-            return;
-        }
-        // 空气墙，忽略事件
-        else if (block.id==17) return;
-        else {
-            image = core.material.images[block.event.cls];
-            bx = 0;
-            by = core.material.icons[block.event.cls][block.event.id];
-        }
         list.push({
-            'x': t[0], 'y': t[1], 'height': height,
+            'x': t[0], 'y': t[1], 'height': blockInfo.height,
-            'bx': bx, 'by': by, 'image': image
+            'bx': blockInfo.bx, 'by': blockInfo.by, 'image': blockInfo.image,
-        })
+            'headCanvas': headCanvas, 'bodyCanvas': bodyCanvas, 'damageCanvas': damageCanvas
-    })
+        });
+
+    });
 
     if (list.length==0) {
         if (core.isset(callback)) callback();
         return;
     }
 
-    // core.status.replay.animate=true;
+    var opacity = 0;
-    var clear = function () {
+    if (type=='hide') opacity=1;
-        list.forEach(function (t) {
+
-            core.clearMap('route', t.x*32, t.y*32+32-t.height, 32, t.height);
-        })
-    }
     var draw = function () {
         list.forEach(function (t) {
-            core.canvas.route.drawImage(t.image, t.bx*32, t.by*t.height, 32, t.height, t.x*32, t.y*32+32-t.height, 32, t.height);
+            core.maps.__moveBlockCanvas(t.image, t.bx, t.by, t.height, t.x*32, t.y*32, opacity, t.headCanvas, t.bodyCanvas, t.damageCanvas);
         })
-    }
+    };
-
-    var alpha = 0;
-    if (type=='hide') alpha=1;
-
-    core.setAlpha('route', alpha);
     draw();
 
     var per_time = 10, steps = parseInt(time / per_time), delta = 1 / steps;
     var animate = setInterval(function () {
-        if (type=='show') alpha += delta;
+        if (type=='show') opacity += delta;
-        else alpha -= delta;
+        else opacity -= delta;
-        clear();
+        if (opacity >=1 || opacity<=0) {
-        if (alpha >=1 || alpha<=0) {
             delete core.animateFrame.asyncId[animate];
             clearInterval(animate);
-            core.setAlpha('route', 1);
+            list.forEach(function (t) {
+                core.deleteCanvas(t.headCanvas);
+                core.deleteCanvas(t.bodyCanvas);
+                core.deleteCanvas(t.damageCanvas);
+            });
             if (type == 'show') {
                 loc.forEach(function (t) {
                     core.showBlock(t[0],t[1],data.floorId);
@@ -1141,7 +1112,6 @@ maps.prototype.animateBlock = function (loc,type,time,callback) {
             if (core.isset(callback)) callback();
         }
         else {
-            core.setAlpha('route', alpha);
             draw();
         }
     }, per_time);

libs/ui.js

@@ -2796,7 +2796,6 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) {
     newCanvas.style.zIndex = z;
     newCanvas.style.position = 'absolute';
     core.dymCanvas[name] = newCanvas.getContext('2d');
-    core.dom.dymCanvas.appendChild(newCanvas);
     core.dymCanvas._list.push({
         "id": name,
         "style": {
@@ -2804,10 +2803,12 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) {
             "top": y,
         }
     });
+    core.dom.gameDraw.appendChild(newCanvas);
 }
 
 ////// canvas查找 //////
 ui.prototype.findCanvas = function (name) {
+    if (!core.isset(name)) return -1;
     for (var index = 0; index < core.dymCanvas._list.length; index++) {
         if (core.dymCanvas._list[index].id == name)
             return index;
@@ -2817,6 +2818,7 @@ ui.prototype.findCanvas = function (name) {
 
 ////// canvas重定位 //////
 ui.prototype.relocateCanvas = function (name, x, y) {
+    if (!core.isset(name)) return;
     var index = core.findCanvas(name);
     if (index < 0) return;
     if (core.isset(x)) {
@@ -2831,6 +2833,7 @@ ui.prototype.relocateCanvas = function (name, x, y) {
 
 ////// canvas重置 //////
 ui.prototype.resizeCanvas = function (name, width, height) {
+    if (!core.isset(name)) return;
     var dstCanvas = core.dymCanvas[name].canvas;
     if (core.isset(width)) {
         dstCanvas.width = width;
@@ -2843,9 +2846,19 @@ ui.prototype.resizeCanvas = function (name, width, height) {
 }
 ////// canvas删除 //////
 ui.prototype.deleteCanvas = function (name) {
+    if (!core.isset(name)) return;
     var index = core.findCanvas(name);
     if (index == -1) return;
-    core.dom.dymCanvas.removeChild(core.dom.dymCanvas.childNodes[index]);
+    core.dom.gameDraw.removeChild(core.dymCanvas[name].canvas);
-    core.dymCanvas[name] = null;
+    delete core.dymCanvas[name];
     core.dymCanvas._list.splice(index,1);
 }
+
+////// 删除所有动态canvas //////
+ui.prototype.deleteAllCanvas = function () {
+    core.dymCanvas._list.forEach(function (t) {
+        core.dom.gameDraw.removeChild(core.dymCanvas[t.id].canvas);
+        delete core.dymCanvas[t.id];
+    });
+    core.dymCanvas._list = [];
+}

main.js

@@ -69,7 +69,6 @@ function main() {
         'skillCol': document.getElementById('skillCol'),
         'hard': document.getElementById('hard'),
         'statusCanvas': document.getElementById('statusCanvas'),
-        'dymCanvas': document.getElementById('dymCanvas'),
     };
     this.mode = 'play';
     this.loadList = [

styles.css

@@ -306,10 +306,6 @@ p#name {
     z-index: 170;
 }
 
-#dymCanvas {
-    position: absolute;
-}
-
 .clearfix:before,
 .clearfix:after {
    content: ".";