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

一.综述

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

二.UI布局关键技术

1.RectTransform

这是uGUI的一个特色组件,是继承自Transform得来的。相当于是在Transform上加上了锚点的数据,然后更适用于2D UI界面开发。内在的其实还是对Transform的处理。
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第1张图片
关于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了。顾名思义就是水平布局组合垂直布局组。用来添加在一个目标容器中,将容器中的子控件按照一定布局进行排列。
比如我的菜单:
先看效果
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第2张图片
再看Hierarchy
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第3张图片
是在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按照垂直顺序进行排列。
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第4张图片
关于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等基本类型。如果超过这个范围,你根本就看不到这个函数。
而且填写的函数的参数也是不能动态的
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第5张图片
这种方式我就不多说了,网上都有步骤。
就是在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菜单
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第6张图片
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第7张图片
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第8张图片
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第9张图片
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第10张图片
使用Unity3D 自主实战开发的赛车游戏实例,关键点记录 (三)之UI菜单制作_第11张图片
就是这个效果
我的实现方式是:
将当前的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;
            }
        }
    }

你可能感兴趣的:(unity3d,UGUI)