Move Image

_server/blockly/MotaAction.g4

@@ -207,6 +207,7 @@ action
     |   animateImage_1_s
     |   showGif_0_s
     |   showGif_1_s
+    |   moveImage_0_s
     |   setFg_0_s
     |   setFg_1_s
     |   setWeather_s
@@ -408,7 +409,7 @@ trigger_s
 /* trigger_s
 tooltip : trigger: 立即触发另一个地点的事件
 helpUrl : https://ckcz123.github.io/mota-js/#/event?id=trigger-%e7%ab%8b%e5%8d%b3%e8%a7%a6%e5%8f%91%e5%8f%a6%e4%b8%80%e4%b8%aa%e5%9c%b0%e7%82%b9%e7%9a%84%e4%ba%8b%e4%bb%b6
-default : [0,0]
+default : ["0","0"]
 colour : this.eventColor
 var code = '{"type": "trigger", "loc": ['+PosString_0+','+PosString_1+']},\n';
 return code;
@@ -527,7 +528,7 @@ openDoor_s
 /* openDoor_s
 tooltip : openDoor: 开门,楼层可不填表示当前层
 helpUrl : https://ckcz123.github.io/mota-js/#/event?id=opendoor-%e5%bc%80%e9%97%a8
-default : [0,0,""]
+default : ["","",""]
 colour : this.dataColor
 IdString_0 = IdString_0 && (', "floorId": "'+IdString_0+'"');
 var code = '{"type": "openDoor", "loc": ['+PosString_0+','+PosString_1+']'+IdString_0+'},\n';
@@ -541,7 +542,7 @@ changeFloor_s
 /* changeFloor_s
 tooltip : changeFloor: 楼层切换,动画时间可不填
 helpUrl : https://ckcz123.github.io/mota-js/#/event?id=changefloor-%e6%a5%bc%e5%b1%82%e5%88%87%e6%8d%a2
-default : ["MT1",0,0,null,500]
+default : ["MT1","0","0",null,500]
 colour : this.dataColor
 DirectionEx_List_0 = DirectionEx_List_0 && (', "direction": "'+DirectionEx_List_0+'"');
 Int_0 = Int_0 ?(', "time": '+Int_0):'';
@@ -556,7 +557,7 @@ changePos_0_s
 /* changePos_0_s
 tooltip : changePos: 当前位置切换
 helpUrl : https://ckcz123.github.io/mota-js/#/event?id=changepos-%e5%bd%93%e5%89%8d%e4%bd%8d%e7%bd%ae%e5%88%87%e6%8d%a2%e5%8b%87%e5%a3%ab%e8%bd%ac%e5%90%91
-default : [0,0,null]
+default : ["","",null]
 colour : this.dataColor
 DirectionEx_List_0 = DirectionEx_List_0 && (', "direction": "'+DirectionEx_List_0+'"');
 var code = '{"type": "changePos", "loc": ['+PosString_0+','+PosString_1+']'+DirectionEx_List_0+'},\n';
@@ -632,7 +633,7 @@ showImage_0_s
 /* showImage_0_s
 tooltip : showImage：显示图片
 helpUrl : https://ckcz123.github.io/mota-js/#/event?id=showimage%ef%bc%9a%e6%98%be%e7%a4%ba%e5%9b%be%e7%89%87
-default : ["bg.jpg",0,0]
+default : ["bg.jpg","0","0"]
 colour : this.printColor
 var code = '{"type": "showImage", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+']},\n';
 return code;
@@ -657,7 +658,7 @@ animateImage_0_s
 /* 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]
+default : ["bg.jpg","0","0",500]
 colour : this.printColor
 var code = '{"type": "animateImage", "action": "show", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+'},\n';
 return code;
@@ -670,7 +671,7 @@ animateImage_1_s
 /* 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]
+default : ["bg.jpg","0","0",500]
 colour : this.printColor
 var code = '{"type": "animateImage", "action": "hide", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "time": '+Int_0+'},\n';
 return code;
@@ -683,7 +684,7 @@ showGif_0_s
 /* 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]
+default : ["bg.gif","0","0"]
 colour : this.printColor
 var code = '{"type": "showGif", "name": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+']},\n';
 return code;
@@ -701,6 +702,20 @@ var code = '{"type": "showGif"},\n';
 return code;
 */
 
+moveImage_0_s
+    :   '图片移动' EvalString '起点像素位置' 'x' PosString 'y' PosString BGNL
+        '终点像素位置' 'x' PosString 'y' PosString '移动时间' Int Newline
+    ;
+
+/* moveImage_0_s
+tooltip : moveImage：图片移动
+helpUrl : https://ckcz123.github.io/mota-js/#/event?id=moveImage%ef%bc%9a%e6%98%be%e7%a4%ba%e5%8a%a8%e5%9b%be
+default : ["bg.jpg","0","0","0","0",500]
+colour : this.printColor
+var code = '{"type": "moveImage", "name": "'+EvalString_0+'", "from": ['+PosString_0+','+PosString_1+'], "to": ['+PosString_2+','+PosString_3+'], "time": '+Int_0+'},\n';
+return code;
+*/
+
 setFg_0_s
     :   '更改画面色调' Number ',' Number ',' Number ',' Number '动画时间' Int? Newline
     ;
