下载掌阅APP，畅读海量书库
立即打开
在大多数游戏中，UI界面可以分为3个等级：第1级界面是指登录、主城、战斗等游戏界面；第2级界面是指背包、商店、武器等功能窗口；第3级界面是指匹配、结算等信息窗口。
本节将为《猫捉老鼠》制作两个界面，分别是登录界面和捕捉界面。
默认情况下，所有游戏都有一个登录界面，尽管登录界面的样式不同，但其功能大同小异，都用来实现登录功能。所以实际上，本节实现的是《猫捉老鼠》的登录模块。
第1章提到了游戏的开发顺序，通常是先制作界面后编写代码，对于登录功能，依然按照这个顺序来制作。
此外，值得一提的是，在游戏公司里，一款游戏的开发往往需要花费大量的人力、物力，记得笔者在蓝港游戏工作的时候，一个游戏团队能有一百多人，单工资这一项每个月都要花几百万元。因此，一款手游不是开发完就万事大吉了，它还要上线，还要有玩家愿意花钱玩才行。所以，一款游戏必须有品质、有要求、有对比，这也是要游戏制作人非常严格的主要原因。
要有品质，最简单的是要有个参照。客观上，《王者荣耀》是一款有品质的游戏，下面就选《王者荣耀》的登录界面来做参考标准。
实践之前，先来看看《王者荣耀》的登录界面，如图2-1所示。
图2-1《王者荣耀》登录界面
下面做一个同样的登录界面来挑战一下吧。
01右击文件夹Textures，在弹出的菜单中选择Import New Asset选项，把《王者荣耀》的登录界面的截图导入工程，图2-2所示是导入操作。
图2-2 图片的导入操作
导入之后，要为图片设置类型，因为图片将作为UI使用，所以把图片类型设置为Sprite(2D and UI)，如图2-3所示。
图2-3 设置图片类型
02 在文件夹Canvas中新建一个登录面板，将其重命名为Panel_Login，在登录面板Panel_Login下新建背景图片Image_bg，设置其Rect Transform组件的布局为填充型Stretch，并设置各边距为0，如图2-4所示。
图2-4 新建登录面板和简易图片
03 把参照图片拖入背景图片Image_bg的Image组件的源文件参数Source Image中，如图2-5所示。
图2-5 设置参照图片
04 按照参照图片来制作登录界面。为了方便对比，把参照图片的透明度降低至60，如图2-6所示。
图2-6 降低参照图片的透明度
01制作开始游戏按钮。在Panel_Login中新建一个按钮Button_Begin，把按钮放到参照图片的开始游戏按钮上，依据参照图片的开始游戏按钮的尺寸调整按钮Button_Begin，然后把按钮文本改为“开始游戏”，如图2-7所示。
图2-7 制作开始游戏按钮
02 在Panel_Login中再新建一个服务器选择按钮Button_Server，和开始游戏按钮一样，按照和参照图片1∶1的大小制作，如图2-8所示。
图2-8 服务器选择按钮
03 这里还要为服务器选择按钮添加两个控件：第1个是服务器状态，比如爆满、正常、空闲；第2个是换区按钮，如图2-9所示。
图2-9 添加服务器选择按钮控件
在登录界面中添加一张背景图片，然后去掉参照图片，完成登录界面的制作，如图2-10所示。
图2-10 登录界面制作完成
下面写一个登录脚本，用于实现游戏的登录功能。写之前，应先梳理清楚登录功能。
通常，登录的逻辑是：首先，玩家输入用户名和密码，点击开始游戏按钮；其次，用户名和密码被发送到游戏服务器进行验证，服务器验证后会把登录的确认信息返回给客户端；最后，客户端收到确认信息后，玩家才能进入游戏。图2-11所示是一张登录功能的时序图，呈现了一个标准的登录流程。
图2-11 登录功能的时序图
这里值得一提的是，一款既有客户端又有服务器的手游是网络游戏，而一款只有客户端没有服务器的手游是单机游戏，两者最大的区别在于能否进行多人对战，比如网络游戏《王者荣耀》有5V5对战，而单机游戏《开心消消乐》却只能一个人玩。
《猫捉老鼠》只有客户端没有服务器，是一款单机游戏，因此，客户端向服务器发送消息的这一步就省掉了。《猫捉老鼠》的登录逻辑相对简单，玩家点击开始游戏按钮，客户端直接进入游戏，不向服务器发送请求，也无须等待确认。
好了，下面开始写代码。
01新建一个脚本Game Controller，用来控制游戏的整个流程，比如开始游戏、结束游戏。通常，这个脚本会放到UI根节点Canvas上，如图2-12所示。
图2-12 新建脚本
02 编辑脚本GameController。在脚本中新增登录界面变量Panel_Login和开始游戏函数StartGame()，代码如下所示，语句Panel_Login.SetActive(false)实现了登录界面的关闭操作。
03 关联物体，如图2-13所示。
图2-13 给开始按钮关联响应函数
回到Unity，把Canvas拖进开始游戏按钮Button_Begin的Button组件的On Click()的引用物体上，并选择GameController脚本中的函数StartGame()。
把登录界面Panel_Login拖进脚本Game Controller的登录界面变量Panel_Login中，如图2-14所示。
图2-14 脚本关联登录界面
登录界面制作完成，如图2-15所示。
图2-15 登录界面制作完成
通常情况下，一款游戏至少包含3个界面：登录界面、主城界面和战斗界面。《猫捉老鼠》的捕捉界面却充当了两个界面——主城界面和战斗界面，因此捕捉界面要有规范的设计。
目前，大多数游戏都采用了类似的界面布局。具体来看，一款游戏的战斗界面通常包含3个面板：角色面板、金币面板和控制面板。角色面板通常在游戏窗口的顶部，用于展示玩家等级、玩家名称和玩家头像等信息；金币面板通常也在游戏窗口的顶部，用于展示金币和钻石的数量信息；控制面板一般在游戏窗口的底部，分为左右两部分，分别是摇杆按钮和攻击按钮。
捕捉界面的布局设计如图2-16所示。
图2-16 捕捉界面的布局设计
摇杆面板的制作涉及角色移动的编程，将在第3章中讲解。本小节只制作抓捕面板和顶部面板（如角色条、捕捉信息、退出按钮等）。
此处未给猫捕捉老鼠设置技能，所以只制作一个抓捕按钮就可以了，如图2-17所示。
图2-17 抓捕面板
之前未给猫添加捕捉动作，当猫每次碰到老鼠时，游戏将判定猫捉到了老鼠。接下来会为猫加一个捕捉动作，最终实现的是，当玩家点击抓捕按钮时，会播放猫捕捉老鼠的动画。
01打开猫的角色动画控制器Cat，在状态机中新建一个抓捕状态Attack，并把猫的动画片段Jump拖入Attack状态中。
图2-18 新建抓捕状态
02 添加两个动画切换条件——Idle->Attack和Walk->Attack，新建一个Trigger类型的状态过渡参数IsAttack。当触发器IsAttack被触发时，猫将从行走或站立状态切换到攻击状态。另外，添加一个攻击退出条件，不用为这个退出条件设置任何过渡参数。这里需要注意的是，图2-19所示界面右侧的Has Exit Time选项需要取消勾选，以保证攻击动作的及时性。
图2-19 攻击状态进入条件
01在脚本GameController中，为抓捕按钮添加一个响应函数，在函数中实现捕捉动画的调用，具体代码如下。
02 为抓捕按钮添加响应事件，每点击一次抓捕按钮，播放一次攻击动画，如图2-20所示。
图2-20 为抓捕按钮的点击事件关联响应函数
到这里，猫的抓捕面板就制作成功了。
顶部面板由4个部分组成，它们分别是角色条、捕捉信息、计分面板和退出按钮。其中，计分面板已经制作了，本小节将制作其他3个部分。
在大多数的游戏中，玩家的角色条包含3个部分：玩家头像、玩家昵称和玩家等级。图2-21所示是一个制作完成的角色条。
图2-21 角色条
接下来，从零开始制作一个角色条。
01新建一个角色条面板Panel_Player，并设置角色条面板的背景色和尺寸布局，如图2-22所示。
图2-22 设置角色条面板
02 在角色条面板下创建1个玩家昵称文本、1个玩家等级文本、1个玩家头像图片，并设置它们的尺寸和参数，如图2-23到图2-25所示。
图2-23 玩家昵称文本
图2-24 玩家等级文本
图2-25 玩家头像图片
目前，捕捉信息只负责统计捕捉到的老鼠数量，抓捕面板以及捕捉信息的设置如图2-26和图2-27所示。
图2-26 抓捕面板
图2-27 捕捉信息
计分面板之前一直放在游戏窗口的左上角，下面把它调整到顶部靠右侧位置，并调整其尺寸大小。鉴于计分面板的制作已经实践过了，这里大家按照下载资源的工程文件中的数据调整即可。
经过调整之后，计分面板如图2-28所示，是不是感觉更有品位了。
图2-28 计分面板的调整
最后，把退出游戏按钮添加上。如图2-29所示，捕捉界面制作成功了，欣赏一下成果吧。
图2-29 捕捉界面