699 lines
23 KiB
HTML
699 lines
23 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link href="_server/css/editor.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div class="main">
|
||
<div id="left">
|
||
<div id="arrEditor">
|
||
<table class="col" id='arrColMark'></table>
|
||
<table class="row" id='arrRowMark'></table>
|
||
<div id="editArea" v-cloak>
|
||
<textarea cols="10" rows="10" id="pout" v-model="mapArr"></textarea>
|
||
<p class="warnText" v-if="error">{{ errors[error-1] }}</p>
|
||
</div>
|
||
<div id="editTip" v-cloak>
|
||
<input class='btn' type="button" value="复制地图" v-on:click="copyMap"/>
|
||
</div>
|
||
</div>
|
||
<div id="objDataEditor">
|
||
|
||
</div>
|
||
<div id="eventEditor">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div id="mid">
|
||
<table class="col" id='mapColMark'></table>
|
||
<table class="row" id='mapRowMark'></table>
|
||
<div class="map" id="mapEdit">
|
||
<canvas class='gameCanvas' id='bg' width='416' height='416' style='z-index:1'></canvas>
|
||
<canvas class='gameCanvas' id='eventLayer' width='416' height='416' style='z-index:2'></canvas>
|
||
<canvas class='gameCanvas' id='ui' width='416' height='416' style='z-index:100'></canvas>
|
||
</div>
|
||
<div class="tools">
|
||
<div id="tip" v-cloak >
|
||
<div v-if="isSelectedBlock" >
|
||
<p v-if="isClearBlock" class="infoText">当前选择为清除块，可擦除地图上块</p>
|
||
<div v-else>
|
||
<p v-if="hasId">图块编号：<span class="infoText">{{ infos['idnum'] }}</span></p>
|
||
<p v-if="hasId">图块ID：<span class="infoText">{{ infos['id'] }}</span></p>
|
||
<p v-else class="warnText">该图块无对应的数字或ID存在，请先前往icons.js和maps.js中进行定义！</p>
|
||
<p>图块所在素材：<span class="infoText">{{ infos['images'] + (isAutotile ? '( '+infos['id']+' )' : '') }}</span></p>
|
||
<p>图块索引：<span class="infoText">{{ infos['y'] }}</span></p>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<p v-if="whichShow" v-bind:class="[ (whichShow%2) ? 'warnText' : 'successText']">{{ mapMsg }}</p>
|
||
</div>
|
||
</div>
|
||
<input class='btn' id='clear' type="button" value="清除地图" v-on:click="clearMap"/>
|
||
<input class='btn' type="button" value="导出地图" id="exportM" v-on:click="exportMap"/>
|
||
|
||
<div id="bgSelect" v-cloak>
|
||
<span>当前地板: </span>
|
||
<select v-model="selectedBg">
|
||
<option disabled value="">请选择地板</option>
|
||
<option v-for="bg in bgs" v-bind:value="bg">
|
||
{{ bg }}
|
||
</option>
|
||
</select>
|
||
<div class="selectpng">
|
||
<input class='input' id='pin' v-model="imgname" placeholder="请输入自定义背景文件名"/>
|
||
<input class='btn' type="button" value="确定" v-on:click="updatebg"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="right">
|
||
<div id="iconLib">
|
||
<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
|
||
<div id="selectBox">
|
||
<div id='dataSelection' v-show="isSelected" v-cloak></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 生成定位编号
|
||
(function(){
|
||
var colNum = ' ';
|
||
for(var i=0; i<13; i++){
|
||
var tpl = '<td>'+i+'<div class="colBlock" style="left:'+(i*32+1)+'px;"></div></td>';
|
||
colNum += tpl;
|
||
}
|
||
arrColMark.innerHTML = '<tr>'+colNum+'</tr>';
|
||
mapColMark.innerHTML = '<tr>'+colNum+'</tr>';
|
||
var rowNum = ' ';
|
||
for(var i=0; i<13; i++){
|
||
var tpl = '<tr><td>'+i+'<div class="rowBlock" style="top:'+(i*32+1)+'px;"></div></td></tr>';
|
||
rowNum += tpl;
|
||
}
|
||
arrRowMark.innerHTML = rowNum;
|
||
mapRowMark.innerHTML = rowNum;
|
||
})();
|
||
</script>
|
||
|
||
<!-- =========================================================== -->
|
||
|
||
<script src='_server/vendor/vue.min.js'></script>
|
||
<script src='_server/vendor/polyfill.min.js'></script>
|
||
<!-- <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script> -->
|
||
<script src='_server/fs.js'></script>
|
||
<!-- <script src='_server/editor_file.js'></script> -->
|
||
<script src='_server/vm.js'></script>
|
||
<script>
|
||
|
||
//所有全局量
|
||
__all__=['Vue','fs','printf','editor','main','core'];
|
||
__id__=['printOut','arrRowMark','mapRowMark','data','bg','dataSelection'];
|
||
__Vue__=['exportM','editArea','editTip','clear','tip','selectBox'];
|
||
|
||
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
||
function hasOwnProp (obj, key) {
|
||
return hasOwnProperty.call(obj, key)
|
||
}
|
||
|
||
var main={'instance':{}};
|
||
var core={};
|
||
|
||
function editor() {
|
||
this.version = "1.3.2";
|
||
this.material = {};
|
||
}
|
||
// 重构这一堆回调
|
||
editor.prototype.init = function(){
|
||
var mapsjsUrl = 'libs/maps.js';
|
||
var iconsjsUrl = 'libs/icons.js';
|
||
|
||
var p1 = editor.loadjs(mapsjsUrl).then(function(){ // 加载maps.js
|
||
return new maps(); //实例化maps
|
||
});
|
||
var p2 = editor.loadjs(iconsjsUrl) // 加载icons.js
|
||
.then(function(){ // 实例化并获取icons
|
||
var ic = new icons();
|
||
ic.init();
|
||
return ic.getIcons();
|
||
});
|
||
var p3 = p2.then(function(icons){ // 加载所有图片
|
||
return editor.loadAllImgs(icons);
|
||
})
|
||
.catch(function(err){
|
||
console.log('发生错误！', err);
|
||
});
|
||
|
||
Promise.all([p1, p2, p3])
|
||
.then(function(results){
|
||
var maps = results[0], icons = results[1];
|
||
editor.idsInit(maps, icons); // 初始化图片素材信息
|
||
editor.drawInitData(icons); // 初始化绘图
|
||
editor.listen(); // 开始监听事件
|
||
})
|
||
}
|
||
|
||
editor.prototype.loadjs = function(url){
|
||
return new Promise(function(resolve, reject){
|
||
var script = document.createElement('script');
|
||
script.src = url + '?' + editor.version;
|
||
document.body.appendChild(script);
|
||
script.onload = function () {
|
||
resolve( console.log(url+"加载完成"));
|
||
}
|
||
script.onerror = function(){
|
||
reject(new Error('Load js error at '+url))
|
||
}
|
||
});
|
||
}
|
||
editor.prototype.loadImg = function(url){
|
||
return new Promise(function(resolve, reject){
|
||
var img = new Image();
|
||
img.src = url;
|
||
img.onload = function(){
|
||
resolve(img);
|
||
}
|
||
img.onerror = function(){
|
||
reject(new Error('Load image error at '+url));
|
||
}
|
||
})
|
||
}
|
||
editor.prototype.loadAllImgs = function(icons){
|
||
editor.material.images = {};
|
||
var imgs = Object.keys(icons);
|
||
var autotiles = null;
|
||
if(hasOwnProp(icons, 'hero')){ // hero 图片不加载
|
||
var index = imgs.indexOf('hero');
|
||
imgs.splice(index, 1);
|
||
}
|
||
if(hasOwnProp(icons, 'autotile')){
|
||
editor.material.images['autotile'] = {};
|
||
var index = imgs.indexOf('autotile');
|
||
imgs.splice(index, 1);
|
||
autotiles = Object.keys(icons.autotile);
|
||
imgs = imgs.concat(autotiles);
|
||
}
|
||
var p = imgs.map(function(im){
|
||
var url = 'images/'+im+'.png'
|
||
return editor.loadImg(url).then(function(image){
|
||
if(autotiles.indexOf(im) >= 0){
|
||
editor.material.images['autotile'][im] = image;
|
||
}else editor.material.images[im] = image;
|
||
}).catch(function(err){
|
||
console.log('发生错误！', err);
|
||
});
|
||
});
|
||
|
||
return Promise.all(p);
|
||
}
|
||
editor.prototype.idsInit = function(maps, icons){
|
||
editor.ids = [0];
|
||
editor.indexs = [];
|
||
var MAX_NUM = 400;
|
||
var getInfoById = function(id){
|
||
var block = maps.getBlock(0, 0, id);
|
||
if(hasOwnProp(block, 'event')){
|
||
return block;
|
||
}
|
||
}
|
||
var point = 0;
|
||
for(var i=0; i<MAX_NUM; i++){
|
||
var indexBlock = getInfoById(i);
|
||
editor.indexs[i] = [];
|
||
if(indexBlock){
|
||
var id = indexBlock.event.id;
|
||
var indexId = indexBlock.id;
|
||
var allCls = Object.keys(icons);
|
||
for(var j=0; j<allCls.length; j++){
|
||
if(id in icons[allCls[j]] ){
|
||
editor.ids.push({'idnum':indexId,'id':id,'images':allCls[j],'y':icons[allCls[j]][id]});
|
||
point++;
|
||
editor.indexs[i].push(point);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
editor.prototype.drawInitData = function (icons) {
|
||
var ratio=1;
|
||
var images=editor.material.images;
|
||
var maxHeight=700;
|
||
var sumWidth=0;
|
||
editor.widthsX={};
|
||
// var imgNames = Object.keys(images); //还是固定顺序吧；
|
||
var imgNames = ["terrains", "animates", "enemys", "items", "npcs", "autotile"];
|
||
|
||
for(var ii=0; ii<imgNames.length; ii++){
|
||
var img=imgNames[ii], tempy = 0;
|
||
if(img == 'autotile'){
|
||
var autotiles = images[img];
|
||
for(var im in autotiles){
|
||
tempy += autotiles[im].height;
|
||
}
|
||
editor.widthsX[img]=[img, sumWidth/32, (sumWidth+3*32)/32, tempy];
|
||
sumWidth += 3*32;
|
||
maxHeight = Math.max(maxHeight, tempy);
|
||
continue;
|
||
}
|
||
if(img == 'terrains'){
|
||
editor.widthsX[img]=[img, sumWidth/32, (sumWidth+images[img].width)/32, images[img].height+32]
|
||
sumWidth += images[img].width;
|
||
maxHeight = Math.max(maxHeight, images[img].height+32);
|
||
continue;
|
||
}
|
||
editor.widthsX[img]=[img, sumWidth/32, (sumWidth+images[img].width)/32, images[img].height];
|
||
sumWidth += images[img].width;
|
||
maxHeight = Math.max(maxHeight, images[img].height);
|
||
}
|
||
var fullWidth=~~(sumWidth*ratio);
|
||
var fullHeight=~~(maxHeight*ratio);
|
||
|
||
if (fullWidth > data.width) data.style.width = (data.width = fullWidth)/ratio + 'px';
|
||
data.style.height = (data.height = fullHeight)/ratio + 'px';
|
||
var dc = data.getContext('2d');
|
||
var nowx = 0;
|
||
var nowy = 0;
|
||
for(var ii=0; ii<imgNames.length; ii++){
|
||
var img=imgNames[ii];
|
||
if(img == 'terrains'){
|
||
dc.drawImage(images[img], nowx, 32);
|
||
nowx += images[img].width;
|
||
continue;
|
||
}
|
||
if(img == 'autotile'){
|
||
var autotiles = images[img];
|
||
for(var im in autotiles){
|
||
dc.drawImage(autotiles[im], nowx, nowy);
|
||
nowy += autotiles[im].height;
|
||
}
|
||
continue;
|
||
}
|
||
dc.drawImage(images[img], nowx, 0)
|
||
nowx += images[img].width;
|
||
}
|
||
bgSelect.bgs = Object.keys(icons.terrains);
|
||
editor.drawMapBg();
|
||
editor.mapInit();
|
||
}
|
||
editor.prototype.mapInit = function(){
|
||
var ec = eventLayer.getContext('2d');
|
||
ec.clearRect(0, 0, 416, 416);
|
||
editor.map = [];
|
||
for(var y=0; y<13; y++){
|
||
editor.map[y] = [];
|
||
for(var x = 0; x<13; x++){
|
||
editor.map[y][x] = 0;
|
||
}
|
||
}
|
||
}
|
||
editor.prototype.drawMapBg = function(img){
|
||
var bgc = bg.getContext('2d');
|
||
|
||
for (var ii = 0; ii < 13; ii++)
|
||
for (var jj = 0; jj < 13; jj++) {
|
||
bgc.clearRect(ii*32, jj*32, 32, 32);
|
||
bgc.drawImage(editor.material.images['terrains'], 0, 32*(editor.bgY||0), 32, 32, ii*32, jj*32, 32, 32);
|
||
}
|
||
if(img){
|
||
bgc.drawImage(img, 0, 0, 416, 416);
|
||
}
|
||
}
|
||
editor.prototype.updateMap = function(){
|
||
|
||
var drawTile = function(ctx, x, y, tileInfo){ // 绘制一个普通块
|
||
|
||
ctx.clearRect(x*32, y*32, 32, 32);
|
||
if(tileInfo == 0) return;
|
||
|
||
if(typeof(tileInfo) == typeof([][0]) || !hasOwnProp(tileInfo, 'idnum')) {//未定义块画红块
|
||
if(typeof(tileInfo) != typeof([][0]) && hasOwnProp(tileInfo, 'images')){
|
||
ctx.drawImage(editor.material.images[tileInfo.images], 0, tileInfo.y*32, 32, 32, x*32, y*32, 32, 32);
|
||
}
|
||
ctx.strokeStyle = 'red';
|
||
var OFFSET = 2;
|
||
ctx.lineWidth = OFFSET;
|
||
ctx.strokeRect(x*32+OFFSET, y*32+OFFSET, 32-OFFSET*2, 32-OFFSET*2);
|
||
ctx.font = "30px Verdana";
|
||
ctx.textAlign = 'center'
|
||
ctx.fillStyle = 'red';
|
||
ctx.fillText("?", x*32+16, y*32+27);
|
||
return;
|
||
}
|
||
ctx.drawImage(editor.material.images[tileInfo.images], 0, tileInfo.y*32, 32, 32, x*32, y*32, 32, 32);
|
||
}
|
||
|
||
// autotile的相关处理
|
||
var indexArrs = [ //16种组合的图块索引数组; // 将autotile分割成48块16*16的小块; 数组索引即对应各个小块
|
||
// +----+----+----+----+----+----+
|
||
[10, 9, 4, 3 ], //0 bin:0000 | 1 | 2 | 3 | 4 | 5 | 6 |
|
||
[10, 9, 4, 13], //1 bin:0001 +----+----+----+----+----+----+
|
||
[10, 9, 18, 3 ], //2 bin:0010 | 7 | 8 | 9 | 10 | 11 | 12 |
|
||
[10, 9, 16, 15], //3 bin:0011 +----+----+----+----+----+----+
|
||
[10, 43, 4, 3 ], //4 bin:0100 | 13 | 14 | 15 | 16 | 17 | 18 |
|
||
[10, 31, 4, 25], //5 bin:0101 +----+----+----+----+----+----+
|
||
[10, 7, 2, 3 ], //6 bin:0110 | 19 | 20 | 21 | 22 | 23 | 24 |
|
||
[10, 31, 16, 5 ], //7 bin:0111 +----+----+----+----+----+----+
|
||
[48, 9, 4, 3 ], //8 bin:1000 | 25 | 26 | 27 | 28 | 29 | 30 |
|
||
[ 8, 9, 4, 1 ], //9 bin:1001 +----+----+----+----+----+----+
|
||
[36, 9, 30, 3 ], //10 bin:1010 | 31 | 32 | 33 | 34 | 35 | 36 |
|
||
[36, 9, 6, 15], //11 bin:1011 +----+----+----+----+----+----+
|
||
[46, 45, 4, 3 ], //12 bin:1100 | 37 | 38 | 39 | 40 | 41 | 42 |
|
||
[46, 11, 4, 25], //13 bin:1101 +----+----+----+----+----+----+
|
||
[12, 45, 30, 3 ], //14 bin:1110 | 43 | 44 | 45 | 46 | 47 | 48 |
|
||
[34, 33, 28, 27] //15 bin:1111 +----+----+----+----+----+----+
|
||
];
|
||
var drawBlockByIndex = function(ctx, dx, dy, autotileImg, index){ //index为autotile的图块索引1-48
|
||
var sx = 16*((index-1)%6), sy = 16*(~~((index-1)/6));
|
||
ctx.drawImage(autotileImg, sx, sy, 16, 16, dx, dy, 16, 16);
|
||
}
|
||
var isAutotile = function(info){
|
||
if(typeof(info)=='object' && hasOwnProp(info, 'images') && info.images=='autotile') return true;
|
||
return false;
|
||
}
|
||
var getAutotileAroundId = function(currId, x, y){ //与autotile当前idnum一致返回1，否则返回0
|
||
if(x>=0 && y >=0 && x<13 && y<13 && isAutotile(editor.map[y][x]) && editor.map[y][x].idnum == currId)
|
||
return 1;
|
||
else if(x<0 || y<0 || x>12 || y>12) return 1; //边界外视为通用autotile，这样好看些
|
||
else
|
||
return 0;
|
||
}
|
||
var checkAround = function(x, y){ // 得到周围四个32*32块（周围每块都包含当前块的1/4，不清楚的话画下图你就明白）的数组索引
|
||
var currId = editor.map[y][x].idnum;
|
||
var pointBlock = [];
|
||
for(var i=0; i<4; i++){
|
||
var bsum = 0;
|
||
var offsetx = i%2, offsety = ~~(i/2);
|
||
for(var j=0; j<4; j++){
|
||
var mx = j%2, my = ~~(j/2);
|
||
var b = getAutotileAroundId(currId, x+offsetx+mx-1, y+offsety+my-1);
|
||
bsum += b*(Math.pow(2, 3-j));
|
||
}
|
||
pointBlock.push(bsum);
|
||
}
|
||
return pointBlock;
|
||
}
|
||
var addIndexToAutotileInfo = function(x, y){
|
||
var indexArr = [];
|
||
var pointBlocks = checkAround(x, y);
|
||
for(var i=0; i<4; i++){
|
||
var arr = indexArrs[pointBlocks[i]]
|
||
indexArr.push(arr[3-i]);
|
||
}
|
||
editor.map[y][x].blockIndex = indexArr;
|
||
}
|
||
var drawAutotile = function(ctx, x, y, info){ // 绘制一个autotile
|
||
ctx.clearRect(x*32, y*32, 32, 32);
|
||
//修正四个边角的固定搭配
|
||
if(info.blockIndex[0] == 13){
|
||
if(info.blockIndex[1] == 16) info.blockIndex[1] = 14;
|
||
if(info.blockIndex[2] == 31) info.blockIndex[2] = 19;
|
||
}
|
||
if(info.blockIndex[1] == 18){
|
||
if(info.blockIndex[0] == 15) info.blockIndex[0] = 17;
|
||
if(info.blockIndex[3] == 36) info.blockIndex[3] = 24;
|
||
}
|
||
if(info.blockIndex[2] == 43){
|
||
if(info.blockIndex[0] == 25) info.blockIndex[0] = 37;
|
||
if(info.blockIndex[3] == 46) info.blockIndex[3] = 44;
|
||
}
|
||
if(info.blockIndex[3] == 48){
|
||
if(info.blockIndex[1] == 30) info.blockIndex[1] = 42;
|
||
if(info.blockIndex[2] == 45) info.blockIndex[2] = 47;
|
||
}
|
||
for(var i=0; i<4; i++){
|
||
var index = info.blockIndex[i];
|
||
var dx = x*32 + 16*(i%2), dy = y*32 + 16*(~~(i/2));
|
||
drawBlockByIndex(ctx, dx, dy, editor.material.images[info.images][info.id], index);
|
||
}
|
||
}
|
||
|
||
// 绘制地图 start
|
||
var eventCtx = eventLayer.getContext("2d");
|
||
for(var y=0; y<13; y++)
|
||
for(var x=0; x<13; x++){
|
||
var tileInfo = editor.map[y][x];
|
||
if(isAutotile(tileInfo)){
|
||
addIndexToAutotileInfo(x, y);
|
||
drawAutotile(eventCtx, x, y, tileInfo);
|
||
}else drawTile(eventCtx, x, y, tileInfo);
|
||
}
|
||
// 绘制地图 end
|
||
}
|
||
editor.prototype.listen = function() {
|
||
|
||
var uc = ui.getContext('2d');
|
||
|
||
function fillPos(pos) {
|
||
uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8);
|
||
uc.fillRect(pos.x * 32 + 12, pos.y * 32 + 12, 8, 8);
|
||
}//在格子内画一个随机色块
|
||
|
||
function eToLoc(e) {
|
||
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
|
||
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||
editor.loc = {
|
||
'x': scrollLeft+e.clientX - mid.offsetLeft-mapEdit.offsetLeft,
|
||
'y': scrollTop+e.clientY - mid.offsetTop-mapEdit.offsetTop,
|
||
'size': 32
|
||
};
|
||
return editor.loc; }//返回可用的组件内坐标
|
||
|
||
function locToPos(loc) {
|
||
editor.pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
|
||
return editor.pos;
|
||
}
|
||
|
||
var holdingPath = 0;
|
||
var stepPostfix = null;//用于存放寻路检测的第一个点之后的后续移动
|
||
|
||
var mouseOutCheck = 2;
|
||
function clear1() {
|
||
if (mouseOutCheck > 1) {
|
||
mouseOutCheck--;
|
||
setTimeout(clear1, 1000);
|
||
return;
|
||
}
|
||
holdingPath = 0;
|
||
stepPostfix = [];
|
||
uc.clearRect(0, 0, 416, 416);
|
||
}//用于鼠标移出canvas时的自动清除状态
|
||
|
||
ui.onmousedown = function (e) {
|
||
if(!selectBox.isSelected) {
|
||
tip.whichShow = 1;
|
||
return;
|
||
}
|
||
|
||
holdingPath = 1;
|
||
mouseOutCheck = 2;
|
||
setTimeout(clear1);
|
||
e.stopPropagation();
|
||
uc.clearRect(0, 0, 416, 416);
|
||
var loc = eToLoc(e);
|
||
var pos = locToPos(loc)
|
||
stepPostfix = [];
|
||
stepPostfix.push(pos);
|
||
fillPos(pos);
|
||
}
|
||
|
||
ui.onmousemove = function (e) {
|
||
if(!selectBox.isSelected) {
|
||
// tip.whichShow = 1;
|
||
return;
|
||
}
|
||
|
||
if (holdingPath == 0) { return; }
|
||
mouseOutCheck = 2;
|
||
e.stopPropagation();
|
||
var loc = eToLoc(e);
|
||
var pos = locToPos(loc);
|
||
var pos0 = stepPostfix[stepPostfix.length - 1]
|
||
var directionDistance = [pos.y - pos0.y, pos0.x - pos.x, pos0.y - pos.y, pos.x - pos0.x]
|
||
var max = 0, index = 4;
|
||
for (var i = 0; i < 4; i++) {
|
||
if (directionDistance[i] > max) {
|
||
index = i;
|
||
max = directionDistance[i];
|
||
}
|
||
}
|
||
var pos = [{ 'x': 0, 'y': 1 }, { 'x': -1, 'y': 0 }, { 'x': 0, 'y': -1 }, { 'x': 1, 'y': 0 }, false][index]
|
||
if (pos) {
|
||
pos.x += pos0.x;
|
||
pos.y += pos0.y;
|
||
stepPostfix.push(pos);
|
||
fillPos(pos);
|
||
}
|
||
}
|
||
|
||
ui.onmouseup = function (e) {
|
||
if(!selectBox.isSelected) {
|
||
tip.whichShow = 1;
|
||
return;
|
||
}
|
||
holdingPath = 0;
|
||
e.stopPropagation();
|
||
var loc = eToLoc(e);
|
||
if (stepPostfix.length) {
|
||
preMapData = JSON.parse(JSON.stringify(editor.map));
|
||
currDrawData.pos = JSON.parse(JSON.stringify(stepPostfix));
|
||
currDrawData.info = JSON.parse(JSON.stringify(editor.info));
|
||
reDo = null;
|
||
// console.log(stepPostfix);
|
||
for (var ii = 0; ii < stepPostfix.length; ii++)
|
||
editor.map[stepPostfix[ii].y][stepPostfix[ii].x] = editor.info;
|
||
// console.log(editor.map);
|
||
editor.updateMap();
|
||
holdingPath = 0;
|
||
stepPostfix = [];
|
||
uc.clearRect(0, 0, 416, 416);
|
||
}
|
||
}
|
||
|
||
var preMapData = {};
|
||
var currDrawData = {
|
||
pos: [],
|
||
info: {}
|
||
};
|
||
var reDo = null;
|
||
document.body.onkeydown = function(e) {
|
||
// 禁止快捷键的默认行为
|
||
if( e.ctrlKey && ( e.keyCode == 90 || e.keyCode == 89 ) )
|
||
e.preventDefault();
|
||
//Ctrl+z 撤销上一步undo
|
||
if(e.keyCode == 90 && e.ctrlKey && preMapData && currDrawData.pos.length){
|
||
editor.map = JSON.parse(JSON.stringify(preMapData));
|
||
editor.updateMap();
|
||
reDo = JSON.parse(JSON.stringify(currDrawData));
|
||
currDrawData = {pos: [],info: {}};
|
||
preMapData = null;
|
||
}
|
||
//Ctrl+y 重做一步redo
|
||
if(e.keyCode == 89 && e.ctrlKey && reDo && reDo.pos.length){
|
||
preMapData = JSON.parse(JSON.stringify(editor.map));
|
||
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));
|
||
|
||
editor.updateMap();
|
||
currDrawData = JSON.parse(JSON.stringify(reDo));
|
||
reDo = null;
|
||
}
|
||
}
|
||
|
||
data.onmousedown = function (e) {
|
||
e.stopPropagation();
|
||
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
|
||
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||
var loc = {
|
||
'x': scrollLeft + e.clientX + iconLib.scrollLeft - right.offsetLeft-iconLib.offsetLeft,
|
||
'y': scrollTop + e.clientY + iconLib.scrollTop - right.offsetTop-iconLib.offsetTop,
|
||
'size': 32
|
||
};
|
||
editor.loc = loc;
|
||
var pos = locToPos(loc);
|
||
for (var spriter in editor.widthsX){
|
||
if(pos.x>=editor.widthsX[spriter][1] && pos.x<editor.widthsX[spriter][2]){
|
||
pos.x=editor.widthsX[spriter][1];
|
||
pos.images = editor.widthsX[spriter][0];
|
||
var autotiles = editor.material.images['autotile'];
|
||
if(pos.images=='autotile'){
|
||
var imNames = Object.keys(autotiles);
|
||
if((pos.y+1)*32 > editor.widthsX[spriter][3])
|
||
pos.y = ~~(editor.widthsX[spriter][3]/32)-4;
|
||
else{
|
||
for(var i=0; i<imNames.length; i++){
|
||
if(pos.y >= 4*i && pos.y < 4*(i+1)){
|
||
pos.images = imNames[i];
|
||
pos.y = 4*i;
|
||
}
|
||
}
|
||
}
|
||
}else if((pos.y+1)*32 > editor.widthsX[spriter][3])
|
||
pos.y = ~~(editor.widthsX[spriter][3]/32)-1;
|
||
|
||
selectBox.isSelected = true;
|
||
// console.log(pos,editor.material.images[pos.images].height)
|
||
dataSelection.style.left = pos.x*32 +'px';
|
||
dataSelection.style.top = pos.y*32 +'px';
|
||
|
||
if(pos.x==0&&pos.y==0){
|
||
// editor.info={idnum:0, id:'empty','images':'清除块', 'y':0};
|
||
editor.info=0;
|
||
}else{
|
||
if(hasOwnProp(autotiles, pos.images)) editor.info={'images':pos.images, 'y':0};
|
||
else if(pos.images == 'terrains') editor.info={'images':pos.images, 'y':pos.y-1};
|
||
else editor.info={'images':pos.images, 'y':pos.y};
|
||
|
||
for (var ii=0;ii<editor.ids.length;ii++){
|
||
if( ( editor.info.images==editor.ids[ii].images
|
||
&& editor.info.y==editor.ids[ii].y )
|
||
|| (hasOwnProp(autotiles, pos.images) && editor.info.images==editor.ids[ii].id
|
||
&& editor.info.y==editor.ids[ii].y)){
|
||
|
||
editor.info = editor.ids[ii];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
tip.infos = JSON.parse(JSON.stringify(editor.info));
|
||
}
|
||
}
|
||
}
|
||
document.body.onmousedown = function(e){
|
||
selectBox.isSelected = false;
|
||
editor.info = {};
|
||
}
|
||
iconLib.onmousedown = function(e){
|
||
e.stopPropagation();
|
||
}
|
||
}//绑定事件
|
||
editor.prototype.locInfo = function(){
|
||
|
||
}
|
||
/*
|
||
editor.updateMap
|
||
|
||
editor.loc
|
||
editor.pos
|
||
editor.info
|
||
始终是最后一次点击的结果
|
||
注意editor.info可能因为点击其他地方而被清空
|
||
*/
|
||
var editor = new editor();
|
||
editor.init();
|
||
editor.fs=fs;
|
||
// editor.file=editor_file;
|
||
</script>
|
||
<script>
|
||
// 文件相关操作
|
||
// var promisify = function (fn, receiver) {
|
||
// return function () {
|
||
// for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||
// args[_key] = arguments[_key];
|
||
// }
|
||
// return new Promise(function (resolve, reject) {
|
||
// fn.apply(receiver, [].concat(args, [function (res, err) {
|
||
// return err ? reject(err) : resolve(res);
|
||
// }]));
|
||
// });
|
||
// };
|
||
// };
|
||
// var fns = Object.keys(editor.file);
|
||
// var promiseFns = {};
|
||
// fns.forEach(function(fn){
|
||
// promiseFns[fn] = promisify(editor.file[fn], editor.file)
|
||
// });
|
||
// editor.promiseFiles = Object.assign(promiseFns);
|
||
|
||
// editor.promiseFiles.getFloorFileList(editor)
|
||
// .then(function(filelist){
|
||
// editFile4map.filelist = filelist;
|
||
// })
|
||
// .catch(function(err){
|
||
// console.log(err);
|
||
// })
|
||
</script>
|
||
</body>
|
||
</html>
|