关于对话框皮肤

相关插件

主要插件如下：

◆Drill_DialogSkin 对话框 - 对话框皮肤

相关扩展插件如下：

◆Drill_DialogSkinDecoration 对话框 - 对话框装饰图

◆Drill_DialogSkinBackground 对话框 - 对话框背景

◆Drill_DialogArrow 对话框 - 对话框小箭头

对话框皮肤指专门用来装饰对话框的插件，并且对话框下还有 金钱窗口、选项窗口、数字输入窗口、物品选择窗口、姓名窗口 可被装饰。

注意，对话框皮肤会根据窗口大小自适应美化，插件本身 不影响 对话框的大小、高宽、坐标。对话框本质主体结构不变，只是贴一层皮肤效果。如果要改变对话框高宽等主体结构，去看看：Drill_DialogOperator 对话框变形器

如果你对于自定义对话框要求并不高，去看：

配置现有对话框

如果你需要高度自定义一套全新的对话框，去看：

用单图配置对话框

制作渐变蓝对话框

制作蓝皮纸对话框

名词索引

以下你可以按住ctrl键点击下面的词，可以直接定位到想了解的名词：

默认窗口结构	默认窗口背景 默认窗口边框滚动箭头 对话小箭头 闪烁矩形 文本色卡
插件窗口结构	边框结构 边角结构 向内缩进距对话小箭头 装饰图 背景

插件关系

插件之间关系如下，需要注意的是，对话框变形器与对话框皮肤 是两个分开的独立分支：

对话框皮肤

默认窗口结构

默认窗口皮肤构造如下：

拉伸和平铺 背景： 这部分充当窗口皮肤的背景，拉伸背景和平铺背景会被叠加在一起。叠加时拉伸背景在下面，平铺背景在上面。

边框： 固定只有24像素的厚度，实际被分成了8个部分，根据窗口的长宽自适应拉伸框结构。（横梁如果被拉伸的太长，会非常难看）

滚动箭头： 当选项窗口中，选项超过显示的数量时，选项下方会显示一个小的滚动箭头，用于辅助鼠标触屏滚动。但是注意，实际游戏中只有上下箭头有用，左右箭头没用。

（脚本底层都没有写左右箭头处理，只写了上下，左右箭头就是好看用的）

对话小箭头： 仅在对话框中出现，用于控制对话文本全部显示后，显示的”下一个对话”的小箭头。此小箭头可以被 对话框-对话框小箭头 插件扩展。

闪烁矩形： 该矩形会在含选择项的窗口中出现，用于表示当前选中的项，并不断地闪烁。这个矩形资源会根据选项的矩形范围 拉伸。

此矩形可以用 主菜单-多样式菜单选项边框 插件扩展边框和边角。

文本色卡： 固定32个文本色卡，分别对应游戏中的窗口字符： \c[0] 至 \c[31]。能够改变窗口中显示的文本颜色。文本色字符可以用 颜色核心 扩展高级颜色。

插件窗口结构

1）边框结构

由于默认提供的 边框 的局限性太大，（只有24像素的厚度）

这里提供了完全自定义的边框结构，

需要单独配置边框的图片资源，该图片一共分成九个部分。

下图为九个部分，在不同的模式下的效果：

原图
保持切割原样
缩放拉伸
循环平铺

注：表中的截图，是 选项矩形 的边框装饰效果（主菜单-多样式菜单边框 插件效果），与对话框边框的矩形装饰效果相同，所以作者这里不再单独去截对话框的边框示意图了。

资源可以是长方形的，用于横向或纵向表示更多的边框部件图像用。

你也可以设计其他大小的资源边框，资源大小能够影响上述的拉伸、平铺效果。

2）边角结构

边角结构也需要单独配置图片资源，该图片一共分成4个部分。

四个边角分别对应到对话框矩形的 左上、右上、左下、右下 的边角位置。

图中红色矩形为边角装饰的矩形范围，如果你觉得边角离目标矩形太远，可以通过加大 向内缩进距 ，让这些边角挤入长方形。

3）向内缩进距

向内缩进距：指长方形，按照指定的边距值，往内部进行压缩。

此属性用于调整边框和边角的适配用。

你需要根据对话框的矩形，来规划向内缩进距。

