对话框设计-科技气泡
===概述===
示例图
科技气泡的对话框效果如下图。
示例工程
考虑到示例工程中的插件太多了，群友单独拿出来会遇到各种问题。
这里我建立了单独的解谜设计工程，并放入了集合中，方便熟悉用法。
| 小型示例工程集合链接: https://pan.baidu.com/s/1Z60Fht7alAGZymWOle68PQ提取码: 3r5e |
另外，示例中的插件一直在更新，而打包工程中的插件不一定会同步更新哦。
灵感来源
2025年7月27日，作者我看《动物迷城》的游戏视频，发现了他们有这样的气泡框。
感觉还不错，正好最近写了气泡框插件，可以做个类似的，于是就开坑了。
===科技气泡 - 实现===
基础插件
如果要从零开始设计，需要下图的插件：
注意，该文档设计高度自定义的气泡对话框。
如果你只想要简单的对话框，可以去看看文档“15.对话框 > 关于对话框皮肤.docx”。
如果你只想要简单的气泡，可以去看看文档“15.对话框 > 关于对话框气泡效果.docx”。
基础配置
具体注意示例下面的地方：
1）插件配置
留意下面 对话框皮肤 插件的配置：
留意下面 气泡对话框 插件的配置：
两个皮肤样式 + 一个关联的气泡样式。
2）地图事件
基于插件配置，需要通过插件指令修改气泡样式实现，通过下图的事件实现：
结构规划/流程梳理
首先，准备资源：
边框、平铺背景、尖角气泡
然后，在对话框皮肤插件中，配置皮肤样式。
Drill_DialogSkin 对话框 - 对话框皮肤
接着，在气泡对话框插件中，再配置尖角贴图。
Drill_DialogBubble 对话框 - 气泡对话框
完成配置后，建立事件，
通过事件修改气泡样式，在游戏中测试。
配置过程有几个重要参数可能要反复调整：
窗口皮肤背景向内缩进距、边框厚度、边框向内缩进距、尖角贴图位置、气泡间距
| 简单来说就是在 对话框皮肤、气泡对话框 两个插件中，寻找对应配置来调整。 |
背景与边框设计
1）气泡的边框
首先，考虑气泡框下方的亮边。
气泡可能会在很亮的地方，也可能会在很黑暗的地方显示，
所以这里加了亮描边和黑色描边。
（先把不透明的边缘画好，其它地方半透明，先空着）
剩余的描边都补上，得到下图。
（最里面的黑色描边厚度为2像素，加厚是为方便适配尖角的情况）
接下来，把剩余的黑色圆角矩形画完。
使用60%的透明度，让气泡半透明。
最后在气泡下方再拉一道渐变色，即完成气泡框边框部分。
2）气泡的尖角贴图
按照同样边框像素的方法，用像素笔画尖角贴图。
注意第一行留1像素的厚度，对应前面边框2像素厚度，确保吻合。
这样做是因为在文档“15.对话框 > 关于对话框气泡效果.docx”中，
战斗界面小爱丽丝的气泡框，会看见这类似0.5像素的颜色缝隙。
为了盖住缝隙，所以把尖角加高1像素，盖住边。
另外注意加高后还要设置y轴偏移，向上1像素，这样才能盖住。
（因为尖角贴图加高后，贴图会向下延伸而不会向上，所以需要手动调偏移）
3）配置平铺背景
接下来，在对话框皮肤插件中，皮肤样式-21，配置布局模式如下图。
（先暂时用白色背景，后面 边框与平铺背景 要调整内边距来对齐）
前面提及过60%的透明度在 图片资源 中体现，
所以这里布局透明度不需要考虑透明，直接设置为255不透明。
4）配置边框厚度
然后，在对话框皮肤插件中，皮肤样式-21，继续配置厚度。
厚度对应前面画好的资源：1）气泡的边框 。
注意调整 划分厚度 和 向内缩进距。
完成厚度配置后，
进入到 气泡对话框 插件中，在气泡样式-3中，关联皮肤样式-21。
5）配置气泡尖角贴图
气泡对话框插件中关联皮肤样式后，再把气泡尖角贴图配置上，
这样所有配置就基本完成了。
在游戏编辑器中，建立一个事件，添加下面的插件指令即可。
（对话结束记得关闭气泡样式）
然后在游戏中测试，得到下面的效果。
边框、平铺背景、尖角贴图，三者已经具备，接下来是微调参数。
6）边框与平铺背景
注意，由于气泡半透明，
对话框皮肤的 边框+平铺背景 就不能相互遮挡，从而会出现叠加边缘区域。
如下图，白色平铺背景 和 黑色半透明气泡边框，有叠加区域，呈现出灰色边缘。
为了解决半透明的叠加区域问题，
这里我们需要通过“平铺背景向内缩进距”来调整叠加区域。
缩进距太小，会有灰色叠加区域，
缩进距太大，背景和边框 会有缝隙。
为方便调整，这里也准备了一个明亮的区域。
缩进距太大就会出现下面缝隙。
需要通过反复调整缩进距，直到不再出现缝隙或叠加区域。
完成调整后，
将平铺背景改回黑色，并设置60%的透明度。
| 边框、平铺背景两个资源的透明度保持一致（60%）就行，不要动参数“皮肤透明度”，保持255完全不透明。 |
效果如下图，平铺背景和边框完全吻合了。
另外，由于气泡底部的亮条不够亮，
这里可以把资源文件再打开，加厚亮条。
加厚的亮条如下图所示。
姓名框设计
1）姓名框的边框和背景
对话框主体完成后，
接着是制作左上角的姓名框样式。
目标看起来就是一个圆角矩形。
那么就按圆角矩形的 边框+平铺背景 来画，如下图。
同样的，防止太亮太暗影响框，这里给蓝色边框也加个黑色描边。
注意，姓名框和对话框是两个不同的样式。
但两个皮肤属于同一个气泡样式，如下图。
绑定皮肤样式后，得到下图的设置。
2）位置、大小、厚度调整
目前姓名框看起来，
字体大、边缘厚、而且在气泡上方，需要调整。
这里首先解决厚度的问题，因为姓名框的厚度会影响位置。
修改资源和配置的厚度之后，效果如下。
| 注意，边框贴图 与 姓名框窗口的矩形 没有任何关系，图中缩小了边框厚度，但实际上并没有对姓名框矩形产生任何影响，只是视觉效果。 |
接下来是位置和字体大小。
姓名框插件中，有相关参数配置。
》收拢偏移量修改位置
》前缀用于修改字体大小
但修改默认值、通过插件指令修改，太麻烦了。
这里，作者我在对话框皮肤中，加了特殊配置。
如果皮肤绑定到了姓名框时，下面的参数就能生效。
图中的参数依次为：
》横向收拢偏移量：让姓名框往右移12像素。
》纵向收拢偏移量：让姓名框向下移30像素。
》前缀：修改颜色为黑色，字体大小22，去掉文本描边效果。
最后，在对话框中设置下面文本，即可看到效果。（需要使用窗口字符来打开姓名框）
“比如现在这个。\dDNB[小爱丽丝]”
3）看不清的菱形
开坑灵感中，如果仔细看，会发现平铺背景有淡淡的菱形。
作者我其实注意到了，这个设计比较鸡肋，于是就不加了。
设计思路小结
按照上述过程，你可能也发现了，边框可以加的非常厚，甚至把背景都挤没。
但由于对话框存在2、3、4行文本，背景一定会因为多行文本而被撑开。
因此，只要将想开的坑，转成上述的结构，就能实现。
举个例子，2025年5月3日的时候，作者就我看到了下图这个气泡，想开坑。
从原理上分析，
》气泡的圆角，可以使用插件 对话框皮肤 的加厚边框实现。
》“TALK！”字样，可以使用插件 对话框装饰图 实现。
》气泡的尖角贴图，可以 拉高气泡间距+高的尖角贴图 实现。
》最后，这个气泡的粉白从下往上的渐变，可以通过 边框+拉伸背景 实现。
（对话框皮肤中，可以设置平铺背景，也能设置拉伸背景）
只不过，
需要将下边框设为全粉色，左右边框和拉伸背景，都为相同的粉白渐变。
也可以将粉色渐变往下拉低，只在厚厚的下边框中有粉白渐变，其余部分为纯白色。
| 这里介绍的气泡，作者我就不开坑设计了，你们可以自己试试。 |
===科技气泡 - 注意事项===
上下翻转的问题
你可以将气泡绑定在鼠标身上，
通过移动鼠标，查看在不同位置下，气泡是什么样子。
由于前面 背景与边框设计 只考虑了尖角在下方的情况，
如果位置在上方区域，会出现下图的穿帮。
这时候，直接在气泡配置中，关闭“自动上下翻转”就可以了。
默认窗口的局限性
前面章节姓名框中的 2）位置、大小、厚度调整 ，由于厚度只有8，
所以可以不加边框，而放到 窗口皮肤里 ，来画边框。
在边框资源上画 或 在皮肤资源上画，其实都可以，是相通的。
这里回顾一下 默认窗口皮肤 的局限性：
| 默认窗口的局限性 | 相关插件扩展 | |
| 拉伸和平铺背景 | 拉伸背景、平铺背景，只能在96x96像素的大小内画。 | 【对话框-对话框背景】使用背景资源设置，不限大小。 |
| 边框 | 边框只能在96x96像素的大小内画，并且边框厚度固定24像素。 | 【对话框-对话框皮肤】使用边框资源设置，不限大小，不限厚度。 |
| 滚动箭头 | 上下箭头有用，左右箭头没用。 | 无 |
| 对话小箭头 | 只支持4帧的图像，大小限定为24x24像素。 | 【对话框-对话框小箭头】使用多张GIF资源自定义。 |
| 闪烁矩形 | 在不同大小的选项中矩形会被拉伸，且矩形只有48x48像素大小。 | 【主菜单-多样式菜单选项边框】可定义边框和边角，不限大小，不限厚度。 |
| 文本色卡 | 定义窗口字符“\c[0]~\c[31]”的颜色，固定32个文本色。 | 【窗口字符-颜色核心】可定义普通颜色和高级渐变色。 |
| 使用子插件时，要记得把窗口皮肤资源中对应的 背景、边框 去掉，变为透明区域，不然 子插件和窗口皮肤资源 的效果会叠加在一起，不好看。 |