本期我们继续为大家进行Unity UI简介(第二部分)的后续教程
本篇内容
6.添加设置对话框
7.设置对话框的背景图像
8.添加标签
文章末尾可免费获取教程源代码
本篇本篇Unity UI简介(第二部分)篇幅较长,分为八篇,本篇为第四篇。
6.添加设置对话框
看看你创造的那些华丽的自由空间! 这似乎是一个完美的对话空间。
然后我们来创建面板
通常情况下,对话框包含一些其他控件,这些控件会随着对话框的出现和移动而出现。因此,将对话框创建为面板,并将其他UI元素设置为子对象是很有效的。
要创建一个面板,在菜单中选择GameObject ▸ UI ▸ Panel。这将创建一个全屏面板,使用白色的半透明图像作为背景。因此,你应该会看到某种全屏面纱。
然而,这个对话框不会是全屏的,事实上,它将相对较小。按照以下步骤来设置对话框的大小和位置。
·在 " Hierarchy"中选择 "Panel",并将其重命名为 "设置对话框"(SettingsDialog)。
·将其锚点设置为右中,因为你将把对话框定位在右边缘以外的地方,并离开屏幕,这样当你运行场景时就看不到它了。
·将Width设置为400,Height 设置为150。
·设置Pos X为220,Pos Y为0。
你应该会看到画布矩形的右边有一个半透明的矩形。这个矩形之外的所有UI元素在屏幕上都不可见。这正是你想要的对话框。
7.设置对话框的背景图像
你要使用 9-slice image作为对话框的背景。你需要先在导入设置中设置边框。
在Project窗口中打开RW ‣ UI ‣Menu,选择settings_panel_bg_9slice。在 "Inspector"中,单击 "Sprite Editor",打开 "Sprite Editor"视图。
将所有Border值设置为20,然后点击顶部的Apply
现在你可以使用这个图片作为对话框的背景。
选择Hierarchy中的SettingsDialog,并将settings_panel_bg_9slice拖到 " Inspector"中的 "Source Image "字段。双击 "Source Image"字段旁边的 "Color ",并将A设置为255(或1,取决于你的颜色选择器设置),以去除透明度。
这就是设置背景图片后对话框的样子:
8.添加标签
在目前的状态下,很难说这个不显眼的绿色矩形实际上是一个设置对话框,但有一个简单的方法可以解决这个问题。你需要做的就是在上面写上 "Settings"
右击SettingsDialog,选择UI ▸ Text,创建一个新的Text UI元素作为SettingsDialog的子元素。在Hierarchy中选择Text并将其重命名为SettingsLabel
之后,选择 "Hierarchy "中的 "SettingsLabel",并进行以下修改:
·设置 Anchors 为top-center.
·设置Pos X为0,Pos Y为-40。
·将 "Text "改为 "Settings"
·在 " Project"窗口中打开 "Fonts"文件夹,并将 "DCC - Dreamer "字体拖到 "Inspector"中的 "Font"字段。
·将Font Size设置为30。
·将 " Alignment"设置为 "Center Align."。
·将颜色设置为白色,用A (Alpha) 255去除透明度。
教程就到这里结束了,我们下期会继续Unity UI简介(第二部分)的后续教程
Unity架构师之路
Unity教程 | 墙外的Unity | 免费资源 | 游戏开发日记
添加下方微信获取教程源代码