实现 背景与边框 贴合，具体操作方法可见： 4. 边角设计 。

对话框的子窗口

对话框不仅仅包含本身的对话显示窗口，还包含一系列同时派生的子窗口。

这些窗口都可以单独被装饰。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\PZN{9EC8UDPTA`P2]K])$YO.png](./images/关于对话框皮肤/关于对话框皮肤-019.png)

1）金钱窗口

该窗口使用窗口字符 \$ 能够在右上角显示出来。

2）选择项窗口

该窗口通过事件指令：【显示选项…】调出。

3）数字输入窗口

该窗口通过事件指令：【数值输入处理…】调出。

4）物品选择窗口

该窗口通过事件指令：【物品选择处理…】调出。

5）姓名窗口

需要姓名框窗口插件支持，使用窗口字符 \n<名称> ，显示出姓名窗口。

Drill_DialogNameBox 对话框 - 姓名框窗口

装饰扩展结构

对话小箭头

对话小箭头的控制来自于单独插件：

◆Drill_DialogArrow 对话框 - 对话框小箭头

注意，小箭头只针对对话框，其他子窗口不涉及。

对话框切换样式时，对话框小箭头也可能需要同步切换样式。

切换样式后，要记得切换回去。

装饰图

装饰图的控制来自于插件：

◆Drill_DialogSkinDecoration 对话框 - 对话框装饰图

该插件基于 对话框皮肤，在其基础上扩展，可以在对话框中添加很多装饰图。

注意，装饰图直接绑定于 对话框皮肤样式，

指定的对话框皮肤样式设置后，相应的装饰图会显现。

装饰图的 层级 固定在 对话框边框层 的上面，对话框内容层 的下面。

背景

背景的控制来自于插件：

◆Drill_DialogSkinBackground 对话框 - 对话框背景

该插件也基于 对话框皮肤，能够控制添加背景，并且背景支持 鼠标遮罩 效果。

从零开始设计（DIY）

配置现有对话框

1. 设置一个目标

由于现有的素材中有很多 window.png 的窗口皮肤资源可以借鉴。

你需要先找到想要的皮肤资源，然后开始配置流程。

（这里专门整合说明一下，快速切换/设置窗口皮肤的方法。）

2. 准备皮肤资源

上网找到相关的窗口皮肤资源，放在 Menu__ui_message文件夹下。

3. 样式配置

首先，皮肤样式1，是完全默认的皮肤（与system文件夹下的window皮肤一致），最好不要改。

所以，我们需要在新的位置新建一个皮肤，比如皮肤样式-2。

将布局模式，设置为：自定义窗口皮肤。

然后，在 资源-自定义窗口皮肤 中，配置相关的资源文件。

注意，千万不要这样配置，某些群友的操作把我气笑了……自定义皮肤如果是个空图片，整个对话框都会不显示，因为是空图片。

示例中配了两个简单的自定义窗口皮肤：

4. 插件指令切换

在游戏中建立事件，然后调用下图中的插件指令。

效果如下：

注意，如果你走到这一步，对话框皮肤仍然没有变化，那么很可能对话框的脚本被其他插件覆盖了。（很多群友都是用了各种对话框扩展插件，造成皮肤失效。）你需要留意自己的游戏中是不是开了对话框扩展的相关插件。

用单图配置对话框

1. 设置一个目标

群友发了一个不错的对话框参考对象，于是作者我就模仿这个另做一个。

![H:\rpg mv 箱7@)ZCK%QH1J%O51WYCZ~(R.png

首先从结构上看，有 姓名框和对话框 本身两个皮肤结构。

图中 蝴蝶结单图的皮肤 和 阴影黑板单图的皮肤 两个。

此对话框最终制作了两个 自定义皮肤图片 结构，一个用于对话框，另一个用于姓名框。

2. 对话框皮肤配置

这里，准备一个单图的图片资源，大小为816x200。

选择ps中的形状工具，切换到圆角矩形，设置半径40像素。

就可以画出一个圆角矩形了。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\L]8J`0%C5I8]4I$B5SLZ%(R.png](./images/关于对话框皮肤/关于对话框皮肤-046.png)

将矩形居中，然后设置一下透明度，在最外层描边白色1像素。

