关于行高控制器
基础要求
先尝试回答下面的问题:什么是文本域、文本光标?什么是窗口字符、底层字符?窗口字符分为哪些类型?窗口字符、底层字符有哪些固定格式? |
如果你对上述问题有疑问,那么说明你还不了解 窗口字符。
需要去看看:”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” 。
上述的设计,将行高清零,确保文本都挤在一起,适应自动换行的效果。 |