From b0d7ef713b38b1bac13c91aa703134d69d88ebd0 Mon Sep 17 00:00:00 2001 From: oc Date: Fri, 30 Nov 2018 23:57:08 +0800 Subject: [PATCH] v2.5.2 --- README.md | 3 ++- docs/element.md | 12 ++++++++++-- docs/event.md | 4 +++- libs/ui.js | 7 ++++--- project/floors/sample0.js | 1 + 更新说明.txt | 3 ++- 6 files changed, 22 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index f96d71d9..40c46a5b 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,8 @@ HTML5 canvas制作的魔塔样板，支持全平台游戏！ * [x] 怪物和NPC的行走图和朝向问题 * [x] 可以引入WindowSkin作为对话框的背景素材 -* [x] 对话框允许使用\t[标题,1.png]来绘制大头像图 +* [x] 允许使用\t[标题,1.png]来绘制大头像图 +* [x] 对话框的宽度可以根据文本长度自动调整 * [x] \r[red]可以动态调整剧情文本的颜色 * [x] 升级事件改用事件编辑器完成 * [x] 每层楼都增添该层的并行事件处理 diff --git a/docs/element.md b/docs/element.md index 7e790e90..fc633a07 100644 --- a/docs/element.md +++ b/docs/element.md @@ -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魔塔开始支持大地图。 diff --git a/docs/event.md b/docs/event.md index 2932be3f..468dd3ea 100644 --- a/docs/event.md +++ b/docs/event.md @@ -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则为下方。 diff --git a/libs/ui.js b/libs/ui.js index f8c4b7a7..e642d6b4 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -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; diff --git a/project/floors/sample0.js b/project/floors/sample0.js index 51810f8a..6cb7a5ae 100644 --- a/project/floors/sample0.js +++ b/project/floors/sample0.js @@ -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]你问我...？我也不知道啊...", diff --git a/更新说明.txt b/更新说明.txt index 5ed4cc46..82f7e95f 100644 --- a/更新说明.txt +++ b/更新说明.txt @@ -2,7 +2,8 @@ 怪物和NPC的行走图和朝向问题（详见文档） 可以引入WindowSkin作为对话框的背景素材 -对话框允许使用\t[标题,1.png]来绘制大头像图 +允许使用\t[标题,1.png]来绘制大头像图 +对话框的宽度可以根据文本长度自动调整 \r[red]可以动态调整剧情文本的颜色 升级事件改用事件编辑器完成 每层楼都增添该层的并行事件处理