UIToolkit是Unity官方推出的最新 UI解决方案,未来将逐步取代现有的UGUI方案,当然现在(2021.7.22)仍处于preview阶段。官方解释这是一套兼顾编辑器和runtime界面开发的更高效的UI框架。
1.创建一个新的项目,unity版本要求2020.2以上
![](https://img.haomeiwen.com/i26067915/5f398d0284ad0414.png)
2.打开菜单栏-window-package manager
![](https://img.haomeiwen.com/i26067915/137f2cc2e9da39b6.png)
3.从git链接来添加源:
![](https://img.haomeiwen.com/i26067915/067bf64844f28a2e.png)
4.输入com.unity.ui,然后点击add会自动下载:
![](https://img.haomeiwen.com/i26067915/b8675f0af011dab9.png)
5.下载完成后,会多出一个uitoolkit并自动安装好了(绿色勾),截止目前(2021.7.22)依旧是preview版本。
![](https://img.haomeiwen.com/i26067915/2be69265ee7f34eb.png)
UIToolkit使用了uxml来描述界面的布局,使用uss来制作不同样式,参考了web开发的xml和css方案。Unity2021已经将UIToolkit内置在引擎中,具有和UGUI同等地位。
比如要画一个按钮,对应的uxml
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
<Button text="UXML Button" name="the-uxml-button" />
</UXML>
按钮的样式uss如下
.some-styled-button {
-unity-font-style: bold;
}
在C#代码可以将名字和样式名绑定在一起添加点击事件。
Action action = () =>
{
container.Query<Button>().ForEach((button) =>
{
button.text = button.text.EndsWith("Button") ? "Button (Clicked)" : "Button";
});
};
// Get a reference to the Button from UXML and assign it its action.
var uxmlButton = container.Q<Button>("the-uxml-button");
uxmlButton.RegisterCallback<MouseUpEvent>((evt) => action());
// Create a new Button with an action and give it a style class.
var csharpButton = new Button(action) { text = "C# Button" };
csharpButton.AddToClassList("some-styled-button");
container.Add(csharpButton);
uxml如果都得用手写那显然太麻烦了,所以unity制作了一个可视化编辑工具uibuilder。所以uibuilder需要通过PackageManger安装(unity2021以后的版本已经内置在引擎中)。
6.安装UIToolKit后,需要安装另一个组件:UIBuilder(界面构建器)。打开高级选项:
![](https://img.haomeiwen.com/i26067915/c916a9f7d043e8cd.png)
7.在高级选项中勾选enable preview packages 启用预览包。
![](https://img.haomeiwen.com/i26067915/80ad036382395741.png)
8.回到管理界面,切换包的分组源为unity registry
![](https://img.haomeiwen.com/i26067915/c57370f0a3e77d24.png)
9.找到UIBuilder并安装。
![](https://img.haomeiwen.com/i26067915/b76c0c09e6b039a2.png)
10.安装完毕后回到unity编辑器,在层级面板中右键uitoolkit-ui document
![](https://img.haomeiwen.com/i26067915/2f49535b0457d3f9.png)
11.在项目面板中创建一个ui document
![](https://img.haomeiwen.com/i26067915/36323c8eecf7f3f4.png)
12.指定层级面板中uidocument的source asset
![](https://img.haomeiwen.com/i26067915/8ac38aeace846cd3.png)
13.双击打开project目录下的uxml,会打开uibuilder,这个界面下就可以编辑UI元素
![](https://img.haomeiwen.com/i26067915/4c7dca1c6e6c778b.png)
14.从containers拖入一个visualement到hierachy中,活着直接拖入viewport中
![](https://img.haomeiwen.com/i26067915/6515a78b97605321.png)
15.设置size
![](https://img.haomeiwen.com/i26067915/707f44045c18a9b8.png)
16.设置位置
![](https://img.haomeiwen.com/i26067915/2e3a5debafa7ef82.png)
17.设置背景颜色
![](https://img.haomeiwen.com/i26067915/45d42dc522ee951d.png)
18.保存回到场景即可看到效果(第一次有可能需要play下):
![](https://img.haomeiwen.com/i26067915/5ab6ed41275ca305.png)
19.从library中添加label并改名为countertext
![](https://img.haomeiwen.com/i26067915/e425418e78f3c034.png)
20.添加一个按钮并改名为counter_button
![](https://img.haomeiwen.com/i26067915/38fcc500e50156dd.png)
21.设置对其方式为居中对齐
![](https://img.haomeiwen.com/i26067915/4f674f269cf559f4.png)
22.回到编辑器,创建一个脚本:UICounter.cs,挂载到场景的uidocument上,编辑代码:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;
public class UICounter : MonoBehaviour
{
private Label _counterText;
private Button _counterButton;
// Start is called before the first frame update
void Start()
{
var root = this.GetComponent<UIDocument>().rootVisualElement;
_counterText = root.Q<Label>("Countertext");
_counterButton = root.Q<Button>("Counter_button");
_counterButton.RegisterCallback<ClickEvent>(ev => OnClick());
}
private void OnClick()
{
_counterText.text = $"Click";
}
}
23.看看最终执行的效果
![](https://img.haomeiwen.com/i26067915/861f4dbb60f2e6a8.png)
说明:UIToolKit合并Drawcall能力要强于UGUI,如果图集数量在8个以内,字体数量在一个以内UIToolKit可以将所有界面都合并成一个DrawCall,相反在UGUI中就会占9个DrawCallle ,如果界面多了出现叠层DrawCal会更多。
UIToolkit是支持UGUI的Atlas图集的,但其实它支持的是Texture,即使把Sprite都打在一个图集中也不定能能合并DrawCall,它支持Sprite的Tight模式,增加顶点数减少填充率。只要按照绘制的顺序它会将前8个Texture合并成一个DrawCall,或者有N个Image只要它们用的都是这8个图中的任意,这些也会合并成一个 DrawCall。
就目前的情况来说UIToolkit是不可能代替UGUI的,比如UI粒子叠层、美术的K帧动画、3D透视界面、复杂的层次结构界面,这些都不适合。但是有些界面,比如头顶血条+文字、弹窗、对性能要求较高的一部分界面可以考虑使用UIToolkit,几乎都能合并成一个DrawCall。目前官方也表示UIToolkit和UGUI可以混合使用。
网友评论