把editor的代码拆分到单独的文件中
This commit is contained in:
YouWei Zhao
parent
c0481b5e12
commit
eb8a045816
31
2.0diff.md
31
2.0diff.md
@ -9,8 +9,11 @@
|
|||||||
+ 设置了三个模式`play|editor|replay`在`editor`模式关闭了部分动画,并且角色无法行动
|
+ 设置了三个模式`play|editor|replay`在`editor`模式关闭了部分动画,并且角色无法行动
|
||||||
|
|
||||||
重构editor
|
重构editor
|
||||||
|
+ 重命名为`editor.html`
|
||||||
|
* 需要相应的修改本地服务的按钮打开的网址,为了兼容,临时加了个内容为`<html><body><script>window.location='editor.html'</script></body></html>`的`drawMapGUI.html`
|
||||||
+ 不再独立的导入数据和画图,尽可能的通过`main.init('editor')`复用代码
|
+ 不再独立的导入数据和画图,尽可能的通过`main.init('editor')`复用代码
|
||||||
+ 能够在本地服务器环境中直接修改`project`中的数据,目前只完成了文件操作的代码`editor_file.js`,前端尚未完成
|
+ 能够在本地服务器环境中直接修改`project`中的数据,目前只完成了文件操作的代码`_server/editor_file.js`,前端尚未完成
|
||||||
|
+ 把`editor`的代码拆到了`_server/editor.js`中
|
||||||
|
|
||||||
## 具体:
|
## 具体:
|
||||||
|
|
||||||
@ -48,37 +51,39 @@
|
|||||||
提供了以下函数进行楼层`map`数组相关的操作
|
提供了以下函数进行楼层`map`数组相关的操作
|
||||||
```javascript
|
```javascript
|
||||||
editor.file.getFloorFileList
|
editor.file.getFloorFileList
|
||||||
editor_file.loadFloorFile
|
editor.file.loadFloorFile
|
||||||
editor_file.saveFloorFile
|
editor.file.saveFloorFile
|
||||||
editor_file.saveFloorFileAs
|
editor.file.saveFloorFileAs
|
||||||
```
|
```
|
||||||
5个编辑模式有关的查询
|
5个编辑模式有关的查询
|
||||||
```javascript
|
```javascript
|
||||||
editor_file.editItem(editor,'redJewel',[],function(a){console.log(a)});
|
editor.file.editItem(editor,'redJewel',[],function(a){console.log(a)});
|
||||||
editor_file.editEnemy(editor,'redBat',[],function(a){console.log(a)});
|
editor.file.editEnemy(editor,'redBat',[],function(a){console.log(a)});
|
||||||
editor_file.editLoc(editor,2,0,[],function(a){console.log(a)});
|
editor.file.editLoc(editor,2,0,[],function(a){console.log(a)});
|
||||||
editor_file.editFloor(editor,[],function(a){console.log(a)});
|
editor.file.editFloor(editor,[],function(a){console.log(a)});
|
||||||
editor.file.editTower(editor,[],function(a){console.log(a)});
|
editor.file.editTower(editor,[],function(a){console.log(a)});
|
||||||
```
|
```
|
||||||
5个编辑模式有关的编辑
|
5个编辑模式有关的编辑
|
||||||
```javascript
|
```javascript
|
||||||
editor.info={images: "terrains", y: 9};
|
editor.info={images: "terrains", y: 9};
|
||||||
editor.file.changeIdAndIdnum(editor,'yellowWall2',16,editor.info,function(a){console.log(a)});
|
editor.file.changeIdAndIdnum(editor,'yellowWall2',16,editor.info,function(a){console.log(a)});
|
||||||
editor_file.editItem(editor,'book',[["change","['items']['name']","怪物手册的新名字"]],function(a){console.log(a)});
|
editor.file.editItem(editor,'book',[["change","['items']['name']","怪物手册的新名字"]],function(a){console.log(a)});
|
||||||
editor_file.editEnemy(editor,'redBat',[['change',"['atk']",20]],function(a){console.log(a)});
|
editor.file.editEnemy(editor,'redBat',[['change',"['atk']",20]],function(a){console.log(a)});
|
||||||
editor_file.editLoc(editor,2,6,[["change","['afterBattle']",null]],function(a){console.log(a)});
|
editor.file.editLoc(editor,2,6,[["change","['afterBattle']",null]],function(a){console.log(a)});
|
||||||
editor_file.editFloor(editor,[["change","['title']",'样板 33 层']],function(a){console.log(a)});
|
editor.file.editFloor(editor,[["change","['title']",'样板 33 层']],function(a){console.log(a)});
|
||||||
editor.file.editTower(editor,[["change","['values']['lavaDamage']",200]],function(a){console.log(a)});
|
editor.file.editTower(editor,[["change","['values']['lavaDamage']",200]],function(a){console.log(a)});
|
||||||
```
|
```
|
||||||
|
|
||||||
### drawMapGUI.html
|
### drawMapGUI.html
|
||||||
|
把`editor`的代码拆到了`_server/editor.js`中
|
||||||
|
|
||||||
以`display:none`的形式引入了`index.html`的`dom`,修改了原来的`.gameCanvas #ui #data`等的名字以避免冲突
|
以`display:none`的形式引入了`index.html`的`dom`,修改了原来的`.gameCanvas #ui #data`等的名字以避免冲突
|
||||||
|
|
||||||
通过`main.init('editor')`加载数据,移除了原有的`editor.loadjs`等
|
通过`main.init('editor')`加载数据,移除了原有的`editor.loadjs`等
|
||||||
|
|
||||||
背景层如果未设置`editor.bgY`则通过运行时中的代码画背景
|
背景层如果未设置`editor.bgY`则通过运行时中的代码画背景
|
||||||
|
|
||||||
`updateMap`中只画未定义快的报错,其他的由运行时中的代码完成
|
`editor.updateMap`中只画未定义快的报错,其他的由运行时中的代码完成
|
||||||
|
|
||||||
`editor.ids[0] = 0; editor.indexs[0]=[0];`
|
`editor.ids[0] = 0; editor.indexs[0]=[0];`
|
||||||
|
|
||||||
|
|||||||
508
_server/editor.js
Normal file
508
_server/editor.js
Normal file
@ -0,0 +1,508 @@
|
|||||||
|
function editor() {
|
||||||
|
this.version = "1.2";
|
||||||
|
this.material = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.prototype.init = function(callback){
|
||||||
|
var afterCoreReset = function(){
|
||||||
|
|
||||||
|
main.editor.disableGlobalAnimate=false;//允许GlobalAnimate
|
||||||
|
/* core.setHeroMoveTriggerInterval(); */
|
||||||
|
|
||||||
|
editor.reset(function(){
|
||||||
|
editor.drawMapBg();
|
||||||
|
var mapArray = core.maps.getMapArray(core.status.maps, core.status.floorId);
|
||||||
|
editor.map = mapArray.map(function(v){return v.map(function(v){return editor.ids[[editor.indexs[v][0]]]})});
|
||||||
|
editor.updateMap();
|
||||||
|
editor.currentFloorId=core.status.floorId;
|
||||||
|
editor.currentFloorData = core.floors[core.status.floorId];
|
||||||
|
|
||||||
|
if (Boolean(callback))callback();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
var afterMainInit = function(){
|
||||||
|
editor.main=main;
|
||||||
|
editor.core=core;
|
||||||
|
editor.fs=fs;
|
||||||
|
editor.file=editor_file;
|
||||||
|
editor.material.images=core.material.images;
|
||||||
|
editor.listen(); // 开始监听事件
|
||||||
|
var hard = 'Hard';
|
||||||
|
core.resetStatus(core.firstData.hero, hard, core.firstData.floorId, core.initStatus.maps);
|
||||||
|
//core.status.maps = core.clone(core.maps.initMaps(floorIds));
|
||||||
|
core.changeFloor(core.status.floorId, null, core.firstData.hero.loc, null, function() {
|
||||||
|
afterCoreReset();
|
||||||
|
});
|
||||||
|
core.events.setInitData(hard);
|
||||||
|
}
|
||||||
|
setTimeout(afterMainInit, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.prototype.reset = function(callback){
|
||||||
|
editor.idsInit(core.maps, core.icons.icons); // 初始化图片素材信息
|
||||||
|
editor.drawInitData(core.icons.icons); // 初始化绘图
|
||||||
|
if(Boolean(callback))callback();
|
||||||
|
}
|
||||||
|
|
||||||
|
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.indexs[0]=[0];
|
||||||
|
}
|
||||||
|
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 > edata.width) edata.style.width = (edata.width = fullWidth)/ratio + 'px';
|
||||||
|
edata.style.height = (edata.height = fullHeight)/ratio + 'px';
|
||||||
|
var dc = edata.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 = document.getElementById('event').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');
|
||||||
|
if (!core.isset(editor.bgY) || editor.bgY == 0){
|
||||||
|
editor.main.editor.drawMapBg();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 blocks = main.editor.mapIntoBlocks(editor.map.map(function(v){return v.map(function(v){return v.idnum||v||0})}),{'events':{},'changeFloor':{}});
|
||||||
|
core.status.thisMap.blocks = blocks;
|
||||||
|
main.editor.updateMap();
|
||||||
|
|
||||||
|
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 = document.getElementById('event').getContext("2d");
|
||||||
|
for(var y=0; y<13; y++)
|
||||||
|
for(var x=0; x<13; x++){
|
||||||
|
var tileInfo = editor.map[y][x];
|
||||||
|
if(false && isAutotile(tileInfo)){
|
||||||
|
addIndexToAutotileInfo(x, y);
|
||||||
|
drawAutotile(eventCtx, x, y, tileInfo);
|
||||||
|
}else drawTile(eventCtx, x, y, tileInfo);
|
||||||
|
}
|
||||||
|
// 绘制地图 end
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.prototype.changeFloor = function(floorId,callback) {
|
||||||
|
core.changeFloor(floorId, null, core.firstData.hero.loc, null, function(){
|
||||||
|
editor.drawMapBg();
|
||||||
|
var mapArray = core.maps.getMapArray(core.status.maps, core.status.floorId);
|
||||||
|
editor.map = mapArray.map(function(v){return v.map(function(v){return editor.ids[[editor.indexs[v][0]]]})});
|
||||||
|
editor.updateMap();
|
||||||
|
editor.currentFloorId=core.status.floorId;
|
||||||
|
editor.currentFloorData = core.floors[core.status.floorId];
|
||||||
|
if (core.isset(callback))callback();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.prototype.listen = function() {
|
||||||
|
|
||||||
|
var uc = eui.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时的自动清除状态
|
||||||
|
|
||||||
|
eui.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
eui.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
eui.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
edata.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(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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}//绑定事件
|
||||||
|
|
||||||
|
/*
|
||||||
|
editor.loc
|
||||||
|
editor.pos
|
||||||
|
editor.info
|
||||||
|
始终是最后一次点击的结果
|
||||||
|
注意editor.info可能因为点击其他地方而被清空
|
||||||
|
*/
|
||||||
|
|
||||||
|
editor = new editor();
|
||||||
735
drawMapGUI.html
735
drawMapGUI.html
@ -1,734 +1 @@
|
|||||||
<!doctype html>
|
<html><body><script>window.location='editor.html'</script></body></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'></canvas>
|
|
||||||
<canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
|
|
||||||
<canvas class='egameCanvas' id='eui' 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='egameCanvas' id='edata' 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>/* -->
|
|
||||||
<div id='gameGroup' style='display:none'>
|
|
||||||
<p id='mainTips'>请稍后...</p>
|
|
||||||
<div id='startPanel'>
|
|
||||||
<div id='startTop'>
|
|
||||||
<div id='startTopProgressBar'>
|
|
||||||
<div id='startTopProgress'></div>
|
|
||||||
</div>
|
|
||||||
<p id='startTopLoadTips'>资源即将开始加载</p>
|
|
||||||
</div>
|
|
||||||
<img id='startBackground' src='project/images/bg.png'>
|
|
||||||
<!-- 标题界面；可以改style的color使标题改变颜色 -->
|
|
||||||
<p id='startLogo' style="color: black"></p>
|
|
||||||
<div id='startButtonGroup'>
|
|
||||||
<div id='startButtons'>
|
|
||||||
<span class='startButton' id='playGame'>开始游戏</span>
|
|
||||||
<span class='startButton' id='loadGame'>载入游戏</span>
|
|
||||||
<span class='startButton' id='aboutGame'>关于本塔</span>
|
|
||||||
</div>
|
|
||||||
<div id='levelChooseButtons'>
|
|
||||||
<span class='startButton' id='easyLevel'>简单</span>
|
|
||||||
<span class='startButton' id='normalLevel'>普通</span>
|
|
||||||
<span class='startButton' id='hardLevel'>困难</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id='floorMsgGroup'>
|
|
||||||
<p id='logoLabel'></p>
|
|
||||||
<p id='versionLabel'></p>
|
|
||||||
<p id='floorNameLabel'></p>
|
|
||||||
</div>
|
|
||||||
<div id='statusBar' class="clearfix">
|
|
||||||
<div class="status" id="floorCol">
|
|
||||||
<img src='project/images/floor.png' id="img-floor">
|
|
||||||
<p class='statusLabel' id='floor'></p>
|
|
||||||
</div>
|
|
||||||
<div class="status" id="lvCol">
|
|
||||||
<img src='project/images/lv.png' id="img-lv">
|
|
||||||
<p class='statusLabel' id='lv'></p>
|
|
||||||
</div>
|
|
||||||
<div class="status">
|
|
||||||
<img src='project/images/hp.png' id="img-hp">
|
|
||||||
<p class='statusLabel' id='hp'></p>
|
|
||||||
</div>
|
|
||||||
<div class="status">
|
|
||||||
<img src='project/images/atk.png' id="img-atk">
|
|
||||||
<p class='statusLabel' id='atk'></p>
|
|
||||||
</div>
|
|
||||||
<div class="status">
|
|
||||||
<img src='project/images/def.png' id="img-def">
|
|
||||||
<p class='statusLabel' id='def'></p>
|
|
||||||
</div>
|
|
||||||
<div class="status" id="mdefCol">
|
|
||||||
<img src='project/images/mdef.png' id="img-mdef">
|
|
||||||
<p class='statusLabel' id='mdef'></p>
|
|
||||||
</div>
|
|
||||||
<div class="status" id="moneyCol">
|
|
||||||
<img src='project/images/money.png' id="img-money">
|
|
||||||
<p class='statusLabel' id='money'></p>
|
|
||||||
</div>
|
|
||||||
<div class="status" id="expCol">
|
|
||||||
<img src='project/images/experience.png' id="img-experience">
|
|
||||||
<p class='statusLabel' id='experience'></p>
|
|
||||||
</div>
|
|
||||||
<div class="status" id="upCol">
|
|
||||||
<img src='project/images/up.png' id="img-up">
|
|
||||||
<p class='statusLabel' id='up'></p>
|
|
||||||
</div>
|
|
||||||
<div class="status">
|
|
||||||
<span class='statusLabel' id='yellowKey' style="color:#FFCCAA"></span>
|
|
||||||
<span class='statusLabel' id='blueKey' style="color:#AAAADD"></span>
|
|
||||||
<span class='statusLabel' id='redKey' style="color:#FF8888"></span>
|
|
||||||
</div>
|
|
||||||
<div class="status" id="debuffCol">
|
|
||||||
<span class='statusLabel' id='poison' style="color: #AFFCA8;"></span>
|
|
||||||
<span class='statusLabel' id='weak' style="color: #FECCD0;"></span>
|
|
||||||
<span class='statusLabel' id='curse' style="color: #C2F4E7;"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="toolBar" class="clearfix">
|
|
||||||
<img src="project/images/book.png" class="tools" id='img-book'>
|
|
||||||
<img src="project/images/fly.png" class="tools" id='img-fly'>
|
|
||||||
<img src="project/images/toolbox.png" class="tools" id='img-toolbox'>
|
|
||||||
<img src="project/images/shop.png" class="tools" id='img-shop'>
|
|
||||||
<img src="project/images/save.png" class="tools" id='img-save'>
|
|
||||||
<img src="project/images/load.png" class="tools" id='img-load'>
|
|
||||||
<img src="project/images/settings.png" class="tools" id='img-settings'>
|
|
||||||
<p class="statusLabel tools" id="hard"></p>
|
|
||||||
</div>
|
|
||||||
<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='ui' width='416' height='416'></canvas>
|
|
||||||
<canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
|
|
||||||
</div>
|
|
||||||
<!-- */</script> -->
|
|
||||||
<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://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 id='mainScript' src='main.js'></script>
|
|
||||||
<script>
|
|
||||||
|
|
||||||
//所有全局量
|
|
||||||
__all__=['Vue','fs','editor_file','printf','editor','main','core'];
|
|
||||||
__id__=['printOut','arrRowMark','mapRowMark','data','bg','dataSelection'];
|
|
||||||
__Vue__=['exportM','editArea','editTip','clear','tip','selectBox'];
|
|
||||||
//var event = document.getElementById('event');
|
|
||||||
|
|
||||||
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
||||||
function hasOwnProp (obj, key) {
|
|
||||||
return hasOwnProperty.call(obj, key)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function editor() {
|
|
||||||
this.version = "1.2";
|
|
||||||
this.material = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
editor.prototype.init = function(callback){
|
|
||||||
editor.main=main;
|
|
||||||
editor.core=core;
|
|
||||||
editor.fs=fs;
|
|
||||||
editor.file=editor_file;
|
|
||||||
editor.material.images=core.material.images;
|
|
||||||
editor.idsInit(core.maps, core.icons.icons); // 初始化图片素材信息
|
|
||||||
editor.drawInitData(core.icons.icons); // 初始化绘图
|
|
||||||
editor.listen(); // 开始监听事件
|
|
||||||
if(Boolean(callback))callback();
|
|
||||||
}
|
|
||||||
|
|
||||||
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.indexs[0]=[0];
|
|
||||||
}
|
|
||||||
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 > edata.width) edata.style.width = (edata.width = fullWidth)/ratio + 'px';
|
|
||||||
edata.style.height = (edata.height = fullHeight)/ratio + 'px';
|
|
||||||
var dc = edata.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 = document.getElementById('event').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');
|
|
||||||
if (!core.isset(editor.bgY) || editor.bgY == 0){
|
|
||||||
editor.main.editor.drawMapBg();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 blocks = main.editor.mapIntoBlocks(editor.map.map(function(v){return v.map(function(v){return v.idnum||v||0})}),{'events':{},'changeFloor':{}});
|
|
||||||
core.status.thisMap.blocks = blocks;
|
|
||||||
main.editor.updateMap();
|
|
||||||
|
|
||||||
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 = document.getElementById('event').getContext("2d");
|
|
||||||
for(var y=0; y<13; y++)
|
|
||||||
for(var x=0; x<13; x++){
|
|
||||||
var tileInfo = editor.map[y][x];
|
|
||||||
if(false && isAutotile(tileInfo)){
|
|
||||||
addIndexToAutotileInfo(x, y);
|
|
||||||
drawAutotile(eventCtx, x, y, tileInfo);
|
|
||||||
}else drawTile(eventCtx, x, y, tileInfo);
|
|
||||||
}
|
|
||||||
// 绘制地图 end
|
|
||||||
}
|
|
||||||
|
|
||||||
editor.prototype.listen = function() {
|
|
||||||
|
|
||||||
var uc = eui.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时的自动清除状态
|
|
||||||
|
|
||||||
eui.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
eui.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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
eui.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
edata.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(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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}//绑定事件
|
|
||||||
|
|
||||||
/*
|
|
||||||
editor.updateMap
|
|
||||||
|
|
||||||
editor.loc
|
|
||||||
editor.pos
|
|
||||||
editor.info
|
|
||||||
始终是最后一次点击的结果
|
|
||||||
注意editor.info可能因为点击其他地方而被清空
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
editor = new editor();
|
|
||||||
main.init('editor');
|
|
||||||
editor.changeFloor = function(floorId,callback) {
|
|
||||||
core.changeFloor(floorId, null, core.firstData.hero.loc, null, function(){
|
|
||||||
editor.drawMapBg();
|
|
||||||
var mapArray = core.maps.getMapArray(core.status.maps, core.status.floorId);
|
|
||||||
editor.map = mapArray.map(function(v){return v.map(function(v){return editor.ids[[editor.indexs[v][0]]]})});
|
|
||||||
editor.updateMap();
|
|
||||||
editor.currentFloorId=core.status.floorId;
|
|
||||||
editor.currentFloorData = core.floors[core.status.floorId];
|
|
||||||
if (core.isset(callback))callback();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//main.listen();
|
|
||||||
var afterMainInit = function(){
|
|
||||||
|
|
||||||
main.editor.disableGlobalAnimate=false;
|
|
||||||
//core.status.maps = core.clone(core.maps.initMaps(floorIds));
|
|
||||||
editor.init(function(){
|
|
||||||
//core.changeFloor('sample1')
|
|
||||||
//editor.drawMapBg()
|
|
||||||
var mapArray = core.maps.getMapArray(core.status.maps, core.status.floorId);
|
|
||||||
editor.map = mapArray.map(function(v){return v.map(function(v){return editor.ids[[editor.indexs[v][0]]]})});
|
|
||||||
editor.updateMap();
|
|
||||||
editor.currentFloorId=core.status.floorId;
|
|
||||||
editor.currentFloorData = core.floors[core.status.floorId];
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
var startgame = function(){
|
|
||||||
var hard = 'Hard';
|
|
||||||
core.resetStatus(core.firstData.hero, hard, core.firstData.floorId, core.initStatus.maps);
|
|
||||||
core.changeFloor(core.status.floorId, null, core.firstData.hero.loc, null, function() {
|
|
||||||
/* core.setHeroMoveTriggerInterval(); */
|
|
||||||
afterMainInit();
|
|
||||||
});
|
|
||||||
core.events.setInitData(hard);
|
|
||||||
}
|
|
||||||
setTimeout(startgame, 300);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
227
editor.html
Normal file
227
editor.html
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
<!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'></canvas>
|
||||||
|
<canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
|
||||||
|
<canvas class='egameCanvas' id='eui' 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='egameCanvas' id='edata' 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>/* -->
|
||||||
|
<div id='gameGroup' style='display:none'>
|
||||||
|
<p id='mainTips'>请稍后...</p>
|
||||||
|
<div id='startPanel'>
|
||||||
|
<div id='startTop'>
|
||||||
|
<div id='startTopProgressBar'>
|
||||||
|
<div id='startTopProgress'></div>
|
||||||
|
</div>
|
||||||
|
<p id='startTopLoadTips'>资源即将开始加载</p>
|
||||||
|
</div>
|
||||||
|
<img id='startBackground' src='project/images/bg.png'>
|
||||||
|
<!-- 标题界面；可以改style的color使标题改变颜色 -->
|
||||||
|
<p id='startLogo' style="color: black"></p>
|
||||||
|
<div id='startButtonGroup'>
|
||||||
|
<div id='startButtons'>
|
||||||
|
<span class='startButton' id='playGame'>开始游戏</span>
|
||||||
|
<span class='startButton' id='loadGame'>载入游戏</span>
|
||||||
|
<span class='startButton' id='aboutGame'>关于本塔</span>
|
||||||
|
</div>
|
||||||
|
<div id='levelChooseButtons'>
|
||||||
|
<span class='startButton' id='easyLevel'>简单</span>
|
||||||
|
<span class='startButton' id='normalLevel'>普通</span>
|
||||||
|
<span class='startButton' id='hardLevel'>困难</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id='floorMsgGroup'>
|
||||||
|
<p id='logoLabel'></p>
|
||||||
|
<p id='versionLabel'></p>
|
||||||
|
<p id='floorNameLabel'></p>
|
||||||
|
</div>
|
||||||
|
<div id='statusBar' class="clearfix">
|
||||||
|
<div class="status" id="floorCol">
|
||||||
|
<img src='project/images/floor.png' id="img-floor">
|
||||||
|
<p class='statusLabel' id='floor'></p>
|
||||||
|
</div>
|
||||||
|
<div class="status" id="lvCol">
|
||||||
|
<img src='project/images/lv.png' id="img-lv">
|
||||||
|
<p class='statusLabel' id='lv'></p>
|
||||||
|
</div>
|
||||||
|
<div class="status">
|
||||||
|
<img src='project/images/hp.png' id="img-hp">
|
||||||
|
<p class='statusLabel' id='hp'></p>
|
||||||
|
</div>
|
||||||
|
<div class="status">
|
||||||
|
<img src='project/images/atk.png' id="img-atk">
|
||||||
|
<p class='statusLabel' id='atk'></p>
|
||||||
|
</div>
|
||||||
|
<div class="status">
|
||||||
|
<img src='project/images/def.png' id="img-def">
|
||||||
|
<p class='statusLabel' id='def'></p>
|
||||||
|
</div>
|
||||||
|
<div class="status" id="mdefCol">
|
||||||
|
<img src='project/images/mdef.png' id="img-mdef">
|
||||||
|
<p class='statusLabel' id='mdef'></p>
|
||||||
|
</div>
|
||||||
|
<div class="status" id="moneyCol">
|
||||||
|
<img src='project/images/money.png' id="img-money">
|
||||||
|
<p class='statusLabel' id='money'></p>
|
||||||
|
</div>
|
||||||
|
<div class="status" id="expCol">
|
||||||
|
<img src='project/images/experience.png' id="img-experience">
|
||||||
|
<p class='statusLabel' id='experience'></p>
|
||||||
|
</div>
|
||||||
|
<div class="status" id="upCol">
|
||||||
|
<img src='project/images/up.png' id="img-up">
|
||||||
|
<p class='statusLabel' id='up'></p>
|
||||||
|
</div>
|
||||||
|
<div class="status">
|
||||||
|
<span class='statusLabel' id='yellowKey' style="color:#FFCCAA"></span>
|
||||||
|
<span class='statusLabel' id='blueKey' style="color:#AAAADD"></span>
|
||||||
|
<span class='statusLabel' id='redKey' style="color:#FF8888"></span>
|
||||||
|
</div>
|
||||||
|
<div class="status" id="debuffCol">
|
||||||
|
<span class='statusLabel' id='poison' style="color: #AFFCA8;"></span>
|
||||||
|
<span class='statusLabel' id='weak' style="color: #FECCD0;"></span>
|
||||||
|
<span class='statusLabel' id='curse' style="color: #C2F4E7;"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="toolBar" class="clearfix">
|
||||||
|
<img src="project/images/book.png" class="tools" id='img-book'>
|
||||||
|
<img src="project/images/fly.png" class="tools" id='img-fly'>
|
||||||
|
<img src="project/images/toolbox.png" class="tools" id='img-toolbox'>
|
||||||
|
<img src="project/images/shop.png" class="tools" id='img-shop'>
|
||||||
|
<img src="project/images/save.png" class="tools" id='img-save'>
|
||||||
|
<img src="project/images/load.png" class="tools" id='img-load'>
|
||||||
|
<img src="project/images/settings.png" class="tools" id='img-settings'>
|
||||||
|
<p class="statusLabel tools" id="hard"></p>
|
||||||
|
</div>
|
||||||
|
<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='ui' width='416' height='416'></canvas>
|
||||||
|
<canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
|
||||||
|
</div>
|
||||||
|
<!-- */</script> -->
|
||||||
|
<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://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 id='mainScript' src='main.js'></script>
|
||||||
|
<script>
|
||||||
|
//所有全局量
|
||||||
|
__all__=['Vue','fs','editor_file','main','core','hasOwnProp','editor'];
|
||||||
|
__id__=['editArea','arrRowMark','mapRowMark','data','bg','dataSelection'];
|
||||||
|
__Vue__=['exportM','editArea','editTip','clear','tip','selectBox'];
|
||||||
|
//var event = document.getElementById('event');
|
||||||
|
|
||||||
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
||||||
|
function hasOwnProp (obj, key) {
|
||||||
|
return hasOwnProperty.call(obj, key)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src='_server/editor.js'></script>
|
||||||
|
<script>
|
||||||
|
main.init('editor');
|
||||||
|
editor.init();
|
||||||
|
//main.listen();
|
||||||
|
//core.setHeroMoveTriggerInterval();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -79,7 +79,6 @@ function core() {
|
|||||||
'mouseOutCheck': 1,
|
'mouseOutCheck': 1,
|
||||||
'moveStepBeforeStop': [],
|
'moveStepBeforeStop': [],
|
||||||
|
|
||||||
// 勇士状态；中心对称飞行器
|
|
||||||
|
|
||||||
// event事件
|
// event事件
|
||||||
'saveIndex': null,
|
'saveIndex': null,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user