【Unity】UIElements Expansions: Form

UIElements Expansions是Unity Editor的扩展资产。

UIElements Expansions: Form

「UIElements Expansions: Form」系列强烈支持「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: Form」主要支持以下功能。

• UIElements Expansions通用功能
  • 全局样式表
  • 检查器自动转换功能
  • 添加标签/功能
  • 附加类
• 窗体功能
• 附加字段
• 文件上传表单

UIElements Expansions通用功能

请参阅以下页面。

窗体功能

「UIElements Expansions: Form」提供了一种功能,允许用户输入文本字段等,如HTML表单,按子分按钮发送数据,登录,用户注册,输入其他数据。

读取和保存数据仅提供界面,以便您可以自由选择目标,例如Firebase和ScribatleObject。

您也可以从脚本运行它,如果您创建静态方法,则无需直接编写EditorWindow脚本或检查器脚本,因为您可以从UXML读取和保存数据。

附加字段

在「UIElements Expansions: Form」中,我们创建了几个附加字段,以便更轻松地输入表单。

• SliderField
  • 可直接输入数值的滑块字段
• SliderIntField
  • SliderField的Int版本
• TextPopupField
  • 可以从UXML中指定元素的弹出字段

文件上传表单

「UIElements Expansions: Form」提供了一个表单,允许您选择和上传文件。

它只提供接口而不执行实际上传。

从计算机中选择文件并将其导入Unity项目。之后,由于传递了文件路径,因此可以使用它执行上传等。

要上传的文件是预览,它是一个用户友好的GUI。

利用方法

导入

请从Unity Asset Store购买。

购买后可从「我的资产」导入。

窗体功能

窗体对齐

添加表单很容易。只需用「engine:Form」标签括起文本字段等元素即可。

您还可以使用「engine:SubmitButton」标签放置表单的子分钟按钮。

<engine:Form>
  Any form fields
  <engine:SubmitButton label="Submit" />
</engine:Form>

处理窗体数据

表单在显示时提供「从数据库等读取」界面,在提交时提供「写入数据库等」界面。

您可以分别使用UXML标签和自己的静态方法轻松实现它们。

从数据库等读取

读取时的实现首先创建一个静态方法,该方法返回「Dictionary<string, object>」,如下所示。

// FormAction.cs
public static class FormAction {
  public static Dictionary<string, object> LoadToForm( ) {
    Something to do
    return dictionary;
  }
}

使用此Dictionary将数据还原到表单字段。

在显示窗体时执行此方法以读取数据。为此,请在「engine:Form」标签中指定「assembly (optional)」 「type」 「method」属性。

要执行上述方法,请执行以下描述。

<engine:Form type="FormAction" method="LoadToForm">
  Any form fields
  <engine:SubmitButton label="Submit" />
</engine:Form>

将读入的数据与各字段相关联

将扫描的数据设置为每个字段的默认值。

哪个字段对应于数据的哪个键由每个UXML标记的「name」属性确定。

<engine:TextField label="Name" text="Name input" name="Name" />
<editor:EnumField type="UnityEngine.SystemLanguage,UnityEngine" value="English" name="Language" label="Language" />

在上述示例中,文本字段应用数据的「Name」键中包含的数据,而Enum字段应用「Language」键中包含的数据。

如果密钥没有数据,则输入字段中指定的初始值。

写入数据库等

对于写入数据库等,请创建一个静态方法,就像读取一样。

这次我们将创建一个方法来指定参数「Dictionary<string, object>」。

// FormAction.cs
public static class FormAction {
  public static void SaveFromForm( Dictionary<string, object> formData ) {
    Something to do
  }
}

此外,在UXML标签上,为「SubmitButton」标签指定「assembly (optional)」 「type」 「method」属性。

<engine:SubmitButton label="Submit" type="FormAction" method="SaveFromForm" />

总结

总之,它将是以下代码。

<engine:Form type="FormAction" method="LoadToForm">
  ...
  <engine:TextField label="Name" text="Name input" name="Name" />
  <editor:EnumField type="UnityEngine.SystemLanguage,UnityEngine" value="English" name="Language" label="Language" />
  ...
  <engine:SubmitButton label="Submit" type="FormAction" method="SaveFromForm" />
</engine:Form>

附加字段

SliderField

「SliderField」是一个文本字段,允许您直接将数字输入到Unity中内置的「Slider」。

该规范与「Slider」相同,并描述如下。

<engine:SliderField label="Point" low-value="0" high-value="100" name="Point" />

SliderIntField

「SliderIntField」是「SliderField」的int版本。

规格与「SliderInt」相同。

<engine:SliderIntField label="Age" low-value="0" high-value="120" name="Age" />

TextPopupField

「TextPopupField」是弹出并显示选项的类型字段,类似于「EnumPopupField」等。

「EnumPopupField」需要预先定义enum类型,但「TextPopupField」可以在UXML标签上定义选项。

<editor:TextPopupField label="Sex" data="None,Male,Female" selected="Male" name="Sex" />

「data」属性以逗号分隔定义选项。默认值由「selected」属性指定。

文件上传表单

您可以使用标签「editor:Uploader」编写文件上传表单,就像使用其他字段一样。

<editor:Uploader label="Image" accept="*.jpeg;*.jpg;*.png;" name="Image" />

也可以仅选择具有「accept」标签指定的扩展名的文件。

将此字段与表单功能结合使用时,可以获取提交时所选文件的路径数据。请使用那个路径将文件上载到服务器等。

总结

「UIElements Expansions: Form」强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。

此外,通过使用表单功能,您可以轻松地为用户实现输入界面。

该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。

如果您有兴趣,请务必考虑一下,因为它在资产商店出售！