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

editor: fgmap bgmap draw-support

Browse Source
This commit is contained in:
YouWei Zhao 2018-09-15 23:54:39 +08:00
parent 2c3fba90e1
commit f0d5c04db5
6 changed files with 60 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
_server/editor.js
View File

@ -2,6 +2,7 @@ function editor() {
this.version = "2.0";
this.material = {};
this.brushMod = "line";//["line","rectangle"]
this.layerMod = "map";//["fgmap","map","bgmap"]
}
editor.prototype.init = function (callback) {
@ -177,6 +178,7 @@ editor.prototype.mapInit = function () {
editor.currentFloorData.cannotMove = {};
}
editor.prototype.drawMapBg = function (img) {
return
var bgc = bg.getContext('2d');
if (!core.isset(editor.bgY) || editor.bgY == 0) {
editor.main.editor.drawMapBg();
@ -253,6 +255,8 @@ editor.prototype.updateMap = function () {
}
// 绘制地图 start
var eventCtx = document.getElementById('event').getContext("2d");
var fgCtx = document.getElementById('fg').getContext("2d");
var bgCtx = document.getElementById('bg').getContext("2d");
for (var y = 0; y < editor.map.length; y++)
for (var x = 0; x < editor.map[0].length; x++) {
var tileInfo = editor.map[y][x];
@ -260,6 +264,10 @@ editor.prototype.updateMap = function () {
addIndexToAutotileInfo(x, y);
drawAutotile(eventCtx, x, y, tileInfo);
} else drawTile(eventCtx, x, y, tileInfo);
tileInfo = editor.fgmap[y][x];
drawTile(fgCtx, x, y, tileInfo);
tileInfo = editor.bgmap[y][x];
drawTile(bgCtx, x, y, tileInfo);
}
// 绘制地图 end
@ -502,7 +510,7 @@ editor.prototype.listen = function () {
holdingPath = 0;
e.stopPropagation();
if (stepPostfix && stepPostfix.length) {
preMapData = JSON.parse(JSON.stringify(editor.map));
preMapData = JSON.parse(JSON.stringify({map:editor.map,fgmap:editor.fgmap,bgmap:editor.bgmap}));
if(editor.brushMod==='rectangle'){
var x0=stepPostfix[0].x;
var y0=stepPostfix[0].y;
@ -522,7 +530,7 @@ editor.prototype.listen = function () {
reDo = null;
// console.log(stepPostfix);
for (var ii = 0; ii < stepPostfix.length; ii++)
editor.map[stepPostfix[ii].y][stepPostfix[ii].x] = editor.info;
editor[editor.layerMod][stepPostfix[ii].y][stepPostfix[ii].x] = editor.info;
// console.log(editor.map);
editor.updateMap();
holdingPath = 0;
@ -590,7 +598,9 @@ editor.prototype.listen = function () {
e.preventDefault();
//Ctrl+z 撤销上一步undo
if (e.keyCode == 90 && e.ctrlKey && preMapData && currDrawData.pos.length && selectBox.isSelected) {
editor.map = JSON.parse(JSON.stringify(preMapData));
editor.map = JSON.parse(JSON.stringify(preMapData.map));
editor.fgmap = JSON.parse(JSON.stringify(preMapData.fgmap));
editor.bgmap = JSON.parse(JSON.stringify(preMapData.bgmap));
editor.updateMap();
reDo = JSON.parse(JSON.stringify(currDrawData));
currDrawData = {pos: [], info: {}};
@ -598,7 +608,7 @@ editor.prototype.listen = function () {
}
//Ctrl+y 重做一步redo
if (e.keyCode == 89 && e.ctrlKey && reDo && reDo.pos.length && selectBox.isSelected) {
preMapData = JSON.parse(JSON.stringify(editor.map));
preMapData = JSON.parse(JSON.stringify({map:editor.map,fgmap:editor.fgmap,bgmap:editor.bgmap}));
for (var j = 0; j < reDo.pos.length; j++)
editor.map[reDo.pos[j].y][reDo.pos[j].x] = JSON.parse(JSON.stringify(reDo.info));
@ -881,6 +891,21 @@ editor.prototype.listen = function () {
editor.brushMod=brushMod2.value;
}
var layerMod=document.getElementById('layerMod');
layerMod.onchange=function(){
editor.layerMod=layerMod.value;
}
var layerMod2=document.getElementById('layerMod2');
if(layerMod2)layerMod2.onchange=function(){
editor.layerMod=layerMod2.value;
}
var layerMod3=document.getElementById('layerMod3');
if(layerMod3)layerMod3.onchange=function(){
editor.layerMod=layerMod3.value;
}
editor.moveViewport=function(x,y){
core.bigmap.offsetX = core.clamp(core.bigmap.offsetX+32*x, 0, 32*core.bigmap.width-416);

16
_server/editor_file.js
View File

@ -98,12 +98,16 @@ editor_file = function (editor, callback) {
editor.currentFloorData.map = [];
for (var i=0;i<height;i++) editor.currentFloorData.map.push(row);
}
else
editor.currentFloorData.map = editor.map.map(function (v) {
return v.map(function (v) {
return v.idnum || v || 0
})
});
else{
for(var ii=0,name;name=['map','bgmap','fgmap'][ii];ii++){
var mapArray=editor[name].map(function (v) {
return v.map(function (v) {
return v.idnum || v || 0
})
});
editor.currentFloorData[name]=mapArray;
}
}
for (var ii in editor.currentFloorData)
if (editor.currentFloorData.hasOwnProperty(ii)) {
if (['map','bgmap','fgmap'].indexOf(ii)!==-1)

2
_server/vm.js
View File

@ -25,7 +25,7 @@ document.body.onmousedown = function (e) {
});
var unselect=true;
for(var ii=0,thisId;thisId=['edit','tip','brushMod','brushMod2','viewportButtons'][ii];ii++){
for(var ii=0,thisId;thisId=['edit','tip','brushMod','brushMod2','layerMod','layerMod2','layerMod3','viewportButtons'][ii];ii++){
if (clickpath.indexOf(thisId) !== -1){
unselect=false;
break;

19
editor-mobile.html
View File

@ -269,17 +269,22 @@
<option value="functions">脚本编辑</option>
<option value="appendpic">追加素材</option>
</select>
<select id="brushMod">
<select id="brushMod" style="clear:right">
<option value="line">画线</option>
<option value="rectangle">画矩形</option>
</select>
<div id="viewportButtons">
<input type="button" value="←"/>
<input type="button" value="↑"/>
<input type="button" value="↓"/>
<input type="button" value="→"/>
<select id="layerMod" style="float:left;margin-right:6px">
<option value="fgmap">前景</option>
<option value="map" selected="selected">事件</option>
<option value="bgmap">背景</option>
</select>
<div id="viewportButtons" style="float:left">
<input type="button" style="padding:1px 1px" value="←"/>
<input type="button" style="padding:1px 6px" value="↑"/>
<input type="button" style="padding:1px 6px" value="↓"/>
<input type="button" style="padding:1px 1px" value="→"/>
</div>
<select id="selectFloor"></select>
<select id="selectFloor" style="clear:left"></select>
<input type="button" value="保存地图" id='saveFloor'/>
<span id='mobileeditdata' style="display:none">
<input type="button" value="编辑"/>

6
editor.html
View File

@ -246,6 +246,12 @@
<input type="radio" id="brushMod" name="brushMod" value="line" checked="checked" />画线
<input type="radio" id="brushMod2" name="brushMod" value="rectangle" />画矩形
</span>
<span style="font-size: 12px; margin-left: 5px">
图层:
<input type="radio" id="layerMod3" name="layerMod" value="fgmap" />前景
<input type="radio" id="layerMod" name="layerMod" value="map" checked="checked" />事件
<input type="radio" id="layerMod2" name="layerMod" value="bgmap" />背景
</span>
<br>
<div id="viewportButtons">
<input type="button" value="←"/>

2
libs/maps.js
View File

@ -351,11 +351,13 @@ maps.prototype.drawBgFgMap = function (floorId, canvas, name) {
var getMapArray = function (name) {
var arr = core.clone(core.floors[floorId][name+"map"] || []);
if(main.mode=='editor')arr = core.clone(editor[name+"map"])||arr;
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
arr[y] = arr[y] || [];
if (core.hasFlag(name + "_" + floorId + "_" + x + "_" + y)) arr[y][x] = 0;
else arr[y][x] = core.getFlag(name + "v_" + floorId + "_" + x + "_" + y, arr[y][x] || 0);
if(main.mode=='editor')arr[y][x]= arr[y][x].idnum || arr[y][x] || 0;
}
}
return arr;