请选择 进入手机版 | 继续访问电脑版

 找回密码
 点一下
查看: 5576|回复: 21

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

[复制链接]
发表于 2016-5-16 20:01:25 | 显示全部楼层 |阅读模式
本帖最后由 yxxiaobin 于 2016-5-17 12:34 编辑

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

放上一张我用对话框做的物品栏的截图:
1.png    12.png    13.png

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



发表于 2016-5-16 23:25:37 | 显示全部楼层
顶你一个!!!!!!!!!!!
回复

使用道具 举报

发表于 2016-5-19 01:57:49 | 显示全部楼层
回复

使用道具 举报

发表于 2016-5-20 12:42:38 | 显示全部楼层
求一个简单物品栏的演示

点评

对话框模拟物品栏不可能简单的了,都是及其复杂的。  发表于 2016-5-20 18:23
回复

使用道具 举报

发表于 2016-5-22 21:43:43 | 显示全部楼层
意思是没有物品栏可以用吗

点评

以我现在的技术,给了可以也看不懂 不过如果能给我的话就谢谢你  详情 回复 发表于 2016-5-26 02:32
我有一个不成熟的物品栏系统,你要的话可以给你。但是真的还不成熟哦。  发表于 2016-5-25 13:40
回复

使用道具 举报

发表于 2016-5-26 02:32:36 | 显示全部楼层
yeeboys 发表于 2016-5-22 21:43
意思是没有物品栏可以用吗

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

点评

以前边学习边制作的,很多地方并不是最优方案。不过初步能模拟物品栏了,喜欢就拿去用。  详情 回复 发表于 2016-5-26 19:13
回复

使用道具 举报

 楼主| 发表于 2016-5-26 19:13:20 | 显示全部楼层
本帖最后由 yxxiaobin 于 2016-5-26 19:15 编辑
yeeboys 发表于 2016-5-26 02:32
以我现在的技术,给了可以也看不懂
不过如果能给我的话就谢谢你


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

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

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

使用道具 举报

发表于 2016-5-28 22:41:14 | 显示全部楼层
学到了很多,感谢实验党

点评

实验党好费力的说。为了别人不再费力,只好贡献一下了。  发表于 2016-5-29 19:21
回复

使用道具 举报

发表于 2017-2-3 02:37:54 | 显示全部楼层
求一发演示图

点评

基础演示没用,我都写的很清楚了。如果是综合应用,楼上我发了一个自己做的物品栏,dome区还有一个自定义富格式按钮,你都可以参考。  发表于 2017-2-3 19:51
回复

使用道具 举报

发表于 2017-11-5 17:32:51 | 显示全部楼层
新手过来来学习

点评

同学你是考古系的吧,好多远古时期的大坟都让你挖上来了.....  发表于 2017-11-5 21:57
回复

使用道具 举报

发表于 2018-12-5 22:34:58 | 显示全部楼层
2.你的悬浮图片的类型和按钮图片的类型不一致,无法让两个图片都正常显示。比如按钮图片为边框类型,而悬浮图片为水平边框类型,则按钮被设置为边框类型时悬浮图片会无法正常显示,而设置为水平边框类型时,普通状态下的图片又无法正常显示了。

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

点评

按钮的悬浮图片类型和按钮的图片类型是统一的,不能被单独设置。图片各部件的排列方式决定了它能用于何种类型。如果你的图片和悬浮图片不是按相同方式排列的,那么就不能用在一起。  详情 回复 发表于 2018-12-6 17:59
回复

使用道具 举报

 楼主| 发表于 2018-12-6 17:59:01 | 显示全部楼层
我是坑2016 发表于 2018-12-5 22:34
2.你的悬浮图片的类型和按钮图片的类型不一致,无法让两个图片都正常显示。比如按钮图片为边框类型,而悬浮 ...

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

使用道具 举报

发表于 2018-12-6 19:44:24 | 显示全部楼层
Mark一下,还没看UI的东西,话说我的数据向导已经炉火纯青了,晚上写个教程也
回复

使用道具 举报

发表于 2018-12-9 23:01:49 | 显示全部楼层
其实有个问题是,比如我这个按钮的边框图他尺寸比较大,但是我的按钮只有10*10这么大,边框就会比较爆炸

点评

如果是边框类型的就不会的,图片会自动拼接。不过框线不能变细。  发表于 2018-12-10 10:32
回复

使用道具 举报

发表于 2018-12-10 19:53:39 | 显示全部楼层
屏幕截图(22).png
这个按钮就比较蛋疼了,3张图片类型的,虽然也可以用.9的,但是鼠标操作的状态切换只能自己写。

点评

主要暂时没找到什么办法能操作模板创建的控件  发表于 2018-12-10 19:55
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 点一下

本版积分规则

Archiver|移动端|小黑屋|地精研究院

GMT+8, 2024-3-29 01:52 , Processed in 0.405624 second(s), 28 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表