1187 lines
34 KiB
HTML
1187 lines
34 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: 400px;
|
||
}
|
||
|
||
#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: 16px;
|
||
}
|
||
.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:32px;height:32px;
|
||
|
||
margin:-2px 0 0 -2px;
|
||
padding:0;
|
||
/* display: none; */
|
||
|
||
background-color:rgba(255, 255, 255, 0.0);
|
||
border: 2px solid #30DFF3;
|
||
box-shadow: 0px 0px 2px #30DFF3;
|
||
}
|
||
.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">
|
||
<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="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'] }}</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>
|
||
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 main={'instance':{}};
|
||
var core={};
|
||
|
||
function editor() {
|
||
this.version = "0.1";
|
||
}
|
||
editor.prototype.init = function() {
|
||
var loadedNum=0;
|
||
var tmp_callback = function () {
|
||
loadedNum++;
|
||
if (loadedNum==2)
|
||
editor.drawInitData(function(){
|
||
editor.listen();
|
||
});
|
||
}
|
||
|
||
editor.loadMod(function(){
|
||
editor.afterLoadMod(function(){
|
||
tmp_callback();
|
||
});
|
||
});
|
||
|
||
editor.loadImage(function(){
|
||
editor.importGrass(function(){
|
||
editor.afterImportGrass(function(){
|
||
tmp_callback();
|
||
});
|
||
});
|
||
});
|
||
|
||
}
|
||
|
||
editor.prototype.loadMod = function (callback) {
|
||
main={'instance':{}};
|
||
var loadedNum=0;
|
||
['libs/floors/icons.js','libs/floors/maps.js','libs/icons.js','libs/maps.js'].forEach( function (value,ii,aa) {
|
||
var script = document.createElement('script');
|
||
script.src = value + '?' + editor.version;
|
||
document.body.appendChild(script);
|
||
script.onload = function () {
|
||
loadedNum++;
|
||
if (loadedNum==aa.length)
|
||
callback();
|
||
}
|
||
})
|
||
}//main 加载['libs/icons.js','libs/maps.js']
|
||
|
||
editor.prototype.afterLoadMod = function (callback) {
|
||
|
||
main.instance.icons.init();
|
||
main.instance.maps.init();
|
||
var icons=main.instance.icons.getIcons();
|
||
|
||
editor.ids = [];
|
||
editor.indexs = [];
|
||
editor.ids.push({'idnum':0,'id':'ground','images':'terrains','y':0});
|
||
|
||
var point = 0
|
||
for(var i=0; i<400; i++){
|
||
var indexBlock = main.instance.maps.getBlock(0,0,i);
|
||
editor.indexs[i] = [];
|
||
if('event' in indexBlock){
|
||
var id = indexBlock.event.id;
|
||
var indexId = indexBlock.id;
|
||
if(id=='autotile'){
|
||
editor.ids.push({'idnum':indexId,'id':'autotile','images':'autotile','y':0});
|
||
point++;
|
||
editor.indexs[i].push(point);
|
||
continue;
|
||
}
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
callback();
|
||
}//editor.ids,editor.indexs
|
||
|
||
editor.prototype.loadImage = function (callback) {
|
||
core={};
|
||
core.material={};
|
||
core.material.images = {};
|
||
core.images=['terrains','animates', 'enemys', 'items', 'npcs', ];
|
||
var loadedImageNum=0;
|
||
core.loadImage = function (imgName, callback) {
|
||
try {
|
||
var image = new Image();
|
||
image.src = 'images/' + imgName + '.png';
|
||
if (image.complete) {
|
||
callback(imgName, image);
|
||
return;
|
||
}
|
||
image.onload = function () {
|
||
callback(imgName, image);
|
||
}
|
||
}
|
||
catch (e) {
|
||
alert(e);
|
||
}
|
||
}
|
||
for (var i = 0; i < core.images.length; i++) {
|
||
core.loadImage(core.images[i], function (imgName, image) {
|
||
imgName = imgName.split('-');
|
||
imgName = imgName[0];
|
||
core.material.images[imgName] = image;
|
||
loadedImageNum++;
|
||
if (loadedImageNum == core.images.length) {callback();}
|
||
});
|
||
}
|
||
}//core 加载['terrains','animates', 'enemys', 'items', 'npcs']
|
||
|
||
editor.prototype.importGrass = function (callback) {
|
||
var autotile = new Image();
|
||
|
||
autotile.src = "images/autotile.png";
|
||
|
||
if (autotile.complete) {
|
||
editor.autotile = autotile;
|
||
callback();
|
||
return;
|
||
}
|
||
autotile.onload = function () {
|
||
editor.autotile = autotile;
|
||
callback();
|
||
};
|
||
|
||
}// 加载 'autotile'
|
||
|
||
editor.prototype.afterImportGrass = function (callback) {
|
||
var drawAutotile = function (canvas, x, y, size, autotile, index) {
|
||
switch (index) {
|
||
case 0:
|
||
canvas.drawImage(autotile, 0, 0, 32, 32, x, y, size, size);
|
||
break;
|
||
case 1:
|
||
canvas.drawImage(autotile, 0, 3 * 32, 16, 32, x, y, size / 2, size);
|
||
canvas.drawImage(autotile, 2 * 32 + 16, 3 * 32, 16, 32, x + size / 2, y, size / 2, size);
|
||
break;
|
||
case 2:
|
||
canvas.drawImage(autotile, 2 * 32, 32, 32, 16, x, y, size, size / 2);
|
||
canvas.drawImage(autotile, 2 * 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
|
||
break;
|
||
case 3:
|
||
canvas.drawImage(autotile, 2 * 32, 3 * 32, 32, 32, x, y, size, size);
|
||
break;
|
||
case 4:
|
||
canvas.drawImage(autotile, 0, 1 * 32, 16, 32, x, y, size / 2, size);
|
||
canvas.drawImage(autotile, 2 * 32 + 16, 1 * 32, 16, 32, x + size / 2, y, size / 2, size);
|
||
break;
|
||
case 5:
|
||
canvas.drawImage(autotile, 0, 2 * 32, 16, 32, x, y, size / 2, size);
|
||
canvas.drawImage(autotile, 2 * 32 + 16, 2 * 32, 16, 32, x + size / 2, y, size / 2, size);
|
||
break;
|
||
case 6:
|
||
canvas.drawImage(autotile, 2 * 32, 1 * 32, 32, 32, x, y, size, size);
|
||
break;
|
||
case 7:
|
||
canvas.drawImage(autotile, 2 * 32, 2 * 32, 32, 32, x, y, size, size);
|
||
break;
|
||
case 8:
|
||
canvas.drawImage(autotile, 0, 32, 32, 16, x, y, size, size / 2);
|
||
canvas.drawImage(autotile, 0, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
|
||
break;
|
||
case 9:
|
||
canvas.drawImage(autotile, 0, 3 * 32, 32, 32, x, y, size, size);
|
||
break;
|
||
case 10:
|
||
canvas.drawImage(autotile, 32, 32, 32, 16, x, y, size, size / 2);
|
||
canvas.drawImage(autotile, 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
|
||
break;
|
||
case 11:
|
||
canvas.drawImage(autotile, 32, 3 * 32, 32, 32, x, y, size, size);
|
||
break;
|
||
case 12:
|
||
canvas.drawImage(autotile, 0, 32, 32, 32, x, y, size, size);
|
||
break;
|
||
case 13:
|
||
canvas.drawImage(autotile, 0, 2 * 32, 32, 32, x, y, size, size);
|
||
break;
|
||
case 14:
|
||
canvas.drawImage(autotile, 32, 32, 32, 32, x, y, size, size);
|
||
break;
|
||
case 15:
|
||
canvas.drawImage(autotile, 32, 2 * 32, 32, 32, x, y, size, size);
|
||
break;
|
||
case 16:
|
||
canvas.clearRect(x, y, size / 2, size / 2);
|
||
canvas.drawImage(autotile, 2 * 32, 0, 16, 16, x, y, size / 2, size / 2);
|
||
break;
|
||
case 17:
|
||
canvas.clearRect(x, y, size / 2, size / 2);
|
||
canvas.drawImage(autotile, 2 * 32 + 16, 0, 16, 16, x, y, size / 2, size / 2);
|
||
break;
|
||
case 18:
|
||
canvas.clearRect(x, y, size / 2, size / 2);
|
||
canvas.drawImage(autotile, 2 * 32 + 16, 16, 16, 16, x, y, size / 2, size / 2);
|
||
break;
|
||
case 19:
|
||
canvas.clearRect(x, y, size / 2, size / 2);
|
||
canvas.drawImage(autotile, 2 * 32, 16, 16, 16, x, y, size / 2, size / 2);
|
||
break;
|
||
}
|
||
}
|
||
|
||
//根据状态画图
|
||
var cxt = eventLayer.getContext("2d");
|
||
|
||
var grass = function (ii, x, y) {
|
||
cxt.clearRect(x * 32, y * 32, 32, 32);
|
||
// cxt.putImageData(grassImageData[ii], x * 32, y * 32);
|
||
drawAutotile(cxt, x * 32, y * 32, 32, editor.autotile, ii);
|
||
}
|
||
|
||
var isGrass = function (xx, yy) {
|
||
var mapxy=editor.map[editor.m(xx,yy)];
|
||
if (typeof(mapxy) == typeof(-1) || typeof(mapxy) == typeof([][0]))return 0;
|
||
if (mapxy.images=='autotile')return 1;
|
||
return 0;
|
||
}
|
||
|
||
fullX = 12;
|
||
fullY = 12;
|
||
|
||
editor.map = [];//-2表示边界,0表示空地,其他对象对应实体
|
||
editor.map[fullX + 1 + fullY * (fullX + 1)] = -2;
|
||
for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)editor.map[ii]=0;
|
||
|
||
editor.m = function (x, y) {
|
||
if (x < 0 || x > fullX || y < 0 || y > fullY) return fullX + 1 + fullY * (fullX + 1);
|
||
return x + y * (fullX + 1);
|
||
}
|
||
|
||
editor.updateMap = function (error) {
|
||
//clearGrass();
|
||
// console.log(editor.map)
|
||
for (var xx = 0; xx <= fullX; xx++) {
|
||
for (var yy = 0; yy <= fullY; yy++) {
|
||
if (!isGrass(xx, yy)) continue;
|
||
var _id = 0;
|
||
_id += isGrass(xx, yy - 1) + 2 * isGrass(xx - 1, yy) + 4 * isGrass(xx, yy + 1) + 8 * isGrass(xx + 1, yy);
|
||
//1上2左4下8右
|
||
grass(_id, xx, yy);
|
||
}
|
||
}
|
||
for (var xx = 0; xx < fullX; xx++) {
|
||
for (var yy = 0; yy < fullY; yy++) {
|
||
if (isGrass(xx, yy) + isGrass(xx + 1, yy) + isGrass(xx + 1, yy + 1) + isGrass(xx, yy + 1) != 3) continue;
|
||
var autotile = editor.autotile;
|
||
if (!isGrass(xx, yy)) {
|
||
// cxt.clearRect(xx * 32 + 32, yy * 32 + 32, 16, 16);
|
||
// cxt.putImageData(grassImageData[16], xx * 32 + 32, yy * 32 + 32);
|
||
drawAutotile(cxt, xx * 32 + 32, yy * 32 + 32, 32, autotile, 16);
|
||
}
|
||
if (!isGrass(xx + 1, yy)) {
|
||
// cxt.clearRect(xx * 32 + 16, yy * 32 + 32, 16, 16);
|
||
//cxt.putImageData(grassImageData[17], xx * 32 + 16, yy * 32 + 32);
|
||
drawAutotile(cxt, xx * 32 + 16, yy * 32 + 32, 32, autotile, 17);
|
||
}
|
||
if (!isGrass(xx + 1, yy + 1)) {
|
||
// cxt.clearRect(xx * 32 + 16, yy * 32 + 16, 16, 16);
|
||
// cxt.putImageData(grassImageData[18], xx * 32 + 16, yy * 32 + 16);
|
||
drawAutotile(cxt, xx * 32 + 16, yy * 32 + 16, 32, autotile, 18);
|
||
}
|
||
if (!isGrass(xx, yy + 1)) {
|
||
// cxt.clearRect(xx * 32 + 32, yy * 32 + 16, 16, 16);
|
||
// cxt.putImageData(grassImageData[19], xx * 32 + 32, yy * 32 + 16);
|
||
drawAutotile(cxt, xx * 32 + 32, yy * 32 + 16, 32, autotile, 19);
|
||
}
|
||
}
|
||
}
|
||
for (var xx = 0; xx <= fullX; xx++) {
|
||
for (var yy = 0; yy <= fullY; yy++) {
|
||
if (isGrass(xx, yy)) continue;
|
||
var mapxy=editor.map[editor.m(xx,yy)];
|
||
if (typeof(mapxy) == typeof(-1)){
|
||
if(mapxy == 0) cxt.clearRect(xx*32, yy*32, 32, 32);
|
||
continue;
|
||
}
|
||
|
||
//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
|
||
cxt.clearRect(xx*32, yy*32, 32, 32);
|
||
cxt.drawImage(core.material.images[mapxy.images], 0, mapxy.y*32, 32, 32, xx*32, yy*32, 32, 32);
|
||
|
||
if(typeof(mapxy) != typeof({}) || !('idnum' in mapxy) ) {//未定义块画红块
|
||
if (error=='clearError'){
|
||
editor.map[editor.m(xx,yy)]=0;
|
||
cxt.clearRect(xx*32, yy*32, 32, 32);
|
||
continue;
|
||
}
|
||
if (error=='showError'){
|
||
cxt.fillStyle = 'rgba(255,0,0,0.8)';
|
||
var tmpNum =6;
|
||
cxt.fillRect(xx*32+tmpNum, yy*32+tmpNum, 32-tmpNum*2, 32-tmpNum*2);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
callback();
|
||
}//fullX,fullY,editor.map,editor.m,editor.updateMap
|
||
|
||
editor.prototype.drawInitData = function (callback) {
|
||
var ratio=1;
|
||
var images=core.material.images;
|
||
var maxHeight=700;
|
||
var sumWidth=0;
|
||
editor.widthsX={};
|
||
for(var ii=0;ii<core.images.length;ii++){
|
||
var img=core.images[ii];
|
||
editor.widthsX[img]=[img,sumWidth/32,(sumWidth+images[img].width)/32];
|
||
sumWidth+=images[img].width;
|
||
maxHeight=Math.max(maxHeight,images[img].height);
|
||
}
|
||
editor.widthsX['autotile']=['autotile',sumWidth/32,(sumWidth+3*32)/32];
|
||
sumWidth+=3*32;
|
||
|
||
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 bgc = bg.getContext('2d');
|
||
//var colorA = ["#f8f8f8", "#cccccc"];
|
||
//var colorIndex = 1;
|
||
//在data内画一个13*13的灰白相间的格子
|
||
for (var ii = 0; ii < 13; ii++)
|
||
for (var jj = 0; jj < 13; jj++) {
|
||
//dc.fillStyle = colorA[colorIndex];
|
||
//colorIndex = 1 - colorIndex;
|
||
//dc.fillRect(ii * 32, jj * 32, 32, 32);
|
||
bgc.drawImage(core.material.images['terrains'], 0, 0, 32, 32, ii*32, jj*32, 32, 32);
|
||
}
|
||
var nowx=0;
|
||
for(var ii=0;ii<core.images.length;ii++){
|
||
var img=core.images[ii];
|
||
dc.drawImage(images[img], nowx, 0)
|
||
nowx+=images[img].width;
|
||
}
|
||
dc.drawImage(editor.autotile, nowx, 0)
|
||
|
||
callback();
|
||
}//editor.widthsX
|
||
|
||
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[editor.m(stepPostfix[ii].x, stepPostfix[ii].y)] = editor.info;
|
||
editor.map[fullX + 1 + fullY * (fullX + 1)] = -2;
|
||
// 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[editor.m(reDo.pos[j].x, reDo.pos[j].y)] = JSON.parse(JSON.stringify(reDo.info));
|
||
|
||
editor.map[fullX + 1 + fullY * (fullX + 1)] = -2;
|
||
editor.updateMap();
|
||
currDrawData = JSON.parse(JSON.stringify(reDo));
|
||
reDo = null;
|
||
}
|
||
}
|
||
|
||
// info=editor.ids[editor.indexs[20][0]];//autotile
|
||
data.onmousedown = function (e) {
|
||
e.stopPropagation();
|
||
var loc = {
|
||
'x': document.documentElement.scrollLeft + e.clientX + (iconLib.scrollLeft||0) - right.offsetLeft-iconLib.offsetLeft,
|
||
'y': document.documentElement.scrollTop + e.clientY + (iconLib.scrollTop||0) - 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];
|
||
if(pos.images=='autotile'){
|
||
pos.y=0;
|
||
}else if((pos.y+1)*32>core.material.images[pos.images].height)
|
||
pos.y=~~(core.material.images[pos.images].height/32)-1;
|
||
|
||
selectBox.isSelected = true;
|
||
// console.log(pos,core.material.images[pos.images].height)
|
||
dataSelection.style.left = pos.x*32 +'px';
|
||
dataSelection.style.top = pos.y*32 +'px';
|
||
editor.info={'images':pos.images,'y':pos.y};
|
||
for (var ii=0;ii<editor.ids.length;ii++){
|
||
if(pos.images==editor.ids[ii].images && pos.y==editor.ids[ii].y)
|
||
editor.info = editor.ids[ii];
|
||
}
|
||
tip.infos = JSON.parse(JSON.stringify(editor.info));
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}//绑定事件
|
||
|
||
/*
|
||
editor.updateMap
|
||
现在可以通过editor.updateMap('clearError')把所有错误id置零并绘图
|
||
以及editor.updateMap('showError')显示所有错误
|
||
|
||
editor.loc
|
||
editor.pos
|
||
editor.info
|
||
始终是最后一次点击的结果
|
||
注意editor.info可能因为点击其他地方而被清空
|
||
*/
|
||
var editor = new editor();
|
||
editor.init();
|
||
</script>
|
||
<script type="text/javascript">
|
||
//Vue
|
||
//var listenByVue = function() {
|
||
document.body.onmousedown = function(e){
|
||
selectBox.isSelected = false;
|
||
editor.info = {};
|
||
}
|
||
iconLib.onmousedown = function(e){
|
||
e.stopPropagation();
|
||
}
|
||
var exportM = new Vue({
|
||
el: '#exportM',
|
||
|
||
methods: {
|
||
exportMap: function(){
|
||
setTimeout(function(){editor.updateMap();},5000);
|
||
if(editArea.error) {
|
||
tip.whichShow = 3;
|
||
editor.updateMap('showError');
|
||
return;
|
||
}
|
||
var filestr='';
|
||
for (var yy = 0; yy < 13; yy++){
|
||
filestr+='['
|
||
for (var xx = 0; xx < 13; xx++) {
|
||
var mapxy=editor.map[editor.m(xx,yy)];
|
||
if(typeof(mapxy)==typeof({})){
|
||
if ('idnum' in mapxy)mapxy=mapxy.idnum;
|
||
else {
|
||
// mapxy='!!?';
|
||
tip.whichShow = 3;
|
||
editor.updateMap('showError');
|
||
return;
|
||
}
|
||
}else if(typeof(mapxy)=='undefined'){
|
||
tip.whichShow = 3;
|
||
editor.updateMap('showError');
|
||
return;
|
||
}
|
||
mapxy=String(mapxy);
|
||
mapxy=Array(Math.max(4-mapxy.length,0)).join(' ')+mapxy;
|
||
filestr+=mapxy+(xx==12?'':',')
|
||
}
|
||
|
||
filestr += ']'+(yy==12?'':',\n');
|
||
}
|
||
pout.value = filestr;
|
||
|
||
tip.whichShow = 2;
|
||
}
|
||
}
|
||
})
|
||
var editArea = new Vue({
|
||
el: '#editArea',
|
||
data: {
|
||
mapArr: '',
|
||
errors: [ // 编号1,2,3,4
|
||
"格式错误！请使用正确格式(13*13数组，如不清楚，可先点击生成地图查看正确格式)",
|
||
"当前有未定义ID（在地图区域显示红块），请修改ID或者到icons.js和maps.js中进行定义！",
|
||
"ID越界（在地图区域显示红块），当前编辑器暂时支持编号小于400，请修改编号！",
|
||
// "发生错误！",
|
||
],
|
||
error: 0,
|
||
formatTimer: null,
|
||
},
|
||
watch: {
|
||
mapArr: function (val, oldval) {
|
||
var that = this;
|
||
if(val=='') return;
|
||
if(that.formatArr()){
|
||
that.error = 0;
|
||
clearTimeout(that.formatTimer);
|
||
setTimeout(function(){
|
||
that.drawMap();
|
||
tip.whichShow = 8
|
||
}, 1000);
|
||
that.formatTimer = setTimeout(function(){
|
||
pout.value = that.formatArr();
|
||
}, 5000); //5s后再格式化，不然光标跳到最后很烦
|
||
}else{
|
||
that.error = 1;
|
||
}
|
||
},
|
||
error: function(){
|
||
console.log(editArea.mapArr);
|
||
}
|
||
},
|
||
methods: {
|
||
drawMap: function(){
|
||
var that = this;
|
||
|
||
var mapArray = that.mapArr.split(/\D+/).join(' ').trim().split(' ')
|
||
for(var i=0; i<mapArray.length; i++){
|
||
var num = parseInt(mapArray[i]);
|
||
if(num == 0 )
|
||
editor.map[i] = 0;
|
||
else if(num >= 400){
|
||
that.error = 3;
|
||
editor.map[i] = undefined;
|
||
}else if(editor.indexs[num][0] == undefined){
|
||
that.error = 2;
|
||
editor.map[i] = undefined;
|
||
}else editor.map[i] = editor.ids[[editor.indexs[num][0]]];
|
||
}
|
||
|
||
editor.updateMap();
|
||
|
||
},
|
||
formatArr: function(){
|
||
var formatArrStr = '';
|
||
|
||
if(this.mapArr.split(/\D+/).join(' ').trim().split(' ').length != 169) return false;
|
||
var arr = this.mapArr.replace(/\s+/g, '').split('],[');
|
||
|
||
if(arr.length != 13) return ;
|
||
for(var i =0; i<13; i++){
|
||
var a = [];
|
||
formatArrStr +='[';
|
||
if(i==0||i==12) a = arr[i].split(/\D+/).join(' ').trim().split(' ');
|
||
else a = arr[i].split(/\D+/);
|
||
if(a.length != 13){
|
||
formatArrStr = '';
|
||
return ;
|
||
}
|
||
|
||
for(var k=0; k<13; k++){
|
||
var num = parseInt(a[k]);
|
||
formatArrStr += Array(Math.max(4-String(num).length,0)).join(' ')+num+(k==12?'':',');
|
||
}
|
||
formatArrStr += ']'+(i==12?'':',\n');
|
||
}
|
||
|
||
return formatArrStr;
|
||
}
|
||
}
|
||
});
|
||
var editTip = new Vue({
|
||
el: '#editTip',
|
||
data: {
|
||
err: ''
|
||
},
|
||
methods: {
|
||
copyMap: function(){
|
||
|
||
tip.whichShow = 0;
|
||
if(pout.value.trim() != ''){
|
||
if(editArea.error) {
|
||
this.err = editArea.errors[editArea.error-1];
|
||
tip.whichShow = 5
|
||
return;
|
||
}
|
||
try{
|
||
pout.select();
|
||
document.execCommand("Copy");
|
||
tip.whichShow = 6;
|
||
}catch(e){
|
||
this.err= e;
|
||
tip.whichShow = 5;
|
||
}
|
||
}else{
|
||
tip.whichShow = 7;
|
||
}
|
||
}
|
||
},
|
||
})
|
||
var clear = new Vue({
|
||
el: '#clear',
|
||
|
||
methods: {
|
||
clearMap: function(){
|
||
editor.map[fullX + 1 + fullY * (fullX + 1)] = -2;
|
||
for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)editor.map[ii]=0;
|
||
ec = eventLayer.getContext('2d');
|
||
ec.clearRect(0, 0, 416, 416);
|
||
clearTimeout(editArea.formatTimer);
|
||
clearTimeout(tip.timer);
|
||
pout.value = '';
|
||
editArea.mapArr = '';
|
||
tip.whichShow = 4;
|
||
editArea.error = 0;
|
||
}
|
||
}
|
||
})
|
||
var tip = new Vue({
|
||
el: '#tip',
|
||
data: {
|
||
infos: {idnum: 20, id: "autotile", images: "autotile", y: 0},//editor.ids[editor.indexs[20][0]],
|
||
hasId: true,
|
||
isSelectedBlock: false,
|
||
geneMapSuccess: false,
|
||
timer: null,
|
||
msgs: [ //分别编号1,2,3,4,5,6,7,8；奇数警告，偶数成功
|
||
"当前未选择任何图块，请先在右边选择要画的图块!",
|
||
"生成地图成功！可点击复制按钮复制地图数组到剪切板",
|
||
"生成失败! 地图中有未定义的图块，建议先用其他有效图块覆盖或点击清除地图！",
|
||
"地图清除成功!",
|
||
"复制失败！",
|
||
"复制成功！可直接粘贴到楼层文件的地图数组中。",
|
||
"复制失败！当前还没有数据",
|
||
"修改成功！可点击复制按钮复制地图数组到剪切板"
|
||
],
|
||
mapMsg: '',
|
||
whichShow: 0,
|
||
},
|
||
watch: {
|
||
infos: {
|
||
handler: function(val, oldval){
|
||
if(typeof(val) != 'undefined'){
|
||
this.infos = val;
|
||
if('id' in val){
|
||
this.hasId = true;
|
||
}else{
|
||
this.hasId = false;
|
||
}
|
||
}
|
||
},
|
||
deep: true
|
||
},
|
||
|
||
whichShow: function(){
|
||
var that = this;
|
||
that.mapMsg = '';
|
||
that.msgs[4] = "复制失败！"+editTip.err;
|
||
clearTimeout(that.timer);
|
||
if(that.whichShow){
|
||
that.mapMsg = that.msgs[that.whichShow-1];
|
||
that.timer = setTimeout(function() {
|
||
if(!(that.whichShow%2))
|
||
that.whichShow = 0;
|
||
}, 5000); //5秒后自动清除success，warn不清除
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
var selectBox = new Vue({
|
||
el: '#selectBox',
|
||
data: {
|
||
isSelected: false
|
||
},
|
||
watch: {
|
||
isSelected: function(){
|
||
tip.isSelectedBlock = this.isSelected;
|
||
tip.whichShow = 0;
|
||
clearTimeout(tip.timer);
|
||
}
|
||
}
|
||
})
|
||
//}
|
||
//listenByVue()
|
||
</script>
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|