编辑器大地图模式

2020-06-17 17:32:58 +08:00 · 2020-06-17 17:32:58 +08:00 · fbdf2d2a96
commit fbdf2d2a96
parent aa4de2df2c
7 changed files with 142 additions and 29 deletions
--- a/_server/css/editor_color.css
+++ b/_server/css/editor_color.css
@ -196,6 +196,11 @@ textarea[disabled] {
    background-color: #ffd700;
 }

+/** 大地图按钮颜色 */
+#bigmapBtn.highlight {
+    background-color: #ffd700;
+}
+
 .popCheckboxItem {
    color: black;
 }
--- a/_server/css/editor_color_dark.css
+++ b/_server/css/editor_color_dark.css
@ -301,6 +301,17 @@ option:checked {
 	color: #fff4d0;
 }

+#bigmapBtn {
+    background-color: #234;/*33333c*/
+	border-color: #abc;
+	color: #cdf;
+}
+#bigmapBtn.highlight {
+    background-color: #871;
+	border-color: #eda;
+	color: #fff4d0;
+}
+
 .popCheckboxItem {
    color: #bbbbbb;
 }
--- a/_server/editor.js
+++ b/_server/editor.js
@ -7,8 +7,11 @@ function editor() {
    this.dom={
        body:document.body,
        eui:document.getElementById('eui'),
+        efg:document.getElementById('efg'),
+        ebm:document.getElementById('ebm'),
        euiCtx:document.getElementById('eui').getContext('2d'),
        efgCtx:document.getElementById('efg').getContext('2d'),
+        ebmCtx:document.getElementById('ebm').getContext('2d'),
        mid:document.getElementById('mid'),
        mapEdit:document.getElementById('mapEdit'),
        selectFloor:document.getElementById('selectFloor'),
@ -55,6 +58,7 @@ function editor() {
        gameInject: document.getElementById('gameInject'),
        undoFloor: document.getElementById('undoFloor'),
        editorTheme: document.getElementById('editorTheme'),
+        bigmapBtn : document.getElementById('bigmapBtn'),
        maps: ['bgmap', 'fgmap', 'map'],
        canvas: ['bg', 'fg'],
    };
@ -85,6 +89,13 @@ function editor() {
        foldPerCol: 50,
        //
        ratio : 1,
+        // 是否是大地图模式
+        bigmap : false,
+        bigmapInfo: {
+            top: 0,
+            left: 0,
+            size: 32,
+        },
        // blockly转义
        disableBlocklyReplace: false,
        // blockly展开比较
@ -175,7 +186,7 @@ editor.prototype.init = function (callback) {
            editor.dom[e+'c'] = cvs[i];
            editor.dom[e+'Ctx'] = cvs[i].getContext('2d');
            
-            editor.dom.mapEdit.insertBefore(cvs[i], document.getElementById('efg'));
+            editor.dom.mapEdit.insertBefore(cvs[i], editor.dom.ebm);
        });

        var mainScript = document.createElement('script');
@ -347,10 +358,11 @@ editor.prototype.drawEventBlock = function () {
    var fg=editor.dom.efgCtx;

    fg.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__);
+    if (editor.uivalues.bigmap) return this._drawEventBlock_bigmap();
+
    var firstData = editor.game.getFirstData();
    for (var i=0;i<core.__SIZE__;i++) {
        for (var j=0;j<core.__SIZE__;j++) {
-            var color=[];
            var loc=(i+core.bigmap.offsetX/32)+","+(j+core.bigmap.offsetY/32);
            if (editor.currentFloorId == firstData.floorId
                && loc == firstData.hero.loc.x + "," + firstData.hero.loc.y) {
@ -358,6 +370,38 @@ editor.prototype.drawEventBlock = function () {
                editor.game.doCoreFunc('fillBoldText', fg, 'S',
                    32 * i + 16, 32 * j + 28, '#FFFFFF', null, 'bold 30px Verdana');
            }
+            var color = this._drawEventBlock_getColor(loc);
+            for(var kk=0,cc;cc=color[kk];kk++){
+                fg.fillStyle = cc;
+                fg.fillRect(32*i+8*kk, 32*j+32-8, 8, 8);
+            }
+            var index = editor.uivalues.bindSpecialDoor.enemys.indexOf(loc);
+            if (index >= 0) {
+                fg.textAlign = 'right';
+                editor.game.doCoreFunc("fillBoldText", fg, index + 1,
+                    32 * i + 28, 32 * j + 15, '#FF7F00', null, '14px Verdana');
+            }
+        }
+    }
+}
+
+editor.prototype._drawEventBlock_bigmap = function () {
+    var fg=editor.dom.efgCtx;
+    var info = editor.uivalues.bigmapInfo, size = info.size, psize = size / 4;
+
+    for (var i = 0; i < editor.currentFloorData.width; ++i) {
+        for (var j = 0; j < editor.currentFloorData.height; ++j) {
+            var color = this._drawEventBlock_getColor(i+","+j);
+            for(var kk=0,cc;cc=color[kk];kk++){
+                fg.fillStyle = cc;
+                fg.fillRect(info.left + size * i + psize * kk, info.top + size * (j + 1) - psize, psize, psize);
+            }
+        }
+    }
+}
+
+editor.prototype._drawEventBlock_getColor = function (loc) {
+    var color = [];
    if (editor.currentFloorData.events[loc])
        color.push('#FF0000');
    if (editor.currentFloorData.autoEvent[loc]) {
@ -379,26 +423,34 @@ editor.prototype.drawEventBlock = function () {
        color.push('#0000FF');
    if (editor.currentFloorData.afterOpenDoor[loc])
        color.push('#FF00FF');
-            for(var kk=0,cc;cc=color[kk];kk++){
-                fg.fillStyle = cc;
-                fg.fillRect(32*i+8*kk, 32*j+32-8, 8, 8);
-            }
-            var index = editor.uivalues.bindSpecialDoor.enemys.indexOf(loc);
-            if (index >= 0) {
-                fg.textAlign = 'right';
-                editor.game.doCoreFunc("fillBoldText", fg, index + 1,
-                    32 * i + 28, 32 * j + 15, '#FF7F00', null, '14px Verdana');
-            }
-        }
-    }
+    return color;
 }

 editor.prototype.drawPosSelection = function () {
    this.drawEventBlock();
    var fg=editor.dom.efgCtx;
    fg.strokeStyle = 'rgba(255,255,255,0.7)';
+    if (editor.uivalues.bigmap) {
+        var info = editor.uivalues.bigmapInfo, size = info.size, psize = size / 8;
+        fg.lineWidth = psize;
+        fg.strokeRect(info.left + editor.pos.x * size + psize, info.top + editor.pos.y * size + psize, size - 2*psize, size - 2*psize);
+    } else {
        fg.lineWidth = 4;
        fg.strokeRect(32*editor.pos.x - core.bigmap.offsetX + 4, 32*editor.pos.y - core.bigmap.offsetY + 4, 24, 24);
+    }
+}
+
+editor.prototype._updateMap_bigmap = function () {
+    var bm=editor.dom.ebmCtx;
+    bm.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__);
+    core.drawThumbnail(editor.currentFloorId, core.status.thisMap.blocks, null, 
+        {ctx: bm, all: true});
+    var width = editor.currentFloorData.width;
+    var height = editor.currentFloorData.height;
+    editor.uivalues.bigmapInfo.top = core.__PIXELS__ * Math.max(0, (1 - height / width) / 2);
+    editor.uivalues.bigmapInfo.left = core.__PIXELS__ * Math.max(0, (1 - width / height) / 2);
+    editor.uivalues.bigmapInfo.size = core.__PIXELS__ / Math.max(width, height);
+    this.drawEventBlock();
 }

 editor.prototype.updateMap = function () {
@ -414,6 +466,7 @@ editor.prototype.updateMap = function () {
        });
    }), {'events': editor.currentFloorData.events}, editor.currentFloorId);
    core.status.thisMap.blocks = blocks;
