From 27b44b874faa68703763e8705dd7c0ed67d50b90 Mon Sep 17 00:00:00 2001 From: oc Date: Wed, 14 Mar 2018 22:14:10 +0800 Subject: [PATCH] Fix V2.0 Bug --- _server/CodeMirror/codemirror.css | 2 +- _server/blockly/MotaAction.g4 | 6 ++-- _server/editor.js | 3 +- _server/editor_blockly.js | 3 +- _server/editor_file.js | 14 +++++++-- _server/editor_mode.js | 11 ++++--- _server/vm.js | 2 +- docs/editor.md | 51 +++++++++++++++++++++++++++++++ libs/maps.js | 1 + 9 files changed, 78 insertions(+), 15 deletions(-) create mode 100644 docs/editor.md diff --git a/_server/CodeMirror/codemirror.css b/_server/CodeMirror/codemirror.css index c7a8ae70..53944801 100644 --- a/_server/CodeMirror/codemirror.css +++ b/_server/CodeMirror/codemirror.css @@ -167,7 +167,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;} /* See overflow: hidden in .CodeMirror */ margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; - height: 100%; + height: 95%; outline: none; /* Prevent dragging from highlighting the element */ position: relative; } diff --git a/_server/blockly/MotaAction.g4 b/_server/blockly/MotaAction.g4 index 36df587f..248153c9 100644 --- a/_server/blockly/MotaAction.g4 +++ b/_server/blockly/MotaAction.g4 @@ -553,15 +553,15 @@ return code; */ showImage_0_s - : '显示图片' IdString '起点像素位置' 'x' Int 'y' Int Newline + : '显示图片' EvalString '起点像素位置' 'x' Int 'y' Int Newline ; /* showImage_0_s tooltip : showImage：显示图片 helpUrl : https://ckcz123.github.io/mota-js/#/event?id=showimage%ef%bc%9a%e6%98%be%e7%a4%ba%e5%9b%be%e7%89%87 -default : ["bg",0,0] +default : ["bg.jpg",0,0] colour : this.printColor -var code = '{"type": "showImage", "name": "'+IdString_0+'", "loc": ['+Int_0+','+Int_1+']},\n'; +var code = '{"type": "showImage", "name": "'+EvalString_0+'", "loc": ['+Int_0+','+Int_1+']},\n'; return code; */ diff --git a/_server/editor.js b/_server/editor.js index 53fa7364..05f77066 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -53,7 +53,7 @@ editor.prototype.reset = function(callback){ editor.prototype.idsInit = function(maps, icons){ editor.ids = [0]; editor.indexs = []; - var MAX_NUM = 400; + var MAX_NUM = 1000; var getInfoById = function(id){ var block = maps.initBlock(0, 0, id); if(hasOwnProp(block, 'event')){ @@ -143,6 +143,7 @@ editor.prototype.drawInitData = function (icons) { editor.prototype.mapInit = function(){ var ec = document.getElementById('event').getContext('2d'); ec.clearRect(0, 0, 416, 416); + document.getElementById('event2').getContext('2d').clearRect(0,0,416,416); editor.map = []; for(var y=0; y<13; y++){ editor.map[y] = []; diff --git a/_server/editor_blockly.js b/_server/editor_blockly.js index af983c12..96cace53 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -196,7 +196,6 @@ initscript=String.raw` var doubleClickCheck=[[0,'abc']]; function omitedcheckUpdateFunction(event) { - //console.log(event); if(event.type==='ui'){ var newClick = [new Date().getTime(),event.blockId]; var lastClick = doubleClickCheck.shift(); @@ -245,7 +244,7 @@ editor_blockly.runOne = function (){ //converter.generToolbox(); converter.generMainFile(); //printf(converter.mainFile.join('')); - console.log(converter); + //console.log(converter); diff --git a/_server/editor_file.js b/_server/editor_file.js index c1ecd31f..e5f20cb9 100644 --- a/_server/editor_file.js +++ b/_server/editor_file.js @@ -151,8 +151,8 @@ editor_file = function(editor, callback){ if(info.images==='items'){ saveSetting('items',[["change"/*其实应该是add*/,"['items']['"+id+"']",editor_file.comment.items_template]],function(err){if(err){printe(err);throw(err)}}); } - if(info.images==='enemys'){ - saveSetting('enemys',[["change"/*其实应该是add*/,"['enemys']['"+id+"']",editor_file.comment.enemys_template]],function(err){if(err){printe(err);throw(err)}}); + if(info.images==='enemys' || info.images==='enemy48'){ + saveSetting('enemys',[["change"/*其实应该是add*/,"['"+id+"']",editor_file.comment.enemys_template]],function(err){if(err){printe(err);throw(err)}}); } callback(null); @@ -501,7 +501,15 @@ editor_file = function(editor, callback){ eval("maps_90f36752_8815_4be8_b32b_d7fad1d0542e"+value[1]+'='+JSON.stringify(value[2])); }); var datastr='maps_90f36752_8815_4be8_b32b_d7fad1d0542e = \n'; - datastr+=JSON.stringify(maps_90f36752_8815_4be8_b32b_d7fad1d0542e,null,4); + //datastr+=JSON.stringify(maps_90f36752_8815_4be8_b32b_d7fad1d0542e,null,4); + + var emap={}; + var estr = JSON.stringify(maps_90f36752_8815_4be8_b32b_d7fad1d0542e,function(k,v){if(v.id!=null){var id_ = editor.guid();emap[id_]=JSON.stringify(v);return id_;}else return v},4); + for(var id_ in emap){ + estr = estr.replace('"'+id_+'"',emap[id_]) + } + datastr+=estr; + fs.writeFile('project/maps.js',encode(datastr),'base64',function(err, data){ callback(err); }); diff --git a/_server/editor_mode.js b/_server/editor_mode.js index 92949ac3..21eac472 100644 --- a/_server/editor_mode.js +++ b/_server/editor_mode.js @@ -178,7 +178,7 @@ editor_mode.prototype.doActionList = function(mode,actionList){ break; case 'emenyitem': - if (editor_mode.info.images=='enemys'){ + if (editor_mode.info.images=='enemys'||editor_mode.info.images=='enemy48'){ editor.file.editEnemy(editor_mode.info.id,actionList,function(objs_){/*console.log(objs_);*/if(objs_.slice(-1)[0]!=null){printe(objs_.slice(-1)[0]);throw(objs_.slice(-1)[0])};printf('修改成功')}); } else if (editor_mode.info.images=='items'){ editor.file.editItem(editor_mode.info.id,actionList,function(objs_){/*console.log(objs_);*/if(objs_.slice(-1)[0]!=null){printe(objs_.slice(-1)[0]);throw(objs_.slice(-1)[0])};printf('修改成功')}); @@ -203,7 +203,6 @@ editor_mode.prototype.doActionList = function(mode,actionList){ editor_mode.prototype.onmode = function (mode) { if (editor_mode.mode!=mode) { - console.log('change mode into : '+mode); if(mode==='save')editor_mode.doActionList(editor_mode.mode,editor_mode.actionList); if(editor_mode.mode==='nextChange' && mode)editor_mode.showMode(mode); editor_mode.mode=mode; @@ -252,7 +251,7 @@ editor_mode.prototype.emenyitem = function(callback){ document.getElementById('newIdIdnum').style.display='none'; var objs=[]; - if (editor_mode.info.images=='enemys'){ + if (editor_mode.info.images=='enemys' || editor_mode.info.images=='enemy48'){ editor.file.editEnemy(editor_mode.info.id,[],function(objs_){objs=objs_;/*console.log(objs_)*/}); } else if (editor_mode.info.images=='items'){ editor.file.editItem(editor_mode.info.id,[],function(objs_){objs=objs_;/*console.log(objs_)*/}); @@ -307,6 +306,10 @@ editor_mode.prototype.listen = function(callback){ if (newIdIdnum.children[0].value && newIdIdnum.children[1].value){ var id = newIdIdnum.children[0].value; var idnum = parseInt(newIdIdnum.children[1].value); + if (!core.isset(idnum)) { + printe('不合法的idnum'); + return; + } editor.file.changeIdAndIdnum(id,idnum,editor_mode.info,function(err){ if(err){printe(err);throw(err)} printe('添加id的idnum成功,请F5刷新编辑器'); @@ -463,7 +466,7 @@ editor_mode.prototype.listen = function(callback){ picClick.onclick = function(e){ var loc = eToLoc(e); var pos = locToPos(loc); - console.log(e,loc,pos); + /*console.log(e,loc,pos);*/ var num = editor_mode.appendPic.num; var ii = editor_mode.appendPic.index; if(ii+1>=num)editor_mode.appendPic.index=ii+1-num; diff --git a/_server/vm.js b/_server/vm.js index a9dc2a6c..0f2aaecd 100644 --- a/_server/vm.js +++ b/_server/vm.js @@ -112,7 +112,7 @@ var editArea = new Vue({ var num = mapArray[y][x]; if(num == 0 ) editor.map[y][x] = 0; - else if(num >= 400){ + else if(num >= 1000){ that.error = 3; editor.map[y][x] = undefined; }else if(typeof(editor.indexs[num][0]) == 'undefined'){ diff --git a/docs/editor.md b/docs/editor.md new file mode 100644 index 00000000..3b5470b8 --- /dev/null +++ b/docs/editor.md @@ -0,0 +1,51 @@ +# 地图编辑器使用说明 + +## 地图编辑器 + +UI界面分为3个区域,左侧的编辑区,中间的画布区,右侧的素材区,以及两个弹窗形式的分别是事件编辑器和文本编辑器. + +画布区下方有切换地图和编辑器模式的下拉菜单,点击`保存地图`后画布的内容才会写入到文件中.同时一个显示信息的tips区. + +在素材区点击图块时,会选中该图块,此时tips会显示该图块的信息,编辑区会进入图块属性模式,怪物或物品可以直接在里面编辑数值.如果地图的数字和ID未被定义,可以在左侧定义,定义新图块需要刷新才能生效. + +在tips中有图块信息时,在画布上点击或拖拽可以把图块画上去,可以使用ctrl+Z撤销操作以及对应的ctrl+Y恢复撤销.擦除方块可以使用素材区最左上角的擦除块. + +点击界面中的空白,tips中的图块信息会被清空,此时再点击画布上的点,编辑器会进入地图选点模式.此时可以编辑改点的`events`,`afterBattle`,`changeFloor`等事件或者是`canMove`来改变各方向的通行状态. + +切换地图会使编辑区进入楼层属性模式,这里可以修改首次到达该楼层时会触发的事件`firstArrive`,楼层显示的名称,默认的前景背景图片,默认天气和色调,是否允许使用快捷商店等等.注:这里不允许编辑楼层的ID,需要修改ID的场合请直接改js文件,并保持注释中的三个标识符一致. + +全塔属性中编辑整个塔为单位的属性,例如起始剧情`startText`,塔的ID,提供哪些难度,主角的起始属性起始道具,全局商店,各种数值以及系统FLAG.创建新塔时需要认真编辑这里面的所有选项. + +脚本编辑模式可以修改常用的需要更改的函数.例如,给不同的难度设置不同的内容,加点,推箱子达成后的触发,以及修改游戏中的`关于`界面. + +追加素材模式可以导入一个图片到该标签的画板中,然后依次点击画板中的图块,点追加就可以按顺序把这些图片添加到对应的画布区素材的最下方,需要刷新来生效. + +地图编辑模式中可以导入来自地图生成器的地图数组,同时创建新楼层需要在这里通过另存为来实现,可以点清除地图把另存为出的新楼层清空. + +> 编辑区的表格可以直接修改,推荐通过双击,在事件编辑器和文本编辑器中进行编辑.编辑区中的修改需要点保存才会生效. + +## 事件编辑器 + +地图选点中的表格,以及楼层属性中的`firstArrive`和全塔属性的`startText`,在双击时会进入事件编辑器,是由[antlr-blockly](https://github.com/zhaouv/antlr-blockly)生成的图块式的可视化编辑器. + +把左侧的方块拖到面板中,下方就会实时的显示对应的js的代码(以及数值不正确时的提示). + +每个方块点击右键会展开一个菜单,点帮助可以跳转到此文档中对应的内容.利用好复制功能可以极大提高编辑的效率.注释选项请不要使用,编辑器并不会保留这里的注释. + +template中提供了一些模板事件,例如战前剧情,打怪开门. + +`显示文章`的两个方块,以及`自动剧情文本`,`选项`和`自定义JS脚本`这5个方块,可以通过双击方块,在文本编辑器中(以多行的方式)编辑其中的文字. + +## 文本编辑器 + +事件编辑器之外的内容双击后由文本编辑器来编辑,是有js高亮支持的多行文本编辑器[CodeMirror](https://github.com/codemirror/CodeMirror),点confirm即可使编辑的文本替换到表格中 + +## 拓展地图编辑器 + +> 面向有一定编程基础的用户 + +修改`project/`下的`*comment.js`可以让地图编辑器对自己添加的属性有更好的支持.例如: ++ 给`comment.js`中`enemys`加入新的键值对,就可以更方便的给怪物在UI界面中添加对应的值. ++ 在`data.comment.js`中把自己添加的内容标记为叶节点,不再在表格中展开到最末端. + +地图编辑器的部分API见`_server/README.md` \ No newline at end of file diff --git a/libs/maps.js b/libs/maps.js index 6b3eecc5..eadec0f9 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -373,6 +373,7 @@ maps.prototype.drawMap = function (mapName, callback) { main.editor.updateMap = function(){ core.removeGlobalAnimate(null, null, true); core.clearMap('event', 0, 0, 416, 416); + core.clearMap('event2', 0, 0, 416, 416); drawEvent(); core.setGlobalAnimate(core.values.animateSpeed); }