天工维度魔兽争霸开发者社区-全国最大的TJ集中营-原提百万联盟

标题: 【通用】UI系列教程（二）——初步设计 [打印本页]

作者: Seago 时间: 2020-11-19 21:00
标题: 【通用】UI系列教程（二）——初步设计
首先强调，本系列教程主要是基于触发中处理UI，FDF相关的使用以及美术方面不作过多讨论。
在创建UI之前，我们应该用整体的眼光去看待我们即将创建的UI，或者说从宏观上去看待整个UI的层次体系。
本篇将从father以及相对位置两个角度出发去理解。

father，即一个UI的父节点
在第一篇中有提到，father是创建UI时的一个重要参数。当一个UI被隐藏时，所有以他作为father节点的UI都会被一起隐藏。
我相信肯定有新手默认地全用游戏UI作为父节点，需要控制显隐的时候再逐个去控制，这样显然是很麻烦的。
我们应该针对具体的功能需要，对UI进行组合封装。原生UI提供给我们的都是最基本的功能控件，很多功能都不可能只由单个控件就满足需求。比如血条，我们需要图片，也需要文字。某个按钮，需要背景、按钮、文字，等等。当我们需要为一个功能做UI时，不要盲目的下手，应该针对其特征进行拆分、封装，这样处理起来才更加方便。整张图的所有UI，最终应该组成一个饱满的树结构或是图结构，应当是层次分明的，而不应该停留在单薄的平面结构，那样则太松散。
举个例子：我想做一个简单的伤害排行面板。最初我只记录单位的累计伤害，展示前4名的。
第一眼我们就可以知道，有两大部分：整个的背景，展示伤害的长条。而展示伤害的长条部分又可以拆分成4个单元，他们的功能是完全一样的，都是一个长条来形象得展示伤害高低，以及一个文本来直观地显示伤害数值，再有一个标识部分来区分这是谁的伤害。
于是我们针对长条伤害展示部分封装一个UI。他由3部分组成，数值（text），长条（backdrop），标识（text或backdrop都可以）。他们三个是一个整体的。我们还可以专门再创建一个frame作为他们的father，他们则互为兄弟。
这样，一个伤害排行面板就被我们进行了有层次的封装，当我们需要显隐、调整展示数量的时候都可以通过长条整体统一的进行操作。

位置的设置
第一讲有提过，UI的位置有两种设置方式。
相对位置：相对于其他UI的位置。
绝对位置：屏幕坐标的位置。屏幕左下角为（0，0）点右上角（0.8，0.6）
绝对位置不用多说，该在哪儿就在哪儿。主要说说相对位置。
相对位置可以同步的影响关联UI的位置，所以在设置相对位置时一定要理清因果关系，而不是只看表面上单纯的位置关系。
比如我先创建了一个功能面板A。我想把它放在游戏界面的左边。然后我利用相对位置绑定了它和游戏UI的位置关系。
后来我又创建了一个功能面板B。我也想把它放在游戏界面的左边，刚好A下面还有一片空位。此时应该如何设置？当然也是应该绑定游戏的UI而不是面板A。
有的人会觉得，绑A比较方便，直接用B的右上角绑A的右下角，这样不是可以完美地契合吗？这样表面上看确实没问题，但这种契合应该是由我们的计算得出的，而不是直接通过绑定得到。
A和B之间本质是两个完全不相关的UI，所以他们之间不应该有任何依赖关系。我们的初衷是想把B放在整个UI的左侧，恰好左侧有个A。而不是想把B放在A的下面，恰好A在左侧。搞清楚这点很关系。
回到上文的伤害面板例子，我们把每个伤害长条封装成一个整体。他们内部的几个控件之间建立相对的位置关联，再将这个整体的代表，如frame，与上层的面板背景之类的建立联系。这样无论将来数量如何进行扩张，形式如何进行调整，最终都是整洁的，也不需要进行繁琐的位置计算。

作者: 牧少皇 时间: 2020-11-19 23:55
捕捉一个真大佬

作者: 烈酒清风 时间: 2020-11-20 12:28
学习一下，看看

作者: q7357776 时间: 2020-11-20 13:12
学习一下，看看

作者: thk1992 时间: 2020-11-20 20:41
康康说明

