对话框设计-镶金告示板
===概述===
示例图
镶金告示板的对话框效果如下图。
示例工程
考虑到示例工程中的插件太多了，群友单独拿出来会遇到各种问题。
这里我建立了单独的解谜设计工程，并放入了集合中，方便熟悉用法。
| 小型示例工程集合链接: https://pan.baidu.com/s/1Z60Fht7alAGZymWOle68PQ提取码: 3r5e |
另外，示例中的插件一直在更新，而打包工程中的插件不一定会同步更新哦。
灵感来源
2025年4月19日，有群友跟我讨论《英雄无敌3死亡阴影》这个对话框皮肤的设计。
我觉得现在 窗口字符+对话框 都被我全翻新了，这个做起来应该没有那么难了。
（之前觉得难是因为旧底层无法实现同时 文本居中+自动换行）
于是我找了几个对话框样式。
发现基本都是：只有一个勾选的对话框，有一个是和否选择的对话框。
与其说是对话框，我觉得更像“告示板”、“路标”一类的东西。
仔细观察，发现这个对话框有金属镶边，木质底色+金属镶边 = 中世纪告示板。
说到金属镶边，之前作者我设计“量子妹解谜设计-限时拼图”的时候，
第四关的拼图，制作了小爱丽丝土豪金卡片。
可以利用 塑料底色+金属镶边 = 现代告示板
于是作者我就开坑了。
| 提醒一下，设计任何样式，都需要考虑围绕游戏的主题来设计。作者我的示例中的主题有：“现代”、“高科技”、“荧光”、“数据”显然与参考的中世纪样式不相符，直接照抄会造成主题画风冲突。所以，作者我需要围绕现代主题来重新构思、结合、模仿。 |
===镶金告示板 - 实现===
基础插件
如果要从零开始设计，需要下图的插件：
注意，该文档提供并介绍高度自定义的对话框设计。
如果你只想要简单的对话框，可以去看看文档“15.对话框 > 关于对话框皮肤.docx”。
基础配置
具体注意示例下面的地方：
1）资源文件夹
该对话框设计需要注意下面资源文件夹中的资源。
2）插件指令
在播放告示板效果前，需要执行下面插件指令。
播放结束后，还需要恢复默认样式。
3）插件-对话框皮肤
对话框皮肤有8种颜色配置，如下图。
4）插件-按钮组核心
该设计用到了按钮组核心的排布14。
5）插件-菜单指针
该设计用到了菜单指针的样式5。
6）插件-大图片字符
该设计对应了下面几个大图片，并加入到文本内容中。
背景与边框设计
1）背景
按照卡片的样式风格，先把背景的菱形画上。
用像素手画就行。（拉钢笔画的直线总是不完美）
然后再把底色加上。
画好后，调整黑色菱形的透明度，最终形成下图的资源。
2）边框
先用暗黄色围成一圈，涂蓝色描边，最里层再加一圈暗黄色。
画好后，用亮黄色设置渐变，形成金属光泽即可。
3）简单内容
然后就是按钮，这里就画一条白边、一条黑边、底色透明黑。
然后作为 大图片字符，先加在文本里面试试效果。
4）初步测试
设置配置后，进入游戏后效果如下图。
就初步的感觉，
边框虽然是金属的，但没有想象中那么高大上。
也许是镶金边太薄了？还要再改改。
5）改进样式
重新看了下参考对象，发现这个窗口，是双层镶金边。
这里把之前的外层金边，设置成双层。
并且金边的夹层彻底涂黑，然后再重新加上光泽。
实际上金边有三层，外面两层加光泽。
最里面的一层金边，加光泽不好看，所以就不加了。
修改了边框后，看起来稍微好点了。
但是，文本的行间距有点大，还要专门管理控制一下行高。
文本格式设计
再回来参考下英雄无敌3的文本格式设计，如下。
可以把内容分成三个部分，
第一个部分支持 长文本+自动换行。
第二个部分是 道具图片+道具名称（大图片字符插件）。
第三个部分是 √ 的按钮。
由于要开启自动换行，那么普通换行符就不适用了。
这里要加
强制换行，因为自动换行作用于当前页的全部文本，不能中途关闭。
初步效果如下图。
目前，看起来行高有点宽（字体缩小到了18），这里干脆把所有行高清零了。
修改后如下图。
看起来，第一行挤的太靠上了，要往下挪一点点。
但留意一下细节问题：行高与自动换行 。
往下挪，不能通过设置第一行的行高实现，
那么就考虑使用内边距实现了。
（\pa[]是全部内边距，\pt[]\pb[]\pl[]\pr[]是单独调整上下左右内边距。）
最后完成的效果如下图。
边角设计
1）初步设计
回到样式设计上来看。
还差个边角设计，边角设计需要画雕花。
目前，蓝色边框的厚度只有7像素，要画雕花，也就用像素点慢慢点吧。
画两个圆，然后通过斜线连接，如下图。
再然后，加金属光泽的渐变。
再然后，加阴影。
边角的位置，先用以圆来代替，复制刚才的雕花，形成下图。
再然后复制四份，测试效果。
可以看到，边角距离想要的位置有点远。
通过调整 向内缩进距，使得边角嵌入到蓝色边缘内。
注意，边角贴图与对话框的关系如下图。
边角会被切成四份，并且边角贴图的锚点在正中心。
测试后发现，虽然加了雕花，但是雕花太短了，还要加长一点点才行。
2）改进样式
加长雕花，就复制刚才画的，去掉一个圆，如下图。
（注意，加长雕花后，画布大小也要加宽）
加宽后得到下面左边的图。
金属球看起来太突显了，再加个图层，让金属球位于边框的下方，形成右边的图。
最后，保存边角设计。
由于边角被加宽了，向内缩进距要重新调整。
资源加宽了40像素，因为会被切成4份，且每份的锚点都在正中心，
所以 40/2/2 = 10， 向内缩进距 = 30+10 = 40。
最终，测试效果如下图。
（边角的存在感有点低，不过，有了边角，对话框显得没那么空了）
按钮组设计
之前弄了个简单的对话框按钮，临时作为大图片字符，做进了 文本格式设计 中。
现在需要把这个按钮图片，变成按钮组功能。
所以把大图片字符撤了，重新来设计。
按照目前的参考，按钮只有两种，√和×，也就是按钮组的 是和否。
在之前的简单透明按钮的基础上，再加一层金描边。
然后按√和×做了两个按钮。
接下来，添加一个按钮组样式，
样式中先把按钮组默认的动画、名称都关掉，改成直接显示。
（下图还漏了个 “依次移动延迟间隔”，那个参数也要设置成0。）
然后，使用直线排列。
按钮本身大小为80x40像素，只有两个按钮，那就设置间距100像素。
暂定样式为这样。
接着，添加两个按钮贴图。
Drill_DialogChoiceButton 对话框 - 选择项窗口的按钮组
注意，排列样式在 按钮组核心 中加。
贴图和平移，在 选择项窗口的按钮组 插件中加，如下图。
（为了确保按钮在中心，所以设置的按钮组位置 358,400 ，直线间距100）
（这样能确保第二个按钮处在 458,400 的位置）
在游戏中测试，可以看到按钮如下图。
但是，如果只有一个按钮时，情况如下图。
这时候，可以勾选“只有一个按钮时是否按最大长度居中”设置。
就可以确保按钮居中了。
最后，因为按钮固定在告示板上。
所以按钮被选择时，不能播放按钮自己的动画。
那就让一个菜单指针指向按钮，一个闪烁的菜单指针。
最终效果如下图。
菜单指针+按钮组 的效果，菜单指针会不断闪烁。
| 另外注意一下，对话框变形器，可以修改当前告示板的高宽。如果告示板修改了行数高度值，对话按钮组都需要一起调整修改坐标。不过，这个细节容易被发现，因为你会发现修改之后按钮组会出界，就说明要调整坐标。 |
小任务设计（先知小屋）
1）小任务流程图
以示例中的先知小屋设计为例，分成下面几个阶段。
》第一次访问时
》再次访问+不满足条件时
》再次访问+满足条件时
》再次访问+已完成任务时
2）小任务写法 - 事件页
前面介绍的四个阶段，
最直接的想法就是每个阶段对应一个事件页就行了。
“第一个事件无开关，第二个独立开关A，第三个独立开关B，第四个独立开关C”
但在写事件的时候会发现，
再次访问+不满足条件时、再次访问+满足条件时 两个阶段，
需要共用独立开关A。
并且，如果使用 出现条件，只能判断有没有带物品，而不能判断带了多少物品。
由于任务只要一瓶高效HP药水就能算完成，所以通过事件页是能写的。
3）小任务写法 - 分支条件
考虑到 物品数量问题 无法通过出现条件实现。
这里干脆把所有事件页都放在一起，通过分支条件来判断。
| 先知小屋是一次性访问，不存在 开关问题、并行问题，所以不需要那么多事件页。 |
合并后，分支条件判断实现如下图。
分支条件内的指令执行完毕后，直接中止处理。
这样后面的指令就可以写其它情况的分支条件和操作了。
另外，这里的判断比出现条件的设置要灵活的多。
你可以先用变量获取特定物品的数量，再用分支条件判断变量值即可。
| 提一下，事件页的出现条件是 实时监听。只要条件变了，就立即切换事件页。这会有一部分性能消耗。像这种单次接触判断的小任务，最好多用分支条件，还能节省不少性能。 |
===镶金告示板 - 注意事项===
行高与自动换行
自动换行会把所有 常规换行符 都去掉。
这就导致了行高设置+自动换行时，会被识别为一行。
如下图，
第二行是普通换行，第三行是强制换行。
在
强制换行前，因为普通换行符都被去掉了，所以补正30覆盖了清零设置。
所以你看见
前面都是补正30的结果，
而盆栽图片和盆栽文本挤在一起。
要解决此问题，在需要换行的位置添加
即可。
| 多留意一下 行高+自动换行 的情况，因为出现问题时，会错认为是行高设置没生效。 |
字体与自动换行
如果你打开 基础工程示例 ，你会发现字体不一样时，相同文字的宽度也不一样。
示例中的字体看起来小，小工程中的示例看起来大。
闪烁配置细节
按钮组样式中，能配置闪烁效果。
菜单指针中，也能配置闪烁效果。
但按照设计，菜单指针应该闪烁，而不是按钮组闪烁哦。
