Animate image & Gif support

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

_server/blockly/MotaAction.g4

@@ -177,6 +177,10 @@ action
     |   animate_s
     |   showImage_0_s
     |   showImage_1_s
+    |   animateImage_0_s
+    |   animateImage_1_s
+    |   showGif_0_s
+    |   showGif_1_s
     |   setFg_0_s
     |   setFg_1_s
     |   setWeather_s
@@ -577,6 +581,57 @@ var code = '{"type": "showImage"},\n';
 return code;
 */
 
+animateImage_0_s
+    : '图片淡入' EvalString '起点像素位置' 'x' Number 'y' Number '动画时间' Int Newline
+    ;
+
+/* animateImage_0_s
+tooltip : animageImage：图片淡入
+helpUrl : https://ckcz123.github.io/mota-js/#/event?id=animateimage%ef%bc%9a%e5%9b%be%e7%89%87%e6%b7%a1%e5%85%a5%e6%b7%a1%e5%87%b
+default : ["bg.jpg",0,0,500]
+colour : this.printColor
+var code = '{"type": "animateImage", "action": "show", "name": "'+EvalString_0+'", "loc": ['+Number_0+','+Number_1+'], "time": '+Int_0+'},\n';
+return code;
+*/
+
+animateImage_1_s
+    : '图片淡出' EvalString '起点像素位置' 'x' Number 'y' Number '动画时间' Int Newline
+    ;
+
+/* animateImage_1_s
+tooltip : animageImage：图片淡出
+helpUrl : https://ckcz123.github.io/mota-js/#/event?id=animateimage%ef%bc%9a%e5%9b%be%e7%89%87%e6%b7%a1%e5%85%a5%e6%b7%a1%e5%87%b
+default : ["bg.jpg",0,0,500]
+colour : this.printColor
+var code = '{"type": "animateImage", "action": "hide", "name": "'+EvalString_0+'", "loc": ['+Number_0+','+Number_1+'], "time": '+Int_0+'},\n';
+return code;
+*/
+
+showGif_0_s
+    :   '显示动图' EvalString '起点像素位置' 'x' Number 'y' Number Newline
+    ;
+
+/* showGif_0_s
+tooltip : showGif：显示动图
+helpUrl : https://ckcz123.github.io/mota-js/#/event?id=showgif%ef%bc%9a%e6%98%be%e7%a4%ba%e5%8a%a8%e5%9b%be
+default : ["bg.gif",0,0]
+colour : this.printColor
+var code = '{"type": "showGif", "name": "'+EvalString_0+'", "loc": ['+Number_0+','+Number_1+']},\n';
+return code;
+*/
+
+showGif_1_s
+    :   '清除所有动图' Newline
+    ;
+
+/* showGif_1_s
+tooltip : showGif：清除所有显示的动图
+helpUrl : https://ckcz123.github.io/mota-js/#/event?id=showgif%ef%bc%9a%e6%98%be%e7%a4%ba%e5%8a%a8%e5%9b%be
+colour : this.printColor
+var code = '{"type": "showGif"},\n';
+return code;
+*/
+
 setFg_0_s
     :   '更改画面色调' Number ',' Number ',' Number ',' Number '动画时间' Int? Newline
     ;
@@ -1244,6 +1299,24 @@ ActionParser.prototype.parseAction = function() {
           this.next]);
       }
       break;
