教程|自定义3D UI界面创建指南

作者|surz 编译|头等仓Maggie译文版权属头等仓所有,任何转载请保留前言信息。
头等仓APP下载

作者|surz

编译|头等仓Maggie

译文版权属头等仓所有,任何转载请保留前言信息。

surz在Decentraland中构建了一个微型太阳系。本篇文章为构建UI的教程。

本教程重点分为3部分:sun;Mercury和Disclaimer的菜单。

您可以从此链接下载本教程中使用的代码,2D图像和3D模型。

Decentraland中UI的代码示例请查看文档

准备UI材料

UI菜单中都包含一个静态部分和可点击的动态部分。你可以自己设计,也可以在Github中下载本教程的图像。以下是静态部分:

教程|自定义3D UI界面创建指南

教程|自定义3D UI界面创建指南

以下是Sun和Mercury的静态部分:

教程|自定义3D UI界面创建指南

教程|自定义3D UI界面创建指南

以下是UI中使用的动态部分。我们会添加这些图像作为按钮。单机每个图像时会执行特定任务。

教程|自定义3D UI界面创建指南

关闭按钮:隐藏所有IU元素。此按钮出现在所有屏幕上。

教程|自定义3D UI界面创建指南

下一步按钮:页面间切换。

教程|自定义3D UI界面创建指南

显示:显示有关地球的一些信息。再次点击时会切换到另一个。

教程|自定义3D UI界面创建指南

比较按钮:当前行星和地球进行比较。

教程|自定义3D UI界面创建指南

Artscape:x显示行星表面的3D景观。

组合在一起之后,完整的UI布局如下:

教程|自定义3D UI界面创建指南

教程|自定义3D UI界面创建指南

要实现这个UI,要编写以下代码。

添加画布组件和容器

创建UI的第一步:添加一个画布组件和容器矩形。矩形将包装我们稍后添加的UI元素,更容易定位。

教程|自定义3D UI界面创建指南

矩阵的透明度为0.8。因此所有UI页面会部分头透明。

添加静态内容

以下代码用于添加sun UI的静态部分。

教程|自定义3D UI界面创建指南

请注意,创建UI图像时,第一个参数是react。这是我们包装所有UI的矩阵名称。通过这个参数,我们把这个图像作为矩阵的子图像,并定位。

为了可以开关UI,因此要添加一行将visible(可见)属性设置为false。这样图像可以保持不变,除非visible发生变化。

教程|自定义3D UI界面创建指南

要在场景中添加其他信息,我们使用的代码是一样的,但是可以使用不同的图像。

添加关闭按钮

添加按钮的方式和添加图像的方式没有太大差别。按钮就类似于具有额外功能的图像。

教程|自定义3D UI界面创建指南

以上代码和我们之前添加的静态图像没有太大区别。唯一区别是:

该isPointerBlocker属性设置为true。从而可以单机组件。

该onClick属性,用于确定单击时要执行的内容。在这种情况下,它将整个UI的可见性设置为false。

其他按钮使用相同的代码,但onclick的位置不同。

添加UI文本

要添加动态文本于导入静态文本不同。因此我们要创建一个UIText组件。以下代码添加了一个显示“WELCOME(欢迎)”的文本组件。我们稍后会在场景中更改此文本,显示不同行星的信息。

教程|自定义3D UI界面创建指南

分组UI对象

按照示例后,我们将继续创建每个屏幕所需的UIImage组件,我们可以将它们全部以JSON格式列出,并根据功能进行分组。然后在屏幕之间切换时调用它们。

教程|自定义3D UI界面创建指南

处理分组的UI对象

为了使用我们刚创建的组件列表,我们还要编写一个函数,来解析列表,屏幕显示所需的元素。

此函数将三个参数作为布尔值,每个参数都打开或关闭UI的不同部分:planetMenu(显示,比较和artscape按钮,以及文本),disMenu(显示屏幕中的下一个按钮)和closeMenu(显示关闭按钮)。

教程|自定义3D UI界面创建指南

我们将创建一个包含一个函数的单例对象,该函数使所有静态UI元素不可见。

教程|自定义3D UI界面创建指南

打开UI

我们现在将基本的3D菜单放在场景中。每单机一个框时,会打开一个不同的UI和相关内容。

教程|自定义3D UI界面创建指南

粘贴下面的代码以添加3D物品:

教程|自定义3D UI界面创建指南

现在我们可以用Onclick添加一个3D组件,并引用我们在上一步创建UI元素的函数。

教程|自定义3D UI界面创建指南

上面的代码适用于'sun'菜单,其他菜单可以使用几乎相同的代码。

在stateDynamicUI()函数内部使用不同的参数。

现在,当您单击3D对象时,他们应该在屏幕上打开相应的UI菜单。

添加功能到下一个按钮

现在我们可以轻松地在每个屏幕之间切换所有元素,让我们在UI屏幕上为更多按钮添加功能。我们已经演示了如何通过设置整个UI的可见性来为“关闭”按钮提供功能。为了简化教程,我们只显示Next和Facts按钮。

下面是OnClick“下一步”按钮的功能,它使用我们创建的功能在两个屏幕之间切换:

教程|自定义3D UI界面创建指南

在信息中添加按钮键

现在我们将在“信息”按钮中添加功能,以便显示有关当前行星的信息:

首先,我们定义一个字符串数组,列出我们想要显示的信息。

教程|自定义3D UI界面创建指南

然后我们将创建一个单例来处理UI文本的切换。此对象包含一个循环预定义字符串并返回其中一个的函数。

教程|自定义3D UI界面创建指南

最后一步是从OnClick“Facts”按钮的属性调用此函数,并将UI中的文本组件的值更改为此函数返回的值。

教程|自定义3D UI界面创建指南

完整代码请查看Github代码库。

结语

请利用我们的代码尝试创建您的UI界面吧。如果您有任何反馈意见,请在评论中告诉我们。

本文由 区块链资讯平台头等仓 作者:Jaden 发表,其版权均为 区块链资讯平台头等仓 所有,文章内容系作者个人观点,不代表 区块链资讯平台头等仓 对观点赞同或支持。如需转载,请注明文章来源。
头等仓APP下载

发表评论