【Unity基础】初识UI Toolkit - 编辑器UI

news2024/10/30 6:59:58

（本文所需图片在文章上面的资源中，点击“立即下载”。）

本文介绍了如何通过UI工具包（UI Toolkit）来创建一个编辑器UI。

一、创建项目

1. 打开Unity创建一个空项目（任意模板），这里我们以URP 3D为例。

2. 在项目的Assets文件夹中，新建一个文件夹Editor，并在Editor中新建一个文件夹Resources。我们将把脚本放在Assets/Editor中，其他资源文件放在Assets/Editor/Resources中。（关于Unity中的特殊文件夹，请参见这篇文章）

3. 右键点击Editor文件夹，选择Create > UI Toolkit > Editor Window。

4. 将本文资源中几个图标文件下载后存放在Editor/Resources/Icons中。

二、创建项目

接下来我们将创建编辑器窗体并将其添加到Unity的菜单中。

1. 在UI Toolkit Editor Window Creator中，在C#一栏输入QuickTool，并且取消勾选UXML和USS。如下图所示。（当然你也可以不取消勾选这两项，那么将会自动创建UXML和USS文件。不过在这篇文章中，我们将手动创建这两个文件。）

2. 点击“Confirm”保存，以创建Editor窗体。

3. 现在我们将设置窗体的大小以及在菜单中的位置。打开QuickTool.cs文件（以Visual Studio为例），并将其中的MenuItem和ShowExample部分用下面的代码替换。

public class QuickTool : EditorWindow

{

    [MenuItem("QuickTool/Open _%#T")]

    public static void ShowWindow()

    {

        // Opens the window, otherwise focuses it if it's already open.

        var window = GetWindow<QuickTool>();

        // Adds a title to the window.

        window.titleContent = new GUIContent("QuickTool");

        // Sets a minimum size to the window.

        window.minSize = new Vector2(280, 50);

}

}

说明：代码中MenuItem字符串末尾的_%#T，是为了添加一个打开窗口的快捷键，在Windows中是Ctrl+ Shift + T（在Mac上是Command + Shift + T）

4. 保存代码并返回Unity。这时你将在菜单中看到QuickTool。点击QuickTool > Open，将打开新建的Editor窗口。

三、搭建UI

在UI工具包中，用户界面是由单个的可视化元素组成。多个界面元素设计并组合到UI模板文件中，也是就*.uxml文件中。一个UXML文件存储所有界面元素的结构，样式和布局。这种组合的方式在Unity中被称为可视化树（Visual Tree）。

一个UI界面是由一个或多个Visual Tree组成的。一个界面或Panel中会保存一个对根元素的引用，被称谓rootVisualElement。而通过UI模板文件或C#脚本创建的Visual Tree将被添加到这个根元素下面，这样就可以显示在屏幕上。

每一个EditorWindow都会将所有的UI元素保存在rootVisualElement中。

通过脚本来创建界面元素

在我们进入UXML之前，先来看看如何通过脚本创建界面元素。

在QuickTool.cs文件中，找到QuickTool类，它里面有一个CreateGUI()方法。这个方法就包括了对rootVisualElement的引用，并将一个label显示在窗体中。

当然你也可以在这里添加更多的页面元素。下面的代码将添加一个按钮，并将其大小设置为160x30 px。

private void CreateGUI()

{

    // Reference to the root of the window.

    var root = rootVisualElement;

    // Creates our button and sets its Text property.

    var myButton = new Button() { text = "My Button" };

    // Give it some style.

    myButton.style.width = 160;

    myButton.style.height = 30;

    // Adds it to the root.

    root.Add(myButton);

}

保存代码并返回到Unity，现在窗体将显示为如下图所示的样子。

我们可以通过C#脚本添加更多的页面元素。但是当界面变得复杂时，通过这种方式将增加维护的难度。Unity推荐的方法是，使用UXML单独保存页面元素，使用USS保存样式，并在C#中加载UI模板和添加对元素行为的控制以及数据绑定关系。

下面先删除或注释掉CreateGUI()方法中的代码，我们将先创建一个新的UXML文件。

创建UXML文件

接下来我们将创建一个单独的UXML文件。

当然比较高效的方法是先创建一个可重用的UI模板，然后就可以在其他模板中反复调用来创建新元素。下面我们将创建两个模板：

  • ButtonTemplate：保存带有图标的按钮。
  • QuickTool_Main：保存将添加到rootVisualElement中的UI结构。它将通过button模板创建5个工具栏按钮，并进行布局。

