对话框中图片属性基础解析 图片暴多，网络卡机器差的同学勿入

yxxiaobin

对话框和多数对话框控件都有图片属性，这些图片可能是被用作边框，也可以是一些复杂的结构，或者只是展示一幅图片。但是除了指定图片的路径外，还有好多其他的属性可以控制，从而达到非常丰富的效果。下边就这些属性做一下简单的说明。因为是很基础的东西，所以已入门的人可以忽略。这个是纯新手向的东西，我尽量用更直白的词语进行描述。
1.图片。即使用哪一张图片，这个是一个字符串型的参数，需要写图片的绝对路径，比如"Assets\Textures\btn-ability-kerrigan-automatedextractors.dds"。在GUI状态下，这个是一个“图片文件”类型的数据，有内置函数很容易将一个字符串路径转换成图片文件，或者获取一个图片文件的字符串路径（因为本质上这就是一个字符串）。
2.图片类型。因为图片可能被用于不同的情况，如果只是直接展示，会有诸多不便，所以图片是有类型一说的。
    2.1 普通。“普通”类型的图片就是最基本的用法了，比如展示一个图标，一幅画等等。
    2.2 边框。这种类型是专门用来显示边框的，例如下图：
        
        第一行由四部分组成，依次为左上角，右上角，左下角，右下角；第二行为上边，第三行为下边，第四行为右边，第五行为左边，第六行最左侧有个小方块，是中心区，后边的区域为空白，第七航和第八行为空白。需要注意的是当这类图片被作为边框显示后，会自动拼接成一个矩形，四个角保持不变，边和中心区会根据大小自动重复填充。所以无论显示成多大，边框线都不会随之变粗或变细，很方便做成同系列的多个大小不同的边框。
    2.3水平边框。也是被用来制作边框的，但是排列方式不同，所有组件都是依次水平排列的，用法同“边框”。例图：
        
    2.4末端封闭。一般是用于进度条，也可能用于某些按钮，总之是条状物就对了。其结构是第一行分别为左端和右端，第二行为中间。当调整大小时，上下会被拉伸，而左右的话会由中间部分进行填充，而不被拉伸。例图：
        
    2.5九字符数组。这个翻译为九宫格可能更好一点。目前并没有发现官方标准用法，猜测其用法可能是用于缩放“普通”格式的边框图的。如下图：
        
        一张普通的边框图，大小为76*76，当作为普通格式放大到200*200时，可以发现边框线也被等比例放大了，变得很粗，而作为九宫格时，图片被放大，但是边框线的比例则保持了固定。需要注意的是，这只适合矩形的边框图，不适合其他图片和非矩形的边框图，否则可能导致图片变形（当然如果你故意要这么变形也是可以的），比如：
           
        第一张图可以看到图标被变得像哈哈镜照出来的样子，而第二张图，一个圆形的边框被拉成了圆角矩形。
    额外说明一点就是：无论何种图片类型，按钮的图片总是上下双份的，这和其他控件不同。比如一个末端封闭类型的按钮图片是这样子的：
   
    可以看出，比起一般的末端封闭图片来，下边还多一套。这是因为按钮有按下和弹起两种状态，当按钮弹起时显示上一半，按下时显示下一半。而且按钮在被鼠标悬停时会有一个高亮效果，所以按钮还需要指定一个叫做悬浮图片的参数。和按钮图片一样，按钮悬浮图片也是要分上下的。刚刚有人问悬浮图片为何弄不对，这里解答一下，原因可能有两点：1.你指定的图片并不是上下两份的，不能用作按钮的图片和悬浮图片；2.你的悬浮图片的类型和按钮图片的类型不一致，无法让两个图片都正常显示。比如按钮图片为边框类型，而悬浮图片为水平边框类型，则按钮被设置为边框类型时悬浮图片会无法正常显示，而设置为水平边框类型时，普通状态下的图片又无法正常显示了。
3.贴图。这个参数其实是指定图片是否被重复填充。如果设置为假，则图片被拉伸，使其充满图形区域，如果设置为真，则图片比例保持不变，当图形区域大于图片尺寸时，图片被反复填充，小于图片尺寸时，图片被裁去多余的部分。这个参数只对“普通”类型的图片有效。例图：
   
    一张76*76的图片，放到100*100，贴图参数为假的的图片控件中，图片被整体拉伸，放到10*60，贴图参数为假的图片控件中，贴图被拉的变形。放到100*100，贴图参数为真的图片控件中，图片被反复充填（图片之间是无缝隙的，这里能看到黑色缝隙是因为图片本身就有黑边）。最后放到50*50，贴图参数为真的图片控件中，图片被裁减掉了一部分。
