Skip to content

关于行高控制器

基础要求

先尝试回答下面的问题:什么是文本域、文本光标?什么是窗口字符、底层字符?窗口字符分为哪些类型?窗口字符、底层字符有哪些固定格式?需要先了解基础知识哦!

如果你对上述问题有疑问,那么说明你还不了解 窗口字符。

需要去看看:”23.窗口字符 > 关于窗口字符.docx”。

相关插件

核心插件:

◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心

插件本体:

◆Drill_DialogTextLineHeight 窗口字符 - 行高控制器

该插件介绍文本段落的行高设置,

包括行上增高、行下增高、锁定行高、行上补正、清零设置。

我们在设计游戏并填写文本内容时,经常会忽视自动补正这个机制。等发现 行高被挤开 或 缩小字体后行间隔有点大 时,才想起行高的影响。详细见后面章节:排版与设计

行高控制

1)原理

就拿现在的word为例子。

你现在看到的这一行文字,

是不是上方多了一些间隙?很简单,右键菜单,在段落里面设置就能添加额外行高了。

同样的,在游戏中你也可以像word这样,

设置“段前”:当前行+行上增高n像素;

设置“段后”:当前行+行下增高n像素。

2)窗口字符

对齐方式相关的窗口字符如下。

窗口字符描述
\dtlh[后面行:行上增高:10]当前行和后面所有行的行高向上扩10像素。
\dtlh[后面行:行下增高:10]当前行和后面所有行的行高向下扩10像素。
\dtlh[后面行:锁定行高:24]当前行和后面所有行的行高锁定为24像素。
\dtlh[后面行:行上补正:24]当前行和后面所有行,若行高没超过24像素,则补正到24像素高。
\dtlh[后面行:清零设置]当前行和后面所有行的行高设置清零,注意是清零。
\dtlh[当前行:行上增高:10]只当前行的行高向上扩10像素。
\dtlh[当前行:行下增高:10]只当前行的行高向下扩10像素。
\dtlh[当前行:锁定行高:24]只当前行的行高锁定为24像素。
\dtlh[当前行:行上补正:24]只当前行,若行高没超过24像素,则补正到24像素高。

3)Debug查看

插件提供了窗口字符DEBUG查看效果,展示了不同 行上补正 的效果。

详细可以去示例中 窗口字符管理层 去看看行高的 DEBUG介绍。

4)锁定行高

锁定行高之后,行高为固定值,不会受到字符大小的影响,如下图。

锁定行高时,大字符是挤在一起的;

行上增高、行下增高、行上补正时,大字符都可以撑开行。

(锁定行高为0则没有效果)

注意,字体大小最小为12像素,但是行高可以锁定为更小的值。并且,3行12行高的高度 等于 2行18行高的高度。

5)段落与简单文本

大部分含窗口的插件 都有专门的行高补正设置。

(如果没有,则行高补正是关闭的)

默认字体大小为28像素,所以默认补正要打一些,为36像素。

你需要根据设置的字体大小来考虑补正值。(当然,设置补正为0也没什么问题)

6)选项窗口的行高

以自定义信息面板A为例:

Drill_SceneSelfplateA 面板 - 全自定义信息面板A

信息面板的选项高度设置如下图,设置了36像素高。

选项的内容配置如下图。

可以支持 换行符 或者 用窗口字符自定义行高。

注意这造成了一个问题:高度不够时,选项内容换行或调整行高,都会导致与下一个选项的文本相互重叠。

排版与设计

1)行高的补正原理

我们在设计游戏并填写文本内容时,经常会忽视自动补正这个机制。等发现 行高被挤开 或 缩小字体后行间隔有点大 时,才想起行高的影响。

行高补正: 是指文本绘制时,当前行的字体大小没超过30像素,则补正到30像素高。

如果超过了30像素,比如40像素,则行高以40像素的为准。

行高补正值可以设为0,这样每行就直接是字体大小的高度,所有文本会挤在一起。

所有窗口的默认设置:行高补正30像素。

对话框的默认设置:行高补正36像素。

撑开条件 - 换行

如果你想把文本隔开,多加几个换行,是有效的方法。

空行的高度 = 行高补正的高度。

如果你设置了行高补正值为0,那么就会按上一行的字体大小来算。

撑开条件 - 字体大小

举个例子,你现在看到的,就是因为字体太大,行高才被撑开。