+    if (editor.uivalues.bigmap) return this._updateMap_bigmap();

    var updateMap = function () {
        core.removeGlobalAnimate();
@ -524,6 +577,7 @@ editor.prototype.setViewport=function (x, y) {

 editor.prototype.moveViewport=function(x,y){
    editor.setViewport(core.bigmap.offsetX+32*x, core.bigmap.offsetY+32*y);
+    printi("你可以按【大地图】（或F键）快捷切换大地图模式");
 }

 /////////// 界面交互相关 ///////////
--- a/_server/editor_mappanel.js
+++ b/_server/editor_mappanel.js
@ -31,6 +31,16 @@ editor_mappanel_wrapper = function (editor) {
     * @param {Boolean} addViewportOffset 是否加上大地图的偏置
     */
    editor.uifunctions.locToPos = function (loc, addViewportOffset) {
+        if (editor.uivalues.bigmap) {
+            var info = editor.uivalues.bigmapInfo;
+            var size = loc.size / 32 * info.size;
+            editor.pos = {
+                x: core.clamp(Math.floor((loc.x - info.left) / size), 0, editor.currentFloorData.width - 1),
+                y: core.clamp(Math.floor((loc.y - info.top) / size), 0, editor.currentFloorData.height - 1),
+            }
+            return editor.pos;
+        }
+
        var offsetX = 0, offsetY = 0;
        if (addViewportOffset) {
            offsetX = core.bigmap.offsetX / 32;
@ -79,6 +89,16 @@ editor_mappanel_wrapper = function (editor) {
        editor.uivalues.lastMoveE=e;
        var loc = editor.uifunctions.eToLoc(e);
        var pos = editor.uifunctions.locToPos(loc, true);
+        if (editor.uivalues.bigmap) {
+            if (!selectBox.isSelected()) {
+                editor_mode.onmode('nextChange');
+                editor_mode.onmode('loc');
+                printi("大地图模式（F键）下可以很方便的切换到地图任意位置，但是不可对地图进行直接编辑。");
+                editor.uivalues.startPos = pos;
+            }
+            return false;
+        }
+
        if (editor.uivalues.bindSpecialDoor.loc != null) {
            var x = editor.pos.x, y = editor.pos.y, id = (editor.map[y][x] || {}).id;
            // 检测是否是怪物
@ -124,6 +144,7 @@ editor_mappanel_wrapper = function (editor) {
     */
    editor.uifunctions.map_onmove = function (e) {
        editor.uivalues.lastMoveE=e;
+        if (editor.uivalues.bigmap) return false;
        if (!selectBox.isSelected()) {
            if (editor.uivalues.startPos == null) return;
            var loc = editor.uifunctions.eToLoc(e);
@ -211,6 +232,7 @@ editor_mappanel_wrapper = function (editor) {
        editor.uivalues.selectedArea = null;
        ee.preventDefault();
        ee.stopPropagation();
+        if (editor.uivalues.bigmap) return false;
        var e=editor.uivalues.lastMoveE;
        if (e.buttons == 2 && (editor.uivalues.endPos==null || (editor.uivalues.startPos.x == editor.uivalues.endPos.x && editor.uivalues.startPos.y == editor.uivalues.endPos.y))) {
            editor.uifunctions.showMidMenu(e.clientX, e.clientY);
@ -773,6 +795,22 @@ editor_mappanel_wrapper = function (editor) {
        editor.uifunctions.setLayerMod('fgmap');
    }

+    editor.uifunctions.triggerBigmap = function () {
+        editor.uivalues.bigmap = !editor.uivalues.bigmap;
+        if (editor.uivalues.bigmap) {
+            editor.dom.bigmapBtn.classList.add('highlight');
+            printi("大地图模式（F键）下可以很方便的切换到地图任意位置，但是不可对地图进行直接编辑。");
+        } else {
+            editor.dom.bigmapBtn.classList.remove('highlight');
+            editor.setViewport(32 * (editor.pos.x - core.__HALF_SIZE__), 32 * (editor.pos.y - core.__HALF_SIZE__));
+            printf("已退出大地图模式");
+        }
+        editor.dom.ebmCtx.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__);
+        editor.uivalues.startPos = editor.uivalues.endPos = null;
+        editor.updateMap();
+        editor.drawPosSelection();
+    }
+
    /**
     * 移动大地图可视窗口的绑定
     */
@ -782,7 +820,7 @@ editor_mappanel_wrapper = function (editor) {
            if (ii == 4) {
                // 大地图
                node.onclick = function () {
-                    editor.uievent.selectPoint(null, editor.pos.x, editor.pos.y, true);
+                    editor.uifunctions.triggerBigmap();
                }
                continue;
            }
--- a/_server/editor_ui.js
+++ b/_server/editor_ui.js
@ -291,6 +291,8 @@ editor_ui_wrapper = function (editor) {
                case 65: editor.moveViewport(-1, 0); break;
                case 83: editor.moveViewport(0, 1); break;
                case 68: editor.moveViewport(1, 0); break;
+                // F
+                case 70: editor.uifunctions.triggerBigmap(); break;
                // Z~.
                case 90: editor_mode.change('map'); break; // Z
                case 88: editor_mode.change('loc'); break; // X
@ -311,7 +313,8 @@ editor_ui_wrapper = function (editor) {
    editor.uifunctions.showHelp = function () {
        alert(
            "快捷操作帮助：\n" +
-            "ESC / 点击空白处：自动保存当前修改" +
+            "ESC / 点击空白处：自动保存当前修改\n" +
+            "F：切换大地图\n",
            "WASD / 长按箭头：平移大地图\n" +
            "PgUp, PgDn / 鼠标滚轮：上下切换楼层\n" +
            "Z~.（键盘的第三排）：快捷切换标签\n" +
--- a/editor-mobile.html
+++ b/editor-mobile.html
@ -301,6 +301,7 @@
        <div class="col" id='mapColMark'></div>
        <div class="row" id='mapRowMark'></div>
        <div class="map" id="mapEdit">
+            <canvas class='gameCanvas' id='ebm'></canvas>
            <canvas class='gameCanvas' id='efg'></canvas>
            <canvas class='gameCanvas' id='eui' style='z-index:100'></canvas>
        </div>
@ -375,7 +376,7 @@
                    <input type="button" style="padding:1px 6px" value="↑"/>
                    <input type="button" style="padding:1px 6px" value="↓"/>
                    <input type="button" style="padding:1px 1px" value="→"/>
-                    <input type="button" value="大地图" style="margin-left: 5px"/>
+                    <input type="button" id="bigmapBtn" value="大地图" style="margin-left: 5px"/>
                </div>
                <select id="selectFloor" style="clear:left"></select>
                <input type="button" value="保存地图" id='saveFloor'/>
--- a/editor.html
+++ b/editor.html
@ -297,6 +297,7 @@
        <table class="col" id='mapColMark'></table>
        <table class="row" id='mapRowMark'></table>
        <div class="map" id="mapEdit">
+            <canvas class='gameCanvas' id='ebm'></canvas>
            <canvas class='gameCanvas' id='efg'></canvas>
            <canvas class='gameCanvas' id='eui' style='z-index:100'></canvas>
        </div>
@ -338,7 +339,7 @@
                <input type="button" value="↑"/>
                <input type="button" value="↓"/>
                <input type="button" value="→"/>
-                <input type="button" value="大地图" style="margin-left: 5px"/>
+                <input type="button" id='bigmapBtn' value="大地图" style="margin-left: 5px"/>
            </div>
            <br>
            <select id="selectFloor"></select>