jianghe2nd/mota-js

Fork 0

YouWei Zhao 9ee85323df editor实现$range以及细节调整

2018-03-10 13:27:13 +08:00

5.7 KiB

Raw Blame History

v2.0目前的改动

总体上:

部分重构了运行时

把libs中的数据分离出来保存为类似json的js文件,分离后的数据进一步分离为纯数据和注释两部分
更改目录结构,分离后的libs一般无需修改,把数据楼层文件声音图片放入project目录中
- 需要相应的修改地图生成器和js压缩工具
设置了三个模式play|editor|replay在editor模式关闭了部分动画,并且角色无法行动

重构editor

重命名为editor.html
- 需要相应的修改本地服务的按钮打开的网址,为了兼容,临时加了个内容为<html><body><script>window.location='editor.html'</script></body></html>的drawMapGUI.html
不再独立的导入数据和画图,尽可能的通过main.init('editor')复用代码
能够在本地服务器环境中直接修改project中的数据,即全GUI下做塔
把editor的代码拆到了_server/editor.js中
添加了_server/css/editor_mode.css存放编辑模式有关的样式
添加了_server/editor_mode.js存放编辑模式的实现

具体:

main.js

用户修改内容转移到了project/data.js中

把事件监听打包成了main.prototype.listen

main.listen和main.init改为在index.html中执行

添加了main.prototype.loadPureData,在main.init中先加载纯数据再加载libs

core.js

core.drawMap中editor模式下不再画图,而是生成画图的函数提供给editor

editor模式下GlobalAnimate可以独立的选择是否播放

core.playBgm和core.playSound中非play模式不再播放声音

core.show和core.hide中非play模式不再进行动画而是立刻完成并执行回调

editor模式不执行core.resize

data.js

数据转移到了project/data.js中

注释转移到了project/data.comment.js中

enemy.js,items.js,maps.js,icons.js

数据转移到了project下的同名文件中

注释转移到了project/comment.js中

editor_file.js

提供了以下函数进行楼层map数组相关的操作

editor.file.getFloorFileList
editor.file.loadFloorFile
editor.file.saveFloorFile
editor.file.saveFloorFileAs

5个编辑模式有关的查询

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)});

5个编辑模式有关的编辑

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_mode.js

4个生成表格并绑定事件的函数

editor.mode.loc();
editor.mode.emenyitem();
editor.mode.floor();
editor.mode.tower();

切换模式

editor.mode.onmode('');
editor.mode.onmode('loc');
editor.mode.onmode('emenyitem');
editor.mode.onmode('floor');
editor.mode.onmode('tower');

在切换模式时,改动才会保存到文件,并且需要刷新页面使得editor能看到改动

表格的onchange的实现中,获得当前模式的方式.不注意的话,修改index.html中页面的结构,会被坑

var node = thisTr.parentNode;
while (!editor_mode._ids.hasOwnProperty(node.getAttribute('id'))) {
  node = node.parentNode;
}
editor_mode.onmode(editor_mode._ids[node.getAttribute('id')]);

drawMapGUI.html

重命名为editor.html

把editor的代码拆到了_server/editor.js中

以display:none的形式引入了index.html的dom,修改了原来的.gameCanvas #ui #data等的名字以避免冲突

通过main.init('editor')加载数据,移除了原有的editor.loadjs等

背景层如果未设置editor.bgY则通过运行时中的代码画背景

editor.updateMap中只画未定义快的报错,其他的由运行时中的代码完成

editor.ids[0] = 0; editor.indexs[0]=[0];

添加了editor.changeFloor用于切换楼层

注释的特殊指令

$range(evalstr:thiseval)$end
  限制取值范围,要求修改后的eval(evalstr)为true
$leaf(evalstr:thiseval)$end
  强制指定为叶节点,如果eval(evalstr)为true

//以下几个中选一个 [
$select(evalstr)$end
  渲染成<select>,选项为数组eval(evalstr)['values']
$input(evalstr)$end
  渲染成<input>
$textarea(evalstr)$end
  渲染成<textarea>
默认选项为$textarea()$end
// ]

todo & 目前的bug

event,after...在地图上没有标记,可以在右下角加类似于无id的红问号类似的绿色星号小标记
添加新图块只对地形好使,添加的新物品还是需要手动在project/items.js中加东西
目前未做$range(evalstr:thiseval)$end的检查
通过core.values.redJewel的方式设置物品加的数值,在全GUI下反而会不直观
idnum上限改到999,不需要在.js中手动设置idnum的话,根据数字范围来约定类型意义不大,而且400内随便输个数就发现已经被占了,体验极差
editor.html中独立换背景的功能不再需要,待移除
全GUI下编辑要经常保存修改后F5
目前的报错只是throw,如果不开F12注意不到有错误发生,修改没有生效
有待美化,以及做成标签页式的模式切换

5.7 KiB Raw Blame History