撑开条件 - 大图片字符

举个例子,你现在看到的,就是因为有图片,行高才被撑开。

2)行高控制模式

信息面板系列插件中,提供了行高控制模式的设置,如下图:

实际上这四个选项,直接对应了下面四个窗口字符设置,效果一模一样。

行高控制模式窗口字符
默认补正\dtlh[后面行:行上补正:30]
自定义补正(自定义补正值为24)\dtlh[后面行:行上补正:24]
锁定行高(锁定行高值为24)\dtlh[后面行:锁定行高:24]
关闭行高控制\dtlh[后面行:清零设置]

3)排版

横向排版

横向排版,对应了 左对齐、居中、右对齐。

用插件文本居中插件即可。

Drill_DialogTextAlign 窗口字符 - 文本居中

有时可能会用到"\px[100]"让字符偏移很宽的一段距离。

纵向排版

纵向排版,对应了 行高高度设置,比如 行高补正、锁定行高。

文本居中插件 也能设置 垂直居中、底部对齐,但不常用。

排版细节

以信息面板K的设计为例。

选项中,设置了第二行30像素(可能会撑开行高),第三行18像素。

常规来说,后面选项都按这种固定的格式来写,没有问题。

但是,有些选项难免会遇到特殊情况,比如更大或更小的字体,或者直接少了一行。

这就导致玩家切换众多相同格式的选项时,会发现有文本在“抖动”。

这就需要考虑,直接锁定行高,固定每一行,确保字体大小、图片字符不会影响行高。

最后再查看每条内容中,是否都为固定行数即可。

4)行高与字符偏移

窗口字符核心 提供的 光标偏移 功能如下。

窗口字符描述
\px[]临时偏移量X,正数向右,负数向左。
\py[]临时偏移量Y,正数向下,负数向上。

注意,\py[]只是临时偏移位置,并不会影响实际行高。

因为\py[10]会使得后面所有文本都临时向下偏移10像素,所以看起来像改变了行高。

但设置\py[0]或者重置字符\fr后,就又还原为行高的位置了。

所以你才能看见\py[]设置偏移后,字符能叠加在一起的情况。

5)行高与自动换行

自动换行会把所有 常规换行符 都去掉。

这就导致了行高设置+自动换行时,会被识别为一行。

如下图,

第二行是普通换行,第三行是强制换行。


强制换行前,因为普通换行符都被去掉了,所以补正30覆盖了清零设置。

所以你看见
前面都是补正30的结果,

而盆栽图片和盆栽文本挤在一起。

要解决此问题,在需要换行的位置添加
即可。

多留意一下 行高+自动换行 的情况,因为出现问题时,会错认为是行高设置没生效。

你也可以去看看具体的设计,如何处理行高+自动换行:设计镶金告示板(指向)

从零开始设计(DIY)

设计一个角色属性展示板(指向)

主要用到了下列插件:

◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心

◆Drill_DialogCharDisplayData 窗口字符 - 常用的指代字符

◆Drill_DialogTextLineHeight 窗口字符 - 行高控制器

◆Drill_DialogFontFace 窗口字符 - 字体管理器

◆Drill_GaugeFloatingPermanentText 地图UI - 永久漂浮文字

使用 永久文字+指代字符,可以设计自定义的展示板。

并且还能进一步美化,包括行高控制、字体控制、背景框设计。

你可以去看看文档 ”13.UI > 大家族-漂浮文字.docx” 。

上述的设计,直接使用换行符太宽了,使用行高控制增加10像素,刚刚好。

设计上下摆动文字(指向)

主要用到了下列插件:

◆Drill_EventText 行走图 - 事件漂浮文字

◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心

◆Drill_DialogTextLineHeight 窗口字符 - 行高控制器

主要通过 轮播、增加行高、使用“\py[]”实现偏移,最终达到效果。

你可以去看看文档 ”7.行走图 > 关于事件漂浮文字.docx” 。

上述的设计,使用行高是为了扩宽文本域范围。

设计镶金告示板(指向)

该设计用了比较多的插件,这里不列举了。

你可以去看看文档 ”15.对话框> 对话框设计-镶金告示板.docx” 。

上述的设计,将行高清零,确保文本都挤在一起,适应自动换行的效果。

贡献者

暂无相关贡献者

页面历史

暂无最近变更历史