使用Unity3D 自主实战开发的赛车游戏实例，关键点记录 （三）之UI菜单制作

一.综述

游戏UI菜单制作前，得先设计好菜单的层级、风格再进行设计。我是用的是unity5.01e，这个版本中uGui已经很好用了。果然我还是喜欢用官方的东西，感觉很舒服，虽然目前有些组件还没有。找不到用C#时那一堆UI组件的畅快感觉。

二.UI布局关键技术

1.RectTransform

这是uGUI的一个特色组件，是继承自Transform得来的。相当于是在Transform上加上了锚点的数据，然后更适用于2D UI界面开发。内在的其实还是对Transform的处理。

关于RectTransfrom的简单知识可以参考
RectTransform-官方手册
一般我常用的就是Rect tool里边定义的锚点位置了。比如将容器固定在Canvas上，我就用扩展锚点Anchors(Min(0,0)Max(1,1))，锚点就会定位在父控件四个角上；
将标题定在上面，我就用上中布局Anchors(Min(0.5, 1)Max(0.5,1))。通过锚点将自己的控件固定在父控件的指定位置。

2.Component->Layout->*

除了上述的锚点，最重要的应该就是组件中的Layout系列组件了，我最常用的，就是Horizontal Layout Group 以及 Vertical Layout Group了。顾名思义就是水平布局组合垂直布局组。用来添加在一个目标容器中，将容器中的子控件按照一定布局进行排列。
比如我的菜单：
先看效果

再看Hierarchy

是在Canvas下面分成了三个界面：

1.MainMenu 就是上上图的界面；
2.Settings 是设置界面；
3.Car Settings 是点击游戏模式后进入的车型选择/路线选择界面
4.WaterImage 比较特殊，是一个当进入瀑布时，水珠在屏幕上的效果图。

在MainMenu中包含了Header和Buttons两部分
1.Header 就是标题了我使用的锚点就是Anchors(Min(0.5, 1)Max(0.5,1))
2.Buttons 就是四个选项，我是用了Vertical Layout Group，将四个Button按照垂直顺序进行排列。

关于Vectical Layout Group，它有这么几个属性：
1.Padding 就是上下左右各离父控件的距离
2.Spacing 就是控件间距
3.Child Alignment 就是控件对齐方式
4.Child Force Expand 就是是否强制扩展子控件到可以容纳达到的最大大小

3.按键事件

用惯了MFC/C#等的按键事件方式，总是双击控件，或者控件.OnClick += new ClickEventHandle(OnClick)的代码添加方式。刚开始用unity有些不适应。不过现在适应了。
Unity中也有界面添加按键函数和动态代码添加监听器两种方式。看自己需要吧。

1）图形化添加按键事件

如果是按键的简单的函数其实可以用界面添加。不过缺点就是函数的参数只能是一个而且参数不能太复杂，像参数string/int/float/bool等基本类型。如果超过这个范围，你根本就看不到这个函数。
而且填写的函数的参数也是不能动态的

这种方式我就不多说了，网上都有步骤。
就是在button属性界面中OnClick中添加一个新的条目，然后拖动含有目标函数的游戏对象到条目左侧栏目中（上图圈1），这个时候这个游戏对象含有的所有（这个组件必须有符合界面显示规范的函数，像一些以自定义结构体作为参数的函数根本就不会出现）组件就会出现在右侧上面的下拉框中（上图圈2），然后点击下拉框选择组件，选中组件后会弹出二级菜单栏选择组件的函数，函数选择完后，在右侧下方输入框中（上图圈3）填写参数即可。

2）动态添加事件

使用动态添加监听器的方式对于代码规范还是很好的，也好管理。
比如我在点击了RacingMode和TimerMode后，会将当前是什么游戏模式存到配置文件中，就用了给Button动态添加监听器：

//添加竞赛模式按钮的监听器RacingModeButton.onClick.AddListener(new UnityAction(SetGameTimerMode));//添加计时模式按钮的监听器RacingModeButton.onClick.AddListener(new UnityAction(SetGameRacingMode));private void SetGameTimerMode(){//保存游戏模式“计时模式”到配置文件    ConfigurationManager.Instance.CurrentGameModel = ConfigurationManager.GameModel.TimerModel;}private void SetGameRacingMode(){//保存游戏模式“竞赛模式”到配置文件    ConfigurationManager.Instance.CurrentGameModel = ConfigurationManager.GameModel.RacingModel;    }

UI菜单切换方式

其实我的主菜单、设置菜单、车型/路线选择菜单，都是Panel,只不过把当前不需要的其他菜单都隐藏了。
我才用的切换方式是旋转切换。就是A菜单旋转不见后，旋转出来的是B菜单






就是这个效果
我的实现方式是：
将当前的A菜单Rotation的Y设置为0，将需要隐藏的B菜单Rotation的Y设置为-90
然后旋转时
Step1: A.rotation.eulerAngle.y 0 -> -90
Step2:B.rotation.eulerAngle.y -90 -> 0
即可
代码如下：

    //currentTransform 表示当前菜单    //nextTransform 表示下一个菜单    void FixedUpdate()    {    //当要切换时设置switchtag 为0        if (switchTag == 0)         {            if(currentTransform.eulerAngles.y< 90) {                currentTransform.Rotate(Vector3.up, switchSpeed * Time.deltaTime);            }            else             {            //旋转完后将菜单放置到标准位置上                currentTransform.rotation = Quaternion.AngleAxis(-90, Vector3.up);                nextTransform.rotation = Quaternion.AngleAxis(-90, Vector3.up);            //设置标志准备将下一个菜单旋转出来                switchTag = 1;            }        }        if (switchTag == 1) {            if(nextTransform.eulerAngles.y< 0) {                nextTransform.Rotate(Vector3.up, switchSpeed * Time.deltaTime);            }            else            {                nextTransform.rotation.eulerAngles.Set (0, 0, 0);                //下一个菜单转出完成，设置标志结束旋转                switchTag = -1;            }        }    }