作者: 暮晨黑云 时间: 2020-11-21 21:49
谢谢分享

作者: demonsung 时间: 2020-11-22 09:59
学习学习~

作者: 雨散云飞 时间: 2020-11-23 11:45
大神，又来看你教程了！！

作者: 沃之文化 时间: 2020-11-23 16:44
习一下，看看

作者: Seago 时间: 2020-11-23 17:56

雨散云飞发表于 2020-11-23 11:45
大神，又来看你教程了！！

谢谢支持，大神不敢当

作者: ifxrmfys 时间: 2020-11-24 13:29

受教了！！谢谢管理！！！！

作者: mkgknzvs 时间: 2020-11-24 18:39
学习学习

作者: 雨散云飞 时间: 2020-11-27 16:34
复习一遍

作者: 雨散云飞 时间: 2020-11-27 16:35
复习一遍UI！！！！！！

作者: ayolyy00 时间: 2020-12-6 08:53
跟着大佬学习

作者: 提百万_TAT 时间: 2020-12-11 15:51

学习一下，看看大佬怎么说~

作者: guisheng123 时间: 2020-12-12 22:38

学习一下，看看

作者: sanyangzhihuo 时间: 2020-12-14 13:01
谢谢大佬讲解学习下

作者: gandi2019 时间: 2020-12-15 09:58
学习一下ui

作者: 你家小夜神 时间: 2020-12-20 20:19
感谢大佬教导

作者: qq476987726 时间: 2020-12-30 13:42
学习了，大佬幸苦

作者: Sun丶包子 时间: 2021-1-4 10:23
谢谢分享

作者: xieming1314 时间: 2021-1-13 12:13
看看怎么样

作者: yangxinlin 时间: 2021-1-15 01:21
谢谢楼主教程

作者: q345895843 时间: 2021-1-15 15:25
支持一波~~

作者: 暴雪黑山羊 时间: 2021-1-17 21:27
感谢分享！

作者: w78809267 时间: 2021-1-17 22:06
学习学习

作者: nkjvxdaf 时间: 2021-1-23 16:34
无私奉献的大佬不多了！

作者: redheatwei 时间: 2021-1-29 11:54
大佬牛逼666

作者: 楼十三 时间: 2021-2-19 08:18
感谢楼主分享

作者: fpvklxcz 时间: 2021-2-20 02:08
学习如何设计UI

作者: 花葱 时间: 2021-2-25 10:01
又是一天白给学习ui

作者: jjww748 时间: 2021-2-25 15:05
UI的教程很少

作者: lkocqgmm 时间: 2021-2-26 14:30
看完1,来看2

作者: qq781015897 时间: 2021-2-26 17:47
学习一下，看看

作者: dfngefnw 时间: 2021-3-3 00:28
了解一下

作者: pophilo 时间: 2021-3-11 22:56
大老牛逼！天工威武！

作者: qqwwee147159 时间: 2021-3-12 05:16
我真的需要这个系统学习了

作者: 18115715170 时间: 2021-3-19 10:05
学习一下，看看

作者: 八舞桃 时间: 2021-3-29 22:31
学习UI中，看看

作者: sospttl 时间: 2021-4-2 13:03
学习一下，看看

作者: conglwar3 时间: 2021-4-23 22:08
顶~学习中~~~~~~~

作者: 丶西天i 时间: 2021-4-24 07:19
感谢楼主分享

作者: 风之流动 时间: 2021-4-25 17:17
感谢大佬的教程

作者: han6991833 时间: 2021-4-27 18:42
瞧一瞧看一看

作者: han6991833 时间: 2021-4-27 18:43
每一期都看哈哈

作者: t10201 时间: 2021-5-7 03:19
学习一下，看看

作者: wuyi124327 时间: 2021-5-8 06:44
楼主发贴辛苦了，谢谢楼主分享！我觉得天工社区是注册对了！

作者: 天轮 时间: 2021-5-10 15:41
支持一波

作者: 773724538 时间: 2021-5-10 16:52
学习学习学习学习

作者: 今晚不打老虎 时间: 2021-7-8 18:44
资源在那里获取

作者: 山居客 时间: 2021-7-10 13:39
学习学习。

