Unity2019.3.0f1已经出来了,但是目前还是没有UIElements Runtime的内容,我就拿UIElementsUniteCPH2019RuntimeDemo这个官方案例来简单介绍一下
2020.10.2更新
UIElement已更名为UIToolkit
并且UIToolkit的使用方式和UIElement已经有了区别!!!
以下使用方式已不具有时效性,仅做参考,新的使用方式可以见我的新文章(在做了)
其实大部分的内容都和之前一样,只有——2. 如何使用——部分略有更新,如果对之前的内容有了充足的了解,只需要看2.即可(内容也不多),以此我们可以看出UIElement的强大
1. MainMenu
我们在Assets——DemoUI中可以找到1_MainMenuScreen的uxml文件,然后我们通过UI Builder打开(有关UI Builder的简单介绍可以看我之前的文章),点击File——Open打开uxml文件,接着我们就能在Hierarchy界面中看到uxml的结构
1.1. screen元素
这个元素就是根节点,而其他的都是子节点,screen本身是一个VisualElement,并没有对其本身进行过过多的设置,而是通过.screen这个uss即样式表来进行设置,而screen中对于uss设置就意味着相对于整个游戏界面的设置
在这里我们还可以看到,在uss中已经修改的设置会以黑色黑体字+黑色竖线的形式突出出来,我们非常容易就能看出来
1.2. menu-column
同样是一个VisualElement,并通过.menu-column进行设置,在其uss中设置了相对于screen的适应和对齐方式,最后将背景设置为黑色
1.3. menu
同上的设置方式,并为其设置了Padding以及大小,在该元素中还包含了3个子元素——分别是2个Button和一个VisualElement,而这三个元素的Align设置都是stretch,因此都会适配到最合适的宽度,最后这三个元素都适配了Margin和Padding来调整与边框的距离
1.4. button
我们首先来介绍button部分,我们可以看到在StyleSheet中有两个特殊的样式:
如果是熟悉css的人一定不会陌生,在我之前的文章也已经介绍过有关这方面的内容,在这里
- .menu-button——按钮的样式
- .menu-button:hover——鼠标浮动在按钮上的样式
- .menu-button:active——按钮被点击时的样式