【Unity基础】初识UI Toolkit - 运行时UI

Unity中的UI工具包(UI Toolkit)不但可以用于创建编辑器UI,同样可以来创建运行时UI。

关于Unity中的UI系统以及使用UI工具包创建编辑器UI可以参见:

  1. Unity中的UI系统

  2. 初识UI Toolkit - 编辑器UI

本文将通过一个简单示例来介绍如何使用UI工具包来创建运行时UI。

一、创建UI Document(.uxml)

  1. 使用任意模板新建一个Unity项目。

  2. Project 中,右键点击Scene ,选择Create > UI Toolkit > UI Document ,命名为SimpleRuntimeUI

  1. Project 里,点击SimpleRuntimeUI 右侧箭头展开后,双击inlineStyle,在文本编辑器里打开。并将文件内容替换为下面代码。

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False"> <ui:VisualElement style="flex-grow: 1;"> <ui:Label text="This is a Label" display-tooltip-when-elided="true"/> <ui:Button text="This is a Button" display-tooltip-when-elided="true" name="button"/> <ui:Toggle label="Display the counter?" name="toggle"/> <ui:TextField picking-mode="Ignore" label="Text Field" text="filler text" name="input-message" /> </ui:VisualElement> </ui:UXML> |

二、将UI Document与场景关联

  1. 在场景中,选择菜单GameObject > UI Toolkit > UI Document ,新建一个对象。在Hierarchy中选择UIDocument,将Project 中的SimpleRuntimeUI.uxml 拖到Inspector 中的Source Asset中。

三、创建MonoBehaviour脚本

  1. 选择菜单Assets > Create > Scripting > Monobehaviour Script ,创建脚本并命名为SimpleRuntimeUI.cs

  2. 双击SimpleRuntimeUI.cs,打开后将内容替换为下面代码。

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| using UnityEngine; using UnityEngine.UIElements; public class SimpleRuntimeUI : MonoBehaviour { private Button _button; private Toggle _toggle; private int _clickCount; //Add logic that interacts with the UI controls in the `OnEnable` methods private void OnEnable() { // The UXML is already instantiated by the UIDocument component var uiDocument = GetComponent<UIDocument>(); _button = uiDocument.rootVisualElement.Q("button") as Button; _toggle = uiDocument.rootVisualElement.Q("toggle") as Toggle; _button.RegisterCallback<ClickEvent>(PrintClickMessage); var _inputFields = uiDocument.rootVisualElement.Q("input-message"); _inputFields.RegisterCallback<ChangeEvent<string>>(InputMessage); } private void OnDisable() { _button.UnregisterCallback<ClickEvent>(PrintClickMessage); } private void PrintClickMessage(ClickEvent evt) { ++_clickCount; Debug.Log("{"button"} was clicked!" + (_toggle.value ? " Count: " + _clickCount : "")); } public static void InputMessage(ChangeEvent\ evt) { Debug.Log("{evt.newValue} -> {evt.target}"); } } |

  1. 保存文件并返回Unity。在Hierarchy 中选择UIDocument,将Project 中的SimpleRuntimeUI拖到Inspector的空白处,给UIDocument添加脚本组件。

  2. 点击"运行",在Game窗口中就可以看到如下UI。点击Button,可以在控制台看到输出的消息。

相关推荐
霸王•吕布2 小时前
游戏引擎中顶点着色&像素着色
游戏引擎·顶点着色器·像素着色器·顶点颜色·顶点uv·顶点法向
yanjiee2 小时前
需要scl来指定编译器的clangd+cmake在vscode/cursor开发环境下的配置
ide·vscode·编辑器
Thomas_YXQ5 小时前
Unity URP法线贴图实现教程
开发语言·unity·性能优化·游戏引擎·unity3d·贴图·单一职责原则
徐子竣12 小时前
[学习记录]Unity-Shader-几何着色器
unity·游戏引擎·着色器
hero_heart16 小时前
vscode中c_cpp_properities.cpp文件生成和作用
ide·vscode·编辑器
EQ-雪梨蛋花汤18 小时前
【Part 3 Unity VR眼镜端播放器开发与优化】第四节|高分辨率VR全景视频播放性能优化
unity·音视频·vr
FrostedLotus·霜莲19 小时前
C++主流编辑器特点比较
开发语言·c++·编辑器
与火星的孩子对话1 天前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
DO ITNOW1 天前
Cursor/VScode ,点击运行按钮,就打开新的终端,如何设置为在当前终端运行文件而不是重新打开终端----一招搞定篇
ide·vscode·编辑器
小妖6661 天前
若 VSCode 添加到文件夹内右键菜单中显示
ide·vscode·编辑器