完成简单绘制后，

直接在对话框的皮肤样式里配置背景图片。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\0L`]@1UE($XEY~)VUAQ%E{B.png](./images/关于对话框皮肤/关于对话框皮肤-048.png)

这为了方便，直接设置默认样式为7，然后进入游戏随机找一个小爱丽丝对话。

在游戏中看到如下：

单图明显下压严重，可以判断对话框图像并不是 816x200的大小，并且左右窄了。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle`]6EX01X2KQ26C@5DRJ(SR.png

回到ps，将画布设为816x180，然后将圆角矩形拉宽。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\L}7{AB__VHD8WL]{H1N0D1.png

再次进入游戏，可以看到已经基本吻合。

接下来画阴影，先画一条长方形，然后斜切，拉成平行四边形。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\2$}CAS}UW39{OP4W]$LC8H.png ![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\9DG0@LO3HGWRU(W66XT7)G.png

确认角度后，复制很多个副本，然后横向展开列出。

直到盖住对话框范围。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\6_2CGP]IHML9OEJP51$%`7E.png](./images/关于对话框皮肤/关于对话框皮肤-056.png)

将所有平行四边形合并图层，

然后选择圆角矩形按Ctrl选择区域，减去圆角矩形的外围部分，调整透明度10%。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\2RYO(~FN]SSE9DR%K4KJAU9.png](./images/关于对话框皮肤/关于对话框皮肤-057.png)

接下来添加一些六边形，作为装饰。

简单堆放在角落里。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle@KSUVJGIM_KT(7]PRG8P~XY.png](./images/关于对话框皮肤/关于对话框皮肤-059.png)

再次进入游戏，可以看到对话框的单图基本完成了。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\FU}BX]Z1(@DXZ0}0~1FVR4.png

3. 姓名框皮肤配置

这里，准备另一个单图的图片资源，大小为220x80。

画一个矩形，稍微上移一点，

然后设置透明度，描边。

在样式中配置 自定义背景图片模式，然后设置资源背景。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle]DPA5@7P(L3KPMIUT)BDM5S.png](./images/关于对话框皮肤/关于对话框皮肤-063.png)

设置单图背景后，在姓名框位置设置对应的样式。

另外，在对话中设置能出现姓名框的字符。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\HW20%4(WC2CRWM~ZR{2IKT.png

进入游戏，可以看到方框刚好吻合文字。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle`ZP2JPI]2EOD}Y31[T]HIF.png

接下来，给丝带添加两侧的边角。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle~MA%]6X[T$GZFLHSE2O29]F.png](./images/关于对话框皮肤/关于对话框皮肤-067.png)

复制图层然后横向翻转。

在游戏中看看效果。

由此可以确定基本形状是宽丝带。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle[KMBZGG4224G5@U5L71_`6.png

接下来对丝带的细节进行描边。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\1(I(YCZHDL}W]KTA}M@MAU1.png](./images/关于对话框皮肤/关于对话框皮肤-070.png)

画一个小圆，然后复制多个，交错放置。

反向去掉多余的部分，设置小圆透明。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\DA(5NW]NR9{)`U3C{CFFTYL.png](./images/关于对话框皮肤/关于对话框皮肤-072.png)

整体效果如下。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle$F8F~9_@UD)]3HVTQD}63LK.png](./images/关于对话框皮肤/关于对话框皮肤-073.png)

