diff --git a/_server/README.md b/_server/README.md index e6a12c67..8010f1e7 100644 --- a/_server/README.md +++ b/_server/README.md @@ -1,140 +1,57 @@ # editor -[重构](refactoring.md) +直接使用游戏运行时(之后简称core)的代码来绘制游戏画面, 借助fs.js来实现浏览器编辑文件. 通过表格编辑数据, blockly图块编辑事件, code mirror编辑文本的可视化魔塔编辑器. ->! 以下均是v2.0时的说明, 未及时改动 +![](img_md/view1.png) -本目录下所有文件,以及`../editor.html`和`../启动服务.exe`([源码](http://github.com/ckcz123/mota-js-server/))是地图编辑器的所有组件. +左侧数据区, 中间地图区, 右侧素材区 -`editor.js`,`editor_file.js`和`editor_mode.js`耦合较强,`editor_blockly.js`和`editor_multi.js`和`fs.js`基本可以独立使用. +![](img_md/view2.png) -## 各组件功能 +事件编辑器 -### 总体上 +![](img_md/view3.png) -以`display:none`的形式引入了`index.html`的`dom`,修改了原来的`.gameCanvas #ui #data`等的名字以避免冲突 +脚本编辑器 -通过`main.init('editor')`加载数据 +> 此文件是editor的结构说明, 不是使用文档 -`editor`模式关闭了部分动画 +## 组成 -`core.drawMap`中`editor`模式下不再画图,而是生成画图的函数提供给`editor` +本目录下所有文件,以及`../editor.html`,`../editor-mobile.html`和`../启动服务.exe`,`../server.py`是地图编辑器的所有组件. -`editor`模式下`GlobalAnimate`可以独立的选择是否播放 +### 父目录 ++ editor(-mobile).html + 编辑器的[入口页面](http://127.0.0.1:1055/editor.html) + 以`display:none`的形式引入了core的`index.html`的`dom`,修改了原来的`.gameCanvas #ui #data`等的名字以避免冲突 ++ 启动服务.exe [源码](http://github.com/ckcz123/mota-js-server/) + 为fs.js提供后端支持, 同时集成了一些实用工具 ++ server.py + 非windows平台中为fs.js提供后端支持 -`core.playBgm`和`core.playSound`中非`play`模式不再播放声音 +### core -`core.show`和`core.hide`中非`play`模式不再进行动画而是立刻完成并执行回调 +游戏运行时中部分代码根据`main.mod=='editor'`进行了调整 -`editor`模式不执行`core.resize` ++ 通过`main.init('editor')`加载数据 -### editor.js ++ `editor`模式关闭了部分动画 -``` js -editor.mapInit();//清空地图 -editor.changeFloor('MT2')//切换地图 -editor.util.guid()//产生一个可以作为id的长随机字符串 -``` ++ `core.drawMap`中`editor`模式下不再画图,而是生成画图的函数提+ 供给`editor` -`editor.updateMap`中画未定义快的报错 ++ `editor`模式下`GlobalAnimate`可以独立的选择是否播放 -### editor_file.js ++ `core.playBgm`和`core.playSound`中非`play`模式不再播放声音 -提供了以下函数进行楼层`map`数组相关的操作 -```javascript -editor.file.saveFloorFile -editor.file.saveFloorFileAs -``` ++ `core.show`和`core.hide`中非`play`模式不再进行动画而是立刻+ 完成并执行回调 -编辑模式有关的查询 -```javascript -editor.file.editItem('redJewel',[],function(a){console.log(a)}); -editor.file.editEnemy('redBat',[],function(a){console.log(a)}); -editor.file.editLoc(2,0,[],function(a){console.log(a)}); -editor.file.editFloor([],function(a){console.log(a)}); -editor.file.editTower([],function(a){console.log(a)}); -editor.file.editFunctions([],function(a){console.log(a)}); -``` ++ `editor`模式不执行`core.resize` -编辑模式有关的编辑 -```javascript -editor.info={images: "terrains", y: 9}; -editor.file.changeIdAndIdnum('yellowWall2',16,editor.info,function(a){console.log(a)}); -editor.file.editItem('book',[["change","['items']['name']","怪物手册的新名字"]],function(a){console.log(a)}); -editor.file.editEnemy('redBat',[['change',"['atk']",20]],function(a){console.log(a)}); -editor.file.editLoc(2,6,[["change","['afterBattle']",null]],function(a){console.log(a)}); -editor.file.editFloor([["change","['title']",'样板 33 层']],function(a){console.log(a)}); -editor.file.editTower([["change","['values']['lavaDamage']",200]],function(a){console.log(a)}); -editor.file.editFunctions(["change","['events']['afterChangeLight']","function(x,y){console.log(x,y)}"],function(a){console.log(a)}); -``` - -### editor_mode.js -生成表格并绑定事件的函数 -```javascript -editor.mode.loc(); -editor.mode.enemyitem(); -editor.mode.floor(); -editor.mode.tower(); -editor.mode.functions(); -``` - -切换模式 -```javascript -editor.mode.onmode('');//清空 -editor.mode.onmode('save');//保存 -editor.mode.onmode('nextChange');//下次onmode时前端进行切换 - -editor.mode.onmode('loc'); -editor.mode.onmode('enemyitem'); -editor.mode.onmode('floor'); -editor.mode.onmode('tower'); -editor.mode.onmode('functions'); -editor.mode.onmode('map'); -editor.mode.onmode('appendpic'); -``` -在`onmode('save')`时,改动才会保存到文件,涉及到图片的改动需要刷新页面使得`editor`能看到 - -表格的`onchange`的实现中,获得当前模式的方式.不注意的话,修改`index.html`中页面的结构,会被坑 -```javascript -var node = thisTr.parentNode; -while (!editor_mode._ids.hasOwnProperty(node.getAttribute('id'))) { - node = node.parentNode; -} -editor_mode.onmode(editor_mode._ids[node.getAttribute('id')]); -``` - -`editor.mode.listen`中提供了追加素材的支持. - - -### editor_blockly.js - -把选定`id_`的事件用blockly编辑 -``` js -editor_blockly.import(id_,{type:'event'}); -``` - -把文本区域的代码转换成图块 -``` js -editor_blockly.parse(); -``` - -### editor_multi.js - -用[CodeMirror](https://github.com/codemirror/CodeMirror) 实现有高亮的多行文本编辑 - -编辑选定`id_`的文本域 -``` js -editor_multi.import(id_,{lint:true}) -``` - -编辑blockly方块的特定域 -``` js -editor_multi.multiLineEdit(value,b,f,{lint:true},callback) -``` ### fs.js -模仿node的fs模块提供如下api,与`启动服务.exe`配合为js提供文件读写功能 +依照[issue#31](https://github.com/ckcz123/mota-js/issues/13)的约定, 模仿node的fs模块提供如下api,与`启动服务.exe`,`server.py`配合为js提供文件读写功能, 是编辑器成立的前提 + ``` js fs.readFile('file.in','utf-8',callback) //读文本文件 @@ -162,3 +79,205 @@ fs.readdir(path, callback) //所有参数不允许缺省 ``` +### editor_multi.js + +用[CodeMirror](https://github.com/codemirror/CodeMirror) 实现有高亮的多行文本编辑 + +编辑选定`id_`的文本域 +``` js +editor_multi.import(id_,{lint:true}) +``` + +编辑blockly方块的特定域 +``` js +editor_multi.multiLineEdit(value,b,f,{lint:true},callback) +``` + +配置表格 +``` js +editor_multi.editCommentJs(mod) +``` + +### MotaAction.g4 + +通过[antlr-blockly](https://github.com/zhaouv/antlr-blockly)的语法定义core中各事件对应的方块. + +借助google的[blockly](https://github.com/google/blockly)来实现事件的可视化编辑. + +入口方块以`_m`结尾 + +一般语句写在`action`中, 以`_s`结尾 + +### editor_blockly.js + +把选定`id_`的事件用blockly编辑 +``` js +editor_blockly.import(id_,{type:'event'}); +``` + +把文本区域的代码转换成图块 +``` js +editor_blockly.parse(); +``` + +`initscript中`的`toolboxObj`定义了侧边栏中显示的图块 + +自定义`Blockly.FieldColour.prototype.createWidget_`修改了颜色选择器的行为 + +自定义`Blockly.FieldTextInput.prototype.showInlineEditor_`添加了自动补全 + + +### editor_mode.js + +用于切换数据区 + +加载数据 +```javascript +editor.mode.loc(); +editor.mode.enemyitem(); +editor.mode.floor(); +editor.mode.tower(); +editor.mode.functions(); +``` + +切换模式 +```javascript +editor.mode.onmode('');//清空 +editor.mode.onmode('save');//保存 +editor.mode.onmode('nextChange');//下次onmode时前端进行切换 + +editor.mode.onmode('loc'); +editor.mode.onmode('enemyitem'); +editor.mode.onmode('floor'); +editor.mode.onmode('tower'); +editor.mode.onmode('functions'); +editor.mode.onmode('map'); +editor.mode.onmode('appendpic'); +``` +在`onmode('save')`时,改动才会保存到文件,涉及到图片的改动需要刷新页面使得`editor`能看到 + +数据区一些通用的函数也定义在这里 + +### editor_table.js + +处理表格的生成, 及其响应的事件 + +其接受来自../project/\*.js的数据`obj`和来自table/\*.comment.js的注释`commentObj` + +commentObj的结构如示例 +``` js +{ + "_type": "object", + "_data": { + "events": { + "_type": "object", + "_data": { + "resetGame": { + "_leaf": true, + "_type": "textarea", + "_lint": true, + "_data": "重置整个游戏" + }, + "setInitData": { + "_leaf": true, + "_type": "textarea", + "_lint": true, + "_data": "设置初始属性" + }, +``` +一层正常数据, 一层`_`开头的结构说明, 忽略`_`层的话与obj同结构 + +通过 +``` js +editor.table.objToTable(obj, commentObj) +editor.table.objToTr +editor.table.objToTd +``` +遍历这两个对象来生成表格, 叶节点根据`_type`渲染成对应的dom + +表格的值变化`onchange`, 双击`dblclickfunc`, 删除`deletefunc`, 添加`addfunc`也定义在此文件 + +### editor_mappanel.js + +与地图区相关的功能 ++ 画地图 线/矩形/tileset ++ 通过地图选中事件或素材 ++ 右键菜单 ++ 切换楼层 ++ 大地图移动可视窗口 + +### editor_materialpanel.js + +与素材区相关的功能 ++ 选中 ++ 展开/折叠 + +### editor_datapanel.js + +与数据区相关的功能 (且与表格无关的功能) ++ 地图编辑 + - 创建新地图 + - 批量创建 ++ 地图选点 ++ 图块属性 + - 注册素材 + - 修改id ++ 楼层属性 + - 修改楼层id ++ 全塔属性 ++ 脚本编辑 ++ 追加素材 + - 选择导入的区域 + - 导入图片 + - 改色相 + - 选中图片中的格子 + - 确认追加 ++ 公共事件 ++ 插件编写 + +### editor_ui.js + +ui事件中没有具体到前三个区中的函数 ++ 响应点击 ++ 快捷键 ++ 显示帮助 ++ UI预览 & 地图选点相关 + +### editor_util.js + +一些通用的函数 ++ 生成id ++ HTML转义 ++ 像素处理 ++ base64的encode/decode ++ 检查值是否为空 + +### editor_listen.js + +界面与功能的绑定 + +### editor_file.js + +包装fs.js, 把数据读写到对应的文件 + +### editor_game.js + +游戏数据的处理 + +此部分的重构未完成, 实际上是由editor_file.js和editor_file_unsorted.js来做的 + +### editor.js + +``` js +editor.mapInit();//清空地图 +editor.changeFloor('MT2')//切换地图 +editor.util.guid()//产生一个可以作为id的长随机字符串 +``` + +`editor.updateMap`中画未定义快的报错 + +### editor_file.js + +初始化加整合各模块 + +现状是还放了一些游戏数据有关的函数未挪到editor_game, 以及部分和入口页面生成有关的函数 \ No newline at end of file diff --git a/_server/img_md/view1.png b/_server/img_md/view1.png new file mode 100644 index 00000000..9cf0135c Binary files /dev/null and b/_server/img_md/view1.png differ diff --git a/_server/img_md/view2.png b/_server/img_md/view2.png new file mode 100644 index 00000000..8243840b Binary files /dev/null and b/_server/img_md/view2.png differ diff --git a/_server/img_md/view3.png b/_server/img_md/view3.png new file mode 100644 index 00000000..34daceac Binary files /dev/null and b/_server/img_md/view3.png differ diff --git a/_server/refactoring.md b/_server/refactoring.md index f3020440..fbd0fff0 100644 --- a/_server/refactoring.md +++ b/_server/refactoring.md @@ -1,6 +1,6 @@ # 重构 -> 目前状态: 按功能分类已基本完成 +> 目前状态: 按功能分类已基本完成, 未完成file/game的重写 总体思路 + 按功能拆分文件 @@ -24,11 +24,11 @@ editor_file之后是更改editor.map的储存方式, 现有的存对象的模式 + [ ] editor_file 调用fs.js编辑文件, 把原editor\_file模块化, 并且只负责文件写入 + [ ] editor_game 处理游戏数据, 导入为editor的数据, 编辑数据, 从原editor和editor_file中抽离. **只有此文件允许`\s(main|core)`形式的调用**(以及其初始化`editor_game_wrapper(editor, main, core);`) + [x] editor_util 生成guid/处理颜色 等函数, 从editor分离 -+ [ ] editor_action 处理界面上的按钮/下拉框点击等用户的操作与功能函数的绑定, 维护editor.dom, unsorted_1/2中的绑定挪到此处, 其中的函数内容, 分类放在其他文件 -+ [ ] editor_mappanel 与地图面板相关的功能, <-unsorted_1/2/3 -+ [ ] editor_datapanel 与数据面板相关的功能, <-unsorted_1/2/3 -+ [ ] editor_materialpanel 与素材面板相关的功能, <-unsorted_1/2/3 -+ [ ] editor_ui 维护printe/printf/tip, 以及之后可能的窗口化, ui事件中没有具体到前三个面板中的函数 <-unsorted_1/2/3 ++ [ ] editor_listen 处理界面上的按钮/下拉框点击等用户的操作与功能函数的绑定, 维护editor.dom, unsorted_1/2中的绑定挪到此处, 其中的函数内容, 分类放在其他文件 ++ [ ] editor_mappanel 与地图区相关的功能, <-unsorted_1/2/3 ++ [ ] editor_datapanel 与数据区相关的功能, <-unsorted_1/2/3 ++ [ ] editor_materialpanel 与素材区相关的功能, <-unsorted_1/2/3 ++ [ ] editor_ui 维护printe/printf/tip, 以及之后可能的窗口化, ui事件中没有具体到前三个区中的函数 <-unsorted_1/2/3 + [ ] editor 执行初始化流程加组合各组件 + [ ] 原editor_mode 移除 + [x] 原vm 移除