1. 在Unity中，在Project中找到Assets/Editor/Resources文件夹。从菜单中，选择Assets > Create > UI Toolkit > UI Document。这样就会在文件夹中新建一个UXML文件。

2. 将这个文件命名为ButtonTemplate。

3. 重复上面的过程，再新建一个UXML文件，并命名为QuickTool_Main。

说明：双击UXML文件会打开UIBuilder窗口，如果想在文本编辑器中打开文件，需要点击文件右侧的箭头，并双击inlineStyle（将用Unity中关联的默认代码编辑器打开，比如Visual Studio）。

4. 在文本编辑器打开ButtonTemplate.uxml文件，并将内容替换为下面的代码：

<UXML xmlns="UnityEngine.UIElements">

  <!-- Creates the button. -->

  <VisualElement class="quicktool-button unity-button">      

    <!-- Adds a VisualElement child (corresponding to the button's icon). -->

    <VisualElement class="quicktool-button-icon"/>   

  </VisualElement>

</UXML>

上面的UXML代码将创建一个带有图标的按钮。这个按钮和图标在UXML中有不同的名称。添加名称的目的主要是：

  • 通过脚本访问元素
  • 为这些元素添加样式

5. 下一步，利用上面的button模板创建UI。打开QuickTool_Main.uxml文件，并将其内容用下面代码替换。

<UXML xmlns="UnityEngine.UIElements">

  <!-- Creates our template and gives it a name for future reference. -->

  <Template path="Assets/Editor/Resources/ButtonTemplate.uxml" name="button-template" />

  <!-- Creates a parent VisualElement inside which we will use our button template. -->

  <VisualElement class="buttons-container">

    <!-- Instantiates the template multiple times. Each time, we give it a name for future reference. -->

    <Instance template="button-template" name="Cube"/>

    <Instance template="button-template" name="Sphere"/>

    <Instance template="button-template" name="Capsule"/>

    <Instance template="button-template" name="Cylinder"/>

    <Instance template="button-template" name="Plane"/>

  </VisualElement>

</UXML>

这个UXML中包括了5个以button模板创建的按钮。每一个按钮都有不同的UXML标签名称。后面我们将通过这些名称来创建不同的基础对象。务必确保这些名称和上面的代码完全一致，否则在后面使用时将会出错。

四、创建脚本

上面我们已经完成了UXML的内容。接下来将开始编写C#脚本。

1. 打开QuickTool.cs文件，将其中CreateUI()的内容用下面的代码替换。

    private void CreateGUI()

    {

        // Reference to the root of the window.

        var root = rootVisualElement;

        // Loads and clones our VisualTree (eg. our UXML structure) inside the root.

        var quickToolVisualTree = Resources.Load<VisualTreeAsset>("QuickTool_Main");

        quickToolVisualTree.CloneTree(root);

        // Queries all the buttons (via class name) in our root and passes them

        // in the SetupButton method.

        var toolButtons = root.Query(className: "quicktool-button");

        toolButtons.ForEach(SetupButton);

    }

上面的CreateGUI()方法将加载UI模板并用Clone()方法创建元素将其添加到窗体的根元素中。然后通过SetupButton()方法来创建工具栏中的多个按钮。

2. 在QuickTool.cs中，创建SetupButton方法。

private void SetupButton(VisualElement button)

    {

        // Reference to the VisualElement inside the button that serves

        // as the button's icon.

        var buttonIcon = button.Q(className: "quicktool-button-icon");

        // Icon's path in our project.

        var iconPath = "Icons/" + button.parent.name + "_icon";

        // Loads the actual asset from the above path.

        var iconAsset = Resources.Load<Texture2D>(iconPath);

        // Applies the above asset as a background image for the icon.

        buttonIcon.style.backgroundImage = iconAsset;

        // Instantiates our primitive object on a left click.

        button.RegisterCallback<PointerUpEvent, string>(CreateObject, button.parent.name);

        // Sets a basic tooltip to the button itself.

        button.tooltip = button.parent.name;

    }

SetupButton()方法检索到按钮下方的VisualElement（可视化元素）引用，该元素用于容纳按钮的图标。它通过Q()方法以及在UXML文件中指定的类名quicktool-button-icon来获取元素。接着，将一个图像分配给该元素。同时，它还为按钮分配了一个回调方法，该方法会在用户点击按钮时触发。

3. 在QuickTool.cs文件最前面添加using System的命名。

4. 在QuickTool类中，创建一个CreateObject回调方法。这是一个根据按钮名称来创建基础对象的简单方法。

    private void CreateObject(PointerUpEvent _, string primitiveTypeName)

    {

        var pt = (PrimitiveType)Enum.Parse

                     (typeof(PrimitiveType), primitiveTypeName, true);

        var go = ObjectFactory.CreatePrimitive(pt);

        go.transform.position = Vector3.zero;

    }

5. 保存代码并返回Unity。当打开窗体时，你将看到按钮显示出来，但是没有图标并且没有按横向排列。在下面这一部分我们将进一步完善。

五、设计样式

每一个VisualElement（可视化元素）都可以通过样式属性来影响其在屏幕上显示的效果。这些样式属性既可以在C#脚本中直接设置，也可以通过样式来设置。除了布局属性外，还有像backgroundImage或borderColor这些影响显示效果的属性。

在Unity中是通过USS文件来保存样式表的。在USS文件中可以定义多个部分。主要有：

  • 以 “.”开始，将匹配类（所有包括了有特定class属性名称的元素）。
  • 以 “#”开始，将匹配VisualElement名称（不是唯一的）。
  • 简单的按C#中的类型匹配。

说明：为了简单起见，我们将为整个窗体使用一个样式文件。当然，如果需要的话，你也可以使用多个样式文件。

1. 在Unity的Project中，找到Assets > Editor > Resources。

2. 通过菜单Assets > Create > UI Toolkit > Style Sheet创建一个新的USS文件，并命名为QuickTool_Style。

3. 在样式文件中，添加下面样式，用于button容器。

.buttons-container {

    /* Populates the elements in this container horizontally. */

    flex-direction: row;

    /* Makes the content of the container wrap when resized. */

    flex-wrap: wrap;

}

说明：这里我们只是在设置Flex属性。这是任何UI Toolkit布局的核心，理解其工作流程是必不可少的。要了解更多关于Flex属性的信息，点击此处。

4. 为button和图标创建样式。

.quicktool-button {

    width: 50px;

    height: 50px;

    /* Style rule that aligns items on the horizontal axis. */

    align-items: flex-start;

    /* Style rule that aligns items on the vertical axis. */

    justify-content: center;

}

.quicktool-button-icon {

    height: 40px;

    width: 40px;

    opacity: 0.8;

}

/* How the icon should behave when hovered. */

.quicktool-button-icon:hover {

    opacity: 1;

}

/* How the icon should behave when its parent button is clicked. */

.quicktool-button:active > .quicktool-button-icon {

    opacity: 0.6;

}

说明：在C#脚本中定义的样式将覆盖USS文件中对应的样式。比如，你在USS文件中设置了margin-top:5，在C#脚本中设置了VisualElement.style.marginTop=2，那么这个元素将使用VisualElement.style.marginTop =2。

5. 最后，我们将通过VisualElement.styleSheets.Add()方法将样式与VisualElement关联起来。在QuickTool.cs中，将CreateGUI()方法更新成如下。

private void CreateGUI()

{

    // Reference to the root of the window.

    var root = rootVisualElement;

    // Associates a stylesheet to our root. Thanks to inheritance, all root’s

    // children will have access to it.

    root.styleSheets.Add(Resources.Load<StyleSheet>("QuickTool_Style"));

    // Loads and clones our VisualTree (eg. our UXML structure) inside the root.

    var quickToolVisualTree = Resources.Load<VisualTreeAsset>("QuickTool_Main");

    quickToolVisualTree.CloneTree(root);

    // Queries all the buttons (via type) in our root and passes them

    // in the SetupButton method.

    var toolButtons = root.Query(className: "quicktool-button");

    toolButtons.ForEach(SetupButton);

}

说明：对样式表的更改将对运行中的Editor窗口立即生效。样式可以附件到任何VisualElement上，并可以应用到这个容器内的所有子元素上。

6. 保存文件并返回Unity。

现在这个自定义的Editor窗体已经完成。我们可以看到一个小的横向排列的工具栏，点击上面的按钮将在场景中创建对应的基础对象。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2227840.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

什么？Flutter 又要凉了？ Flock 是什么东西？

什么？Flutter 又要凉了？ Flock 是什么东西？

今天突然看到这个消息&#xff0c;突然又有一种熟悉的味道&#xff0c;看来这个月 Flutter “又要凉一次了”&#xff1a; 起因 flutter foundation 决定 fork Flutter 并推出 Flock 分支用于自建维护&#xff0c;理由是&#xff1a; foundation 推测 Flutter 团队的劳动力短缺…
阅读更多...
windows文件实时同步

windows文件实时同步

在现今这个高效运转的工作时代&#xff0c;数据同步与备份的重要性愈发凸显。特别是对于Windows用户&#xff0c;实现文件在不同设备间的实时流转&#xff0c;不仅能够显著提升工作效率&#xff0c;更是数据安全的一道重要防线。接下来&#xff0c;我们将深入剖析Windows文件实…
阅读更多...
全桥PFC电路及MATLAB仿真

全桥PFC电路及MATLAB仿真

一、PFC电路原理概述 PFC全称“Power Factor Correction”&#xff08;功率因数校正&#xff09;&#xff0c;PFC电路即能对功率因数进行校正&#xff0c;或者说是能提高功率因数的电路。是开关电源中很常见的电路。功率因数是用来描述电力系统中有功功率&#xff08;实际使用…
阅读更多...
rom定制系列------红米note8_miui14安卓13定制修改固件 带面具root权限 刷写以及界面预览

rom定制系列------红米note8_miui14安卓13定制修改固件 带面具root权限 刷写以及界面预览

&#x1f49d;&#x1f49d;&#x1f49d;红米note8机型代码&#xff1a;ginkgo。高通芯片。此固件官方最终版为稳定版12.5.5安卓11的版本。目前很多工作室需要高安卓版本的固件来适应他们的软件。并且需要root权限。根据客户要求。修改固件为完全root。并且修改为可批量刷写的…
阅读更多...
【传知代码】图像处理解决种子计数方法

【传知代码】图像处理解决种子计数方法

文章目录 一、背景及意义介绍研究背景农业考种需求传统计数方法的局限性人工计数仪器设备计数 研究意义提高育种效率提高计数准确性广泛的适用性数据存档与分析便利 二、概述三、材料与数据准备以及方法介绍整体流程图像采集图像预处理形态学操作腐蚀运算开运算 图像二值化种子…
阅读更多...
【鸿蒙HarmonyOS实战：通过华为应用市场上架测试版App实现HBuilder X打包的UniApp项目的app转hap教程（邀请码）方式教程详解】

【鸿蒙HarmonyOS实战：通过华为应用市场上架测试版App实现HBuilder X打包的UniApp项目的app转hap教程（邀请码）方式教程详解】

鸿蒙HarmonyOS实战&#xff1a;通过华为应用市场上架测试版App实现HBuilder X打包的UniApp项目的app转hap教程&#xff08;邀请码&#xff09;方式详解 在使用uniapp打包的鸿蒙项目的过程中&#xff0c;由于生成的是app文件&#xff0c;而hdc传给鸿蒙HarmonyOS系统需要的是hap文…
阅读更多...
2025选题|基于协同推荐的黔醉酒业白酒销售系统

2025选题|基于协同推荐的黔醉酒业白酒销售系统

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验&#xff0c;被多个学校常年聘为校外企业导师&#xff0c;指导学生毕业设计并参…
阅读更多...
从0开始学python-day17-数据结构2

从0开始学python-day17-数据结构2

2.3 队列 队列(Queue)&#xff0c;它是一种运算受限的线性表,先进先出(FIFO First In First Out) 队列是一种受限的线性结构 受限之处在于它只允许在表的前端&#xff08;front&#xff09;进行删除操作&#xff0c;而在表的后端&#xff08;rear&#xff09;进行插入操作 P…
阅读更多...
Element Plus在Vue3的安装

Element Plus在Vue3的安装

本来想下载element ui 的&#xff0c;但是不支持报错了 所以我们使用element plus 在终端使用下命令下载 npm install element-plus --save 然后就可以在package.json里面看到所下载的版本号了 之后在main.js中根据自己的的情况配置Element-Plus // main.ts import { create…
阅读更多...
App Inventor 2 列表显示框能否实现多选？

App Inventor 2 列表显示框能否实现多选？

Q&#xff1a;列表显示框有没有办法做到多选的功能&#xff1f; // 问题分析 // AppInventor2列表显示框原生并没有多选功能&#xff0c;只能点击其中一项&#xff0c;然后触发“选择完成时”这个事件&#xff0c;那么有没有办法做到多选呢&#xff1f; // 问题思路 // 经过…
阅读更多...
Topaz Video AI for Mac 视频无损放大软件安装教程【保姆级，操作简单轻松上手】

Topaz Video AI for Mac 视频无损放大软件安装教程【保姆级，操作简单轻松上手】

Mac分享吧 文章目录 Topaz Video AI for Mac 视频无损放大软件 安装完成&#xff0c;软件打开效果一、Topaz Video AI 视频无损放大软件 Mac电脑版——v5.3.5⚠️注意事项&#xff1a;1️⃣&#xff1a;下载软件2️⃣&#xff1a;安装软件&#xff0c;将安装包从左侧拖入右侧文…
阅读更多...
Linux基础—基础命令及相关知识5(ubuntu网络配置)

Linux基础—基础命令及相关知识5(ubuntu网络配置)

网络的配置方法 centos网络配置 centos的网卡位置 /etc/sysconfig/network-scripts/ifcfg-ens33(centos网卡文件) bootproto表示获得IP地址的方式是静态的还是动态 onboot表示启动系统时是否激活该网络接口 设置IP地址&#xff0c;子网掩码&#xff0c;网关&#xff0c;dns…
阅读更多...
数据分析与效果评估的有效方法与实践探讨

数据分析与效果评估的有效方法与实践探讨

内容概要 在现代社会中&#xff0c;数据分析与效果评估已成为各类项目管理和决策制定中的重要组成部分。首先&#xff0c;数据分析为我们提供了一种系统化的方法&#xff0c;以深入了解所收集数据的内涵与趋势。通过对数据进行整理、分类和分析&#xff0c;我们能够发现潜在的…
阅读更多...
一篇文章入门傅里叶变换

一篇文章入门傅里叶变换

文章目录 傅里叶变换欧拉公式傅里叶变换绕圈记录法质心记录法傅里叶变换公式第一步&#xff1a;旋转的表示第二步&#xff1a;缠绕的表示第三步&#xff1a;质心的表示最终步&#xff1a;整理积分限和系数 参考文献 傅里叶变换 在学习傅里叶变换之前&#xff0c;我们先来了解一…
阅读更多...
电源完整性

电源完整性

电源分配系统 电源分配系统:Power Distribution Network(简称 PDN) 真正用电节点在 Die&#xff0c;所以PDN系统包含 PCB 和 Package上的部分 PCB 上:VRM、大电容、小电容、电源平面、地平面 Package内:电容、电源平面、地平面 电源噪声的产生 稳压电源芯片本身的输出不恒定&a…
阅读更多...
Springboot 日志处理

Springboot 日志处理

一、日志存入数据库&#xff08;AOP&#xff09; 1.引入aop依赖 <!-- aop依赖 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId> </dependency> 2.创建aop包&#…
阅读更多...
SpringBoot3使用MyBatisPlus时遇到的问题 Invalid bean definition with name

SpringBoot3使用MyBatisPlus时遇到的问题 Invalid bean definition with name

问题&#xff1a; 运行springboot3项目报错&#xff1a;Invalid bean definition with name ‘XXXMapper’ defined in file… 原因&#xff1a;springboot3支持的mabits-plus依赖不同导致的 解决办法&#xff1a; 修改为&#xff1a; <dependency><groupId>com…
阅读更多...
Chrome和Firefox哪款浏览器的密码管理更安全

Chrome和Firefox哪款浏览器的密码管理更安全

在当今数字化时代&#xff0c;浏览器已成为我们日常生活中不可或缺的工具。其中&#xff0c;谷歌Chrome和Mozilla Firefox是两款广受欢迎的浏览器。除了浏览网页外&#xff0c;它们还提供了密码管理功能&#xff0c;帮助用户保存和管理登录凭证。然而&#xff0c;关于哪款浏览器…
阅读更多...
大数据新视界 -- 大数据大厂之大数据重塑影视娱乐产业的未来（4 - 4）

大数据新视界 -- 大数据大厂之大数据重塑影视娱乐产业的未来（4 - 4）

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…
阅读更多...
Mac安装Ruby

Mac安装Ruby

Mac 安装 Ruby 1. 介绍 Ruby 是一种简洁优雅、功能强大的编程语言。在 20 世纪 90 年代中期由日本的松本行弘&#xff08;まつもとゆきひろ/Yukihiro Matsumoto&#xff09;设计并开发。它具有简洁的语法、动态类型、完全面向对象和强大的元编程能力等特点。广泛应用于 Web 开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023