@@ -1417,6 +1432,11 @@ ActionParser.prototype.parseAction = function() {
             this.next]);
         }
         break;
+    case "moveImage": // 移动图片
+      this.next = MotaActionBlocks['moveImage_0_s'].xmlText([
+        data.name, data.from[0], data.from[1], data.to[0], data.to[1], data.time, this.next
+      ]);
+      break;
     case "setFg": // 颜色渐变
       if(this.isset(data.color)){
         this.next = MotaActionBlocks['setFg_0_s'].xmlText([

_server/editor_blockly.js

@@ -67,6 +67,7 @@ editor_blockly = function () {
       MotaActionBlocks['showImage_1_s'].xmlText(),
       MotaActionBlocks['showGif_0_s'].xmlText(),
       MotaActionBlocks['showGif_1_s'].xmlText(),
+      MotaActionBlocks['moveImage_0_s'].xmlText(),
       MotaActionBlocks['tip_s'].xmlText(),
       MotaActionBlocks['openShop_s'].xmlText(),
       MotaActionBlocks['win_s'].xmlText(),
@@ -269,7 +270,7 @@ document.getElementById('blocklyDiv').onmousewheel = function(e){
     var varName = error.varName;
     var block = error.block;
     }
-    console.log(error);
+    // console.log(error);
   }
   }
 

docs/event.md

@@ -704,6 +704,26 @@ loc为动图左上角坐标，以像素为单位进行计算。
 
 如果不指定name则清除所有显示的动图。
 
+### moveImage：图片移动
+
+我们可以使用 `{"type": "moveImage"}` 来造成图片移动效果。
+
+``` js
+"x,y": [ // 实际执行的事件列表
+    {"type": "moveImage", "name": "bg.jpg", "from": [231,297], "to": [22,333], "time": 500},
+]
+```
+
+name为图片名。**请确保图片在data.js中的images中被定义过。**
+
+from为起点图片左上角坐标，以像素为单位进行计算。
+
+to为终点图片左上角坐标，以像素为单位进行计算。
+
+time为总移动的时间。
+
+!> 移动图片只是会在顶层绘制“移动”效果，动画结束即消失，并不会实际对图片的显示造成影响。请与showImage事件合用。
+
 ### setFg: 更改画面色调
 
 我们可以使用 `{"type": "setFg"}` 来更改画面色调。

libs/events.js

@@ -474,6 +474,21 @@ events.prototype.doAction = function() {
             }
             this.doAction();
             break;
+        case "moveImage": // 图片移动
+            if (core.status.replay.replaying) { // 正在播放录像
+                this.doAction();
+            }
+            else {
+                if (core.isset(data.from) && core.isset(data.to) && core.isset(core.material.images.images[data.name])) {
+                    core.events.moveImage(core.material.images.images[data.name], data.from, data.to, data.time, function() {
+                        core.events.doAction();
+                    });
+                }
+                else {
+                    this.doAction();
+                }
+            }
+            break;
         case "setFg": // 颜色渐变
             core.setFg(data.color, data.time, function() {
                 core.events.doAction();
@@ -1073,7 +1088,38 @@ events.prototype.animateImage = function (type, image, loc, time, callback) {
             core.status.replay.animate=false;
             if (core.isset(callback)) callback();
         }
-    }, time / 10 / core.status.replay.speed);
+    }, time / 10);
+}
+
+////// 移动图片 //////
+events.prototype.moveImage = function (image, from, to, time, callback) {
+    time = time || 1000;
+    clearInterval(core.interval.tipAnimate);
+    core.setAlpha('data', 1);
+    core.setOpacity('data', 1);
+
+    core.status.replay.animate=true;
+    var fromX = core.calValue(from[0]), fromY = core.calValue(from[1]),
+        toX = core.calValue(to[0]), toY = core.calValue(to[1]);
+    var step = 0;
+    var drawImage = function () {
+        core.clearMap('data', 0, 0, 416, 416);
+        var nowX = parseInt(fromX + (toX-fromX)*step/64);
+        var nowY = parseInt(fromY + (toY-fromY)*step/64);
+        core.canvas.data.drawImage(image, nowX, nowY);
+    }
+
+    drawImage();
+    var animate = setInterval(function () {
+        step++;
+        drawImage();
+        if (step>=64) {
+            clearInterval(animate);
+            core.clearMap('data', 0, 0, 416, 416);
+            core.status.replay.animate=false;
+            if (core.isset(callback)) callback();
+        }
+    }, time / 64);
 }
 
 ////// 打开一个全局商店 //////

更新说明.txt

@@ -5,7 +5,7 @@
 高亮显示有事件的格子
 自动注册所有未注册的素材
 等待用户点击事件  √
-图片移动事件
+图片移动事件  √
 事件：设置BGM音量  √
 提供core.rand()和core.rand2()两个随机数函数  √
 作弊处理  √