编辑器大地图模式

_server/css/editor_color.css

@@ -196,6 +196,11 @@ textarea[disabled] {
     background-color: #ffd700;
 }
 
+/** 大地图按钮颜色 */
+#bigmapBtn.highlight {
+    background-color: #ffd700;
+}
+
 .popCheckboxItem {
     color: black;
 }

_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;
 }

_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++){
+    return color;
-                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.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键）快捷切换大地图模式");
 }
 
 /////////// 界面交互相关 ///////////

_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;
             }

_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" +

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'/>

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>