920 lines
26 KiB
HTML
920 lines
26 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<style>
|
||
html,body,div,img{margin:0;padding:0;}
|
||
body{
|
||
font-family: Roboto,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;;
|
||
background-color: #F5F5F5;
|
||
}
|
||
/* ::-webkit-scrollbar {
|
||
width: 5px;
|
||
} */
|
||
.main {
|
||
max-width: 100%;
|
||
min-height: 500px;
|
||
margin: 0 auto;
|
||
}
|
||
#left, #mid, #right{
|
||
border-radius: 2px;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
|
||
}
|
||
#left{
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 10px;
|
||
width: 435px;
|
||
height: 630px;
|
||
}
|
||
|
||
#editArea{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 70%;
|
||
left: 0;
|
||
top: 0;
|
||
/* padding: 10px 5px; */
|
||
box-sizing: border-box;
|
||
}
|
||
#pout{
|
||
display: block;
|
||
width: 410px;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
margin-left: 22px;
|
||
margin-top: 23px;
|
||
line-height: 20px;
|
||
font-size: 12.3px;
|
||
font-family: 'Lucida Console', Monaco, monospace;
|
||
white-space: pre;
|
||
border: 1px solid #ddd;
|
||
border-radius: 2px;
|
||
}
|
||
#editTip{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 80px;
|
||
bottom:10px;
|
||
left: 10px;
|
||
}
|
||
#editArea p{
|
||
margin: 10px;
|
||
display: block;
|
||
width: 70%;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
font-size: 14px;
|
||
}
|
||
#editTip .btn{
|
||
float: right;
|
||
margin-right: 20px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
#mid{
|
||
position: absolute;
|
||
left: 448px;
|
||
top: 10px;
|
||
width: 440px;
|
||
height: 630px;
|
||
}
|
||
.map {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 21px;
|
||
width: 416px;
|
||
height: 416px;
|
||
}
|
||
#mid .tools{
|
||
position: absolute;
|
||
width: 425px;
|
||
height: 180px;
|
||
left: 0;
|
||
bottom: 0;
|
||
border-top: 1px solid #ccc;
|
||
padding: 10px 5px;
|
||
margin-left: 8px;;
|
||
box-sizing: border-box;
|
||
}
|
||
#tip{
|
||
float: right;
|
||
width: 50%;
|
||
height: 95%;
|
||
padding: 5px 10px 10px 10px;
|
||
margin-right: 0;
|
||
box-sizing: border-box;
|
||
border: 1px solid #ccc;
|
||
border-radius: 2px;
|
||
font-size: 15px;
|
||
line-height: 14px;
|
||
}
|
||
.files {
|
||
width: 50%;
|
||
height: 120px;
|
||
/* padding: 10px; */
|
||
margin-top: 15px;
|
||
}
|
||
.files .input{
|
||
display: block;
|
||
max-width: 150px;
|
||
height: 20px;
|
||
padding: 6px 12px;
|
||
font-size: 14px;
|
||
margin-top: 10px;
|
||
color: #555;
|
||
background-color: #fff;
|
||
border: 1px solid #ccc;
|
||
border-radius: 3px;
|
||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||
}
|
||
#printOut{
|
||
margin-top: 10px;
|
||
height: 20px;
|
||
|
||
}
|
||
.btn {
|
||
width: 80px;
|
||
border-radius: 2px;
|
||
line-height: 30px;
|
||
margin: 0;
|
||
min-width: 50px;
|
||
padding: 0 5px;
|
||
display: inline-block;
|
||
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
/* text-transform: uppercase; */
|
||
letter-spacing: 0;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
border: 0;
|
||
background: rgba(158,158,158,.2);
|
||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 3px 0 rgba(0,0,0,.12);
|
||
color: #fff;
|
||
background-color: #26A69A;
|
||
}
|
||
.btn:hover {
|
||
background-color: #009688;
|
||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
|
||
}
|
||
#right{
|
||
position: absolute;
|
||
left: 900px;
|
||
top: 10px;
|
||
width: 440px;
|
||
height: 630px;
|
||
/* border: 1px solid rgb(238, 13, 13); */
|
||
}
|
||
#iconLib{
|
||
position: absolute;
|
||
width: 435px;
|
||
height: 620px;
|
||
left: 5px;
|
||
top: 5px;
|
||
overflow: auto;
|
||
}
|
||
.gameCanvas {
|
||
position: absolute;
|
||
}
|
||
#dataSelection{
|
||
position: absolute;
|
||
/* top:0;
|
||
left:320px; */
|
||
z-index:75;
|
||
width:26px;
|
||
height:26px;
|
||
margin: 3px 0 0 3px;
|
||
padding:0;
|
||
/* display: none; */
|
||
box-sizing: border-box;
|
||
background-color:rgba(255, 255, 255, 0.0);
|
||
border: 1px solid #000;
|
||
box-shadow: 0 0 0 2px #fff,
|
||
0 0 0 3px #000;
|
||
}
|
||
.warnText{
|
||
color: #D50000;
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
}
|
||
.infoText{
|
||
color: #2196F3;
|
||
}
|
||
.successText{
|
||
color: #00897B
|
||
}
|
||
|
||
table, td {
|
||
border: 1px solid #fff;
|
||
color: #fff;
|
||
cursor:crosshair;
|
||
}
|
||
table.col{
|
||
position: relative;
|
||
|
||
text-align: center;
|
||
border-collapse: collapse;
|
||
}
|
||
table.col td{
|
||
background-color: #4DB6AC;
|
||
}
|
||
#arrColMark td{
|
||
width: 16px;
|
||
}
|
||
#arrColMark {
|
||
top: 2px;
|
||
left: 36px;
|
||
width: 385px;
|
||
height: 16px;
|
||
font-size: 13px;
|
||
}
|
||
#mapColMark {
|
||
top: 2px;
|
||
left: 19px;
|
||
width: 418px;
|
||
height: 16px;
|
||
font-size: 13px;
|
||
}
|
||
#mapColMark td{
|
||
width: 29px;
|
||
}
|
||
#mapColMark td:hover .colBlock{
|
||
position: absolute;
|
||
top: 19px;
|
||
height: 416px;
|
||
width: 32px;
|
||
z-index: 100;
|
||
background-color: rgba(38,166,154,.5);
|
||
}
|
||
table.row{
|
||
position: relative;
|
||
text-align: right;
|
||
vertical-align:middle;
|
||
border-collapse: collapse;
|
||
}
|
||
table.row td{
|
||
background-color: #4C221B;
|
||
}
|
||
#arrRowMark{
|
||
top: 5px;
|
||
left: 2px;
|
||
width: 16px;
|
||
height: 262px;
|
||
font-size: 12px;
|
||
}
|
||
#mapRowMark{
|
||
top: 1px;
|
||
left: 2px;
|
||
width: 16px;
|
||
height: 416px;
|
||
font-size: 12px;
|
||
}
|
||
#mapRowMark td{
|
||
height: 29px;
|
||
}
|
||
#mapRowMark td:hover .rowBlock{
|
||
position: absolute;
|
||
left: 18px;
|
||
height: 32px;
|
||
width: 416px;
|
||
z-index: 100;
|
||
background-color: rgba(76,34,27,.5);
|
||
}
|
||
/* for vue dom */
|
||
[v-cloak] {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
</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="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 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 class="files">
|
||
<input class='btn' type="button" value="read" onclick="readUTF8file(pin.value)" />
|
||
<input class='btn' type="button" value="write" onclick="writeUTF8file(pin.value,pout.innerText)" />
|
||
|
||
<input class='input' id='pin' placeholder="请输入文件名"/>
|
||
<div id="printOut"></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="https://unpkg.com/vue"></script> -->
|
||
<script src='_server/fs.js'></script>
|
||
<script src='_server/vm.js'></script>
|
||
<script>
|
||
printf = function(str,weak) {
|
||
var prefix='<span class="result">',postfix='</span>';
|
||
if (weak){prefix='<span class="weakresult">';}
|
||
if (typeof(str)==="undefined")str='';
|
||
printOut.innerHTML=prefix+String(str)+postfix;
|
||
}
|
||
//所有全局量
|
||
__all__=['Vue','fs','printf','editor','main','core','fullX','fullY'];
|
||
__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.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([maps, icons, img]){
|
||
editor.idsInit(maps, icons); // 初始化图片素材信息
|
||
editor.drawInitData(); // 初始化绘图
|
||
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 = [];
|
||
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 () {
|
||
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;
|
||
}
|
||
|
||
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 == '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;
|
||
}
|
||
|
||
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(){
|
||
var bgc = bg.getContext('2d');
|
||
|
||
for (var ii = 0; ii < 13; ii++)
|
||
for (var jj = 0; jj < 13; jj++) {
|
||
bgc.drawImage(editor.material.images['terrains'], 0, 32*(editor.bgY||0), 32, 32, ii*32, jj*32, 32, 32);
|
||
}
|
||
}
|
||
|
||
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种组合的图块索引数组
|
||
[10, 9, 4, 3], //0 bin:0000
|
||
[10, 9, 4, 13], //1 bin:0001
|
||
[10, 9, 18, 3], //2 bin:0010
|
||
[10, 9, 16, 15], //3 bin:0011
|
||
[10, 43, 4, 3], //4 bin:0100
|
||
[10, 31, 4, 25], //5 bin:0101
|
||
[10, 7, 2, 3], //6 bin:0110
|
||
[10, 19, 14, 5], //7 bin:0111
|
||
[48, 9, 4, 3], //8 bin:1000
|
||
[8, 9, 4, 1], //9 bin:1001
|
||
[36, 9, 30, 3], //10 bin:1010
|
||
[24, 9, 6, 17], //11 bin:1011
|
||
[46, 45, 4, 3], //12 bin:1100
|
||
[44, 11, 4, 37], //13 bin:1101
|
||
[12, 47, 42, 3], //14 bin:1110
|
||
[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
|
||
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) {
|
||
editor.loc = {
|
||
'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft-mapEdit.offsetLeft,
|
||
'y': document.documentElement.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 loc = {
|
||
'x': document.documentElement.scrollLeft + e.clientX + iconLib.scrollLeft - right.offsetLeft-iconLib.offsetLeft,
|
||
'y': document.documentElement.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(hasOwnProp(autotiles, pos.images)) editor.info={'images':pos.images, 'y':0};
|
||
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));
|
||
}
|
||
}
|
||
}
|
||
|
||
}//绑定事件
|
||
|
||
/*
|
||
editor.updateMap
|
||
|
||
editor.loc
|
||
editor.pos
|
||
editor.info
|
||
始终是最后一次点击的结果
|
||
注意editor.info可能因为点击其他地方而被清空
|
||
*/
|
||
var editor = new editor();
|
||
editor.init();
|
||
|
||
</script>
|
||
<script type="text/javascript">
|
||
//Vue
|
||
//var listenByVue = function() {
|
||
|
||
//}
|
||
//listenByVue()
|
||
</script>
|
||
</body>
|
||
</html>
|