jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

编辑器大地图模式

Browse Source
This commit is contained in:
ckcz123 2020-06-17 17:32:58 +08:00
parent aa4de2df2c
commit fbdf2d2a96
7 changed files with 142 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_server/css/editor_color.css
View File

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

11
_server/css/editor_color_dark.css
View File

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

104
_server/editor.js
View File

@ -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,27 +370,7 @@ editor.prototype.drawEventBlock = function () {
editor.game.doCoreFunc('fillBoldText', fg, 'S',
32 * i + 16, 32 * j + 28, '#FFFFFF', null, 'bold 30px Verdana');
}
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');
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键）快捷切换大地图模式");
}
/////////// 界面交互相关 ///////////

40
_server/editor_mappanel.js
View File

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

5
_server/editor_ui.js
View File

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

3
editor-mobile.html
View File

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

3
editor.html
View File

@ -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>