作者: 自由如风 时间: 2021-7-12 10:18
这个类型教程多点，大佬

作者: ypuiskug 时间: 2021-8-13 22:49
学习学习

作者: hayagu 时间: 2021-8-16 11:28
看看我能不能买得起

作者: hzj61002963 时间: 2021-8-16 16:23
支持！！！

作者: 北北北 时间: 2021-9-10 15:17
天工维度牛票啊

作者: LZY 时间: 2021-10-21 10:18
谢谢分享谢谢分享

作者: 开开开开酱 时间: 2021-11-8 17:47
感谢大佬分享！！！

作者: ZAYLB 时间: 2021-11-28 03:02
学习了，谢谢

作者: Mr、神裂 时间: 2021-12-3 03:45
学习使我快乐

作者: 青丝伴清风 时间: 2021-12-3 17:04
好文章，进来学习学习

作者: 万青 时间: 2021-12-8 17:50
走一走看一看

作者: tkatmjyc 时间: 2021-12-9 15:57
6666666666

作者: 404_Kubi_Found 时间: 2021-12-17 23:11
虚心学习

作者: xiaoqilin910 时间: 2021-12-18 13:27
很好。来学习了

作者: mumulol 时间: 2021-12-23 23:40
大佬66666666

作者: 艾伦 时间: 2022-1-7 21:30
学习学习，。。。。。

作者: cn52099 时间: 2022-1-20 23:43
继续学习

作者: 一句话的事情 时间: 2022-3-19 21:21
emmm 虚心接受大佬UI学习

作者: iq200sheng 时间: 2022-3-20 02:38
学习一下

作者: 伯克利全能法师 时间: 2022-5-18 00:09
看看说明

作者: 啦喽啦 时间: 2022-6-16 23:43
膜拜大佬，向大佬学习

作者: 793591431 时间: 2022-7-1 21:33
楼主辛苦了非常感谢分享经验给我们

作者: loclo咯 时间: 2022-7-12 17:27
学习学习

作者: qq3878217 时间: 2022-7-12 22:32
支持一下

作者: raxfal 时间: 2022-7-14 14:31
感谢楼主分享

作者: swyvmjni 时间: 2022-8-29 02:21
太强了,膜拜一下

作者: bziejqam 时间: 2022-10-22 17:18
感谢分享

作者: andyy106 时间: 2022-11-25 21:21
今天没做图，光顾着学习了

作者: gugrviwr 时间: 2022-12-26 05:18
写得好我来看看

作者: 观茶员 时间: 2023-1-13 13:48
学习学习！感谢分享！感谢分享！

作者: gzuchryf 时间: 2023-1-14 14:33
感谢大佬分享

作者: 空雨白落 时间: 2023-2-15 10:47
学习！！！学习！！！

作者: zxc789 时间: 2023-2-17 01:50
感谢分享

作者: chance125 时间: 2023-3-9 10:15
学习一下，看看

作者: cfcfp1059 时间: 2023-4-14 04:50
写的很好很棒

作者: 托神 时间: 2023-4-17 20:36
学习一下，看看

作者: q332008679 时间: 2023-5-6 14:47
大神，又来看你教程了！

作者: 永恒之奕 时间: 2023-6-15 01:21
我来看看

作者: 1091241720 时间: 2023-7-14 14:05
谢谢楼主分享

作者: 青邶. 时间: 2023-7-30 23:53
学习学习

作者: pufmqxsg 时间: 2023-8-11 12:16
感谢分享，学习一下

作者: 大漠老悍匪 时间: 2023-8-13 19:13
天宫维度让我快乐

作者: liaodk 时间: 2023-8-14 07:23
看看学习学习

作者: 渐望望鸭 时间: 2023-10-5 01:19
感谢分享

作者: hanniba 时间: 2024-1-21 19:55
学习学习

作者: shuishui 时间: 2024-2-19 02:41
习一下，看看

作者: eevvok 时间: 2024-2-24 02:49
支持天工维度,希望越来越好

作者: 我是谁你无关 时间: 2024-2-25 14:35
学习一下

欢迎光临天工维度魔兽争霸开发者社区-全国最大的TJ集中营-原提百万联盟 (http://bbs.mvprpg.com/)