diff --git a/_server/css/editor_color.css b/_server/css/editor_color.css index 613d337c..280ab8b9 100644 --- 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; } diff --git a/_server/css/editor_color_dark.css b/_server/css/editor_color_dark.css index 5d8b6505..7f742d74 100644 --- 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; } diff --git a/_server/editor.js b/_server/editor.js index fe0503b0..558b09db 100644 --- 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 0) - color.push('#0000FF'); - if (editor.currentFloorData.afterOpenDoor[loc]) - color.push('#FF00FF'); + 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); @@ -393,12 +385,72 @@ editor.prototype.drawEventBlock = function () { } } +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]) { + var x = editor.currentFloorData.autoEvent[loc]; + for (var index in x) { + if (x[index] && x[index].data) { + color.push('#FFA500'); + break; + } + } + } + if (editor.currentFloorData.afterBattle[loc]) + color.push('#FFFF00'); + if (editor.currentFloorData.changeFloor[loc]) + color.push('#00FF00'); + if (editor.currentFloorData.afterGetItem[loc]) + color.push('#00FFFF'); + if (editor.currentFloorData.cannotMove[loc] && editor.currentFloorData.cannotMove[loc].length > 0) + color.push('#0000FF'); + if (editor.currentFloorData.afterOpenDoor[loc]) + color.push('#FF00FF'); + return color; +} + editor.prototype.drawPosSelection = function () { this.drawEventBlock(); var fg=editor.dom.efgCtx; fg.strokeStyle = 'rgba(255,255,255,0.7)'; - fg.lineWidth = 4; - fg.strokeRect(32*editor.pos.x - core.bigmap.offsetX + 4, 32*editor.pos.y - core.bigmap.offsetY + 4, 24, 24); + 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键）快捷切换大地图模式"); } /////////// 界面交互相关 /////////// diff --git a/_server/editor_mappanel.js b/_server/editor_mappanel.js index 0c80ccd8..ea9e5ff8 100644 --- 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; } diff --git a/_server/editor_ui.js b/_server/editor_ui.js index 79e9bb61..db22ec11 100644 --- 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" + diff --git a/editor-mobile.html b/editor-mobile.html index 5d55f998..ac7c1de0 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -301,6 +301,7 @@
+
@@ -375,7 +376,7 @@ - + diff --git a/editor.html b/editor.html index 232864a0..e63e8c3c 100644 --- a/editor.html +++ b/editor.html @@ -297,6 +297,7 @@
+
@@ -338,7 +339,7 @@ - +