在游戏中看看效果，感觉还有很多欠缺的地方。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\Q1([$7`I3`R`K~K{V81TMC.png

增强对比度，把渐变稍微变亮一点，圆点阵 稍微鲜明一点。

另外，把小爱丽丝的字体强制设为白色。

效果基本可以了，但还是有些不太适合的感觉。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\FZ2WAWK[D2RKJ{XTB3%GJ5.png

最后我把宽度改成窄带，效果突然好多了。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\UP)(9~MS{I2]R]FC)I4BLY4.png](./images/关于对话框皮肤/关于对话框皮肤-077.png)

这样，对话框的结构就完成了。

制作渐变蓝对话框

1. 设置一个目标

最近偶尔看到了一个新的对话框，于是考虑模仿一下：

此对话框最后用到了 自定义皮肤+边角 结构。

2. 准备皮肤资源

外框是蓝色渐变的结构。

背景是黑色边框，再外加像素线条。稍微调整透明度。

默认皮肤就画好完成了。

3. 样式配置

这里配置样式，并锁定色调。

在游戏中进行测试，如下图。

可以看到比较平滑的 外框和斜线背景。

4. 边角设计

单纯的蓝色边框有些空，

这里考虑加两个边角，画一个120x120大小的图片，60x60像素的三角形。

配置了资源后，看看效果。

可以看到距离远了。

稍微调整缩进距离，直到边角向内吻合为止。

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle%AVJ5T2DQACZO90EY6$5WY.png

![C:\Users\Administrator\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\O3D~YWT]`Z8RSTWDPC8CAC.png

这样就完成了。

制作蓝皮纸对话框

1. 设置一个目标

对话框不是大设计，所以不一定非要专门去参考某些灵感。

因为作者我手边正好有 纸张 的资源图片，于是，就想做一个与“纸”有关的对话框。

此对话框最后用到了 自定义皮肤+边框 结构。

2. 默认皮肤测试

首先窗口有默认的边框对应方式，我们可以加上，来看看实际效果。

由于窗口包含默认颜色，而且边框还不受颜色的影响，这使得要用默认的皮肤去完全自定义一个边框，极其困难。

这里使用事件指令，将颜色强行扭转。

下图稍微好了些，但是：

数字输入框变成了白色；

对话框的边缘明显被拉伸严重；

因此，只能使用插件，进行全方面自定义了。

3. 边框设计

从默认的窗口中，取出边框，剥离出来，进行单独配置。

首先，原配置的平铺背景保留，但边框要全部清掉（避免干扰）。

这是因为对话框皮肤中，三个部件都是相互独立的贴图，是可以同时叠加存在的。

新建一个边框资源文件。

插件会将边框资源自动划分9个部分，具体可以去过目一下：边框结构 。

这里需要将边框绿色模式设置为： 循环平铺 ，这样可以避免拉伸的违和感。

添加边框资源后，测试可以看到下图：

看起来，边框距离太长了，这里将边框的 向内缩进矩 加大。

（向内缩进距概念 向内缩进距 ）

设置后，发现又缩的太多了，因为 窗口背景 平铺的矩形大了。

这里再把背景的 向内缩进距 调一下。

缩进后，再吧窗口色调锁定一下（锁定白色），这样，对话框就完成了，边框和背景几乎看不出贴合的边缘痕迹。

4. 字体与脸图设计

通常，白纸上面写的都是黑色的字。

这里默认的 白边框白字 显得太突兀，这里改成黑色。

要将字符变成黑色，可以使用窗口字符。

另外，你也可以直接在皮肤的色卡中，把 \c[0] 位置的白色改成黑色，这样就默认都为黑色字符了。

脸图部分，属于作者我个人魔怔。

因为画了一张蓝皮纸，所以能够想到的，自然是明信片一系列的东西，于是有了进一步的灵感。

头像有144x144像素，直接放上去明显不好看，需要加些别的东西，让其看起来在纸上好看。

于是想到的是用蜡笔质感填涂在头像上，加上艺术字。

艺术字是百度随便找的 免费艺术字生成 的功能。

http://www.yishuzi.com/b/13.htm（版权不明，反正我只生成两个，也不是大批量用）

但是后来抛弃了，因为不好看。

后来想到，干脆直接用线稿。（量子妹是用矢量图画的，提取线稿是轻而易举的事情）

线稿效果比普通有颜色的头像好多了。

最后完成全部的脸图资源：

5. 小箭头与装饰图

上述的主要对话框皮肤设计都已完成。

接下来是一些细节上的添加。

点开插件 对话框装饰图，这里添加一个蓝皮纸夹子。

原先考虑的是正向放在右下角的位置，但是后来发现和小箭头重叠，并且还可能会挡住一些文字内容。

于是这里将资源图片翻转，然后设置基准点与坐标。

另外，对话框箭头，也改成手画的小图标。

在人物发起对话时，需要一并切换样式。

（这些都是细节上的工作量了，如果没有，问题也不大）

贡献者

暂无相关贡献者

页面历史

暂无最近变更历史