4.混合模式。这个主要用于图像的叠加。比较常用的有普通和添加两种，普通就是不透明叠加，位于上层的会完全遮挡下层的；而添加则能做出比较好的透明叠加效果。如图：
   
    多数情况下需要使用不透明的普通的混合模式，而透明混合多用于制作带图标的按钮。我们都知道，按钮的边框和表面纹理是其图片属性决定的，我们没办法在保留这些的基础上再为按钮添加一个图标。有时候我们需要带图片的按钮，如果直接替换成按钮图标，则边框什么的就没有了，看上去就不像按钮了。一个直接的解决方案就是为所有图标都加上边框，但是这会增加许多工作量，还会增加地图的数据体积。一个比较好的方案是：先创建一个按钮，用于显示按钮边框以及悬浮产生的高亮效果，再在按钮上方创建一个图片控件，用于显示图标，这时候就要把图片控件的混合模式变成添加（或别的透明混合方式），在鼠标悬停时，按钮的高亮会体现在整张图片上，而不仅仅是边缘，这样看起来图片就像和边框是一体的。如图：
   
5.染色颜色。在原有颜色基础上叠加染色颜色，相当于在图片上蒙一层带颜色的透明玻璃。需要注意的是，染色是基于图片原有颜色的，如果原有颜色是绿色，你无论如何也无法染成紫色。因为紫色是蓝色和红色合成的，而绿色并不含有蓝色和红色，所以这么染色最后的结果就是黑色。
6.减饱和度开关和减饱和度颜色。和染色的作用类似，不同点在于，染色是基于固有颜色的，即：一个纯绿色的图片无论如何也不会被染成紫色，如果这样染色，就会变成黑色，也就是说灰度会发生明显变化；而减饱和度颜色则是转换染色，灰度不会发生变化，即：把一个绿色的图片减饱和为紫色，则这张图片就变成了紫色。需要说明的是，要设置减饱和度颜色，需要先打开减饱和度开关，否则不起作用。下图示意了一张片绿色的图片，经过紫色染色，会变得很暗，且贴近红色（因为几乎不含蓝色），而减饱和为紫色，则不会变暗，而是整体转换颜色。
   
7.颜色。和染色类似，只是会更暗。
8.Alpha遮罩。用一张图片的Alpha通道作为蒙版去透明化某控件的图片，白色代表不透明，黑色代表透明。

放上一张我用对话框做的物品栏的截图：
     

其他的暂时想不起来还有什么了，如果有谁能想起来，可以提出，我继续补充。

xhang

顶你一个！！！！！！！！！！！

sky282438525

赞

yeeboys

求一个简单物品栏的演示

yeeboys

意思是没有物品栏可以用吗

yeeboys

yeeboys 发表于 2016-5-22 21:43
意思是没有物品栏可以用吗

以我现在的技术，给了可以也看不懂[s:107]
不过如果能给我的话就谢谢你

yxxiaobin

yeeboys 发表于 2016-5-26 02:32
以我现在的技术，给了可以也看不懂
不过如果能给我的话就谢谢你

以前边学习边制作的，很多地方并不是最优方案。不过初步能模拟物品栏了，喜欢就拿去用。

RPG系统.SC2Map (431.03 KB, 下载次数: 43)

2016-5-26 19:12 上传

点击文件名下载附件

补充一下就是只有被指定为“角色”的那个单位有自定义物品栏，别的单位不行。所以仅适用于rpg系统。点击宝石工匠npc可以查看物品栏（只是我做的测试功能，你自己可以设置什么时候显示哪个物品栏）。

绯莲之罪与罚

学到了很多，感谢实验党

2104075556

求一发演示图

无名指的光环

新手过来来学习

我是坑2016

2.你的悬浮图片的类型和按钮图片的类型不一致，无法让两个图片都正常显示。比如按钮图片为边框类型，而悬浮图片为水平边框类型，则按钮被设置为边框类型时悬浮图片会无法正常显示，而设置为水平边框类型时，普通状态下的图片又无法正常显示了。

请问怎么设置悬浮图片的类型呢？我给按钮设置了图片，悬浮图片和图片类型九字符数组，然后现在按钮的外观和捕捉鼠标高亮没有问题，但是点击或者按住按钮时，图片就变形了。。。求助大佬
图片: Assets\Textures\ui_battlenet_glues_bluebuttons_alternate_mediumup.dds
悬浮图片: Assets\Textures\ui_battlenet_glues_bluebuttons_alternate_mediumover.dds

yxxiaobin

我是坑2016 发表于 2018-12-5 22:34
2.你的悬浮图片的类型和按钮图片的类型不一致，无法让两个图片都正常显示。比如按钮图片为边框类型，而悬浮 ...

按钮的悬浮图片类型和按钮的图片类型是统一的，不能被单独设置。图片各部件的排列方式决定了它能用于何种类型。如果你的图片和悬浮图片不是按相同方式排列的，那么就不能用在一起。

花时雨

Mark一下，还没看UI的东西，话说我的数据向导已经炉火纯青了，晚上写个教程也

花时雨

其实有个问题是，比如我这个按钮的边框图他尺寸比较大，但是我的按钮只有10*10这么大，边框就会比较爆炸

花时雨

这个按钮就比较蛋疼了，3张图片类型的，虽然也可以用.9的，但是鼠标操作的状态切换只能自己写。