From afbfb305efedcb50f8f51f6bde5e59336fe087da Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Wed, 3 Jun 2020 14:33:44 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _server/MotaAction.g4 | 2 +- _server/editor_blockly.js | 3 ++ _server/editor_ui.js | 101 ++++++++++++++++++++++++++++++++++++++ libs/control.js | 4 +- libs/loader.js | 14 +++--- libs/maps.js | 24 ++++----- 6 files changed, 127 insertions(+), 21 deletions(-) diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4 index a33485f5..59164d3c 100644 --- a/_server/MotaAction.g4 +++ b/_server/MotaAction.g4 @@ -1758,7 +1758,7 @@ tooltip : animate：显示动画,位置填hero或者1,2形式的位置,或者不 helpUrl : https://h5mota.com/games/template/_docs/#/event?id=animate%EF%BC%9A%E6%98%BE%E7%A4%BA%E5%8A%A8%E7%94%BB default : ["zone","hero",false,false] allAnimates : ['IdString_0'] -selectPoint : ["EvalString_0", "EvalString_0"] +material : ["./project/animates/", "IdString_0"] colour : this.soundColor if (EvalString_0) { if(MotaActionFunctions.pattern.id2.test(EvalString_0)) { diff --git a/_server/editor_blockly.js b/_server/editor_blockly.js index 7354304d..8651b039 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -341,6 +341,9 @@ editor_blockly = function () { if (b && MotaActionBlocks[b.type].material) { var material = JSON.parse(MotaActionBlocks[b.type].material); editor.uievent.selectMaterial([b.getFieldValue(material[1])], '请选择素材', material[0], function (one) { + if (b.type == 'animate_s') { + return /^[-A-Za-z0-9_.]+\.animate$/.test(one) ? one.substring(0, one.length - 8) : null; + } return /^[-A-Za-z0-9_.]+$/.test(one) ? one : null; }, function (value) { if (value instanceof Array && value.length > 0) { diff --git a/_server/editor_ui.js b/_server/editor_ui.js index 49680762..d42c9b42 100644 --- a/_server/editor_ui.js +++ b/_server/editor_ui.js @@ -350,6 +350,10 @@ editor_ui_wrapper = function (editor) { uievent.close = function () { uievent.isOpen = false; uievent.elements.div.style.display = 'none'; + if (uievent.values.interval) { + clearTimeout(uievent.values.interval); + clearInterval(uievent.values.interval); + } uievent.values = {}; } uievent.elements.no.onclick = uievent.close; @@ -715,6 +719,14 @@ editor_ui_wrapper = function (editor) { `; } + // 预览动画 + if (directory.indexOf('animates') >= 0) { + html += ""; + html += `
音效： + +
+ `; + } html += '
'; }); html += "

"; @@ -780,6 +792,95 @@ editor_ui_wrapper = function (editor) { if (audio.paused) audio.play(); } + var _previewMaterialAnimate = function (span, content) { + var input = span.children[1]; + input.value = content.se || ""; + + // 创建dom + if (!uievent.values.dom) { + var dom = document.createElement('span'); + dom.style.position = "relative"; + dom.style.marginLeft = "-10px"; + var canvas = document.createElement('canvas'); + canvas.width = canvas.height = core.__PIXELS__; + canvas.style.position = 'absolute'; + core.drawThumbnail(editor.currentFloorId, null, {}, canvas.getContext('2d')); + dom.appendChild(canvas); + var canvas2 = document.createElement('canvas'); + canvas2.style.position = 'absolute'; + canvas2.width = canvas2.height = core.__PIXELS__; + uievent.values.ctx = canvas2.getContext('2d'); + dom.appendChild(canvas2); + var canvas3 = document.createElement('canvas'); + canvas3.width = canvas3.height = core.__PIXELS__; + dom.appendChild(canvas3); + uievent.values.dom = dom; + } + + span.appendChild(uievent.values.dom); + clearInterval(uievent.values.interval); + var frame = 0; + uievent.values.interval = setInterval(function () { + if (span.style.display == 'none') { + clearInterval(uievent.values.interval); + uievent.values.interval = null; + span.removeChild(uievent.values.dom); + return; + } + core.clearMap(uievent.values.ctx); + core.maps._drawAnimateFrame(uievent.values.ctx, content, core.__PIXELS__ / 2, core.__PIXELS__ / 2, frame++); + }, 50); + } + + uievent._previewMaterialAnimate = function (button) { + var span = button.nextElementSibling; + var filename = span.getAttribute("key"); + uievent.values.animates = uievent.values.animates || {}; + if (span.style.display == 'none') { + button.innerText = '收起'; + span.style.display = 'inline'; + if (uievent.values.animates[filename]) { + _previewMaterialAnimate(span, uievent.values.animates[filename]); + } else { + fs.readFile(filename, 'utf-8', function (e, d) { + if (e) { + alert('无法打开动画文件！'+e); return; + } + uievent.values.animates[filename] = core.loader._loadAnimate(d); + if (uievent.values.animates[filename]) { + uievent.values.animates[filename + ':raw'] = JSON.parse(d); + _previewMaterialAnimate(span, uievent.values.animates[filename]); + } + }) + } + } else { + button.innerText = '预览'; + span.style.display = 'none'; + } + } + + uievent._previewMaterialAnimate_previewSound = function (button) { + var input = button.previousElementSibling; + if (!input.value) return; + if (!uievent.values.audio) + uievent.values.audio = new Audio(); + uievent.values.audio.src = './project/sounds/' + input.value; + uievent.values.audio.play(); + } + + uievent._previewMaterialAnimate_saveSound = function (button) { + var input = button.previousElementSibling.previousElementSibling; + var filename = button.parentElement.getAttribute("key"); + if (!filename || !uievent.values.animates[filename]) return; + uievent.values.animates[filename+':raw'].se = input.value || ""; + fs.writeFile(filename, JSON.stringify(uievent.values.animates[filename+':raw']), 'utf-8', function (e, d) { + if (e) alert('无法修改音效文件！'+e); + else { + alert('动画音效修改成功！别忘了在全塔属性中注册本音效哦！'); + } + }) + } + // ------ 多选框 ------ // uievent.popCheckboxSet = function (value, comments, title, callback) { if (value == null) value = []; diff --git a/libs/control.js b/libs/control.js index 10b5b931..bbf08cba 100644 --- a/libs/control.js +++ b/libs/control.js @@ -176,9 +176,9 @@ control.prototype._animationFrame_animate = function (timestamp) { }); core.status.animateObjs.forEach(function (obj) { if (obj.hero) { - core.maps._drawAnimateFrame(obj.animate, core.status.heroCenter.px, core.status.heroCenter.py, obj.index++); + core.maps._drawAnimateFrame('animate', obj.animate, core.status.heroCenter.px, core.status.heroCenter.py, obj.index++); } else { - core.maps._drawAnimateFrame(obj.animate, obj.centerX, obj.centerY, obj.index++); + core.maps._drawAnimateFrame('animate', obj.animate, obj.centerX, obj.centerY, obj.index++); } }); core.animateFrame.animateTime = timestamp; diff --git a/libs/loader.js b/libs/loader.js index 0252d88a..b1dd1ec2 100644 --- a/libs/loader.js +++ b/libs/loader.js @@ -301,8 +301,8 @@ loader.prototype._loadAnimates_sync = function () { this._setStartLoadTipText("正在加载动画文件..."); core.animates.forEach(function (t) { - core.http('GET', 'project/animates/' + t + ".animate?v=" + main.version, null, function (content) { - core.loader._loadAnimate(t, content); + core.http('GET', 'project/animates/' + t + ".animate?v=" + main.version, null, function (content) { + core.material.animates[t] = core.loader._loadAnimate(content); }, function (e) { main.log(e); core.material.animates[t] = null; @@ -316,14 +316,14 @@ loader.prototype._loadAnimates_async = function (onprogress, onfinished) { if (name.endsWith(".animate")) { var t = name.substring(0, name.length - 8); if (core.animates.indexOf(t) >= 0) - core.loader._loadAnimate(t, animates[name]); + core.material.animates[t] = core.loader._loadAnimate(animates[name]); } } onfinished(); }, null, true, onprogress); } -loader.prototype._loadAnimate = function (name, content) { +loader.prototype._loadAnimate = function (content) { try { content = JSON.parse(content); var data = {}; @@ -362,12 +362,12 @@ loader.prototype._loadAnimate = function (name, content) { }) }) data.frames.push(info); - }) - core.material.animates[name] = data; + }); + return data; } catch (e) { main.log(e); - core.material.animates[name] = null; + return null; } } diff --git a/libs/maps.js b/libs/maps.js index 1c778f8d..1ba632ef 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -2227,32 +2227,34 @@ maps.prototype.drawHeroAnimate = function (name, callback) { } ////// 绘制动画的某一帧 ////// -maps.prototype._drawAnimateFrame = function (animate, centerX, centerY, index) { - var frame = animate.frames[index]; +maps.prototype._drawAnimateFrame = function (name, animate, centerX, centerY, index) { + var ctx = core.getContextByName(name); + if (!ctx) return; + var frame = animate.frames[index % animate.frame]; var ratio = animate.ratio; frame.forEach(function (t) { var image = animate.images[t.index]; if (!image) return; var realWidth = image.width * ratio * t.zoom / 100; var realHeight = image.height * ratio * t.zoom / 100; - core.setAlpha('animate', t.opacity / 255); + core.setAlpha(ctx, t.opacity / 255); var cx = centerX + t.x, cy = centerY + t.y; if (!t.mirror && !t.angle) { - core.drawImage('animate', image, cx - realWidth / 2 - core.bigmap.offsetX, cy - realHeight / 2 - core.bigmap.offsetY, realWidth, realHeight); + core.drawImage(ctx, image, cx - realWidth / 2 - core.bigmap.offsetX, cy - realHeight / 2 - core.bigmap.offsetY, realWidth, realHeight); } else { - core.saveCanvas('animate'); - core.canvas.animate.translate(cx, cy); + core.saveCanvas(ctx); + ctx.translate(cx, cy); if (t.angle) - core.canvas.animate.rotate(-t.angle * Math.PI / 180); + ctx.rotate(-t.angle * Math.PI / 180); if (t.mirror) - core.canvas.animate.scale(-1, 1); - core.drawImage('animate', image, -realWidth / 2 - core.bigmap.offsetX, -realHeight / 2 - core.bigmap.offsetY, realWidth, realHeight); - core.loadCanvas('animate'); + ctx.scale(-1, 1); + core.drawImage(ctx, image, -realWidth / 2 - core.bigmap.offsetX, -realHeight / 2 - core.bigmap.offsetY, realWidth, realHeight); + core.loadCanvas(ctx); } - core.setAlpha('animate', 1); + core.setAlpha(ctx, 1); }) }