关于对话框气泡效果
相关插件
气泡对话框基于：
◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
◆Drill_DialogOperator 对话框 - 对话框变形器
◆Drill_DialogSkin 对话框 - 对话框皮肤
插件本体：
◆Drill_DialogBubble 对话框 - 气泡对话框
气泡框效果如下图。你也可以去看看示例中 对话框管理层 的介绍。
名词索引
以下你可以按住ctrl键点击下面的词，可以直接定位到想了解的名词：
| 气泡结构 | 功能组合 功能应用 |
| 气泡配置 | 气泡尖角贴图 气泡间距 上下翻转 尖角贴图偏移气泡的子窗口 气泡的扩展结构 |
插件关系
插件之间关系如下，对话框变形器与对话框皮肤 是两个分开的独立分支。
但气泡对话框同时使用了二者并形成新样式：
气泡对话框
气泡结构
1）功能组合
基于插件：
◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
◆Drill_DialogOperator 对话框 - 对话框变形器
◆Drill_DialogSkin 对话框 - 对话框皮肤
主要功能：
窗口字符核心 -> 提供文本宽度计算
对话框变形器 -> 实时绑定位置，根据文本宽度和行数切换高宽
对话框皮肤 -> 决定气泡框的皮肤
插件本体 -> 组合前面三个功能，并提供 气泡尖角贴图
| 气泡对话框实际上是多个插件组合后的高级设计。气泡功能没有一步到位的说法。ヽ(#`Д´)ノ |
2）功能应用
如果要单独使用对话框气泡功能，需要下图的插件。
因为气泡框的本质是对话框，
所以姓名框插件也可以加进来。
气泡配置细节
1）气泡尖角贴图
气泡尖角贴图的资源不能半透明，
而要用实心的像素，这样才能盖住边框的线。
尖角贴图的中心锚点在正下方。（尖角贴图的资源大小没有限制，可以自己画）
这样是为了兼容后面的 上下翻转 功能。
2）气泡间距
气泡间距是 气泡框+气泡尖角整体 与 绑定点 的间距，如下图。
插件中提供了临时修改气泡间距的插件指令，
主要用于图片、战斗敌人这种较大图像时，控制气泡高度用。
3）上下翻转
绑定点可以在镜头内的任意位置，
当绑定点在上侧对话框容不下的区域时，会翻转到下面。
4）尖角贴图偏移
尖角贴图可配置XY偏移量，（一般修改y值，x值不需要修改）
该参数用于调整偏移，确保 边框与尖角贴图 合并。
| 文本会影响气泡的高宽，但不会影响气泡的结构大小。而 边框厚度、边框向内缩进距 会影响气泡的结构大小。如果修改了边框，也要注意同步偏移尖角贴图，确保和边框合并。 |
气泡的子窗口
对话框皮肤除了装饰自己，还能装饰子窗口。
◆Drill_DialogSkin 对话框 - 对话框皮肤
其子窗口都可以单独被装饰。
同理，气泡的对话框，
因为基于对话框皮肤，所以也能分别对子窗口进行样式配置。
| 气泡尖角贴图只与对话框本体相关，其它子窗口，正常使用自定义的对话框皮肤即可。 |
气泡的扩展
1）皮肤的装饰扩展
气泡样式中，通过关联id来切换对话框皮肤样式。（如下图对应了皮肤样式19）
皮肤具体的配置需要在 对话框皮肤 插件中进行配置。
因此，气泡样式切换后，对话框皮肤附加的背景、装饰图也都会生效。
（比如皮肤样式19绑定了背景、装饰图，那么气泡框也会显示背景、装饰图）
2）GIF动态效果
对话框皮肤样式中，边框、边角，可以做成GIF。
同样的，气泡样式中，气泡尖角贴图也可以做成GIF。
3）偶尔1像素缝隙抖动问题
YEP插件中的函数Yanfly.Core.Sprite_updateTransform会破坏pixi渲染底层，
从而引入像素抖动问题，如下图的缝隙。
目前已知危害到了镜头插件、对话框插件。
解决办法可以去看看文档：“0.问题解答集合（FAQ） > Rmmv中的罕见问题.docx”的章节“偶尔1像素缝隙抖动问题”。
从零开始设计（DIY）
配置简单气泡
1. 设置一个目标
2025年7月23日，作者我写好了气泡框插件。
说到气泡，肯定第一反应是白色的气泡，
所以作者我用白气泡进行插件编写并跑通了气泡设计。
（其实这个气泡并不是纯白，带一点灰色的）
后来，我在其他群看见了另一种气泡。
这个气泡是黑色的。
正好，可以开坑了。
2. 结构规划/流程梳理
首先，准备黑框的资源。
然后，在对话框皮肤插件中，配置皮肤样式。
Drill_DialogSkin 对话框 - 对话框皮肤
接着，在气泡对话框插件中，再配置尖角贴图。
Drill_DialogBubble 对话框 - 气泡对话框
配置后就在游戏中测试。
配置过程有几个重要参数可能要反复调整：
窗口皮肤背景向内缩进距、边框厚度、边框向内缩进距、尖角贴图位置、气泡间距
3. 准备皮肤资源
1）边框资源
对话框边框分为9个区域，气泡结构如下图。
圆角处是用像素点描绘出来的。
因此用像素笔工具去画即可。
开坑目标中的边框有一点厚度，没那么薄，
所以，这里加厚，按照2像素厚度来画黑色描边。
最终得到下面的资源。
（边框的5区域是没用的区域，可以涂任何颜色，这里为了方便看，所以涂成白底）
2）窗口皮肤资源
对话框的背景为黑色，
这里配置的自定义窗口皮肤，把左下角的平铺背景涂成黑色即可。
3）尖角贴图资源
同样根据的像素笔画法。
气泡的尖角，画2像素厚度的斜角即可。
完成后得到尖角贴图资源。
4. 样式配置
准备好上述资源之后，先打开 对话框皮肤 插件，配置皮肤样式。
Drill_DialogSkin 对话框 - 对话框皮肤
布局模式使用“自定义窗口皮肤”，
然后配置窗口皮肤资源。
皮肤样式中，开启边框的显示，
然后配置边框资源。
接下来，打开 气泡对话框 插件，
Drill_DialogBubble 对话框 - 气泡对话框
配置气泡样式，在气泡样式中，关联刚才的 皮肤样式 。
然后在气泡样式中，
配置气泡尖角贴图资源。
这样就完成一个初步的样式结构。
（对话框皮肤样式id为20，气泡样式id为2）
5. 初步测试
在游戏中建立事件，然后通过插件指令，把气泡样式2开启。
初步效果如下：
初步效果，能发现有下面几个问题：
》气泡框的背景有半透明效果
》气泡框的边框切割厚度不对
》气泡尖角贴图没对齐
接下来进行配置调整。
6. 配置调整
1）半透明问题
之前配置窗口皮肤的时候，
布局透明度没有改，这里改成255就不透明了。
2）厚度不对问题
如下图，明显看到右侧的气泡切割有问题。
可以确定是厚度没设置对。
在ps中，看看边框资源的厚度，为17像素。
在皮肤样式中，修改 边框划分厚度 即可。
（向内缩进距也调整一下）
边框改进后效果如下图。
3）尖角贴图没对齐问题
尖角贴图没对齐，修改偏移让其对齐即可。
（因为气泡间距控制的是 尖角和对话框 整体偏移）
7. 进一步细节调整
目前经过调整后，最终效果如下。
为了方便查看气泡框的适应情况，
这里可以添加插件指令，将气泡绑定到 鼠标，
然后摇晃鼠标，检查不同状态下气泡会怎么变。
后来发现，气泡黑色的角突出了。
前面经过多次调整，应该不是边框的问题。
后来发现是 背景向内缩进距 为0。
改成12，多向内缩进一点，就解决了。
最终效果如下图。
（鼠标的皮肤样式没配，你可以打开气泡样式配置一下）
8. 战斗界面的细节调整
在战斗界面中，小爱丽丝的气泡框，会看见这类似0.5像素的颜色缝隙。
为了盖住缝隙，这里把尖角加高1像素，盖住边即可。
注意，加高后，还要设置y轴偏移，向上1像素，这样才能盖住。
（因为尖角贴图加高后，贴图会向下延伸而不会向上，所以需要手动调偏移）
设计科技气泡（指向）
科技气泡的效果如下图。
你可以去看看文档 ”15.对话框 > 对话框设计-科技气泡.docx” 。
