editor支持48*32

This commit is contained in:
YouWei Zhao 2018-03-13 11:23:33 +08:00
parent d7b5403140
commit 40488a0784
3 changed files with 30 additions and 19 deletions

View File

@ -86,7 +86,7 @@ editor.prototype.drawInitData = function (icons) {
var sumWidth=0;
editor.widthsX={};
// var imgNames = Object.keys(images); //还是固定顺序吧;
var imgNames = ["terrains", "animates", "enemys", "items", "npcs", "autotile"];
var imgNames = ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48", "autotile"];
for(var ii=0; ii<imgNames.length; ii++){
var img=imgNames[ii], tempy = 0;
@ -474,19 +474,22 @@ editor.prototype.listen = function() {
var loc = {
'x': scrollLeft + e.clientX + iconLib.scrollLeft - right.offsetLeft-iconLib.offsetLeft,
'y': scrollTop + e.clientY + iconLib.scrollTop - right.offsetTop-iconLib.offsetTop,
'size': 32
'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]){
var ysize = spriter.indexOf('48')===-1?32:48;
loc.ysize = ysize;
pos.y = ~~(loc.y / loc.ysize);
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;
if((pos.y+1)*ysize > editor.widthsX[spriter][3])
pos.y = ~~(editor.widthsX[spriter][3]/ysize)-4;
else{
for(var i=0; i<imNames.length; i++){
if(pos.y >= 4*i && pos.y < 4*(i+1)){
@ -495,13 +498,14 @@ editor.prototype.listen = function() {
}
}
}
}else if((pos.y+1)*32 > editor.widthsX[spriter][3])
pos.y = ~~(editor.widthsX[spriter][3]/32)-1;
}else if((pos.y+1)*ysize > editor.widthsX[spriter][3])
pos.y = ~~(editor.widthsX[spriter][3]/ysize)-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';
dataSelection.style.top = pos.y*ysize +'px';
dataSelection.style.height = ysize-6+'px';
if(pos.x==0&&pos.y==0){
// editor.info={idnum:0, id:'empty','images':'清除块', 'y':0};

View File

@ -333,7 +333,7 @@ editor_mode.prototype.listen = function(callback){
var saveFloor = document.getElementById('saveFloor');
saveFloor.onclick = function(){
editor_mode.onmode('');
editor.file.saveFloorFile(function(err){if(err){printe(err);throw(err)}});
editor.file.saveFloorFile(function(err){if(err){printe(err);throw(err)};printf('保存成功');});
}
var saveFloorAs = document.getElementById('saveFloorAs');
@ -344,7 +344,7 @@ editor_mode.prototype.listen = function(callback){
editor.file.saveFloorFileAs(saveAsName.value,function(err){
if(err){printe(err);throw(err)}
core.floorIds.push(saveAsName.value);
editor.file.editTower([['change',"['main']['floorIds']",core.floorIds]],function(objs_){console.log(objs_);if(objs_.slice(-1)[0]!=null){printe(objs_.slice(-1)[0]);throw(objs_.slice(-1)[0])}});
editor.file.editTower([['change',"['main']['floorIds']",core.floorIds]],function(objs_){console.log(objs_);if(objs_.slice(-1)[0]!=null){printe(objs_.slice(-1)[0]);throw(objs_.slice(-1)[0])};printe('另存为成功,请F5刷新编辑器生效');});
});
}
@ -358,12 +358,13 @@ editor_mode.prototype.listen = function(callback){
var selectAppend = document.getElementById('selectAppend');
var selectAppend_str=[];
["terrains", "animates", "enemys", "items", "npcs"].forEach(function(image){
["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48"].forEach(function(image){
selectAppend_str.push(["<option value='",image,"'>",image,'</option>\n'].join(''));
});
selectAppend.innerHTML=selectAppend_str.join('');
selectAppend.onchange = function(){
var value = selectAppend.value;
var ysize = selectAppend.value.indexOf('48')===-1?32:48;
editor_mode.appendPic.imageName = value;
var img = editor.material.images[value];
editor_mode.appendPic.toImg = img;
@ -372,7 +373,7 @@ editor_mode.prototype.listen = function(callback){
editor_mode.appendPic.index = 0;
var selectStr = '';
for(var ii=0;ii<num;ii++){
appendPicSelection.children[ii].style='left:0;top:0';
appendPicSelection.children[ii].style='left:0;top:0;height:'+(ysize-6)+'px';
selectStr+='{"x":0,"y":0},'
}
editor_mode.appendPic.selectPos = eval('['+selectStr+']');
@ -380,7 +381,7 @@ editor_mode.prototype.listen = function(callback){
appendPicSelection.children[jj].style='display:none';
}
sprite.style.width = (sprite.width = img.width)/ratio + 'px';
sprite.style.height = (sprite.height = img.height+32)/ratio + 'px';
sprite.style.height = (sprite.height = img.height+ysize)/ratio + 'px';
sprite.getContext('2d').drawImage(img, 0, 0);
}
selectAppend.onchange();
@ -408,10 +409,11 @@ editor_mode.prototype.listen = function(callback){
editor_mode.appendPic.img = image;
editor_mode.appendPic.width = image.width;
editor_mode.appendPic.height = image.height;
var ysize = selectAppend.value.indexOf('48')===-1?32:48;
for(var ii=0;ii<3;ii++){
var newsprite = appendPicCanvas.children[ii];
newsprite.style.width = (newsprite.width = Math.floor(image.width/32)*32)/ratio + 'px';
newsprite.style.height = (newsprite.height = Math.floor(image.height/32)*32)/ratio + 'px';
newsprite.style.height = (newsprite.height = Math.floor(image.height/ysize)*ysize)/ratio + 'px';
}
//画灰白相间的格子
@ -446,13 +448,14 @@ editor_mode.prototype.listen = function(callback){
var loc = {
'x': scrollLeft+e.clientX + appendPicCanvas.scrollLeft - left1.offsetLeft-appendPicCanvas.offsetLeft,
'y': scrollTop+e.clientY + appendPicCanvas.scrollTop - left1.offsetTop-appendPicCanvas.offsetTop,
'size': 32
'size': 32,
'ysize': selectAppend.value.indexOf('48')===-1?32:48
};
return loc;
}//返回可用的组件内坐标
var locToPos = function (loc) {
var pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
var pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.ysize) ,'ysize': loc.ysize}
return pos;
}
@ -467,18 +470,20 @@ editor_mode.prototype.listen = function(callback){
editor_mode.appendPic.selectPos[ii]=pos;
appendPicSelection.children[ii].style=[
'left:',pos.x*32,'px;',
'top:',pos.y*32,'px'
'top:',pos.y*pos.ysize,'px;',
'height:',pos.ysize-6,'px;'
].join('');
}
var appendConfirm = document.getElementById('appendConfirm');
appendConfirm.onclick = function(){
var ysize = selectAppend.value.indexOf('48')===-1?32:48;
var sprited = sprite.getContext('2d');
//sprited.drawImage(img, 0, 0);
var height = editor_mode.appendPic.toImg.height;
var sourced = source.getContext('2d');
for(var ii=0,v;v=editor_mode.appendPic.selectPos[ii];ii++){
var imgData=sourced.getImageData(v.x*32,v.y*32,32,32);
var imgData=sourced.getImageData(v.x*32,v.y*ysize,32,ysize);
sprited.putImageData(imgData,ii*32,height);
}
var imgbase64 = sprite.toDataURL().split(',')[1];

View File

@ -39,7 +39,7 @@
<h3>追加素材</h3>
<p>
<input id="selectFileBtn" type="button" value="导入文件到画板"/>
<select id="selectAppend"></select><!-- ["terrains", "animates", "enemys", "items", "npcs"] -->
<select id="selectAppend"></select><!-- ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48"] -->
<input id="appendConfirm" type="button" value="追加"/>
</p>
<div id="appendPicCanvas" style="position:relative;overflow: auto;height:470px;">
@ -153,6 +153,7 @@
<div class="map" id="mapEdit">
<canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event2' width='416' height='416'></canvas>
<canvas class='egameCanvas' id='eui' width='416' height='416' style='z-index:100'></canvas>
</div>
<div class="tools">
@ -302,8 +303,9 @@
<div id="curtain"></div>
<!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
<!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
<!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>