This commit is contained in:
oc 2018-11-30 23:57:08 +08:00
parent 3bc047175d
commit b0d7ef713b
6 changed files with 22 additions and 8 deletions

View File

@ -57,7 +57,8 @@ HTML5 canvas制作的魔塔样板支持全平台游戏
* [x] 怪物和NPC的行走图和朝向问题
* [x] 可以引入WindowSkin作为对话框的背景素材
* [x] 对话框允许使用\t[标题,1.png]来绘制大头像图
* [x] 允许使用\t[标题,1.png]来绘制大头像图
* [x] 对话框的宽度可以根据文本长度自动调整
* [x] \r[red]可以动态调整剧情文本的颜色
* [x] 升级事件改用事件编辑器完成
* [x] 每层楼都增添该层的并行事件处理

View File

@ -305,7 +305,7 @@ floorId指定的是目标楼层的唯一标识符ID
**从2.1.1开始,楼层属性中提供了`upFloor`和`downFloor`两项。如果设置此项(比如`"upFloor": [2,3]`则写stair:upFloor或者楼传器的落点将用此点来替换楼梯位置即类似于RM中的上箭头。**
## 剧情文本控制与界面皮肤
## 剧情文本控制与对话框效果
在写剧情文本时,可以:
@ -314,7 +314,7 @@ floorId指定的是目标楼层的唯一标识符ID
- 使用`\r[...]`来动态修改局部文本的颜色,如`\r[red]`。
- 使用`${}`来计算一个表达式的值,如`${status:atk+status:def}`。
从V2.5.2开始,也允许绘制一张头像图在对话框中。
从V2.5.2开始,也允许绘制一张头像图在对话框中,只要通过`\t[1.png]`或`\t[标题,1.png]`的写法
详细信息请参见[剧情文本控制](event#text显示一段文字剧情)中的说明。
@ -326,6 +326,14 @@ floorId指定的是目标楼层的唯一标识符ID
!> 关于对话框效果请注意现在是采用WindowSkin的右下角两个32x32的图片作为对话框尖角进行绘制。因此请尽量使用群文件或网盘的常用素材中给出的WindowSkin素材均已进行对话框适配。如需使用来自第三方的WindowSkin素材请自行注意对话框的尖角问题或弃用`\b`效果。
另外一点是V2.5.2以后,对话框`\b`可以根据文字长度来自动控制文本框宽度,其基本控制原理如下:
- 如果用户存在手动换行`\n`,则选取**最长的一段话**作为文本框宽度。
- 如果用户不存在手动换行,则会将文本框宽度调整为**尽量刚好达到三行**的最佳宽度。
- 文本框宽度存在上下界,最终宽度一定会控制在该范围内。
该自动调整仅对`\b`的对话框效果有效。非对话框仍然会绘制整个界面的宽度。
## 大地图
从V2.4开始H5魔塔开始支持大地图。

View File

@ -207,7 +207,7 @@
对于hero和怪物也可以不写名字代表使用默认值。
从V2.5.2以后,新增了绘制大头像的功能。绘制大头像图的基本写法是`\t[1.png]`或者`\t[标题,1.png]`。图片需要请先在全塔属性中进行注册。
从V2.5.2以后,新增了绘制大头像的功能。绘制大头像图的基本写法是`\t[1.png]`或者`\t[标题,1.png]`。
``` js
"x,y": [ // 实际执行的事件列表
@ -223,6 +223,8 @@
]
```
!> 大头像的头像图需要在全塔属性中注册且必须是png格式不可以用jpg或者其他格式请自行转换。
除此以外,我们还能实现“对话框效果”,只要有`\b[...]`就可以。
- `\b[up]` 直接显示在当前点上方。同样把这里的up换成down则为下方。

View File

@ -314,7 +314,7 @@ ui.prototype.getTitleAndIcon = function (content) {
content=content.substring(index+1);
var ss=str.split(",");
if (ss.length==1) {
if (/^\w+\.png$/.test(ss[0])) {
if (/^[-\w.]+\.png$/.test(ss[0])) {
image = core.material.images.images[ss[0]];
}
else {
@ -334,7 +334,7 @@ ui.prototype.getTitleAndIcon = function (content) {
name=ss[0];
id = 'npc';
if (ss[1]=='hero') id = 'hero';
else if (/^\w+\.png$/.test(ss[1])) {
else if (/^[-\w.]+\.png$/.test(ss[1])) {
image = core.material.images.images[ss[1]];
}
else getInfo(ss[1]);
@ -505,13 +505,14 @@ ui.prototype.drawTextBox = function(content, showAll) {
var realContent = content.replace(/(\r|\\r)(\[.*?])?/g, "");
var leftSpace = 25, rightSpace = 12;
if (core.isset(px) && core.isset(py)) leftSpace = 20;
if (id=='hero' || core.isset(icon)) leftSpace = 62; // 行走图15+32+15
else if (core.isset(image)) leftSpace = 90; // 大头像10+70+10
var left = 7, right = 416 - left, width = right - left, validWidth = width - leftSpace - rightSpace;
// 对话框效果:改为动态计算
if (core.isset(px) && core.isset(py)) {
var min_width = 160, max_width = validWidth;
var min_width = 220 - leftSpace, max_width = validWidth;
core.setFont('ui', font);
validWidth = this.calTextBoxWidth('ui', realContent, min_width, max_width);
width = validWidth + leftSpace + rightSpace;

View File

@ -25,6 +25,7 @@ main.floors.sample0=
[ 88, 89, 90, 91, 92, 93, 94, 2, 81, 82, 83, 84, 86]
],
"firstArrive": [
{"type": "setText", "background": "winskin.png"},
"\t[样板提示]首次到达某层可以触发 firstArrive 事件该事件可类似于RMXP中的“自动执行脚本”。\n\n本事件支持一切的事件类型常常用来触发对话例如",
"\t[hero]\b[up,hero]我是谁?我从哪来?我又要到哪去?",
"\t[仙子,fairy]你问我...?我也不知道啊...",

View File

@ -2,7 +2,8 @@
怪物和NPC的行走图和朝向问题详见文档
可以引入WindowSkin作为对话框的背景素材
对话框允许使用\t[标题,1.png]来绘制大头像图
允许使用\t[标题,1.png]来绘制大头像图
对话框的宽度可以根据文本长度自动调整
\r[red]可以动态调整剧情文本的颜色
升级事件改用事件编辑器完成
每层楼都增添该层的并行事件处理