Table of contents
UIElements Expansions是Unity Editor的扩展资产。
UIElements Expansions: Responsive Grid
「UIElements Expansions: Responsive Grid」系列强烈支持「UIElements」,开始与Unity 2019.1。
所谓UIElements
UIElements是从Unity 2019.1开始引入的替换当前Unity编辑器的GUI系统(IMGUI)的功能。
您可以创建Unity的GUI,就像使用HTML和CSS创建网页一样,组合Unity的HTML「UXML」和Unity的样式表「USS」。
当然,您可以像以前一样在编辑器脚本中为编辑器编写处理,并且有像jQuery这样的方法,因此您可以创建像HTML5这样的动态GUI。
在未来,计划不仅取代编辑器,还取代运行时GUI(当前uGUI),并且有望留给未来的Unity GUI。
只是潜力很高,但由于它刚刚推出,它还没有足够的功能来充分利用它。
「UIElements Expansions」是一种强烈支持其缺失部分的资产。
此「UIElements Expansions: Responsive Grid」主要支持以下功能。
- UIElements Expansions通用功能
- 全局样式表
- 检查器自动转换功能
- 添加标签/功能
- 附加类
- 响应式样片
- 类似Bootstrap的网格系统
UIElements Expansions通用功能
请参阅以下页面。
响应式样片

使用「UIElements Expansions: Responsive Grid」,您可以构建响应式设计,根据屏幕尺寸切换到最佳显示,就像现代网站一样。
从Unity编辑器菜单中,单击Responsive Grid Demo「Masamune/Demo/Responsive Grid Demo」以查看Responsive Grid Demo窗口。然后,请尝试将窗口大小水平放大或垂直放大。
你会看到窗口的侧面菜单移动。
通过这种方式,根据屏幕尺寸优化显示。
通过编辑「EditorStyleInfo」,可以详细指定画面尺寸和当时应用的USS文件。
类似Bootstrap的网格系统

「UIElements Expansions: Responsive Grid」采用了与「Bootstrap」相似的网格系统,这是一种流行的Web设计框架,用于实现响应式结构。
「Bootstrap」系统通过将水平网格划分为12个网格并指定要在类中使用的水平网格来确定元素的宽度。
它还支持响应式,因此网格将垂直对齐,具体取决于屏幕尺寸变小。通过描述4种类型的「xs」,「sm」,「md」,「lg」,您可以指定要垂直排列的屏幕尺寸。
「Bootstrap」是Web设计中广泛使用的框架,因此有许多网站可供参考。详细说明请搜索或浏览官方网站。
利用方法
导入

请从Unity Asset Store购买。
购买后可从「我的资产」导入。
响应式样片

可以就那样使用。
设置新的样式表
打开「Asset/Masamune/Modules/unity.style/Resources/EditorStyleInfo」。「EditorStyleInfo」是「全局样式表」的设置文件,但您可以从「StyleSheet Settings」的「Style Sheets For Responsive」设置响应式工作表。
每个项目都有以下设置项目。
- Type
- 可以设置「以上」和「以下」
- Width
- 可以设置水平宽度。结合上面的「类型」,设定横宽的范围。
- Style Sheets
- 仅在「Type」和「Width」中设置的范围内应用样式表。
例如,如果要应用仅将窗口大小更改为500或更大的颜色的样式表「Color.uss」,请指定以下设置。
- Type
- Greater Than
- Width
- 500
- Style Sheets
- Color.uss
类似Bootstrap的网格系统

基本上它与Bootstrap的GridSystem用法相同。
基本用法
基本上,我使用Div(VisualElement)标签和「container」「row」类并在其中写一列。
<engine:Div class="container">
<engine:Div class="row">
Columns
</engine:Div>
</engine:Div>
将水平宽度拆分为12个网格,并根据您使用的网格数量确定实际列的宽度。
例如,如果要创建3个列,请编写如下UXML。
One of three columns | One of three columns | One of three columns |
<engine:Div class="container">
<engine:Div class="row">
<engine:Div class="col-4">
<engine:Label text="One of three columns" />
</engine:Div>
<engine:Div class="col-4">
<engine:Label text="One of three columns" />
</engine:Div>
<engine:Div class="col-4">
<engine:Label text="One of three columns" />
</engine:Div>
</engine:Div>
</engine:Div>
在这种情况下,我们使用12个网格中的4个,因此我们指定「class="col-4"」。
如果要创建两列,请编写UXML,如下所示。
One of two columns | One of two columns |
<engine:Div class="container">
<engine:Div class="row">
<engine:Div class="col-6">
<engine:Label text="One of two columns" />
</engine:Div>
<engine:Div class="col-6">
<engine:Label text="One of two columns" />
</engine:Div>
</engine:Div>
</engine:Div>
在这种情况下,我们使用12个网格中的6个,因此我们指定「class="col-6"」。
グリッドオプション
您可以使用网格选项使其具有响应能力。即使检查器或编辑器窗口的屏幕尺寸变小,通过使其响应,网格也会针对其显示进行优化。
为列元素指定每个类名,最大宽度如下所示。
当窗口大小小于最大宽度时,列的宽度将显示为窗口大小的整个宽度,并且每个列将垂直对齐。
Extra Small | Small | Medium | Large | |
最大宽度 | None | 420 | 680 | 970 |
类名 | .col-* | .col-sm-* | .col-md-* | .col-lg-* |
总结
「UIElements Expansions: {AssetName}」强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。
此外,即使屏幕尺寸发生变化,您也可以根据屏幕尺寸相应地更改设计结构。
该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。
如果您有兴趣,请务必考虑一下,因为它在资产商店出售!