From 717efe78826a9caf5d2e3aa8352b77e36d4bb090 Mon Sep 17 00:00:00 2001 From: oc Date: Mon, 3 Dec 2018 21:22:40 +0800 Subject: [PATCH] show/hide Async --- _server/blockly/MotaAction.g4 | 18 ++++++++------- docs/event.md | 9 +++++--- libs/events.js | 30 +++++++++++++++---------- libs/maps.js | 42 +++++++++++++++++++++++++---------- 4 files changed, 64 insertions(+), 35 deletions(-) diff --git a/_server/blockly/MotaAction.g4 b/_server/blockly/MotaAction.g4 index 9d663fff..c4c827c9 100644 --- a/_server/blockly/MotaAction.g4 +++ b/_server/blockly/MotaAction.g4 @@ -483,13 +483,13 @@ return code; show_s - : '显示事件' 'x' EvalString? ',' 'y' EvalString? '楼层' IdString? '动画时间' Int? Newline + : '显示事件' 'x' EvalString? ',' 'y' EvalString? '楼层' IdString? '动画时间' Int? '不等待执行完毕' Bool? Newline /* show_s tooltip : show: 将禁用事件启用,楼层和动画时间可不填,xy可用逗号分隔表示多个点 helpUrl : https://h5mota.com/games/template/docs/#/event?id=show%EF%BC%9A%E5%B0%86%E4%B8%80%E4%B8%AA%E7%A6%81%E7%94%A8%E4%BA%8B%E4%BB%B6%E5%90%AF%E7%94%A8 -default : ["","","",500] +default : ["","","",500,false] colour : this.eventColor var floorstr = ''; if (EvalString_0 && EvalString_1) { @@ -510,18 +510,19 @@ if (EvalString_0 && EvalString_1) { } IdString_0 = IdString_0 && (', "floorId": "'+IdString_0+'"'); Int_0 = Int_0 ?(', "time": '+Int_0):''; -var code = '{"type": "show"'+floorstr+IdString_0+''+Int_0+'},\n'; +Bool_0 = Bool_0 ?', "async": true':''; +var code = '{"type": "show"'+floorstr+IdString_0+''+Int_0+Bool_0+'},\n'; return code; */; hide_s - : '隐藏事件' 'x' EvalString? ',' 'y' EvalString? '楼层' IdString? '动画时间' Int? Newline + : '隐藏事件' 'x' EvalString? ',' 'y' EvalString? '楼层' IdString? '动画时间' Int? '不等待执行完毕' Bool? Newline /* hide_s tooltip : hide: 将一个启用事件禁用,所有参数均可不填,代表禁用事件自身,xy可用逗号分隔表示多个点 helpUrl : https://h5mota.com/games/template/docs/#/event?id=hide%EF%BC%9A%E5%B0%86%E4%B8%80%E4%B8%AA%E5%90%AF%E7%94%A8%E4%BA%8B%E4%BB%B6%E7%A6%81%E7%94%A8 -default : ["","","",500] +default : ["","","",500,false] colour : this.eventColor var floorstr = ''; if (EvalString_0 && EvalString_1) { @@ -542,7 +543,8 @@ if (EvalString_0 && EvalString_1) { } IdString_0 = IdString_0 && (', "floorId": "'+IdString_0+'"'); Int_0 = Int_0 ?(', "time": '+Int_0):''; -var code = '{"type": "hide"'+floorstr+IdString_0+''+Int_0+'},\n'; +Bool_0 = Bool_0 ?', "async": true':''; +var code = '{"type": "hide"'+floorstr+IdString_0+''+Int_0+Bool_0+'},\n'; return code; */; @@ -1929,7 +1931,7 @@ ActionParser.prototype.parseAction = function() { y_str.push(t[1]); }) this.next = MotaActionBlocks['show_s'].xmlText([ - x_str.join(','),y_str.join(','),data.floorId||'',data.time||0,this.next]); + x_str.join(','),y_str.join(','),data.floorId||'',data.time||0,data.async||false,this.next]); break; case "hide": // 消失 data.loc=data.loc||[]; @@ -1941,7 +1943,7 @@ ActionParser.prototype.parseAction = function() { y_str.push(t[1]); }) this.next = MotaActionBlocks['hide_s'].xmlText([ - x_str.join(','),y_str.join(','),data.floorId||'',data.time||0,this.next]); + x_str.join(','),y_str.join(','),data.floorId||'',data.time||0,data.async||false,this.next]); break; case "setBlock": // 设置图块 data.loc=data.loc||['','']; diff --git a/docs/event.md b/docs/event.md index 8fa1798f..f9d4e64a 100644 --- a/docs/event.md +++ b/docs/event.md @@ -456,7 +456,8 @@ value为必填项，代表要修改到的结果。该项必须是个数值。 {"type": "show", "loc": [3,6], "floorId": "MT1", "time": 500}, // 启用MT1层[3,6]位置事件，动画500ms {"type": "show", "loc": [3,6], "time": 500}, // 如果启用目标是当前层，则可以省略floorId项 {"type": "show", "loc": [3,6]}, // 如果不指定动画时间，则立刻显示，否则动画效果逐渐显示，time为动画时间 - {"type": "show", "loc": [[3,6],[2,9],[1,2]], "time": 500} // 我们也可以同时动画显示多个点。 + {"type": "show", "loc": [[3,6],[2,9],[1,2]], "time": 500}, // 我们也可以同时动画显示多个点。 + {"type": "show", "loc": [3,6], "time": 500, "async": true} // 可以使用异步动画效果 ] ``` @@ -468,13 +469,15 @@ floorId为目标点的楼层，如果不是该楼层的事件（比如4楼小偷 time为动画效果时间，如果指定了某个大于0的数，则会以动画效果慢慢从无到有显示，动画时间为该数值；如果不指定该选项则无动画直接立刻显示。 +async可选，如果为true则会异步执行（即不等待当前事件执行完毕，立刻执行下一个事件）。 + !> **要注意的是，调用show事件后只是让该事件从禁用状态变成启用，从不可见不可交互变成可见可交互，但本身不会去执行该点的事件。** ### hide：将一个启用事件禁用 `{"type":"hide"}`和show刚好相反，它会让一个已经启用的事件被禁用。 -其参数和show也完全相同，loc指定事件的位置，floorId为楼层（同层可忽略），time指定的话事件会以动画效果从有到无慢慢消失。 +其参数和show也完全相同，loc指定事件的位置，floorId为楼层（同层可忽略），time指定的话事件会以动画效果从有到无慢慢消失，async代表是否是异步效果。 loc同样可以简单的写[x,y]表示单个点，或二维数组[[x1,y1],[x2,y2],...]表示多个点。 @@ -492,7 +495,7 @@ NPC对话事件结束后如果需要NPC消失也需要调用 `{"type": "hide"}` {"type": "hide", "loc": [[3,6],[2,9],[1,2]], "time": 500}, // 也可以同时指定多个点消失 {"type": "hide", "time": 500}, // 如果不指定loc选项则默认为当前点， 例如这个就是500ms消失当前对话的NPC {"type": "hide"}, // 无动画将当前事件禁用，常常适用于某个空地点（触发陷阱事件、触发机关门这种） - + {"type": "hide", "loc": [3,6], "time": 500, "async": true} // 可以使用异步动画效果 ] ``` diff --git a/libs/events.js b/libs/events.js index 86978527..14e1fc5d 100644 --- a/libs/events.js +++ b/libs/events.js @@ -450,12 +450,15 @@ events.prototype.doAction = function() { && (typeof data.loc[1] == 'number' || typeof data.loc[1] == 'string')) data.loc = [[core.calValue(data.loc[0]), core.calValue(data.loc[1])]]; if (core.isset(data.time) && data.time>0 && (!core.isset(data.floorId) || data.floorId==core.status.floorId)) { - core.animateBlock(data.loc,'show', data.time, function () { - data.loc.forEach(function (t) { - core.showBlock(t[0],t[1],data.floorId); - }) - core.events.doAction(); - }); + if (data.async) { + core.animateBlock(data.loc, 'show', data.time); + this.doAction(); + } + else { + core.animateBlock(data.loc,'show', data.time, function () { + core.events.doAction(); + }); + } } else { data.loc.forEach(function (t) { @@ -473,13 +476,16 @@ events.prototype.doAction = function() { if (core.isset(data.time) && data.time>0 && (!core.isset(data.floorId) || data.floorId==core.status.floorId)) { data.loc.forEach(function (t) { core.hideBlock(t[0],t[1],data.floorId); - }) - core.animateBlock(data.loc,'hide',data.time, function () { - data.loc.forEach(function (t) { - core.removeBlock(t[0],t[1],data.floorId) - }) - core.events.doAction(); }); + if (data.async) { + core.animateBlock(data.loc, 'hide', data.time); + this.doAction(); + } + else { + core.animateBlock(data.loc,'hide', data.time, function () { + core.events.doAction(); + }); + } } else { data.loc.forEach(function (t) { diff --git a/libs/maps.js b/libs/maps.js index 3c1d91d8..7f0375f4 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -1032,8 +1032,6 @@ maps.prototype.jumpBlock = function(sx,sy,ex,ey,time,keep,callback) { maps.prototype.animateBlock = function (loc,type,time,callback) { if (type!='hide') type='show'; - core.clearMap('route'); - if (typeof loc[0] == 'number' && typeof loc[1] == 'number') loc = [loc]; @@ -1076,30 +1074,50 @@ maps.prototype.animateBlock = function (loc,type,time,callback) { } // core.status.replay.animate=true; + var clear = function () { + 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); }) } - var opacityVal = 0; - if (type=='hide') opacityVal=1; + var alpha = 0; + if (type=='hide') alpha=1; - core.setOpacity('route', opacityVal); + core.setAlpha('route', alpha); draw(); var animate = window.setInterval(function () { - if (type=='show') opacityVal += 0.1; - else opacityVal -= 0.1; - core.setOpacity('route', opacityVal); - if (opacityVal >=1 || opacityVal<=0) { + if (type=='show') alpha += 0.1; + else alpha -= 0.1; + clear(); + if (alpha >=1 || alpha<=0) { + delete core.animateFrame.asyncId[animate]; clearInterval(animate); - core.clearMap('route'); - core.setOpacity('route', 1); - // core.status.replay.animate=false; + core.setAlpha('curtain', 1); + if (type == 'show') { + loc.forEach(function (t) { + core.showBlock(t[0],t[1],data.floorId); + }); + } + else { + loc.forEach(function (t) { + core.removeBlock(t[0],t[1],data.floorId); + }); + } if (core.isset(callback)) callback(); } + else { + core.setAlpha('route', alpha); + draw(); + } }, time / 10 / core.status.replay.speed); + + core.animateFrame.asyncId[animate] = true; } ////// 将某个块从禁用变成启用状态 //////