动画多音效

_server/editor_ui.js

@@ -754,7 +754,6 @@ editor_ui_wrapper = function (editor) {
             }
 
             // 显示每一项内容
-            var hasAudio = false;
             var html = "<p style='margin-left: 10px; line-height: 25px'>";
             html += "<button onclick='editor.uievent._selectAllMaterial(true)'>全选</button>"+
                     "<button style='margin-left: 10px' onclick='editor.uievent._selectAllMaterial(false)'>全不选</button><br/>";
@@ -774,14 +773,8 @@ editor_ui_wrapper = function (editor) {
                 }
                 // 预览动画
                 if (directory.indexOf('animates') >= 0) {
-                    var audios = Object.keys(core.material.sounds).sort().join(",");
                     html += "<button onclick='editor.uievent._previewMaterialAnimate(this)' style='margin-left: 10px'>预览</button>";
-                    html += `<span style="display:none; margin-left: 10px" key="${directory+one+'.animate'}"><br/>音效
+                    html += "<span style='display:none; margin-left: 10px' key='"+directory+one+".animate'></span>";
-                        <input type="text" class="awesomplete" data-list="${audios}" data-minchars="1" data-autofirst="true"/>
-                        <button onclick="editor.uievent._previewMaterialAnimate_previewSound(this)" style='marin-left: 10px'>试听</button>
-                        <button onclick="editor.uievent._previewMaterialAnimate_saveSound(this)">保存</button><br/>
-                        </span>`;
-                    hasAudio = true;
                 }
                 html += '<br/>';
             });
@@ -849,9 +842,7 @@ editor_ui_wrapper = function (editor) {
     }
 
     var _previewMaterialAnimate = function (span, content) {
-        var input = span.children[1];
+        _previewMaterialAnimate_buildSounds(span, content);
-        input.value = content.se || "";
-        new Awesomplete(input);
 
         // 创建dom
         if (!uievent.values.dom) {
@@ -889,8 +880,56 @@ editor_ui_wrapper = function (editor) {
         }, 50);
     }
 
