diff --git a/_server/editor_file.js b/_server/editor_file.js new file mode 100644 index 00000000..b076565a --- /dev/null +++ b/_server/editor_file.js @@ -0,0 +1,63 @@ +(function(){ + + editor_file = {}; + editor_file.getFloorFileList = function(editor,callback){ + if (isset(callback)) callback(['simple0.js','simple1.js','simple2.js'],null); + } + //callback(Array,err:String) + editor_file.loadFloorFile = function(editor,filename,callback){ + if (isset(callback)) callback('',null); + } + //callback(String,err:String) + editor_file.saveFloorFile = function(editor,callback){ + if (isset(callback)) callback(null); + } + //callback(err:String) + editor_file.saveFloorFile = function(editor,saveAsFilename,callback){ + if (isset(callback)) callback(null); + } + //callback(err:String) + editor_file.changeIdAndIdnum = function(editor,id,idnum,callback){ + if (isset(callback)) callback(null); + } + //callback(err:String) + editor_file.editItem = function(editor,id,callback){ + if (isset(callback)) callback('',null); + } + //callback(String,err:String) + editor_file.editEnemy = function(editor,id,callback){ + if (isset(callback)) callback({'name': '初级巫师', 'hp': 100, 'atk': 120, 'def': 0, 'money': 16, 'experience': 0, 'special': 15, 'value': 100},null); + } + //callback(obj,err:String) + editor_file.editLoc = function(editor,x,y,input_value,callback){ + if (isset(callback)) callback({"events":` [ // 守着道具的老人 + "\t[老人,man]这些是本样板支持的所有的道具。\n\n道具分为三类：items, constants, tools。\nitems 为即捡即用类道具，例如宝石、血瓶、剑盾等。\nconstants 为永久道具，例如怪物手册、楼层传送器、幸运金币等。\ntools 为消耗类道具，例如破墙镐、炸弹、中心对称飞行器等。\n\n后两类道具在工具栏中可以看到并使用。", + "\t[老人,man]有关道具效果，定义在items.js中。\n目前大多数道具已有默认行为，如有自定义的需求则需在items.js中修改代码。", + "\t[老人,man]constants 和 tools 各最多只允许12种，多了会导致图标溢出。", + "\t[老人,man]拾取道具结束后可触发 afterGetItem 事件。\n\n有关事件的各种信息在下一层会有更为详细的说明。", + {"type": "hide", "time": 500} // 消失 + ],`,"changeFloor":"","afterBattle":"","afterGetItem":"","afterOpenDoor":""},null); + } + //callback(obj,err:String) + editor_file.editFloor = function(editor,input_value,callback){ + if (isset(callback)) callback({"floorId": "sample0", + "title": "样板 0 层", + "name": "0", + "canFlyTo": true, + "canUseQuickShop": true, + "defaultGround": "ground", + "firstArrive":` [ // 第一次到该楼层触发的事件 + "\t[样板提示]首次到达某层可以触发 firstArrive 事件，该事件可类似于RMXP中的“自动执行脚本”。\n\n本事件支持一切的事件类型，常常用来触发对话，例如：", + "\t[hero]我是谁？我从哪来？我又要到哪去？", + "\t[仙子,fairy]你问我...？我也不知道啊...", + "本层主要对道具、门、怪物等进行介绍，有关事件的各种信息在下一层会有更为详细的说明。", + ],`},null); + } + //callback(obj,err:String) + var isset = function (val) { + if (val == undefined || val == null) { + return false; + } + return true + } +})(); \ No newline at end of file diff --git a/_server/vm.js b/_server/vm.js new file mode 100644 index 00000000..4187ccc2 --- /dev/null +++ b/_server/vm.js @@ -0,0 +1,247 @@ +// vue 相关处理 + +document.body.onmousedown = function(e){ + selectBox.isSelected = false; + editor.info = {}; +} +iconLib.onmousedown = function(e){ + e.stopPropagation(); +} +var exportM = new Vue({ + el: '#exportM', + + methods: { + exportMap: function(){ + editor.updateMap(); + if(editArea.error) { + tip.whichShow = 3; + + return; + } + var filestr=''; + for (var yy = 0; yy < 13; yy++){ + filestr+='[' + for (var xx = 0; xx < 13; xx++) { + var mapxy=editor.map[yy][xx]; + if(typeof(mapxy)==typeof({})){ + if ('idnum' in mapxy)mapxy=mapxy.idnum; + else { + // mapxy='!!?'; + tip.whichShow = 3; + return; + } + }else if(typeof(mapxy)=='undefined'){ + tip.whichShow = 3; + return; + } + mapxy=String(mapxy); + mapxy=Array(Math.max(4-mapxy.length,0)).join(' ')+mapxy; + filestr+=mapxy+(xx==12?'':',') + } + + filestr += ']'+(yy==12?'':',\n'); + } + pout.value = filestr; + + tip.whichShow = 2; + } + } +}) +var editArea = new Vue({ + el: '#editArea', + data: { + mapArr: '', + errors: [ // 编号1,2,3,4 + "格式错误！请使用正确格式(13*13数组，如不清楚，可先点击生成地图查看正确格式)", + "当前有未定义ID（在地图区域显示红块），请修改ID或者到icons.js和maps.js中进行定义！", + "ID越界（在地图区域显示红块），当前编辑器暂时支持编号小于400，请修改编号！", + // "发生错误！", + ], + error: 0, + formatTimer: null, + }, + watch: { + mapArr: function (val, oldval) { + var that = this; + if(val=='') return; + if(that.formatArr()){ + that.error = 0; + clearTimeout(that.formatTimer); + setTimeout(function(){ + that.drawMap(); + tip.whichShow = 8 + }, 1000); + that.formatTimer = setTimeout(function(){ + pout.value = that.formatArr(); + }, 5000); //5s后再格式化，不然光标跳到最后很烦 + }else{ + that.error = 1; + } + }, + error: function(){ + // console.log(editArea.mapArr); + } + }, + methods: { + drawMap: function(){ + var that = this; + + // var mapArray = that.mapArr.split(/\D+/).join(' ').trim().split(' '); + var mapArray = JSON.parse('['+that.mapArr+']'); + for(var y=0; y<13; y++) + for(var x=0; x<13; x++){ + var num = mapArray[y][x]; + if(num == 0 ) + editor.map[y][x] = 0; + else if(num >= 400){ + that.error = 3; + editor.map[y][x] = undefined; + }else if(typeof(editor.indexs[num][0]) == 'undefined'){ + that.error = 2; + editor.map[y][x] = undefined; + }else editor.map[y][x] = editor.ids[[editor.indexs[num][0]]]; + } + + editor.updateMap(); + + }, + formatArr: function(){ + var formatArrStr = ''; + + if(this.mapArr.split(/\D+/).join(' ').trim().split(' ').length != 169) return false; + var arr = this.mapArr.replace(/\s+/g, '').split('],['); + + if(arr.length != 13) return ; + for(var i =0; i<13; i++){ + var a = []; + formatArrStr +='['; + if(i==0||i==12) a = arr[i].split(/\D+/).join(' ').trim().split(' '); + else a = arr[i].split(/\D+/); + if(a.length != 13){ + formatArrStr = ''; + return ; + } + + for(var k=0; k<13; k++){ + var num = parseInt(a[k]); + formatArrStr += Array(Math.max(4-String(num).length,0)).join(' ')+num+(k==12?'':','); + } + formatArrStr += ']'+(i==12?'':',\n'); + } + + return formatArrStr; + } + } +}); +var editTip = new Vue({ + el: '#editTip', + data: { + err: '' + }, + methods: { + copyMap: function(){ + + tip.whichShow = 0; + if(pout.value.trim() != ''){ + if(editArea.error) { + this.err = editArea.errors[editArea.error-1]; + tip.whichShow = 5 + return; + } + try{ + pout.select(); + document.execCommand("Copy"); + tip.whichShow = 6; + }catch(e){ + this.err= e; + tip.whichShow = 5; + } + }else{ + tip.whichShow = 7; + } + } + }, +}) +var clear = new Vue({ + el: '#clear', + + methods: { + clearMap: function(){ + editor.mapInit(); + clearTimeout(editArea.formatTimer); + clearTimeout(tip.timer); + pout.value = ''; + editArea.mapArr = ''; + tip.whichShow = 4; + editArea.error = 0; + } + } +}) +var tip = new Vue({ + el: '#tip', + data: { + infos: {}, + hasId: true, + isAutotile: false, + isSelectedBlock: false, + geneMapSuccess: false, + timer: null, + msgs: [ //分别编号1,2,3,4,5,6,7,8；奇数警告，偶数成功 + "当前未选择任何图块，请先在右边选择要画的图块!", + "生成地图成功！可点击复制按钮复制地图数组到剪切板", + "生成失败! 地图中有未定义的图块，建议先用其他有效图块覆盖或点击清除地图！", + "地图清除成功!", + "复制失败！", + "复制成功！可直接粘贴到楼层文件的地图数组中。", + "复制失败！当前还没有数据", + "修改成功！可点击复制按钮复制地图数组到剪切板" + ], + mapMsg: '', + whichShow: 0, + }, + watch: { + infos: { + handler: function(val, oldval){ + if(typeof(val) != 'undefined'){ + this.infos = val; + if('id' in val){ + this.hasId = true; + }else{ + this.hasId = false; + } + this.isAutotile = false; + if(this.infos.images == "autotile" && this.hasId) this.isAutotile = true; + } + }, + deep: true + }, + + whichShow: function(){ + var that = this; + that.mapMsg = ''; + that.msgs[4] = "复制失败！"+editTip.err; + clearTimeout(that.timer); + if(that.whichShow){ + that.mapMsg = that.msgs[that.whichShow-1]; + that.timer = setTimeout(function() { + if(!(that.whichShow%2)) + that.whichShow = 0; + }, 5000); //5秒后自动清除success，warn不清除 + } + } + } +}) + +var selectBox = new Vue({ + el: '#selectBox', + data: { + isSelected: false + }, + watch: { + isSelected: function(){ + tip.isSelectedBlock = this.isSelected; + tip.whichShow = 0; + clearTimeout(tip.timer); + } + } +}) \ No newline at end of file diff --git a/drawMapGUI.html b/drawMapGUI.html index 663d824e..f1df9a1c 100644 --- a/drawMapGUI.html +++ b/drawMapGUI.html @@ -8,9 +8,9 @@ font-family: Roboto,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;; background-color: #F5F5F5; } - ::-webkit-scrollbar { + /* ::-webkit-scrollbar { width: 5px; - } + } */ .main { max-width: 100%; min-height: 500px; @@ -26,7 +26,7 @@ left: 5px; top: 10px; width: 435px; - height: 400px; + height: 630px; } #editArea{ @@ -108,7 +108,7 @@ border: 1px solid #ccc; border-radius: 2px; font-size: 15px; - line-height: 16px; + line-height: 14px; } .files { width: 50%; @@ -176,7 +176,7 @@ height: 620px; left: 5px; top: 5px; - overflow:auto; + overflow: auto; } .gameCanvas { position: absolute; @@ -186,15 +186,16 @@ /* top:0; left:320px; */ z-index:75; - width:32px;height:32px; - - margin:-2px 0 0 -2px; + width:26px; + height:26px; + margin: 3px 0 0 3px; padding:0; /* display: none; */ - + box-sizing: border-box; background-color:rgba(255, 255, 255, 0.0); - border: 2px solid #30DFF3; - box-shadow: 0px 0px 2px #30DFF3; + border: 1px solid #000; + box-shadow: 0 0 0 2px #fff, + 0 0 0 3px #000; } .warnText{ color: #D50000; @@ -293,14 +294,22 @@
-
-
-
- -

{{ errors[error-1] }}

+
+
+
+
+ +

{{ errors[error-1] }}

+
+
+ +
-
- +
+ +
+
+
@@ -318,7 +327,7 @@

图块编号：{{ infos['idnum'] }}

图块ID：{{ infos['id'] }}

该图块无对应的数字或ID存在，请先前往icons.js和maps.js中进行定义！

-

图块所在素材：{{ infos['images'] }}

+

图块所在素材：{{ infos['images'] + (isAutotile ? '( '+infos['id']+' )' : '') }}

图块索引：{{ infos['y'] }}

@@ -346,8 +355,6 @@
- - + - - - diff --git a/images/常用素材：如需使用请直接替换目录中的对应文件/autotile1.png b/images/autotile1.png similarity index 100% rename from images/常用素材：如需使用请直接替换目录中的对应文件/autotile1.png rename to images/autotile1.png diff --git a/images/常用素材：如需使用请直接替换目录中的对应文件/autotile2.png b/images/autotile2.png similarity index 100% rename from images/常用素材：如需使用请直接替换目录中的对应文件/autotile2.png rename to images/autotile2.png diff --git a/images/常用素材：如需使用请直接替换目录中的对应文件/autotile3.png b/images/autotile3.png similarity index 100% rename from images/常用素材：如需使用请直接替换目录中的对应文件/autotile3.png rename to images/autotile3.png diff --git a/libs/icons.js b/libs/icons.js index 2cd08b4a..4aced479 100644 --- a/libs/icons.js +++ b/libs/icons.js @@ -209,6 +209,12 @@ icons.prototype.init = function () { 'moneyPocket': 46, 'shoes': 47, 'hammer': 48 + }, + 'autotile': { // 所有的Autotile列表；后面的index简单取0即可 + 'autotile': 0, + 'autotile1': 0, + 'autotile2': 0, + 'autotile3': 0, } } } diff --git a/libs/maps.js b/libs/maps.js index aedd7101..b9a26395 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -79,9 +79,12 @@ maps.prototype.getBlock = function (x, y, id) { if (id == 15) tmp.event = {'cls': 'animates', 'id': 'water', 'noPass': true}; // 水 - // autotile: 20 + // Autotile if (id == 20) tmp.event = {'cls': 'autotile', 'id': 'autotile', 'noPass': true}; // autotile - // 更多的autotile从350继续放 + // 更多的autotile从151到160，只要不和现有的数字冲突即可 + if (id == 151) tmp.event = {'cls': 'autotile', 'id': 'autotile1', 'noPass': true}; + if (id == 152) tmp.event = {'cls': 'autotile', 'id': 'autotile2', 'noPass': true}; + if (id == 153) tmp.event = {'cls': 'autotile', 'id': 'autotile3', 'noPass': true}; // 21-80 物品