+    case "animateImage": // 显示图片
+      if(data.action == 'show'){
+        this.next = MotaActionBlocks['animateImage_0_s'].xmlText([
+          data.name,data.loc[0],data.loc[1],data.time,this.next]);
+      } else if (data.action == 'hide') {
+        this.next = MotaActionBlocks['animateImage_1_s'].xmlText([
+          data.name,data.loc[0],data.loc[1],data.time,this.next]);
+      }
+      break;
+    case "showGif": // 显示动图
+      if(this.isset(data.name)){
+        this.next = MotaActionBlocks['showGif_0_s'].xmlText([
+          data.name,data.loc[0],data.loc[1],this.next]);
+        } else {
+          this.next = MotaActionBlocks['showGif_1_s'].xmlText([
+            this.next]);
+        }
+        break;
     case "setFg": // 颜色渐变
       if(this.isset(data.color)){
         this.next = MotaActionBlocks['setFg_0_s'].xmlText([

_server/editor_blockly.js

@@ -62,7 +62,11 @@ editor_blockly = function () {
       ]}),
       MotaActionBlocks['setText_s'].xmlText(),
       MotaActionBlocks['showImage_0_s'].xmlText(),
+      MotaActionBlocks['animateImage_0_s'].xmlText(),
+      MotaActionBlocks['animateImage_1_s'].xmlText(),
       MotaActionBlocks['showImage_1_s'].xmlText(),
+      MotaActionBlocks['showGif_0_s'].xmlText(),
+      MotaActionBlocks['showGif_1_s'].xmlText(),
       MotaActionBlocks['tip_s'].xmlText(),
       MotaActionBlocks['openShop_s'].xmlText(),
       MotaActionBlocks['win_s'].xmlText(),

docs/event.md

@@ -636,6 +636,50 @@ loc为图片左上角坐标，以像素为单位进行计算。
 
 调用show/hide/move/animate等几个事件同样会清除所有显示的图片。
 
+### animateImage：图片淡入淡出
+
+我们还可以使用 `{"type": "animateImage"}` 来造成显示图片的淡入淡出效果。
+
+``` js
+"x,y": [ // 实际执行的事件列表
+    {"type": "animateImage", "action": "show", "name": "bg.jpg", "loc": [231,297], "time": 500}, // 在(231,297)淡入bg.jpg，动画时间500ms
+    {"type": "animateImage", "action": "hide", "name": "1.png", "loc": [109,167], "time": 300}, // 在(109,167)淡出1.png，动画时间300ms
+]
+```
+
+action为淡入还是淡出，`show`为淡入，`hide`会淡出。
+
+name为图片名。**请确保图片在data.js中的images中被定义过。**
+
+loc为图片左上角坐标，以像素为单位进行计算。
+
+time为淡入淡出的时间，如果是0则忽略此项。
+
+!> 淡入淡出图片只是会在顶层绘制“淡入”和“淡出”效果，动画结束即消失，并不会实际对图片的显示造成影响。请与showImage事件合用。
+
+如果多张图片的淡入淡出可以采用以下方式（仅供参考）：
+
+假设我现在已经有了`1.jpg`显示在屏幕上：
+- 淡入显示`2.png`：调用`animateImage`淡入图片，然后立刻调用`showImage`显示图片。
+- 淡出`1.png`：清除所有图片，`showImage`显示`2.png`，然后调用`animateImage`淡出`1.jpg`
+
+### showGif：显示动图
+
+我们可以使用 `{"type": "showGif"}` 来显示一张图片。
+
+``` js
+"x,y": [ // 实际执行的事件列表
+    {"type": "showGif", "name": "timg.gif", "loc": [231,297]}, // 在(231,297)显示一张动图
+    {"type": "showGif"} // 如果不指定name则清除所有动图。
+]
+```
+
+name为图片名。**请确保图片在data.js中的images中被定义过。**
+
+loc为动图左上角坐标，以像素为单位进行计算。
+
+如果不指定name则清除所有显示的动图。
+
 ### setFg: 更改画面色调
 
 我们可以使用 `{"type": "setFg"}` 来更改画面色调。

editor.html

@@ -139,9 +139,11 @@
     <div id="left6" class='leftTab' style="z-index:-1;opacity: 0;">
         <div style="position: relative; height: 95%"><!-- eventsEditor -->
             <h3>事件编辑器 &nbsp;&nbsp;
+                <!--
                 <button onclick="editor_blockly.showXML()">Show XML</button>
                 <button onclick="editor_blockly.runCode()">console.log(obj=code)</button>
-                <select id="entryType" disabled="disabled">
+                -->
+                <select id="entryType" disabled="disabled" style="display: none">
                     <option value="event">event</option>
                     <option value="changeFloor">changeFloor</option>
                     <option value="point">point</option>
@@ -151,9 +153,9 @@
                     <option value="afterOpenDoor">afterOpenDoor</option>
                     <option value="firstArrive">firstArrive</option>
                 </select>
-                <button onclick="editor_blockly.parse()">parse</button>
                 <button onclick="editor_blockly.confirm()">confirm</button>
                 <button onclick="editor_blockly.cancel()">cancel</button>
+                <button onclick="editor_blockly.parse()">parse</button>
                 <xml id="toolbox" style="display:none">
                     <category name="entry"></category>
                     <category name="statement"></category>
@@ -348,6 +350,8 @@
         <img src="project/images/settings.png" class="tools" id='img-settings'>
         <p class="statusLabel tools" id="hard"></p>
     </div>
+    <div id="gif"></div>
+    <div id="gif2"></div>
     <div id="curtain"></div>
     <!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
     <!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->

index.html

@@ -103,6 +103,8 @@
         <img src="project/images/settings.png" class="tools" id='img-settings'>
         <p class="statusLabel tools" id="hard"></p>
     </div>
+    <div id="gif"></div>
+    <div id="gif2"></div>
     <div id="curtain"></div>
     <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
     <canvas class='gameCanvas' id='event' width='416' height='416'></canvas>

libs/control.js

@@ -2349,6 +2349,24 @@ control.prototype.resize = function(clientWidth, clientHeight) {
                 border: '3px #fff solid',
             }
         },
