2.2 游戏UI界面搭建

2.2.1 游戏登录界面UI搭建

游戏中涉及的内容大体可以分为两类：UI界面搭建与逻辑开发。为了帮助读者快速入门，从界面搭建开始介绍（本课程会带领读者一步步地搭建登录界面，后面课程中涉及的界面就不再详细介绍，但是会提供美术素材。有兴趣的读者可以参考效果图自行搭建）。首先是登录界面效果图，如图2-8所示。

此界面中“开始游戏”与“换区”属于按钮，所以在这两个对象上需要添加Box Collider与UI Button。然后按照搭建的流程图创建一个新的界面，如图2-9所示。

从流程图分析，可以把整个搭建过程的主干分为4个部分：创建背景图片，界面左上方部分的搭建，实现界面右上方的搭建，处理下方的开始游戏部分。

◎第一步：创建背景图

单击Unity编辑器中工具栏下的NGUI按钮。如图2-10所示，选择菜单栏Create→Sprite命令。按下鼠标左键，在Scene场景中会出现一个图片。

在场景中选中创建的Sprite，在场景右侧的Inspector面板上修改对应属性。将面板最上方的名称改为BeginGameBG，按Enter键确认更改。在UI Sprite组件中单击Altas（图集）按钮，选择UIAtlas13图集。单击Sprite按钮，选择编号为129的图片。修改Size（图片大小），在这里，先设置它的父节点UI Root的Scaling Style（缩放样式）为Constrained（固定缩放），然后返回到BeginGameBG对象上，将Size改为1280×720，可以铺满整个屏幕，如图2-11所示。

◎第二步：创建文字描述

选中Hierarchy面板上的BeginGameBG对象。单击Unity编辑器中工具栏下的NGUI按钮。选择菜单栏Create→Panel命令，会在BeginGameBG对象下产生一个Panel对象，将其改名为LeftTopWindow，如图2-12所示。

在LeftTopWindow对象下创建Sprite精灵，改名为BG，修改Atlas图集为UIatlas2，修改Sprite精灵为90，将Size修改为600×50，选中场景中的LeftTopWindow，将其移动到场景的左上角，并调到合适的位置，如图2-13所示。

在BG下创建一个Label标签，将Font（字体）改为Arial，修改Font Size（字号大小）为25，并在Text处写入对应语句，最后修改Size为600×50，将标签调节到合适的位置。

在LeftTopWindow对象下再创建一个Label（标签），将Font改为Arial，修改Font Size为25，并在Text处写入对应语句，最后修改Size为600×100，并将标签调节到合适的位置，如图2-14所示。

◎第三步：选择服务器界面搭建

如图2-15所示，选择服务器界面与开始游戏界面的搭建过程大致相同，文本或者按钮部分不做介绍。但是在创建服务器列表需要用到Scroll View这个新的控件。下面就来介绍Scroll View的使用。

◎第四步：创建Scroll View对象

□ 在SelectServerBG对象下创建一个Panel对象，并改名为LeftWindow。将它调节到合适的位置。在LeftWindow对象下创建一个Scroll View控件。

□ 单击Unity编辑器中工具栏下的NGUI按钮，选择菜单栏Creat→Scroll View命令，修改Scroll View下UI Panel组件的Size属性为300×600，修改UI Scroll View组件下的Movement移动方向为Vertical垂直方向，如图2-16所示。

□ 在Scroll View对象下创建Grid控件（单击Unity编辑器工具栏下的NGUI按钮，选择菜单栏Creat→Grid命令），修改UI Grid组件下的Arrangement属性为Vertical垂直方向，并修改Cell Width为200、Cell Height为100，如图2-17所示。

□ 在Grid下创建一个Label标签，将Font字体改为Arial，修改Font Size字体大小为40，修改Size为300×100，并将标签调节到合适的位置。

□ 在Grid对象下创建Sprite精灵，改名为Area Item，修改Atlas图集为UIatlas2，修改Sprite精灵为99，并将Size修改为300×100，调到合适的位置。最后添加Drag Scroll View、Box Collider与Button组件。在AreaItem下创建一个Label标签，将Font改为Arial，修改Font Size为40，并在Text处输入“我的服务器”，最后修改Size为300×100，并将标签调节到合适的位置，如图2-18所示。

2.2.2 游戏战队匹配UI界面

◎第一步：组队界面搭建

通过两个界面的搭建练习，相信读者对界面搭建有了初步的了解，其他界面的搭建过程在这里就不再赘述。以下是其他界面的效果图，可以根据此效果图自行搭建其他界面。

组队界面主要包含背景图、标题说明、“退出队伍”按钮、“开始匹配”按钮、“发送邀请”按钮，资源图片在图集3（UIAtlas3）中，如图2-19所示。

◎第二步：等待界面搭建

等待界面主要包含背景（UIatlas3）标题说明，匹配队友个数，匹配时间，以及“取消匹配”按钮（UIatlas2）（见图2-20）。

◎第三步：英雄选择界面搭建

英雄选择界面主要包含背景图（UIatlas13）、英雄列表显示区背景（UIatlas14）、英雄图标背景（UIatlas1）、计时器背景（UIatlas1）、英雄选择框（UIatlas14），英雄头像（HalfPhoto）、“确定”按钮背景（UIatlas13），如图2-21所示。

◎第四步：战斗加载界面搭建

战斗加载界面主要包含背景图（UIatlas12）、敌我双方头像显示框（UIatlas1）、对阵图标（UIatlas12）、英雄头像（HalfPhoto），如图2-22所示。