枣庄网站建设多少钱,陕西宁德建设工程有限公司网站,查询自己网站外链,工程在哪个网站做推广比较合适1 前言 UI Toolkit 是一种基于 Web 技术的 GUI 框架#xff0c;是为了解决 UGUI 效率问题而设计的新一代 UI 系统#xff08;UGUI 的介绍详见→UGUI概述#xff09;。与 UGUI 不同#xff0c;UI Toolkit 没有采用 GameObject 的方式#xff0c;而是参考了 Web 技术的 XML …1 前言 UI Toolkit 是一种基于 Web 技术的 GUI 框架是为了解决 UGUI 效率问题而设计的新一代 UI 系统UGUI 的介绍详见→UGUI概述。与 UGUI 不同UI Toolkit 没有采用 GameObject 的方式而是参考了 Web 技术的 XML 和 CSS 方案。这意味着它只保存变化的数据而不是整个界面状态这使得它具有更高的效率。 UI Toolkit 的历史可以追溯到 Unity 2018 年发布的 UIElement起初主要用于 Editor 编辑面板中的 UI 开发自 Unity 2019 起它开始支持运行时 UI并更名为 UIToolkit它以 Package 包com.unity.ui的形式存在并在 Unity 2021.2 版本中被官方内置在 Unity 中与 UGUI 的地位相同。 UI Toolkit 的优点
跨平台高性能一个 Draw Call 绘制所有 UI自定义样式应用到任何元素复用性、灵活性更好配套的 UI 编辑工具UI Builder同使支持 Editor 和 Runtime UI Toolkit 的缺点
不依赖 GameObject难以制作放置在 3D 世界中的可互动 UI不支持 Shader难以制作特效不支持 Animator 组件无法制作实时循环动画但有 Transition 动画系统 UI Toolkit 内置案例见【Window→UI Toolkit→Samples】。
2 UI Toolkit 简单使用 1创建 UI Document 对象 在 Hierarchy 窗口右键依次选择【UI Toolkit→UI Document】创建 UI Document 对象如下。 Panel Settings定义一些全局的配置比如字体、样式等信息在创建 UI Document 对象时会自动创建 PanelSettings.asset 文件Source Asset待显示的页面资源Sort Order排序顺序当有多个 UIDocument 对象时序号越小的越先显示在底部序号越大的越后显示在顶部 2创建 uxml 资源文件 在 Assets 窗口右键依次选择【Create→UI Toolkit→UI Document】会生成一个 uxml 文件重命名为 TestUXMLTemplate并在 UIDocument 对象的 Inspector 窗口将 Source Asset 设置为 TestUXMLTemplate如下。 3编辑 uxml 文件 在 Assets 窗口双击 TestUXMLTemplate.uxml 文件会打开 UI Builder 窗口或者在菜单栏依次选择【Window→UI Toolkit→UI Builder】也可以打开 UI Builder 窗口。将 VisualElement 拖拽到 Hierarchy 窗口如下。 选中 Hierarchy 窗口 中的 VisualElement在 Inspector 窗口配置 Flex 和 Background如下按 Ctrl S 键保存。 4查看效果 回到 Game 窗口显示效果如下。中间的立方体是事先添加的 Cube 对象半透明的黄色是 UI Document 显示的效果。 3 UI Builder 窗口介绍 在 Unity 2021.2 版本之前需要在 Package Manager 窗口中安装 UI Builder自 Unity 2021.2 版本开始 UI Builder 已内置在 Unity Editor 中。 在 Assets 窗口双击 uxml 文件会打开 UI Builder 窗口或者在菜单栏依次选择【Window→UI Toolkit→UI Builder】也可以打开 UI Builder 窗口。 StyleSheets样式窗口用于管理元素样式Hierarchy元素层级窗口用于管理元素Library容器和元素库Inspector监视器窗口用于配置容器和元素属性。 滚动鼠标滑轮可以放大和缩小预览窗口大小按鼠标中键拖拽可以调整预览窗口的位置。点击 Viewport 窗口右上角的 Preview 按钮可以查看运行态的 UI 界面。 4 样式属性介绍 每个元素或容器都有以下样式属性本节将逐一讲解这些属性。 4.1 StyleSheet样式表 样式表模块中可以添加和导出样式并查看匹配到的样式选择器。样式选择器官方介绍详见→USS selectors。 4.2 Inlined Styles内部样式 内部样式官方介绍详见→USS common properties样式属性官方介绍详见→USS properties referenceBox model 如下。 4.2.1 Display显示 Opacity不透明度取值为 0 ~ 100。0 表示透明的100 表示完全不透明。Display占位显示取值有 flex、none。flex 表示尽可能占用剩余空间none 表示不占用空间其他元素或容器会挤占该元素或容器空间导致该元素或容器不可见。Visibility可见性取值有 visible、hidden。visible 表示元素或容器可见hidden 表示元素或容器不可见但该元素或容器的空间仍然占用着其他元素不会挤占该元素或容器的空间。Overflow裁剪时的边距策略取值有 visible、hidden。在子元素或容器边框超过当前容器的场景下visible 表示当前容器的 Margin Padding 不会约束超出部分的容器hidden 表示当前容器的 Margin Padding 会约束超出部分的容器。 如下容器的 overflow 属性设置为 visible边距没有对文本生效。 4.2.2 Position位置 Position取值有 Relative、Absolute它们的区别是Relative 表示在平铺排列后相对于自己的偏移Absolute 表示相对于父容器的偏移官方释义见→Relative and absolute positioning。Left元素或容器左侧的位置。Top元素或容器顶部的位置。Right元素或容器右侧的位置。Bottom元素或容器左侧的位置。 Position 的取值类型有px、%、auto、initial含义如下
px取值单位是像素。%取值单位是百分比。auto自动的取值受 Flex、Align、样式选择器等影响。initial取值受 Flex、Align 等影响不受样式选择器影响。
4.2.3 Flex拉伸 Basis元素或容器的基础空间取值类型有 px、%、auto、initial含义同 4.2.2 节。Shrink如果水平方向有空余空间元素或容器占用水平方向剩余空间的比例取值有比例值、initial不占用剩余空间。Grow如果竖直方向有空余空间元素或容器占用竖直方向剩余空间的比例取值有比例值、initial不占用剩余空间。Direction子元素或容器排列的方向取值有column从上往下、column-reserve从下往上、row从左往右、row-reserve从右往左。Wrap子元素或容器的排列超过一行或一列后的排列策略取值有 nowrap不换行截断显示、wrap、wrap-reverse
4.2.4 Align对齐 Align Itemsauto、flex-start、flex-end、center、stretchJustify Contentflex-start、flex-end、center、space-between、space-around 说明Align 的属性受 Flex 的 Direction 影响。
4.2.5 Size尺寸 Width元素或容器的宽度取值类型有 px、%、auto、initial含义同 4.2.2 节。Height元素或容器的高度取值类型有 px、%、auto、initial含义同 4.2.2 节。Max元素或容器的最大宽度和高度取值类型有 px、%、none不限、initial含义同 4.2.2 节。Min元素或容器的最小宽度和高度取值类型有 px、%、auto、initial含义同 4.2.2 节。
4.2.6 Margin Padding外边距和内边距 Margin外边距取值类型有 px、%、auto、initial含义同 4.2.2 节。Padding内边距取值类型有 px、%、auto、initial含义同 4.2.2 节。
4.2.7 Text 文本 Font字体类型。Font Asset字体资源。Font Style字体样式取值有 bold粗体、italic斜体。Size字体大小。Color字体颜色。Align字体对齐方式取值有 left居左、center水平居中、right居右、upper居上、middle竖直居中、lower居下。Wrap字体包裹方式即文字超过一行后的显示方式取值有 normal自动换行、nowrap截断显示。Outline Width描边宽度。Outline Color描边颜色。Text Shadow文本阴影。Letter Spacing字符间隔取值类型有 px、initial含义同 4.2.2 节。World Spacing单词间隔取值类型有 px、initial含义同 4.2.2 节。Paragraph Spacing段落间隔取值类型有 px、initial含义同 4.2.2 节。
4.2.8 Background背景 Color背景颜色。Image背景图片。Image Tint背景图片颜色。Scale Mode图片缩放模式取值有 stretch-to-fill宽度和高度都铺满会破坏图片的原始宽高比、scale-and-crop宽度和高度都铺满保持图片的原始宽高比可能会裁剪图片、scale-to-fit宽度或高度铺满保持图片的原始宽高比。Slice切片比例将图片划分为 9 宫格4 个角的图片保持原始尺寸不变可以用于对话框背景。
4.2.9 Border边框 Color边框颜色。Width边框宽度取值类型有 px、initial含义同 4.2.2 节。Radius边框圆角取值类型有 px、%、initial含义同 4.2.2 节。
4.2.10 Transform变换 Transform 官方介绍见→USS transform。 Pivot Origin变换作用的中心取值类型有 px、%含义同 4.2.2 节。Translate平移偏移量取值类型有 px、%含义同 4.2.2 节。Scale缩放偏移量取值类型有比例数值、none、initial含义同 4.2.2 节。Rotate旋转角度取值单位有 deg角度、grad梯度100 grad 90 deg、rad弧度、turn圈1 turn 360 deg。
4.2.11 Cursor光标 Cursor Image鼠标图片。
4.2.12 Transition Animations过渡动画 Transition Animations 官方介绍见→USS transition。 Property动画作用的属性。Duration过渡动画执行的时间取值类型有 s秒、ms毫秒、initial。Easing属性随时间的变化函数类似于插值器。Delay动画延时执行时间取值类型有 s秒、ms毫秒、initial。
5 UQuery UQuery 主要用于查找子元素或子容器可以通过 type 和 name 查找。元素或容器的 Query 方法用于查找所有符合条件的子元素或子容器元素或容器的 Q 方法用于查找第一个符合条件的子元素或子容器。
5.1 UQuery 多元素查找Query 方法 1通过 type 查找
rootVisualElement.QueryLabel().ForEach(OnSelectedMultipleElements);private void OnSelectedMultipleElements(Label obj) {obj.text xxx;
} rootVisualElement 是根 VisualElement 容器获取方式如下下同。
VisualElement rootVisualElement GetComponentUIDocument().rootVisualElement; 2通过 name 查找
rootVisualElement.Query(VisualElementName).ForEach(OnSelectedMultipleElements);private void OnSelectedMultipleElements(VisualElement obj) {obj.style.backgroundColor Color.black;
} 3通过 type 和 name 查找
rootVisualElement.QueryLabel(LabelName).ForEach(OnSelectedMultipleElements);
rootVisualElement.QueryLabel(LabelName).AtIndex(1).text yyy;private void OnSelectedMultipleElements(Label obj) {obj.text xxx;
}
5.2 UQuery 单元素查找Q 方法 1通过 type 查找
Label label rootVisualElement.QLabel();
label.text xxx; 2通过 name 查找
VisualElement visualElement rootVisualElement.Q(VisualElementName);
visualElement.style.backgroundColor Color.black; 3通过 type 和 name 查找
Label label rootVisualElement.QLabel(LabelName);
label.text xxx;
6 UI Toolkit Debugger调试器 1打开 UI Toolkit Debugger 在 UI Builder 窗口的右上角点击更多展开后点击 UI Toolkit Debugger 即可打开调试窗口也可以通过【Window→UI Toolkit→Debugger】打开调试窗口。 2查看 Box model 点击 Show Layout 按钮可以看到画布的元素布局边界如下。 选中元素或容器在 Debugger 窗口可以看到 Box model 等信息如下。点击 Pick Element 按钮可以在 Viewport 窗口拾取元素信息。