+        {
+            id: 'gif',
+            rules: {
+                width: (canvasWidth - SPACE*2) + unit,
+                height:(canvasWidth - SPACE*2) + unit,
+                top: (canvasTop + SPACE) + unit,
+                right: SPACE + unit,
+            }
+        },
+        {
+            id: 'gif2',
+            rules: {
+                width: (canvasWidth - SPACE*2) + unit,
+                height:(canvasWidth - SPACE*2) + unit,
+                top: (canvasTop + SPACE) + unit,
+                right: SPACE + unit,
+            }
+        },
         {
             id: 'curtain',
             rules: {

libs/events.js

@@ -390,13 +390,15 @@ events.prototype.doAction = function() {
             });
             break;
         case "changeFloor": // 楼层转换
-            var heroLoc = {"x": data.loc[0], "y": data.loc[1]};
+            {
-            if (core.isset(data.direction)) heroLoc.direction=data.direction;
+                var heroLoc = {"x": data.loc[0], "y": data.loc[1]};
-            core.changeFloor(data.floorId||core.status.floorId, null, heroLoc, data.time, function() {
+                if (core.isset(data.direction)) heroLoc.direction=data.direction;
-                core.lockControl();
+                core.changeFloor(data.floorId||core.status.floorId, null, heroLoc, data.time, function() {
-                core.events.doAction();
+                    core.lockControl();
-            });
+                    core.events.doAction();
-            break;
+                });
+                break;
+            }
         case "changePos": // 直接更换勇士位置，不切换楼层
             core.clearMap('hero', 0, 0, 416, 416);
             if (core.isset(data.loc)) {
@@ -414,6 +416,36 @@ events.prototype.doAction = function() {
             else core.clearMap('animate', 0, 0, 416, 416);
             this.doAction();
             break;
+        case "animateImage": // 淡入淡出图片
+            if (core.status.replay.replaying) { // 正在播放录像
+                this.doAction();
+            }
+            else {
+                if (core.isset(data.loc) && core.isset(core.material.images.images[data.name]) && (data.action=="show" || data.action=="hide")) {
+                    core.events.animateImage(data.action, core.material.images.images[data.name], data.loc, data.time, function() {
+                        core.events.doAction();
+                    });
+                }
+                else {
+                    this.doAction();
+                }
+            }
+            break;
+        case "showGif": // 显示动图
+            if (core.isset(data.loc) && core.isset(core.material.images.images[data.name])) {
+                var gif = new Image();
+                gif.src = core.material.images.images[data.name].src;
+                gif.style.position = 'absolute';
+                gif.style.left = (data.loc[0]*core.domStyle.scale)+"px";
+                gif.style.top = (data.loc[1]*core.domStyle.scale)+"px";
+                core.dom.gif2.appendChild(gif);
+            }
+            else {
+                while (core.dom.gif2.firstChild)
+                    core.dom.gif2.removeChild(core.dom.gif2.firstChild);
+            }
+            this.doAction();
+            break;
         case "setFg": // 颜色渐变
             core.setFg(data.color, data.time, function() {
                 core.events.doAction();
@@ -424,21 +456,23 @@ events.prototype.doAction = function() {
             this.doAction();
             break;
         case "openDoor": // 开一个门，包括暗墙
-            var floorId=data.floorId || core.status.floorId;
+            {
-            var block=core.getBlock(data.loc[0], data.loc[1], floorId);
+                var floorId=data.floorId || core.status.floorId;
-            if (block!=null) {
+                var block=core.getBlock(data.loc[0], data.loc[1], floorId);
-                if (floorId==core.status.floorId)
+                if (block!=null) {
-                    core.openDoor(block.block.event.id, block.block.x, block.block.y, false, function() {
+                    if (floorId==core.status.floorId)
-                        core.events.doAction();
+                        core.openDoor(block.block.event.id, block.block.x, block.block.y, false, function() {
-                    })
+                            core.events.doAction();
-                else {
+                        })
-                    core.removeBlock(block.block.x,block.block.y,floorId);
+                    else {
-                    this.doAction();
+                        core.removeBlock(block.block.x,block.block.y,floorId);
+                        this.doAction();
+                    }
+                    break;
                 }
+                this.doAction();
                 break;
             }
-            this.doAction();
-            break;
         case "openShop": // 打开一个全局商店
             if (core.status.replay.replaying) { // 正在播放录像，简单将visited置为true
                 core.status.shops[data.id].visited=true;
@@ -458,19 +492,21 @@ events.prototype.doAction = function() {
             })
             break;
         case "trigger": // 触发另一个事件；当前事件会被立刻结束。需要另一个地点的事件是有效的
-            var toX=data.loc[0], toY=data.loc[1];
+            {
-            var block=core.getBlock(toX, toY);
+                var toX=data.loc[0], toY=data.loc[1];
-            if (block!=null) {
+                var block=core.getBlock(toX, toY);
-                block = block.block;
+                if (block!=null) {
-                if (core.isset(block.event) && block.event.trigger=='action') {
+                    block = block.block;
-                    // 触发
+                    if (core.isset(block.event) && block.event.trigger=='action') {
-                    core.status.event.data.list = core.clone(block.event.data);
+                        // 触发
-                    core.status.event.data.x=block.x;
+                        core.status.event.data.list = core.clone(block.event.data);
-                    core.status.event.data.y=block.y;
+                        core.status.event.data.x=block.x;
+                        core.status.event.data.y=block.y;
+                    }
                 }
+                this.doAction();
+                break;
             }
-            this.doAction();
-            break;
         case "playSound":
             if (!core.status.replay.replaying)
                 core.playSound(data.name);
@@ -586,16 +622,18 @@ events.prototype.doAction = function() {
             });
             break;
         case "function":
-            var func = data["function"];
+            {
-            if (core.isset(func)) {
+                var func = data["function"];
-                if ((typeof func == "string") && func.indexOf("function")==0) {
+                if (core.isset(func)) {
-                    eval('('+func+')()');
+                    if ((typeof func == "string") && func.indexOf("function")==0) {
+                        eval('('+func+')()');
+                    }
+                    else if (func instanceof Function)
+                        func();
                 }
-                else if (func instanceof Function)
+                this.doAction();
-                    func();
+                break;
             }
-            this.doAction();
-            break;
         case "update":
             core.updateStatusBar();
             this.doAction();
@@ -610,15 +648,17 @@ events.prototype.doAction = function() {
             }
             break;
         case "revisit": // 立刻重新执行该事件
-            var block=core.getBlock(x,y); // 重新获得事件
+            {
-            if (block!=null) {
+                var block=core.getBlock(x,y); // 重新获得事件
-                block = block.block;
+                if (block!=null) {
-                if (core.isset(block.event) && block.event.trigger=='action') {
+                    block = block.block;
-                    core.status.event.data.list = core.clone(block.event.data);
+                    if (core.isset(block.event) && block.event.trigger=='action') {
+                        core.status.event.data.list = core.clone(block.event.data);
+                    }
                 }
+                this.doAction();
+                break;
             }
-            this.doAction();
-            break;
         case "exit": // 立刻结束事件
             core.status.event.data.list = [];
             core.events.doAction();
@@ -893,6 +933,10 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback
             }
             else core.setWeather();
 
+            // 清除gif
+            while (core.dom.gif.firstChild)
+                core.dom.gif.removeChild(core.dom.gif.firstChild);
+
             // 检查重生
             if (!core.isset(fromLoad)) {
                 core.status.maps[floorId].blocks.forEach(function(block) {
@@ -902,7 +946,6 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback
                     }
                 })
             }
-
             core.drawMap(floorId, function () {
                 setTimeout(function() {
                     if (core.isset(heroLoc.direction))
@@ -941,6 +984,37 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback
     }, 25);
 }
 
+////// 图片淡入/淡出 //////
+events.prototype.animateImage = function (type, image, loc, time, callback) {
+    time = time||0;
+    if ((type!='show' && type!='hide') || time<=0) {
+        if (core.isset(callback)) callback();
+        return;
+    }
+
+    clearInterval(core.interval.tipAnimate);
+    core.setAlpha('data', 1);
+
+    var opacityVal = 0;
+    if (type == 'hide') opacityVal = 1;
+
+    core.setOpacity('data', opacityVal);
+    core.canvas.data.drawImage(image, loc[0], loc[1]);
+    core.status.replay.animate=true;
+    var animate = setInterval(function () {
+        if (type=='show') opacityVal += 0.1;
+        else opacityVal -= 0.1;
+        core.setOpacity('data', opacityVal);
+        if (opacityVal >=1 || opacityVal<=0) {
+            clearInterval(animate);
+            core.clearMap('data', 0, 0, 416, 416);
+            core.setOpacity('data', 1);
+            core.status.replay.animate=false;
+            if (core.isset(callback)) callback();
+        }
+    }, time / 10 / core.status.replay.speed);
+}
+
 ////// 打开一个全局商店 //////
 events.prototype.openShop = function(shopId, needVisited) {
     var shop = core.status.shops[shopId];

libs/loader.js

@@ -171,7 +171,7 @@ loader.prototype.loadMusic = function () {
         }
         else {
             var music = new Audio();
-            music.preload = core.musicStatus.startDirectly?'auto':'none';
+            music.preload = 'none';
             if (main.bgmRemote) music.src = 'https://gitee.com/ckcz123/h5music/raw/master/'+core.firstData.name+'/'+t;
             else music.src = 'project/sounds/'+t;
             music.loop = 'loop';

libs/maps.js

@@ -328,8 +328,19 @@ maps.prototype.drawMap = function (mapName, callback) {
             if (core.isset(dx) && core.isset(dy) && core.isset(core.material.images.images[p])) {
                 dx*=32; dy*=32;
                 var image = core.material.images.images[p];
-                if (!t[3])
+                if (!t[3]) {
-                    core.canvas.bg.drawImage(image, dx*ratio, dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height));
+                    core.canvas.bg.drawImage(image, dx * ratio, dy * ratio, Math.min(size - dx * ratio, ratio * image.width), Math.min(size - dy * ratio, ratio * image.height));
+                    if (/.*\.gif/i.test(p)) {
+                        while (core.dom.gif.firstChild)
+                            core.dom.gif.removeChild(core.dom.gif.firstChild);
+                        var gif = new Image();
+                        gif.src = core.material.images.images[p].src;
+                        gif.style.position = 'absolute';
+                        gif.style.left = (dx*core.domStyle.scale)+"px";
+                        gif.style.top = (dy*core.domStyle.scale)+"px";
+                        core.dom.gif.appendChild(gif);
+                    }
+                }
                 else
                     core.canvas.event2.drawImage(image, dx*ratio, dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height));
             }
@@ -669,9 +680,6 @@ maps.prototype.animateBlock = function (loc,type,time,callback) {
         if (type=='show') opacityVal += 0.1;
         else opacityVal -= 0.1;
         core.setOpacity('animate', opacityVal);
-        core.clearMap('animate',0,0,416,416);
-
-        draw();
         if (opacityVal >=1 || opacityVal<=0) {
             clearInterval(animate);
             core.clearMap('animate', 0, 0, 416, 416);

main.js

@@ -35,6 +35,8 @@ function main() {
         'toolBar': document.getElementById('toolBar'),
         'tools': document.getElementsByClassName('tools'),
         'gameCanvas': document.getElementsByClassName('gameCanvas'),
+        'gif': document.getElementById('gif'),
+        'gif2': document.getElementById('gif2'),
         'curtain': document.getElementById('curtain'),
         'startButtons': document.getElementById('startButtons'),
         'playGame': document.getElementById('playGame'),

project/data.js

@@ -5,13 +5,13 @@ data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
 			"sample0", "sample1", "sample2", "MT0"
 		],
 		"images" : [
-			"bg.jpg",
+			"bg.jpg"
 		],
 		"animates" : [ 
-			"hand", "sword", "zone", "yongchang",
+			"hand", "sword", "zone",
 		],
 		"bgms" : [ 
-			'bgm.mp3', 'qianjin.mid', 'star.mid',
+			'bgm.mp3'
 		],
 		"sounds" : [ 
 			'floor.mp3', 'attack.ogg', 'door.ogg', 'item.ogg', 'zone.ogg'

project/floors/sample2.js

@@ -12,7 +12,7 @@ main.floors.sample2 =
     "images": [], // // 该层默认显示的所有图片；详细用法请查看文档“自定义素材”中的说明。
     "color": [255,0,0,0.3], // 该层的默认画面色调。本项可不写（代表无色调），如果写需要是一个RGBA数组。
     "weather": ["rain",10], // 该层的默认天气。本项可忽略表示晴天，如果写则第一项为"rain"或"snow"代表雨雪，第二项为1-10之间的数代表强度。
-    "bgm": "qianjin.mid", // 到达该层后默认播放的BGM。本项可忽略。
+    "bgm": "bgm.mp3", // 到达该层后默认播放的BGM。本项可忽略。
     "item_ratio": 1, // 该层的宝石/血瓶倍率
     "map": [ // 地图数据，需要是13x13，建议使用地图生成器来生成
         [  5,  5,  5,  5,  5,  5, 87,  5,  5,  5,  5,  5,  5],

styles.css

@@ -21,7 +21,7 @@
     position: fixed;
     top: 10px;
     left: 10px;
-    z-index: 15;
+    z-index: 320;
 }
 
 #startPanel {
@@ -32,7 +32,7 @@
     left: 0;
     background-color: #fff;
     overflow: hidden;
-    z-index: 12;
+    z-index: 250;
 }
 
 #startTop {
@@ -42,7 +42,7 @@
     top: 0;
     left: 0;
     background-color: #000;
-    z-index: 14;
+    z-index: 300;
 }
 
 #startTopProgressBar {
@@ -77,12 +77,12 @@
     height: 100%;
     width: auto;
     transform:translate(-50%,-50%);
-    z-index: 12;
+    z-index: 210;
 }
 
 #startLogo {
     position: absolute;
-    z-index: 12;
+    z-index: 240;
     left: 0;
     right: 0;
     margin-left: auto;
@@ -95,7 +95,7 @@
 
 #startTitle {
     position: absolute;
-    z-index: 13;
+    z-index: 230;
 }
 
 #startButtonGroup {
@@ -106,7 +106,7 @@
     background-color: #000;
     opacity: 0.85;
     display: none;
-    z-index: 12;
+    z-index: 220;
     bottom: 0;
     margin-bottom: 7%;
 }
@@ -142,7 +142,7 @@
     display: none;
     color: #fff;
     background-color: #000;
-    z-index: 11;
+    z-index: 180;
 }
 
 #logoLabel {
@@ -170,7 +170,7 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     background: url(project/images/ground.png) repeat;
-    z-index: 9;
+    z-index: 160;
     display: none;
 }
 #statusBar .status{
@@ -199,7 +199,7 @@
 #toolBar {
     position: absolute;
     background: url(project/images/ground.png) repeat;
-    z-index: 8;
+    z-index: 150;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -233,47 +233,59 @@ span#poison, span#weak, span#curse {
     -webkit-box-sizing: border-box;
 }
 
+#gif {
+    z-index: 20;
+    position: absolute;
+    overflow: hidden;
+}
+
+#gif2 {
+    z-index: 90;
+    position: absolute;
+    overflow: hidden;
+}
+
 #curtain {
-    z-index: 8;
+    z-index: 100;
     position: absolute;
     opacity: 0;
     background: #000000;
 }
 
 #bg {
-    z-index: 1;
+    z-index: 10;
 }
 
 #event {
-    z-index: 2;
+    z-index: 30;
 }
 
 #hero {
-    z-index: 3;
+    z-index: 40;
 }
 
 #event2 {
-    z-index: 4;
+    z-index: 50;
 }
 
 #fg {
-    z-index: 5;
+    z-index: 60;
 }
 
 #animate {
-    z-index: 6;
+    z-index: 70;
 }
 
 #weather {
-    z-index: 7;
+    z-index: 80;
 }
 
 #ui {
-    z-index: 9;
+    z-index: 110;
 }
 
 #data {
-    z-index: 10;
+    z-index: 120;
 }
 
 .clearfix:before,

更新说明.txt

@@ -2,9 +2,9 @@
 
 编辑器添加新建和删除按钮；地图自动保存 √
 录像支持倒退（录像播放中每50步自动存档，最多存20个）
-支持用gif动图作为某层楼的背景图
+Gif支持：可以作为楼层背景图或者使用显示动图事件  √
+图片显示增加淡入淡出效果  √
 APP端也能下载录像
-图片显示增加淡入淡出效果
 地图临界显伤  √
 单个存档清理  √
 大数据魔塔的支持（临界计算等）  √