【Unity】UIElements Expansions: Responsive Grid

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通用功能

请参阅以下页面。

【Unity】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

<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

<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"」。