+    var _previewMaterialAnimate_buildSounds = function (span, content) {
+        var sounds = content.se || {};
+        if (typeof sounds == 'string') sounds = {1: sounds};
+
+        span.appendChild(document.createElement('br'));
+        var dom = document.createElement('span');
+        dom.setAttribute('frames', content.frame);
+        var html = "";
+        Object.keys(sounds).forEach(function (frame) {
+            html += "<span>" + _previewMaterialAnimate_buildSoundRow(frame, sounds[frame], content.frame) + "</span>";
+        });
+        html += '<button onclick="editor.uievent._previewMaterialAnimate_addSound(this)">添加音效</button>';
+        html += '<button onclick="editor.uievent._previewMaterialAnimate_saveSound(this)" style="margin-left:10px">保存</button>';
+        html += "<br/><br/>";
+        dom.innerHTML = html;
+        span.appendChild(dom);
+        _previewMaterialAnimate_awesomplete(span);
+    }
+
+    var _previewMaterialAnimate_buildSoundRow = function (index, se, frames) {
+        var audios = Object.keys(core.material.sounds).sort().join(",");
+        var html = "";
+        html += "第 <select>";
+        for (var i = 1; i <= frames; ++i) {
+            html += "<option value="+i;
+            if (index == i) html += " selected";
+            html += ">"+i+"</option>";
+        }
+        html += "</select> 帧：";
+        html += '<input type="text" class="" data-list="'+audios+'" data-minchars="1" data-autofirst="true" style="margin-left: 5px" value="'+se+'"/>';
+        html += '<button onclick="editor.uievent._previewMaterialAnimate_previewSound(this)" style="margin-left: 10px">试听</button>';
+        html += '<button onclick="editor.uievent._previewMaterialAnimate_deleteSound(this)" style="margin-left: 10px">删除</button>';
+        html += '<br/>';
+        return html;
+    }
+
+    var _previewMaterialAnimate_awesomplete = function (span) {
+        var inputs = span.getElementsByTagName("input");
+        for (var i = 0; i < inputs.length; ++i) {
+            var input = inputs[i];
+            if (!input.hasAttribute('awesomplete')) {
+                input.setAttribute('awesomplete', '1');
+                new Awesomplete(input);
+            }
+        }
+    }
+
     uievent._previewMaterialAnimate = function (button) {
         var span = button.nextElementSibling;
+        while (span.firstChild) span.removeChild(span.lastChild);
         var filename = span.getAttribute("key");
         uievent.values.animates = uievent.values.animates || {};
         if (span.style.display == 'none') {
@@ -918,6 +957,7 @@ editor_ui_wrapper = function (editor) {
 
     uievent._previewMaterialAnimate_previewSound = function (button) {
         var input = button.previousElementSibling;
+        if (input.tagName == 'DIV') input = input.firstChild;
         if (!input.value) return;
         if (!uievent.values.audio)
             uievent.values.audio = new Audio();
@@ -925,15 +965,39 @@ editor_ui_wrapper = function (editor) {
         uievent.values.audio.play();
     }
 
+    uievent._previewMaterialAnimate_addSound = function (button) {
+        var parent = button.parentElement;
+        var span = document.createElement("span");
+        span.innerHTML = _previewMaterialAnimate_buildSoundRow(1, "", parseInt(parent.getAttribute("frames")));
+        parent.insertBefore(span, button);
+        _previewMaterialAnimate_awesomplete(parent);
+    }
+
+    uievent._previewMaterialAnimate_deleteSound = function (button) {
+        var element = button.parentElement;
+        element.parentElement.removeChild(element);
+    }
+
     uievent._previewMaterialAnimate_saveSound = function (button) {
-        var input = button.previousElementSibling.previousElementSibling;
+        var span = button.parentElement;
-        var filename = button.parentElement.getAttribute("key");
+        var filename = span.parentElement.getAttribute("key");
         if (!filename || !uievent.values.animates[filename]) return;
-        uievent.values.animates[filename+':raw'].se = input.value || "";
+        var se = {};
+
+        var inputs = span.getElementsByTagName("input");
+        for (var i = 0; i < inputs.length; ++i) {
+            var input = inputs[i];
+            var select = input.parentElement.previousElementSibling;
+            if (input.value && select.tagName == 'SELECT') {
+                se[select.value] = input.value;
+            }
+        }
+        uievent.values.animates[filename].se = se;
+        uievent.values.animates[filename+':raw'].se = se;
         fs.writeFile(filename, JSON.stringify(uievent.values.animates[filename+':raw']), 'utf-8', function (e, d) {
             if (e) alert('无法修改音效文件！'+e);
             else {
-                alert('动画音效修改成功！别忘了在全塔属性中注册本音效哦！');
+                alert('动画音效修改成功！别忘了在全塔属性中注册音效哦！');
             }
         })
     }

libs/maps.js

@@ -2496,8 +2496,8 @@ maps.prototype.drawAnimate = function (name, x, y, alignWindow, callback) {
         centerX += core.bigmap.offsetX;
         centerY += core.bigmap.offsetY;
     }
-    // 播放音效
+    animate.se = animate.se || {};
-    core.playSound(animate.se);
+    if (typeof animate.se == 'string') animate.se = {1: animate.se};
 
     var id = setTimeout(null);
     core.status.animateObjs.push({
@@ -2524,8 +2524,8 @@ maps.prototype.drawHeroAnimate = function (name, callback) {
 
     // 开始绘制
     var animate = core.material.animates[name];
-    // 播放音效
+    animate.se = animate.se || {};
-    core.playSound(animate.se);
+    if (typeof animate.se == 'string') animate.se = {1: animate.se};
 
     var id = setTimeout(null);
     core.status.animateObjs.push({
@@ -2544,6 +2544,7 @@ maps.prototype._drawAnimateFrame = function (name, animate, centerX, centerY, in
     var ctx = core.getContextByName(name);
     if (!ctx) return;
     var frame = animate.frames[index % animate.frame];
+    core.playSound((animate.se||{})[index % animate.frame + 1]);
     var ratio = animate.ratio;
     frame.forEach(function (t) {
         var image = animate.images[t.index];

mota-js10月和273issue.txt

@@ -52,7 +52,7 @@ N：可能影响接档等，下一个版本再考虑
 （x）2. 部分rm功能：确定键触发（很多作者可能会摆一些挡路的可通行事件但又希望可以像绿点一样穿透，比如因为目标层/点有分歧而不能用绿点只能用红点的楼梯，那么就需要勇士站在此点按下轻按键7或其他什么数字键来触发该事件）、
 （x）2.1 斜向移动（插件库的磁铁特效，但blockly中的步伐口诀语法需要调整，最简单的调整方法是1不许省略，这样连续两个汉字就一定表示一个斜向了，还不影响接档）
 （x）2.2 三行二列的自动元件、流体（草木茂盛处）、梯子（勇士始终脸朝上）、柜台的绘制，视频播放，
-（?）2.3 动画多音效（可先不修改动画编辑器和导出器，给animate/json文件约定好语法并被drawAnimate/drawHeroAnimate执行即可），
+（√）2.3 动画多音效（可先不修改动画编辑器和导出器，给animate/json文件约定好语法并被drawAnimate/drawHeroAnimate执行即可），
 （x）2.4 音频的变调变速和声道偏移、bgs（目前只能由作者自行用插件实现）和me（播放时bgm暂时淡出），
 （x）2.5 另外建议提供bgm播放进度读写、多个bgm独立调节音量的API和事件，
 （x）2.6 以及一个bgm循环插件，思路是事先约定每个bgm的循环起止点，并行检查是否越过终点，越过则跳转至起点。