jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Merge pull request #210 from ckcz123/v2.0

Browse Source 
V2.0
This commit is contained in:
Zhang Chen 2018-09-13 16:37:30 +08:00 committed by GitHub
commit 5c1cce2d20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 451 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
_server/blockly/MotaAction.g4
View File

@ -187,12 +187,15 @@ action
| setValue_s
| show_s
| hide_s
| showFloorImg_s
| hideFloorImg_s
| trigger_s
| revisit_s
| exit_s
| setBlock_s
| showFloorImg_s
| hideFloorImg_s
| showBgFgMap_s
| hideBgFgMap_s
| setBgFgBlock_s
| setHeroIcon_s
| update_s
| updateEnemys_s
@ -420,6 +423,61 @@ var code = '{"type": "hide"'+floorstr+IdString_0+''+Int_0+'},\n';
return code;
*/;
trigger_s
: '触发事件' 'x' PosString ',' 'y' PosString Newline
/* trigger_s
tooltip : trigger: 立即触发另一个地点的事件
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=trigger%EF%BC%9A%E7%AB%8B%E5%8D%B3%E8%A7%A6%E5%8F%91%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%9C%B0%E7%82%B9%E7%9A%84%E4%BA%8B%E4%BB%B6
default : ["0","0"]
colour : this.eventColor
var code = '{"type": "trigger", "loc": ['+PosString_0+','+PosString_1+']},\n';
return code;
*/;
revisit_s
: '重启当前事件' Newline
/* revisit_s
tooltip : revisit: 立即重启当前事件
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=revisit%EF%BC%9A%E7%AB%8B%E5%8D%B3%E9%87%8D%E5%90%AF%E5%BD%93%E5%89%8D%E4%BA%8B%E4%BB%B6
colour : this.eventColor
var code = '{"type": "revisit"},\n';
return code;
*/;
exit_s
: '立刻结束当前事件' Newline
/* exit_s
tooltip : exit: 立刻结束当前事件
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=exit%EF%BC%9A%E7%AB%8B%E5%88%BB%E7%BB%93%E6%9D%9F%E5%BD%93%E5%89%8D%E4%BA%8B%E4%BB%B6
colour : this.eventColor
var code = '{"type": "exit"},\n';
return code;
*/;
setBlock_s
: '转变图块为' Int 'x' PosString? ',' 'y' PosString? '楼层' IdString? Newline
/* setBlock_s
tooltip : setBlock：设置某个图块,忽略坐标楼层则为当前事件
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=setblock%EF%BC%9A%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%AA%E5%9B%BE%E5%9D%97
colour : this.dataColor
default : [0,"","",""]
var floorstr = '';
if (PosString_0 && PosString_1) {
floorstr = ', "loc": ['+PosString_0+','+PosString_1+']';
}
IdString_0 = IdString_0 && (', "floorId": "'+IdString_0+'"');
var code = '{"type": "setBlock", "number":'+Int_0+floorstr+IdString_0+'},\n';
return code;
*/;
showFloorImg_s
: '显示贴图' 'x' EvalString? ',' 'y' EvalString? '楼层' IdString? Newline
@ -482,58 +540,83 @@ var code = '{"type": "hideFloorImg"'+floorstr+IdString_0+'},\n';
return code;
*/;
trigger_s
: '触发事件' 'x' PosString ',' 'y' PosString Newline
showBgFgMap_s
: '显示图层块' Bg_Fg_List 'x' EvalString? ',' 'y' EvalString? '楼层' IdString? Newline
/* trigger_s
tooltip : trigger: 立即触发另一个地点的事件
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=trigger%EF%BC%9A%E7%AB%8B%E5%8D%B3%E8%A7%A6%E5%8F%91%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%9C%B0%E7%82%B9%E7%9A%84%E4%BA%8B%E4%BB%B6
default : ["0","0"]
/* showBgFgMap_s
tooltip : showBgFgMap: 显示图层块，即背景图层/前景图层的某些图块，xy为左上角坐标，可用逗号分隔表示多个点
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=showFloorImg%ef%bc%9a%e6%98%be%e7%a4%ba%e8%b4%b4%e5%9b%be
default : ["bg","","",""]
colour : this.eventColor
var code = '{"type": "trigger", "loc": ['+PosString_0+','+PosString_1+']},\n';
var floorstr = '';
if (EvalString_0 && EvalString_1) {
var pattern1 = /^flag:[0-9a-zA-Z_][0-9a-zA-Z_\-:]*$/;
if(pattern1.test(EvalString_0) || pattern1.test(EvalString_1)){
EvalString_0=MotaActionFunctions.PosString_pre(EvalString_0);
EvalString_1=MotaActionFunctions.PosString_pre(EvalString_1);
EvalString_0=[EvalString_0,EvalString_1]
} else {
var pattern2 = /^([+-]?\d+)(,[+-]?\d+)*$/;
if(!pattern2.test(EvalString_0) || !pattern2.test(EvalString_1))throw new Error('坐标格式错误,请右键点击帮助查看格式');
EvalString_0=EvalString_0.split(',');
EvalString_1=EvalString_1.split(',');
if(EvalString_0.length!==EvalString_1.length)throw new Error('坐标格式错误,请右键点击帮助查看格式');
for(var ii=0;ii<EvalString_0.length;ii++)EvalString_0[ii]='['+EvalString_0[ii]+','+EvalString_1[ii]+']';
}
floorstr = ', "loc": ['+EvalString_0.join(',')+']';
}
IdString_0 = IdString_0 && (', "floorId": "'+IdString_0+'"');
var code = '{"type": "showBgFgMap", "name": "' + Bg_Fg_List_0 + '"' +floorstr+IdString_0+'},\n';
return code;
*/;
revisit_s
: '重启当前事件' Newline
hideBgFgMap_s
: '隐藏图层块' Bg_Fg_List 'x' EvalString? ',' 'y' EvalString? '楼层' IdString? Newline
/* revisit_s
tooltip : revisit: 立即重启当前事件
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=revisit%EF%BC%9A%E7%AB%8B%E5%8D%B3%E9%87%8D%E5%90%AF%E5%BD%93%E5%89%8D%E4%BA%8B%E4%BB%B6
/* hideBgFgMap_s
tooltip : hideBgFgMap: 隐藏图层块，即背景图层/前景图层的某些图块，xy为左上角坐标，可用逗号分隔表示多个点
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=hideFloorImg%ef%bc%9a%e9%9a%90%e8%97%8f%e8%b4%b4%e5%9b%be
default : ["bg","","",""]
colour : this.eventColor
var code = '{"type": "revisit"},\n';
var floorstr = '';
if (EvalString_0 && EvalString_1) {
var pattern1 = /^flag:[0-9a-zA-Z_][0-9a-zA-Z_\-:]*$/;
if(pattern1.test(EvalString_0) || pattern1.test(EvalString_1)){
EvalString_0=MotaActionFunctions.PosString_pre(EvalString_0);
EvalString_1=MotaActionFunctions.PosString_pre(EvalString_1);
EvalString_0=[EvalString_0,EvalString_1]
} else {
var pattern2 = /^([+-]?\d+)(,[+-]?\d+)*$/;
if(!pattern2.test(EvalString_0) || !pattern2.test(EvalString_1))throw new Error('坐标格式错误,请右键点击帮助查看格式');
EvalString_0=EvalString_0.split(',');
EvalString_1=EvalString_1.split(',');
if(EvalString_0.length!==EvalString_1.length)throw new Error('坐标格式错误,请右键点击帮助查看格式');
for(var ii=0;ii<EvalString_0.length;ii++)EvalString_0[ii]='['+EvalString_0[ii]+','+EvalString_1[ii]+']';
}
floorstr = ', "loc": ['+EvalString_0.join(',')+']';
}
IdString_0 = IdString_0 && (', "floorId": "'+IdString_0+'"');
var code = '{"type": "hideBgFgMap", "name": "' + Bg_Fg_List_0 + '"' +floorstr+IdString_0+'},\n';
return code;
*/;
exit_s
: '立刻结束当前事件' Newline
setBgFgBlock_s
: '转变图层块' Bg_Fg_List '为' Int 'x' PosString? ',' 'y' PosString? '楼层' IdString? Newline
/* exit_s
tooltip : exit: 立刻结束当前事件
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=exit%EF%BC%9A%E7%AB%8B%E5%88%BB%E7%BB%93%E6%9D%9F%E5%BD%93%E5%89%8D%E4%BA%8B%E4%BB%B6
colour : this.eventColor
var code = '{"type": "exit"},\n';
return code;
*/;
setBlock_s
: '转变图块为' Int 'x' PosString? ',' 'y' PosString? '楼层' IdString? Newline
/* setBlock_s
tooltip : setBlock：设置某个图块,忽略坐标楼层则为当前事件
/* setBgFgBlock_s
tooltip : setBgFgBlock：设置某个图层块,忽略坐标楼层则为当前点
helpUrl : https://ckcz123.github.io/mota-js/#/event?id=setblock%EF%BC%9A%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%AA%E5%9B%BE%E5%9D%97
colour : this.dataColor
default : [0,"","",""]
colour : this.eventColor
default : ["bg",0,"","",""]
var floorstr = '';
if (PosString_0 && PosString_1) {
floorstr = ', "loc": ['+PosString_0+','+PosString_1+']';
}
IdString_0 = IdString_0 && (', "floorId": "'+IdString_0+'"');
var code = '{"type": "setBlock", "number":'+Int_0+floorstr+IdString_0+'},\n';
var code = '{"type": "setBgFgBlock", "name": "' + Bg_Fg_List_0 + '", "number":'+Int_0+floorstr+IdString_0+'},\n';
return code;
*/;
@ -629,7 +712,7 @@ helpUrl : https://ckcz123.github.io/mota-js/#/event?id=changefloor%EF%BC%9A%E6%A
default : ["MT1","0","0",null,500]
colour : this.dataColor
DirectionEx_List_0 = DirectionEx_List_0 && (', "direction": "'+DirectionEx_List_0+'"');
Int_0 = Int_0 ?(', "time": '+Int_0):'';
Int_0 = (Int_0!=='') ?(', "time": '+Int_0):'';
var floorstr = '';
if (PosString_0 && PosString_1) {
floorstr = ', "loc": ['+PosString_0+','+PosString_1+']';
@ -1355,6 +1438,11 @@ B_1_List
: '不改变'|'设为粗体'|'取消粗体'
/*B_1_List ['null','true','false']*/;
Bg_Fg_List
: '背景层'|'前景层'
/*Bg_Fg_List ['bg','fg']*/;
Bool: 'TRUE'
| 'FALSE'
;
@ -1474,8 +1562,10 @@ ActionParser.prototype.parse = function (obj,type) {
obj.floorType=obj.floorId;
delete obj.floorId;
}
if (!this.isset(obj.time)) obj.time=500;
return MotaActionBlocks['changeFloor_m'].xmlText([
obj.floorType||'floorId',obj.floorId,obj.stair||'loc',obj.loc[0],obj.loc[1],obj.direction,obj.time||0,!this.isset(obj.portalWithoutTrigger)
obj.floorType||'floorId',obj.floorId,obj.stair||'loc',obj.loc[0],obj.loc[1],obj.direction,
obj.time,!this.isset(obj.portalWithoutTrigger)
]);
case 'point':
@ -1607,6 +1697,11 @@ ActionParser.prototype.parseAction = function() {
this.next = MotaActionBlocks['hide_s'].xmlText([
x_str.join(','),y_str.join(','),data.floorId||'',data.time||0,this.next]);
break;
case "setBlock": // 设置图块
data.loc=data.loc||['',''];
this.next = MotaActionBlocks['setBlock_s'].xmlText([
data.number||0,data.loc[0],data.loc[1],data.floorId||'',this.next]);
break;
case "showFloorImg": // 显示贴图
data.loc=data.loc||[];
if (!(data.loc[0] instanceof Array))
@ -1631,10 +1726,34 @@ ActionParser.prototype.parseAction = function() {
this.next = MotaActionBlocks['hideFloorImg_s'].xmlText([
x_str.join(','),y_str.join(','),data.floorId||'',this.next]);
break;
case "setBlock": // 设置图块
case "showBgFgMap": // 显示图层块
data.loc=data.loc||[];
if (!(data.loc[0] instanceof Array))
data.loc = [data.loc];
var x_str=[],y_str=[];
data.loc.forEach(function (t) {
x_str.push(t[0]);
y_str.push(t[1]);
})
this.next = MotaActionBlocks['showBgFgMap_s'].xmlText([
data.name||'bg', x_str.join(','),y_str.join(','),data.floorId||'',this.next]);
break;
case "hideBgFgMap": // 隐藏图层块
data.loc=data.loc||[];
if (!(data.loc[0] instanceof Array))
data.loc = [data.loc];
var x_str=[],y_str=[];
data.loc.forEach(function (t) {
x_str.push(t[0]);
y_str.push(t[1]);
})
this.next = MotaActionBlocks['hideBgFgMap_s'].xmlText([
data.name||'bg', x_str.join(','),y_str.join(','),data.floorId||'',this.next]);
break;
case "setBgFgBlock": // 设置图块
data.loc=data.loc||['',''];
this.next = MotaActionBlocks['setBlock_s'].xmlText([
data.number||0,data.loc[0],data.loc[1],data.floorId||'',this.next]);
this.next = MotaActionBlocks['setBgFgBlock_s'].xmlText([
data.name||"bg", data.number||0,data.loc[0],data.loc[1],data.floorId||'',this.next]);
break;
case "setHeroIcon": // 改变勇士
this.next = MotaActionBlocks['setHeroIcon_s'].xmlText([

3
_server/editor_blockly.js
View File

@ -115,6 +115,9 @@ editor_blockly = function () {
MotaActionBlocks['hide_s'].xmlText(),
MotaActionBlocks['showFloorImg_s'].xmlText(),
MotaActionBlocks['hideFloorImg_s'].xmlText(),
MotaActionBlocks['showBgFgMap_s'].xmlText(),
MotaActionBlocks['hideBgFgMap_s'].xmlText(),
MotaActionBlocks['setBgFgBlock_s'].xmlText(),
MotaActionBlocks['trigger_s'].xmlText(),
MotaActionBlocks['move_s'].xmlText(),
MotaActionBlocks['jump_s'].xmlText(),

2
docs/api.md
View File

@ -162,7 +162,7 @@ core.trigger(x, y) [异步]
core.clearMap(mapName)
清空某个画布图层。
mapName可为'bg', 'event', 'fg', 'event2', 'hero', 'animate', 'weather', 'ui', 'data', 'all'之一。
mapName可为'bg', 'event', 'hero', 'event2', 'fg', 'damage', 'animate', 'weather', 'ui', 'data', 'all'之一。
如果mapName为'all'，则为清空所有画布；否则只清空对应的画布。

116
docs/event.md
View File

@ -459,38 +459,6 @@ revisit常常使用在一些商人之类的地方，当用户购买物品后不
]
```
### hideFloorImg：隐藏贴图
使用`{"type":"hideFloorImg"}`可以隐藏某个楼层的贴图。
有关贴图说明请参见[使用自己的图片作为某层楼的背景/前景素材](personalization#使用自己的图片作为某层楼的背景前景素材)。
``` js
"x,y": [ // 实际执行的事件列表
{"type": "hideFloorImg", "loc": [3,6], "floorId": "MT1"}, // 隐藏[3,6]的贴图
{"type": "hideFloorImg", "loc": [3,6]}, // 如果是当前层，则可以省略floorId项
{"type": "hideFloorImg", "loc": [[3,6],[2,9],[1,2]]} // 我们也可以同时隐藏多个贴图。
]
```
loc为要隐藏的贴图的左上角坐标，可以简单的写[x,y]代表一个点，也可以写个二维数组[[x1,y1],[x2,y2],...]来同时显示多个点。
如果同时存在若干个贴图都是是该坐标为左上角，则这些贴图全部会被隐藏。
floorId为目标点的楼层，如果是当前楼层可以忽略不写。
### showFloorImg：显示贴图
使用`{"type":"showFloorImg"}`可以显示某个楼层的贴图。
其做法和参数，和隐藏贴图是完全一致的。
``` js
"x,y": [ // 实际执行的事件列表
{"type": "showFloorImg", "loc": [3,6], "floorId": "MT1"}, // 显示[3,6]的贴图
]
```
### setBlock：设置某个图块
我们可以采用 `{"type": "setBlock"}` 来改变某个地图块。
@ -517,6 +485,90 @@ number为**要更改到的数字**，有关“数字”的定义详见参见[素
图块更改往往与[同一个点的多事件处理](#同一个点的多事件处理)相关。
### hideFloorImg：隐藏楼层贴图
使用`{"type":"hideFloorImg"}`可以隐藏某个楼层的贴图。
有关贴图说明请参见[使用自己的图片作为某层楼的背景/前景素材](personalization#使用自己的图片作为某层楼的背景前景素材)。
``` js
"x,y": [ // 实际执行的事件列表
{"type": "hideFloorImg", "loc": [3,6], "floorId": "MT1"}, // 隐藏[3,6]的贴图
{"type": "hideFloorImg", "loc": [3,6]}, // 如果是当前层，则可以省略floorId项
{"type": "hideFloorImg", "loc": [[3,6],[2,9],[1,2]]} // 我们也可以同时隐藏多个贴图。
]
```
loc为要隐藏的贴图的左上角坐标，可以简单的写[x,y]代表一个点，也可以写个二维数组[[x1,y1],[x2,y2],...]来同时显示多个点。
如果同时存在若干个贴图都是是该坐标为左上角，则这些贴图全部会被隐藏。
floorId为目标点的楼层，如果是当前楼层可以忽略不写。
### showFloorImg：显示楼层贴图
使用`{"type":"showFloorImg"}`可以显示某个楼层的贴图。
其做法和参数，和隐藏贴图是完全一致的。
``` js
"x,y": [ // 实际执行的事件列表
{"type": "showFloorImg", "loc": [3,6], "floorId": "MT1"}, // 显示[3,6]的贴图
]
```
### hideBgFgMap：隐藏楼层的某些背景或前景图块
使用`{"type":"hideBgFgMap"}`可以隐藏某个楼层的背景或前景图块。
从V2.4.1开始，允许绘制三层图层（背景层，事件层和前景层）。使用`hideBgFgMap`可以隐藏背景或前景层中的图块。
``` js
"x,y": [ // 实际执行的事件列表
{"type": "hideBgFgMap", "name": "bg", "loc": [3,6], "floorId": "MT1"}, // 隐藏MT1层[3,6]的背景层图块
{"type": "hideBgFgMap", "name": "bg", "loc": [3,6]}, // 如果是当前层，则可以省略floorId项
{"type": "hideBgFgMap", "name": "fg", "loc": [[3,6],[2,9],[1,2]]} // 我们也可以同时隐藏多个贴图。
]
```
name为必选的，且只能是`bg`和`fg`之一，分别代表背景图层和前景图层。
loc为要隐藏的贴图的左上角坐标，可以简单的写[x,y]代表一个点，也可以写个二维数组[[x1,y1],[x2,y2],...]来同时显示多个点。
floorId为目标点的楼层，如果是当前楼层可以忽略不写。
### showBgFgMap：显示楼层贴图
使用`{"type":"showFloorImg"}`可以显示某个楼层的贴图。
其做法和参数，和隐藏贴图是完全一致的。
``` js
"x,y": [ // 实际执行的事件列表
{"type": "showBgFgMap", "name": "bg", "loc": [3,6], "floorId": "MT1"}, // 显示MT1层[3,6]的前景层图块
]
```
### setBgFgBlock：设置某个背景或前景层图块
我们可以采用 `{"type": "setBgFgBlock"}` 来改变某个背景或前景层地图块。
``` js
"x,y": [ // 实际执行的事件列表
{"type": "setBgFgBlock", "name": "bg", "floorId": "MT1", "loc": [3,3], "number": 233}, // 将MT1层背景层的(3,3)点变成数字233
{"type": "setBgFgBlock", "name": "bg", "loc": [2,1], "number": 121}, // 省略floorId则默认为本层
{"type": "setBgFgBlock", "name": "fg", "number": 57}, // loc也可省略，默认为当前点
]
```
name为必选的，且只能是`bg`和`fg`之一，分别代表背景层和前景层。
floorId为可选的，表示要更改的目标楼层。如果忽略此项，则默认为当前楼层。
loc为可选的，表示要更改地图块的坐标。如果忽略此项，则默认为当前事件点。
图块更改后，其隐藏/显示状态不会发生任何改变，即原来是隐藏还是会不显示。可以使用`showBgFgMap`事件将其显示出来。
### setHeroIcon：更改角色行走图
使用`{"type": "setHeroIcon"}`可以更改角色行走图。

17
docs/personalization.md
View File

@ -10,11 +10,12 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
所有图层从低往高依次如下：
- bg：背景层；绘制地面素材，或者作为背景的图片素材
- bg：背景层；绘制背景图层素材bgmap，和背景贴图
- event：事件层；所有事件（道具、墙壁、NPC、怪物等）都绘制在这一层进行处理
- hero：勇士层；主要用来绘制勇士
- event2：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位），也可以用来绘制该层的前景图片素材
- fg：显伤层；主要用来绘制怪物显伤和领域显伤
- event2：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位）
- fg：前景层；绘制前景图层素材fgmap，和前景贴图
- damage：显伤层；主要用来绘制怪物显伤和领域显伤
- animate：动画层；主要用来绘制动画。showImage事件绘制的图片也是在这一层。
- weather：天气层；主要用来绘制天气（雨/雪）
- curtain：色调层；用来控制当前楼层的画面色调
@ -43,6 +44,16 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
如果你需要某个素材已经存在，则可以直接将其覆盖images目录下的同名文件，就能看到效果。
### 背景和前景图层
从V2.4.1开始，样板允许多个图层叠加，最多支持背景层、事件层和前景层三个图层。
在地图编辑器中绘图时，下拉框选中“背景层”或“前景层”即可在对应的图层上绘图。
其中背景层和前景层仅为静态绘图（不支持动画），但可以使用自动元件（autotile）。
可以使用`showBgFgMap`, `hideBgFgMap`, `setBgFgBlock`等事件对背景和前景图层进行操作。
### 使用自己的图片作为某层楼的背景/前景素材
由于HTML5功能（素材）有限，导致了对很多比较复杂的素材（比如房子内）等无法有着较好的绘图方式。

7
editor-mobile.html
View File

@ -398,15 +398,16 @@
<img class="tools" id='img-settings'>
<p class="statusLabel tools" id="hard"></p>
</div>
<div id="gif"></div>
<div id="gif2"></div>
<div id="curtain"></div>
<div id="gameDraw">
<div id="gif"></div>
<div id="gif2"></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='hero' width='416' height='416'></canvas>
<!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas>

7
editor.html
View File

@ -383,15 +383,16 @@
<img class="tools" id='img-settings'>
<p class="statusLabel tools" id="hard"></p>
</div>
<div id="gif"></div>
<div id="gif2"></div>
<div id="curtain"></div>
<div id="gameDraw">
<div id="gif"></div>
<div id="gif2"></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='hero' width='416' height='416'></canvas>
<!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas>

7
index.html
View File

@ -108,15 +108,16 @@
<img class="tools" id='img-settings'>
<p class="statusLabel tools" id="hard"></p>
</div>
<div id="gif"></div>
<div id="gif2"></div>
<div id="curtain"></div>
<div id="gameDraw">
<div id="gif"></div>
<div id="gif2"></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='hero' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event2' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas>

6
libs/actions.js
View File

@ -1574,19 +1574,19 @@ actions.prototype.clickSwitchs = function (x,y) {
break;
case 3:
core.flags.displayEnemyDamage=!core.flags.displayEnemyDamage;
core.updateFg();
core.updateDamage();
core.setLocalStorage('enemyDamage', core.flags.displayEnemyDamage);
core.ui.drawSwitchs();
break;
case 4:
core.flags.displayCritical=!core.flags.displayCritical;
core.updateFg();
core.updateDamage();
core.setLocalStorage('critical', core.flags.displayCritical);
core.ui.drawSwitchs();
break;
case 5:
core.flags.displayExtraDamage=!core.flags.displayExtraDamage;
core.updateFg();
core.updateDamage();
core.setLocalStorage('extraDamage', core.flags.displayExtraDamage);
core.ui.drawSwitchs();
break;

80
libs/control.js
View File

@ -1437,7 +1437,7 @@ control.prototype.snipe = function (snipes) {
var animateCurrent = 0;
var animateTime = 0;
core.canvas.fg.textAlign = 'left';
core.canvas.damage.textAlign = 'left';
var animate=window.setInterval(function() {
@ -1455,22 +1455,22 @@ control.prototype.snipe = function (snipes) {
var nowX = 32*x+dx, nowY = 32*y+dy;
// 清空上一次
core.clearMap('fg', nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32);
core.clearMap('damage', nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32);
core.canvas.event.clearRect(nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32);
core.canvas.event2.clearRect(nowX-2*scan[direction].x, nowY-2*scan[direction].y-32, 32, 32)
core.drawBlock(snipe.block, animateCurrent, dx, dy);
if (core.hasItem('book')) {
// drawFG
core.setFillStyle('fg', '#000000');
core.canvas.fg.fillText(snipe.damage, nowX + 2, nowY + 30);
core.canvas.fg.fillText(snipe.damage, nowX, nowY + 30);
core.canvas.fg.fillText(snipe.damage, nowX + 2, nowY + 32);
core.canvas.fg.fillText(snipe.damage, nowX, nowY + 32);
// drawDamage
core.setFillStyle('damage', '#000000');
core.canvas.damage.fillText(snipe.damage, nowX + 2, nowY + 30);
core.canvas.damage.fillText(snipe.damage, nowX, nowY + 30);
core.canvas.damage.fillText(snipe.damage, nowX + 2, nowY + 32);
core.canvas.damage.fillText(snipe.damage, nowX, nowY + 32);
core.setFillStyle('fg', snipe.color);
core.canvas.fg.fillText(snipe.damage, nowX + 1, nowY + 31);
core.setFillStyle('damage', snipe.color);
core.canvas.damage.fillText(snipe.damage, nowX + 1, nowY + 31);
}
})
@ -1589,18 +1589,18 @@ control.prototype.setFg = function(color, time, callback) {
}
////// 更新全地图显伤 //////
control.prototype.updateFg = function () {
control.prototype.updateDamage = function () {
if (!core.isset(core.status.thisMap) || !core.isset(core.status.thisMap.blocks)) return;
// 更新显伤
var mapBlocks = core.status.thisMap.blocks;
core.clearMap('fg');
core.clearMap('damage');
// 没有怪物手册
if (!core.hasItem('book')) return;
core.setFont('fg', "bold 11px Arial");
core.setFont('damage', "bold 11px Arial");
var hero_hp = core.status.hero.hp;
if (core.flags.displayEnemyDamage || core.flags.displayCritical) {
core.canvas.fg.textAlign = 'left';
core.canvas.damage.textAlign = 'left';
for (var b = 0; b < mapBlocks.length; b++) {
var x = mapBlocks[b].x, y = mapBlocks[b].y;
if (core.isset(mapBlocks[b].event) && mapBlocks[b].event.cls.indexOf('enemy')==0
@ -1637,14 +1637,14 @@ control.prototype.updateFg = function () {
damage += "+";
}
core.setFillStyle('fg', '#000000');
core.canvas.fg.fillText(damage, 32 * x + 2, 32 * (y + 1) - 2);
core.canvas.fg.fillText(damage, 32 * x, 32 * (y + 1) - 2);
core.canvas.fg.fillText(damage, 32 * x + 2, 32 * (y + 1));
core.canvas.fg.fillText(damage, 32 * x, 32 * (y + 1));
core.setFillStyle('damage', '#000000');
core.canvas.damage.fillText(damage, 32 * x + 2, 32 * (y + 1) - 2);
core.canvas.damage.fillText(damage, 32 * x, 32 * (y + 1) - 2);
core.canvas.damage.fillText(damage, 32 * x + 2, 32 * (y + 1));
core.canvas.damage.fillText(damage, 32 * x, 32 * (y + 1));
core.setFillStyle('fg', color);
core.canvas.fg.fillText(damage, 32 * x + 1, 32 * (y + 1) - 1);
core.setFillStyle('damage', color);
core.canvas.damage.fillText(damage, 32 * x + 1, 32 * (y + 1) - 1);
}
// 临界显伤
@ -1653,13 +1653,13 @@ control.prototype.updateFg = function () {
if (critical.length>0) critical=critical[0];
critical = core.formatBigNumber(critical[0]);
if (critical == '???') critical = '?';
core.setFillStyle('fg', '#000000');
core.canvas.fg.fillText(critical, 32 * x + 2, 32 * (y + 1) - 2 - 10);
core.canvas.fg.fillText(critical, 32 * x, 32 * (y + 1) - 2 - 10);
core.canvas.fg.fillText(critical, 32 * x + 2, 32 * (y + 1) - 10);
core.canvas.fg.fillText(critical, 32 * x, 32 * (y + 1) - 10);
core.setFillStyle('fg', '#FFFFFF');
core.canvas.fg.fillText(critical, 32 * x + 1, 32 * (y + 1) - 1 - 10);
core.setFillStyle('damage', '#000000');
core.canvas.damage.fillText(critical, 32 * x + 2, 32 * (y + 1) - 2 - 10);
core.canvas.damage.fillText(critical, 32 * x, 32 * (y + 1) - 2 - 10);
core.canvas.damage.fillText(critical, 32 * x + 2, 32 * (y + 1) - 10);
core.canvas.damage.fillText(critical, 32 * x, 32 * (y + 1) - 10);
core.setFillStyle('damage', '#FFFFFF');
core.canvas.damage.fillText(critical, 32 * x + 1, 32 * (y + 1) - 1 - 10);
}
}
@ -1667,20 +1667,20 @@ control.prototype.updateFg = function () {
}
// 如果是领域&夹击
if (core.flags.displayExtraDamage) {
core.canvas.fg.textAlign = 'center';
core.canvas.damage.textAlign = 'center';
for (var x=0;x<core.bigmap.width;x++) {
for (var y=0;y<core.bigmap.height;y++) {
var damage = core.status.checkBlock.damage[x+core.bigmap.width*y];
if (damage>0) {
damage = core.formatBigNumber(damage);
core.setFillStyle('fg', '#000000');
core.canvas.fg.fillText(damage, 32 * x + 17, 32 * (y + 1) - 13);
core.canvas.fg.fillText(damage, 32 * x + 15, 32 * (y + 1) - 15);
core.canvas.fg.fillText(damage, 32 * x + 17, 32 * (y + 1) - 15);
core.canvas.fg.fillText(damage, 32 * x + 15, 32 * (y + 1) - 13);
core.setFillStyle('damage', '#000000');
core.canvas.damage.fillText(damage, 32 * x + 17, 32 * (y + 1) - 13);
core.canvas.damage.fillText(damage, 32 * x + 15, 32 * (y + 1) - 15);
core.canvas.damage.fillText(damage, 32 * x + 17, 32 * (y + 1) - 15);
core.canvas.damage.fillText(damage, 32 * x + 15, 32 * (y + 1) - 13);
core.setFillStyle('fg', '#FF7F00');
core.canvas.fg.fillText(damage, 32 * x + 16, 32 * (y + 1) - 14);
core.setFillStyle('damage', '#FF7F00');
core.canvas.damage.fillText(damage, 32 * x + 16, 32 * (y + 1) - 14);
}
}
}
@ -2740,7 +2740,7 @@ control.prototype.updateStatusBar = function () {
core.statusBar.image.settings.src = core.statusBar.icons.settings.src;
}
core.updateFg();
core.updateDamage();
}
////// 屏幕分辨率改变后重新自适应 //////
@ -2933,8 +2933,6 @@ control.prototype.resize = function(clientWidth, clientHeight) {
rules: {
width: (canvasWidth - SPACE*2) + unit,
height:(canvasWidth - SPACE*2) + unit,
top: (canvasTop + SPACE) + unit,
right: SPACE + unit,
}
},
{
@ -2942,8 +2940,6 @@ control.prototype.resize = function(clientWidth, clientHeight) {
rules: {
width: (canvasWidth - SPACE*2) + unit,
height:(canvasWidth - SPACE*2) + unit,
top: (canvasTop + SPACE) + unit,
right: SPACE + unit,
}
},
{
@ -2951,8 +2947,6 @@ control.prototype.resize = function(clientWidth, clientHeight) {
rules: {
width: (canvasWidth - SPACE*2) + unit,
height:(canvasWidth - SPACE*2) + unit,
top: (canvasTop + SPACE) + unit,
right: SPACE + unit,
}
},
{

11
libs/core.js
View File

@ -73,7 +73,7 @@ function core() {
scale: 1.0,
}
this.bigmap = {
canvas: ["bg", "event", "event2", "fg", "route"],
canvas: ["bg", "event", "event2", "fg", "damage", "route"],
offsetX: 0, // in pixel
offsetY: 0,
width: 13, // map width and height
@ -743,6 +743,11 @@ core.prototype.setBlock = function (number, x, y, floorId) {
core.maps.setBlock(number, x, y, floorId);
}
////// 改变图层块 //////
core.prototype.setBgFgBlock = function (name, number, x, y, floorId) {
core.maps.setBgFgBlock(name, number, x, y, floorId);
}
////// 添加一个全局动画 //////
core.prototype.addGlobalAnimate = function (block) {
core.maps.addGlobalAnimate(block);
@ -799,8 +804,8 @@ core.prototype.setFg = function(color, time, callback) {
}
////// 更新全地图显伤 //////
core.prototype.updateFg = function () {
core.control.updateFg();
core.prototype.updateDamage = function () {
core.control.updateDamage();
}
////// 测试是否拥有某个特殊属性 //////

38
libs/events.js
View File

@ -399,6 +399,16 @@ events.prototype.doAction = function() {
}
else this.doAction();
break;
case "setBlock": // 设置某图块
{
if (core.isset(data.loc)) {
x=core.calValue(data.loc[0]);
y=core.calValue(data.loc[1]);
}
core.setBlock(data.number, x, y, data.floorId);
this.doAction();
break;
}
case "showFloorImg": // 显示贴图
if (!core.isset(data.loc))
data.loc = [x,y];
@ -419,13 +429,33 @@ events.prototype.doAction = function() {
core.events.doAction();
})
break;
case "setBlock": // 设置某图块
case "showBgFgMap": // 显示图层块
if (!core.isset(data.loc))
data.loc = [x,y];
if ((typeof data.loc[0] == 'number' || typeof data.loc[0] == 'string')
&& (typeof data.loc[1] == 'number' || typeof data.loc[1] == 'string'))
data.loc = [[core.calValue(data.loc[0]), core.calValue(data.loc[1])]];
core.maps.setBgFgMap("show", data.name, data.loc, data.floorId, function() {
core.events.doAction();
})
break;
case "hideBgFgMap": // 隐藏图层块
if (!core.isset(data.loc))
data.loc = [x,y];
if ((typeof data.loc[0] == 'number' || typeof data.loc[0] == 'string')
&& (typeof data.loc[1] == 'number' || typeof data.loc[1] == 'string'))
data.loc = [[core.calValue(data.loc[0]), core.calValue(data.loc[1])]];
core.maps.setBgFgMap("hide", data.name, data.loc, data.floorId, function() {
core.events.doAction();
})
break;
case "setBgFgBlock": // 设置图层块
{
if (core.isset(data.loc)) {
x=core.calValue(data.loc[0]);
y=core.calValue(data.loc[1]);
}
core.setBlock(data.number, x, y, data.floorId);
core.setBgFgBlock(data.name, data.number, x, y, data.floorId);
this.doAction();
break;
}
@ -1195,7 +1225,9 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback
// 更改BGM
if (core.isset(core.floors[floorId].bgm)) {
core.playBgm(core.floors[floorId].bgm);
var bgm = core.floors[floorId].bgm;
if (bgm instanceof Array) bgm = bgm[0];
core.playBgm(bgm);
}
// 不存在事件时，更改画面色调

95
libs/maps.js
View File

@ -249,7 +249,7 @@ maps.prototype.canMoveHero = function(x,y,direction,floorId) {
var nowBlock = core.getBlock(x,y,floorId);
if (nowBlock!=null){
nowId = nowBlock.block.event.id;
var nowId = nowBlock.block.event.id;
var nowIsArrow = nowId.slice(0, 5).toLowerCase() == 'arrow';
if(nowIsArrow){
var nowArrow = nowId.slice(5).toLowerCase();
@ -267,7 +267,7 @@ maps.prototype.canMoveHero = function(x,y,direction,floorId) {
var nx = x+scan[direction].x, ny = y+scan[direction].y;
var nextBlock = core.getBlock(nx,ny);
if (nextBlock!=null){
nextId = nextBlock.block.event.id;
var nextId = nextBlock.block.event.id;
// 遇到单向箭头处理
var isArrow = nextId.slice(0, 5).toLowerCase() == 'arrow';
if(isArrow){
@ -340,20 +340,54 @@ maps.prototype.drawBlock = function (block, animate, dx, dy) {
}
}
////// 背景/前景图块的绘制 //////
maps.prototype.drawBgFgMap = function (floorId, canvas, name) {
var width = core.floors[floorId].width || 13;
var height = core.floors[floorId].height || 13;
var groundId = core.floors[floorId].defaultGround || "ground";
var blockIcon = core.material.icons.terrains[groundId];
var blockImage = core.material.images.terrains;
var getMapArray = function (name) {
var arr = core.clone(core.floors[floorId][name+"map"] || []);
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
arr[y] = arr[y] || [];
if (core.hasFlag(name + "_" + floorId + "_" + x + "_" + y)) arr[y][x] = 0;
else arr[y][x] = core.getFlag(name + "v_" + floorId + "_" + x + "_" + y, arr[y][x] || 0);
}
}
return arr;
}
var arr = getMapArray(name);
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (name=='bg')
canvas.drawImage(blockImage, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32);
if (arr[y][x]>0) {
var block = core.maps.initBlock(x, y, arr[y][x]);
if (core.isset(block.event)) {
var id = block.event.id, cls = block.event.cls;
if (cls == 'autotile')
core.drawAutotile(canvas, arr, block, 32, 0, 0);
else
canvas.drawImage(core.material.images[cls], 0, core.material.icons[cls][id] * 32, 32, 32, x * 32, y * 32, 32, 32);
}
}
}
}
}
////// 绘制某张地图 //////
maps.prototype.drawMap = function (mapName, callback) {
core.clearMap('all');
core.removeGlobalAnimate(null, null, true);
var drawBg = function(){
var groundId = core.floors[mapName].defaultGround || "ground";
var blockIcon = core.material.icons.terrains[groundId];
var blockImage = core.material.images.terrains;
for (var x = 0; x < core.bigmap.width; x++) {
for (var y = 0; y < core.bigmap.height; y++) {
core.canvas.bg.drawImage(blockImage, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32);
}
}
core.maps.drawBgFgMap(mapName, core.canvas.bg, "bg");
core.maps.drawBgFgMap(mapName, core.canvas.fg, "fg");
var images = [];
if (core.isset(core.floors[mapName].images)) {
@ -385,9 +419,9 @@ maps.prototype.drawMap = function (mapName, callback) {
}
}
else if (t[3]==1)
core.canvas.event2.drawImage(image, 32*dx, 32*dy, image.width, image.height);
core.canvas.fg.drawImage(image, 32*dx, 32*dy, image.width, image.height);
else if (t[3]==2) {
core.canvas.event2.drawImage(image, 0, 0, image.width, image.height-32,
core.canvas.fg.drawImage(image, 0, 0, image.width, image.height-32,
32*dx, 32*dy, image.width, image.height-32);
core.canvas.bg.drawImage(image, 0, image.height-32, image.width, 32,
32*dx, 32*dy + image.height - 32, image.width, 32);
@ -435,6 +469,7 @@ maps.prototype.drawMap = function (mapName, callback) {
core.clearMap('bg');
core.clearMap('event');
core.clearMap('event2');
core.clearMap('fg');
drawBg();
drawEvent();
core.setGlobalAnimate(core.values.animateSpeed);
@ -957,6 +992,18 @@ maps.prototype.setBlock = function (number, x, y, floorId) {
}
}
////// 改变图层块 //////
maps.prototype.setBgFgBlock = function (name, number, x, y, floorId) {
floorId = floorId || core.status.floorId;
if (!core.isset(number) || !core.isset(x) || !core.isset(y)) return;
if (x<0 || x>=core.bigmap.width || y<0 || y>=core.bigmap.height) return;
if (name!='bg' && name!='fg') return;
core.setFlag(name+"v_"+floorId+"_"+x+"_"+y, number);
if (floorId == core.status.floorId)
core.drawMap(floorId);
}
////// 添加一个全局动画 //////
maps.prototype.addGlobalAnimate = function (b) {
if (main.mode=='editor' && main.editor.disableGlobalAnimate) return;
@ -1105,6 +1152,28 @@ maps.prototype.setFloorImage = function (type, loc, floorId, callback) {
}
}
maps.prototype.setBgFgMap = function (type, name, loc, floorId, callback) {
if (type!='show') type='hide';
if (name!='fg') name='bg';
if (typeof loc[0] == 'number' && typeof loc[1] == 'number')
loc = [loc];
floorId = floorId||core.status.floorId;
if (loc.length==0) return;
loc.forEach(function (t) {
var x=t[0], y=t[1];
var flag = name+"_"+floorId+"_"+x+"_"+y;
core.setFlag(flag, type=='show'?false:true);
})
if (floorId==core.status.floorId) {
core.drawMap(floorId, callback);
}
else {
if (core.isset(callback)) callback();
}
}
maps.prototype.resetMap = function(floorId) {
var floorId = floorId||core.status.floorId;
core.status.maps[floorId] = this.loadFloor(floorId);

17
libs/ui.js
View File

@ -529,7 +529,7 @@ ui.prototype.drawTextBox = function(content) {
core.clearMap("ui", content_left, content_top - 18, validWidth, top + height - content_top + 10);
core.setAlpha('ui', textAttribute.background[3]);
core.setFillStyle('ui', core.arrayToRGB(textAttribute.background));
core.fillRect("ui", content_left, content_top - 18, validWidth, top + height - content_top + 10);
core.fillRect("ui", content_left, content_top - 18, validWidth, top + height - content_top + 11);
core.setAlpha('ui', textAttribute.text[3]);
core.setFillStyle('ui', core.arrayToRGB(textAttribute.text));
@ -1826,15 +1826,9 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, cente
tempCanvas.canvas.height = tempHeight;
tempCanvas.clearRect(0, 0, tempWidth, tempHeight);
var groundId = core.floors[floorId].defaultGround || "ground";
var blockIcon = core.material.icons.terrains[groundId];
var blockImage = core.material.images.terrains;
// background
for (var j=0;j<mh;j++) {
for (var i=0;i<mw;i++) {
tempCanvas.drawImage(blockImage, 0, blockIcon * 32, 32, 32, i * 32, j * 32, 32, 32);
}
}
// background map
core.maps.drawBgFgMap(floorId, tempCanvas, "bg");
// background image
var images = [];
if (core.isset(core.floors[floorId].images)) {
@ -1882,6 +1876,9 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, cente
var height = core.material.images.images[heroIcon].height/4;
tempCanvas.drawImage(core.material.images.images[heroIcon], icon.stop * 32, icon.loc * height, 32, height, 32*heroLoc.x, 32*heroLoc.y+32-height, 32, height);
}
// foreground map
core.maps.drawBgFgMap(floorId, tempCanvas, "fg");
// draw fg
images.forEach(function (t) {
var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2];

6
styles.css
View File

@ -280,6 +280,10 @@ span#poison, span#weak, span#curse, span#pickaxe, span#bomb, span#fly {
z-index: 60;
}
#damage {
z-index: 65;
}
#animate {
z-index: 70;
}
@ -289,7 +293,7 @@ span#poison, span#weak, span#curse, span#pickaxe, span#bomb, span#fly {
}
#route {
z-index: 105;
z-index: 95;
}
#ui {