
4.4 制作UI
首先创建塔防游戏的UI界面。
步骤 01 在本书资源文件目录rawdata/td/GUI/中存放了所有的UI图片,导入图片后,注意将Texture Type设为Sprite类型,如图4-7所示。Unity的UI系统只能使用Sprite类型的图片。

图4-7 创建Sprite
步骤 02 创建几个UI文字控件。在Hierarchy窗口中单击鼠标右键,选择【UI】→【Text】创建文字,在创建文字物体的同时,还会自动创建Canvas和EventSystem物体。Canvas会自动作为文字控件的父物体,所有的UI控件都需要放到Canvas层级下。EventSystem物体上有很多UI事件脚本,用来管理和响应UI事件,如图4-8所示。

图4-8 创建基础的UI控件
步骤 03 设置文字的位置。在编辑器的上方单击UI编辑按钮,然后选择文字控件即可改变文字的位置和尺寸,如图4-9所示。

图4-9 移动控件
步骤 04 在不同的分辨率下对齐UI的位置一直是件很麻烦的事情,不过使用Unity的新UI系统,一切将变得非常简单。选择前面创建的文本UI控件,在【Inspector】窗口的Rect Transform中可以快速设置控件的对齐方式,如左对齐、右对齐等,如图4-10所示。

图4-10 对齐控件
步骤 05 除了对齐,我们还需要根据不同的屏幕分辨率对UI控件进行缩放。将Canvas物体的Canvas Scaler设为Scale With Screen Size模式,UI控件将以设置的分辨率为基础,在不同的分辨率下进行缩放适配,如图4-11所示。

图4-11 适配分辨率
步骤 06 这里一共需要创建三个不同的文字控件,分别用来显示敌人进攻的波数、铜钱和生命值。我们在【Inspector】窗口可以设置文字的内容、字体、大小、颜色等,使用Unity的Rich Text功能,在文本中添加color标记,可以使同一个文字有不同的色彩,如图4-12所示。

图4-12 设置文本
步骤 07 现在很多游戏都给文字配上了描边,我们也加一个吧。选择文字,在菜单栏中选择【Component】→【UI】→【Effects】→【Outline】,如图4-13所示。

图4-13 描边字
步骤 08 创建按钮,包括创建防守单位的按钮和重新游戏的按钮。在Hierearchy窗口中单击鼠标右键,选择【UI】→【Button】即可创建一个新的按钮控件,默认按钮下面还有一个文字控件用来显示按钮的名称。在【Inspector】窗口中找到Image组件下的Source Image设置按钮的图片,选择下面的Set Native Size可以使按钮的大小与图片的尺寸快速适配,如图4-14所示。

图4-14 创建按钮
最后的UI效果如图4-15所示。注意UI控件的名字,我们在后面需要通过名字来查找UI控件。UI控件的层级关系也比较重要,因为控件均位于Canvas或其他层级之下,所以它们的位置只是相对于父物体的相对位置。如果通过脚本去修改控件的位置,通常是修改transform.localPosition,而不是transform.position。

图4-15 创建的UI
完成UI设置后,可以将UI保存成Prefab。