add ground select
This commit is contained in:
echo
parent
c45c638599
commit
8b8538ccfd
@ -175,7 +175,16 @@ body{
|
||||
font-size: 15px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
#bgSelect{
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#bgSelect span{
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
#printOut{
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
|
||||
@ -184,6 +184,7 @@ var tip = new Vue({
|
||||
hasId: true,
|
||||
isAutotile: false,
|
||||
isSelectedBlock: false,
|
||||
isClearBlock: false,
|
||||
geneMapSuccess: false,
|
||||
timer: null,
|
||||
msgs: [ //分别编号1,2,3,4,5,6,7,8；奇数警告，偶数成功
|
||||
@ -202,15 +203,19 @@ var tip = new Vue({
|
||||
watch: {
|
||||
infos: {
|
||||
handler: function(val, oldval){
|
||||
this.isClearBlock = false;
|
||||
if(typeof(val) != 'undefined'){
|
||||
this.infos = val;
|
||||
if(val==0) {
|
||||
this.isClearBlock = true;
|
||||
return;
|
||||
}
|
||||
if('id' in val){
|
||||
this.hasId = true;
|
||||
}else{
|
||||
this.hasId = false;
|
||||
}
|
||||
this.isAutotile = false;
|
||||
if(this.infos.images == "autotile" && this.hasId) this.isAutotile = true;
|
||||
if(val.images == "autotile" && this.hasId) this.isAutotile = true;
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
@ -246,6 +251,20 @@ var selectBox = new Vue({
|
||||
}
|
||||
})
|
||||
|
||||
var bgSelect = new Vue({
|
||||
el: '#bgSelect',
|
||||
data: {
|
||||
bgs: {},
|
||||
selectedBg: 'ground'
|
||||
},
|
||||
watch:{
|
||||
selectedBg: function(){
|
||||
editor.bgY = this.bgs.indexOf(this.selectedBg);
|
||||
editor.drawMapBg();
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var editFile4map = new Vue({
|
||||
el: '#editFile4map',
|
||||
data: {
|
||||
@ -257,8 +276,8 @@ var editFile4map = new Vue({
|
||||
filelist: function(val){
|
||||
if(val){
|
||||
var oval = val.length ? JSON.parse(JSON.stringify(val)) : [];
|
||||
for(var i=0; i<oval.length; i++)
|
||||
this.$set("options", i, oval[i]);
|
||||
// for(var i=0; i<oval.length; i++)
|
||||
// this.$set("options", i, oval[i]);
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -65,11 +65,14 @@
|
||||
<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>
|
||||
<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>
|
||||
@ -77,7 +80,15 @@
|
||||
</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>
|
||||
<select v-model="selectedBg">
|
||||
<option disabled value="">请选择地板</option>
|
||||
<option v-for="bg in bgs" v-bind:value="bg">
|
||||
{{ bg }}
|
||||
</option>
|
||||
</select>
|
||||
<span>当前地板: {{ selectedBg }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right">
|
||||
@ -113,7 +124,6 @@
|
||||
<!-- =========================================================== -->
|
||||
|
||||
<!-- <script src='_server/vendor/vue.min.js'></script> -->
|
||||
<!-- <script src="https://unpkg.com/vue"></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>
|
||||
@ -166,7 +176,7 @@ editor.prototype.init = function(){
|
||||
Promise.all([p1, p2, p3])
|
||||
.then(function([maps, icons, img]){
|
||||
editor.idsInit(maps, icons); // 初始化图片素材信息
|
||||
editor.drawInitData(); // 初始化绘图
|
||||
editor.drawInitData(icons); // 初始化绘图
|
||||
editor.listen(); // 开始监听事件
|
||||
})
|
||||
}
|
||||
@ -252,7 +262,7 @@ editor.prototype.idsInit = function(maps, icons){
|
||||
}
|
||||
}
|
||||
}
|
||||
editor.prototype.drawInitData = function () {
|
||||
editor.prototype.drawInitData = function (icons) {
|
||||
var ratio=1;
|
||||
var images=editor.material.images;
|
||||
var maxHeight=700;
|
||||
@ -273,7 +283,12 @@ editor.prototype.drawInitData = function () {
|
||||
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);
|
||||
@ -288,6 +303,11 @@ editor.prototype.drawInitData = function () {
|
||||
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){
|
||||
@ -299,7 +319,7 @@ editor.prototype.drawInitData = function () {
|
||||
dc.drawImage(images[img], nowx, 0)
|
||||
nowx += images[img].width;
|
||||
}
|
||||
|
||||
bgSelect.bgs = Object.keys(icons.terrains);
|
||||
editor.drawMapBg();
|
||||
editor.mapInit();
|
||||
}
|
||||
@ -319,6 +339,7 @@ editor.prototype.drawMapBg = function(){
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -346,7 +367,6 @@ editor.prototype.updateMap = function(){
|
||||
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 |
|
||||
@ -356,14 +376,14 @@ editor.prototype.updateMap = function(){
|
||||
[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, 19, 14, 5 ], //7 bin:0111 +----+----+----+----+----+----+
|
||||
[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 |
|
||||
[24, 9, 6, 17], //11 bin:1011 +----+----+----+----+----+----+
|
||||
[36, 9, 6, 15], //11 bin:1011 +----+----+----+----+----+----+
|
||||
[46, 45, 4, 3 ], //12 bin:1100 | 37 | 38 | 39 | 40 | 41 | 42 |
|
||||
[44, 11, 4, 37], //13 bin:1101 +----+----+----+----+----+----+
|
||||
[12, 47, 42, 3 ], //14 bin:1110 | 43 | 44 | 45 | 46 | 47 | 48 |
|
||||
[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
|
||||
@ -615,13 +635,23 @@ editor.prototype.listen = function() {
|
||||
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};
|
||||
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;
|
||||
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));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user