Unity 5.0 GUI解析

2.GUI组件

2-1.Canvas and UGUI Rendering Order 2-2.Anchor and Center 2-3.RectTransform 2-4.Text 2-5.image

2-6.Raw Image and Mask 2-7.Button

2-8.Toggle and Toggle Group 2-9.Slider

2-10.ScrollBar and ScrollRect 2-11.Dropdown 2-12.InputField 2-13.EventSystem 2-14.Selectable 2-15.UI Special Efficacy

3.GUI应用实例

3-1.游戏开始界面 3-2.游戏菜单界面

3-3.角色面板和背包系统 3-4.关卡选择界面

4.总结

1.Unity GUI介绍

在UNITY中使用GUI组件来完成游戏UI的绘制工作。对于一个游戏来说，UI界面是至关重要的一个元素，玩家对于一款游戏的第一印象大多数就来源于这款游戏的UI界面做得如何，虽然游戏的可玩性很重要，但是不可否认UI元素是游戏的第一出面相。所以做好游戏的UI界面也就是意味着你离成功更进一步。除了UNITY自带的GUI系统，我们也可以借助第三方的GUI插件来提高开发效率。例如，ASSET STORE中的第三方GUI插件，数量非常丰富，能够满足各种GUI制作的需求。

第三方插件在使用的过程中有可能会存在一些小问题，UNITY内置的GUI系统一般就不会出现类似的问题，但是第三方插件有时候用起来确实更加方便一些，有利也有弊，如有需要的开发者可以在资源商店自行购买相关插件，以便提高开发效率。

2.GUI组件

2-1.Canvas以及UGUI渲染顺序

Canvas的Render Mode有三种模式，分别是Overlay,Camere,World Space

第一种模式的情况下，这个模式将UI元素放到场景的最上面渲染。如果屏幕缩放或改变了分辨率，Canvas会自动改变尺寸去匹配

第二种模式下，这个和Screen Space - Overlay模式类似，但在这个渲染模式下，Canvas是被放在一个指定摄像机前面一定的距离上。UI元素是被这个摄像机渲染的，也就意味着摄像机相关的设置会影响UI的显示。如果摄像机设置为透视模式，UI元素就会渲染为透视，而透视后的扭曲程度由摄像机的视域决定。如果屏幕改变了大小或者改变了分辨率，或者摄像机的视景体改变了，Canvas都会自动改变尺寸去匹配

第三种模式的情况下,这种渲染模式会将Canvas当作场景中任何的其它对象一样对待。Canvas的尺寸可以用Rect Transform进行手动调整，UI元素的遮挡效果由3D位置决定。对于需要将UI作为场景中的一部分或者作为剧情化界面的情况非常有用

下面来介绍一下，UGUI的渲染顺序

从上面的例子可以很直观地看出，后被添加的UI元素最优先显示在窗口上，如果想要改变显示顺序，只需要调换两个组件的名字即可。

2-2.锚点和中心点

如图所示，屏幕中间的花瓣形状图标就是锚点，图片中间的蓝圈就是中心点。 白色的边框对应的就是Game视图。 先来说一下锚点的作用：

拖动其中一个花瓣，除了对角花瓣以外的花瓣位置就可以被改变

锚点的其中一个作用就是使得图片4个角到对应锚点的距离不会改变，无论怎么拖动视图，图片大小会被改变，但是锚点与顶点之间的距离是不会被改变的。还有另一个约束就是，锚点到画布4条边的距离百分比不会改变，如下所示：

如果没有锚点的约束，那么有可能你的游戏会跑到视图外边，这样会导致重要控件的丢失，再比如说，如果需要设置一个游戏背景图片，那么就必须要将图片的四个角和四个锚点分别重合，这样，无论你怎么改变屏幕大小，背景图片都会自适应屏幕大小。所以说，锚点是不可或缺的组件。

再来说一下中心点的作用：

中心点是适应图片大小，不是屏幕大小。

图片左下角是坐标（0,0），右上角是（1,1）。

图片的旋转和缩放就是自适应你的中心点。

可以根据自己的需求，设置中心点再根据该点对图片进行相关操作。

2-3.RectTransform组件

我们可以发现几乎每个UI元素都自带RectTransform组件，由此我们可以看出这个组件的重要性。下面就来介绍一下这个组件的一些属性。

新建一个UI组件的时候，锚点是合在一起的，与中心点重合，在这种情况下，如果想要移动UI位置，改变UI大小只要相应改变参数即可，此时的位置和大小信息如下所示：

但是，一但改变锚点位置。那么面板显示会发生变化，如下：

此时left就是25.95，意思就是UI的左边界距离左边两个锚点连线的距离，其他方向也是同理，这里的属性面板改变很容易被我们忽略，一定要注意。

下面主要来介绍一下这个面板

这是一个锚点的功能面板，例如你选择left和top的交集按钮，那么久意味着锚点被锁定在画布的左上角，这样无论你怎么拖动视图大小，图片距离画布的左边界和上边界的距离是固定不变的，如图所示：

然后锚点的面板中还有一列是stretch，这是用来让UI元素适应画布大小的，按住ALT键位，点击相应的适应键位，UI则会相应改变大小适应画布，如图所示：

面板中还有一个Povit属性，这是轴心坐标，相应的UI元素可以绕着轴心旋转，如图所示：

接下来的Rotation则是常规的旋转，当你把视图调到3D，那么UI就可以像常规物体一样绕着相应轴旋转。

重点说一下Scale，它和Width,Height是有区别的，不要混淆。Width,Height侧重单个UI元素本身的缩放，并不会改变其他UI元素的大小。而Scale则是相对于画布中的所有UI元素而言的，当你改变Scale大小，所有的UI元素整体都会改变大小，所以要区分两者。

2-4.Text内容

Text:该文本框里可以输入内容。 Character

Font:可以导入并选择想要的字体类型

Font Style:设置字体类型Normal,Bold,Italic,Bold and Italic Font Size:字体大小

Line Spacing:字体行间距 Rich Text:是否使用副文本

例如使用副文本可以设置文本内容的不同颜色。

Paragrapf

Alignment:左边三个是设置水平对齐方式，右边三个是设置垂直对齐方式 Horizontal Overflow:设置文本内容的换行和溢出 Vertical Overflow:设置文本内容的截断和溢出 Best Fit:文本内容自适应文本框的大小 Color:主体文本的字体颜色

通过Add Component还可以为文本添加阴影等效果，可以自己尝试。

2-5.Image图片

这是Image控件的属性面板，RectTransform用法同上，在这里就不过多介绍，这里介绍一下Image特有的属性。

Source Image:图片源，这里需要注意的是，并不是所有的图片都可以进行背景设置，而必须是Sprite类型的图片才可以使用。下面演示一下如何改变图片类型：

选中要导入的图片，选择Texture Type类型，选中其中的Sprite(2D and UI)类型，点击右下方的Apply，这样就把你导入的图片转换为了Sprite类型的图片，然后再导入Source Typr,如下所示：

这样就成功导入了一张图片。

Color:给图片添加相应的背景颜色

Material:给图片赋予一个材质，使得图片更加具体某些材料的属性特征 Image Type:图片模式

Simple是正常的图片模式

Preserve Aspect:按照图片比例缩放图片大小 Set Native Size:设置成为图片原来像素大小

Sliced是图片的九宫格模式，需要在Sprite Editor中将Sprite图片切成九宫格模式。 Fill Center是填充中间，如果去掉就是如下效果：

此时无论怎么拖拽画布大小，空缺处距离四个角的距离是固定不变的，一般做按钮的4个角的弧度就是这个方法。

Tiled是图片的重复模式，当随着背景被逐渐拖拽放大，图片将会以重复密铺的形式展现出来，效果如下：

Filled是图片填充的形式，在Fill Method中可以调各种各样的填充形式，Fill Amount则是通过调节数字（0-1）来展现不同的填充程度。

范例展示如下：

2-6.Raw Image图片和Mask遮罩

RawImage控件中，你可以加入任何类型的图片，而不需要调节图片类型为Sprite。 还有就是相比于Image，该控件多了一个UV Rect属性。 X和Y表示图片的偏移量 X方向偏移：

Y方向偏移：

W和H分别指图片的高度和宽度，当W和H的值调大，那么相应图片的高度和宽度就变小了，反之亦然，效果如下所示：

下面来说一下Mask的用法：

在画布的里面创建一个Panel，在Panel里面再创建一个Image，将图片拖入Image，此时选中Panel,在 Inspector面板中为其增加一个Mask组件，调整Panel的宽度比Image小，高度比Image打，效果如下：

这样其实就实现了Mask的遮罩功能。

Panel的具体细节在接下来的课程中我们会讲解到。

2-7.Button按钮

以上重复的属性在这里就不多赘述了，我们来看一下Button特有的属性面板 Interactable:是否与按钮产生交互 Transition:按钮的模式

Clolor Tint是默认的模式，默认模式下就是通过颜色改变来切换多个状态。 Normal Color：按钮的默认颜色

Highlighted Color：鼠标移到按钮上的颜色 Pressed Color:点击按钮的颜色

Disabled Color：无交互状态时按钮颜色 Color Multiplier：状态颜色值的倍数

Fade Duration：状态之间转换所需的时间间隔 On Click()：点击事件，在这里举个例子 在画布中新建一个Text,实现如下功能：

当点击按钮以后，显示文字，我被按下了。 新建一个C#脚本，Button,代码如下：

将脚本挂到主摄像机中，并将text组件放入脚本的变量中，接下来就是连接按钮和脚本。

连接挂载脚本的主摄像机，然后找到摄像机中的OnButtonClick事件，这样就成功连接了脚本和按钮，测试如下：

Sprite Swap是精灵模式

属性基本和默认相似，就是把颜色属性切换成了Sprite图片属性，在这里不过多赘述。 Navigation：导航模式，默认为自动，我们不用去修改它。

Animation是动画模式

在这种模式下点击Auto Generate Animation，就会生成一个Animator控制面板，如下：

然后我们可以打开Animation编辑器来编辑想要的动画效果就可以了。

在编辑器里，我们可以改变状态之间的大小，颜色等属性来达到所需要的效果。 动画模式相对于其他模式来说，状态之间的切换效果更为流畅。

2-8.Toggle和Toggle Group控件

这是Toggle的属性面板，和Button重复的属性功能，我们就不再重复了，看一下特有的属性功能：

Is On:Toggle是否被选中状态

Toggle Transition:切换模式，有两种： 1.None:直接切换状态，没有渐变效果 2.Fade:切换状态时有渐变效果

Graphic:连接的是Toggle里面的Checkmark组件,也就是那个对钩。

重点来说一下这个Group:

在画布中再创建一个Toggle,同时再创建一个空物体ToggleGroup

为空物体创建一个组件ToggleGroup

并且把两个Toggle放在空物体下面，作为子物体

然后选中Toggle,将ToggleGroup组件放到Toggle的属性变量中，Toggle(1)也是这样

一开始两个Toggle是相互的，选中状态互不影响

两个的Toggle成组后，就只能存在一个选中的状态，如下所示：

2-9.Slider滑动条

重复的属性功能在这里不多介绍了，我们来看一下滑动条特有的属性 这里各个状态的颜色是显示在活动按钮上的，而不是在滑动条上.

Fill Rect和Handle Rect：分别对应Slider里面的Fill和Handle组件 Direction:滑动条滑动方向，分为4种：左右，右左，上下，下上：

Min Value和Max Value分别对应滑动数值的多少，可以是（0-1）或者（0-100） Value的滑动条则是具体调节数值的多少

Whole numbers:如果勾选，那么将只显示整数

On Value Changed:触发事件，和Button一样，有兴趣的同学可以自行尝试。

2-10.ScrollBar和ScrollRect控件

这里唯一不同的属性是Size，其它属性都同上一样。 Size:调节滑块的大小

重点讲一下ScrollRect

在画布中创建一个空物体命名为ScrollRect,为其添加一个组件ScrollRect,再创建一个Image，将Image作为ScrollRect的子物体，如下所示：

然后将Image作为ScrollRect组件中Content的变量传入其中，如下所示：

接下来需要用到遮罩效果

给ScrollRect再创建一个Image组件，只有这样，才能使用遮罩，切记这点,然后再创建一个Mask组件，效果如下：

运行游戏后，我们可以发现，可以在给定的ScrollRect方框中拖动图片显示其余的图片部分。 下面我们具体分析一下ScrollRect的属性面板 Content:是在边框中要显示的内容

Horizontal和Vertical：勾选状态意味着可以水平拖动，可以垂直拖动。如果不勾选就表示不能拖动。

Movement Type:运动类型，分为三种 1.Unrestricted

这种模式下，图片可以被拖到任何位置，可以让图片显示在边框范围外。 2.Elastic

这种模式下，当图片被拖出一定的空白区域后，图片将自行反弹回去，最终不会让方框留白。 这种模式下，会有一个Elasticity属性，该属性就是控制反弹力度的大小。 3.Clamped

这种模式下，不管怎么拖动图片，都不会出现留白的情况。 Inertia:拖动图片时，图片位移的惯性 Deceleration Rate:位移惯性的大小

Horizontal ScrollBar:水平滑动条控制图片拖动 Vertical ScrollBar:垂直滑动条控制图片拖动

将ScrollBar控件拖到Horizontal ScrollBar变量中，运行游戏，效果如下：

垂直的滑动条也是如此:

2-11.Dropdown控件

该控件是选择下拉选项列表中的单个选项。

单击右侧的箭头，就会显示所有的下拉选项，选择你想要的选项即可。

与其他控件重复的属性，在这里就不赘述了，下面给大家介绍一下DropDown特有的属性功能，如图所示：

Template:下拉列表中的选择模板。 Caption Text:用来保存当前选项的文本 Caption Image:用来保存当前选项的图像 Item Text:用来保存项目文本的组件 Item Image:用来保存项目外观的图像

Value:下拉列表选项中每个选项的序号，从0开始

Options:所有的下拉列表选项组件，可随时添加和删除选项 如下所示：

On Value Changed

用于触发事件的函数，其用法参考Button即可，有兴趣的同学可以自行尝试。

2-12.InputField输入文本

Input Field总得来说属性功能比较简单，下面具体来介绍一下： 重复的属性在这里不继续赘述了，看一下新的属性： Text:默认状态下Input Field显示的文本内容

Character Limit:输入文本框的字符数量，0就是没有数量。 Content Type:文本类型，默认是标准，我们也可以改成其他的。

这样显示的就是密码文本类型，还有很多类型可以自行尝试。 Line Type:文本行类型，分为3种

1.Single Line：就是常规的类型，当回车后代表确定输入内容

2.Multi Line Submit:与常规类型基本相似，回车代表确定输入内容

3.Multi Line Newline:这种类型下，回车后代表换行继续输入，并不是代表确认输入内容。

Selection Color:被选中字体的背景颜色，如图所示：

2-13.EventSystem事件

我们可以发现，不管创建什么UI组件，都会自带EventSystem控件。 下面简单来介绍一下First Selected属性 First Selected：游戏开始优先运行的UI组件 举个例子：

创建两个Button，将两个按钮的Highlighted Color分别调成灰色和蓝色。 将灰色的按钮组件当做变量托给First Selected,运行游戏我们会发现，灰色按钮自动被优先激活了，效果如下：

Standalone Input Module

输入模块，引用不同的输入轴，用于不同的导航交互。 Submit Button：提交按钮 Canvel Button：取消按钮

这两种按钮已经添加在默认输入管理器中。

Input Actions Per Second：注册频率即每秒输入的动作。 Force Module Active：输入移动设备

默认情况下，输入模块无法正常在移动设备工作。

Touch Input Module

触控输入模块，类似鼠标输入

Force Module Active：输入移动设备

默认情况下，触控输入模块无法正常在移动设备工作。

2-14.Selectable组件

Selectable是许多控件的基类，也就是说很多控件都可以加入该组件。该组件创建方法是： Add Component->UI->Selectable

属性面板如上所示。

其中一些控件自身创建时已经自带该组件，比如Button

所以当你再创建Selectable时，则创建不成功。会提示你错误，如下：

有些则没有改属性面板，比如Image，那么你就可以创建该组件。

该Selectable属性面板和Button中的属性效果是一致的，不多赘述。

2-15.内置UI特效

我们以Text为例，展示一下UI特效

首先创建一个Text文本，然后Add Component->UI->Effects 里面有3种特效，先来说一下Shadow,也就是阴影

Effect Color：阴影的颜色，可以调节阴影透明度 Effect Distance：阴影的偏移量

Use Graphic Alpha：阴影是否使用本体的透明通道

这是一个阴影实例，下面就看一下是否使用透明通道的效果对比：

这是使用透明通道，可以看到，随着主体文本的透明度降低，阴影的透明度也一起降低。

这是不使用透明通道，可以看到，随着主体文本的透明度降低，阴影的透明度没有变化。

其次是Outline，也就是描边

属性和阴影是完全一样的，这里不赘述了，效果如下：

3.UGUI应用实例----(素材出自泰课在线)

3-1.游戏开始界面：

开发开始界面的背景，先来看下预览图：

首选导入事先下载的Unity包，然后新建一个场景start scene。

首选把Sprite里面的图片格式都改为Sprite(2D and UI)这是专门用来做界面的图片格式。 先创建一个Image,并将start scene作为图片源：

用之前讲过的方法，在Rect Transform中，按住ALT键使得图片充满整个视图，选择右下角的按钮，如下所示：

首先来创建一个声音按钮：

在这里介绍另一种创建方法，新建一个Image,为其添加button roung作为图片源：

再创建一个Image，作为刚才Image的子物体，为其添加图片源button round foreground。

创建第二个子物体Image，为其添加图片源sound：

创建第三个子物体Image,为其添加图片源leave:

然后在父物体中为其添加一个button脚本，使得有点击功能。这样一个简单的点击按钮就做出来了。

接下来以相同的方法创建其他按钮，效果分别如下：

再以相同的方法创建一个开始按钮，为其添加一个Text脚本，文本内容是start。

这里有一个问题，当改变屏幕大小的时候，上方的两个按钮会飞到屏幕外边，所以将左上的按钮的锚点，设置在屏幕左上角，将右上按钮的锚点，设置在屏幕右上角，这样就可以自适应屏幕大小了。

到此，开始界面就创建好了。

3-2.游戏菜单界面： 先来看一下预览图：

首先再新建一个场景main scene。

创建一个Image ,为其添加图片源bg-02，使得充满整个屏幕。

然后我们来创建一个头像UI，创建Image,为Image添加两个文本脚本，分别显示名字和等级，由于比较简单，我们直接来看效果：

同时我们要为头像UI添加一个button脚本，这样，当我们点击的时候就可以显示任务属性面板。

接着我们来设计人物的体力条：

首先创建最外的背景层Image,为其添加图片源bar background,然后再创建滑动条的黑色底背景，将Image复制，然后缩小复制的Image,并将其底色改为黑色。

然后就是绿色的填充图片，很简单，复制Image,将底色改为绿色即可。

这里要将复制的两个Image作为子物体放在最开始的Image下面。 然后为父物体添加脚本Slider。

然后将绿色的图片作为变量传入Fill Rect中。 然后调节绿色图片的属性：

将默认的Image Type类型改成Filled,将Fill Method改为水平，这样就会有一个渐变的效果。 接下来让我们把体力条的其他图片显示出来，方法同上，直接看最终效果：

然后创建一个Text，用来显示剩余多少体力，效果如下：

同时因为体力条不随鼠标控制，所以在属性面板中应该勾掉Interactable。

接着是创建游戏菜单界面左边的两个按钮和中间角色升级的特效UI，方法和上面是一样的，非常简单，这里就不多说了。

然后是创建技能冷却UI界面：

首先创建一个Image,然后添加图片源slot2,接着再创建一个子物体Image,添加图片源Thunder Icon,然后复制子物体。将复制的子物体底色调成黑色，透明度调到95左右，以便于区分冷却效果。

子物体二的属性面板如上所示，将Image Type调成Filled模式，这样会有一个时钟渐变效果，Fill Origin调节到top,勾掉 Clock wise。效果如下：

然后为技能添加快捷键操作，新建Text文本，设置快捷键为1，然后为文本添加UI特效中的描边特效Add component->UI->Effects->out line由于十分简单，所以看一下最后的效果：

然后要实现点击或者快捷键实现释放技能效果，首先要为skill item添加一个脚本，在脚本中控制冷却等效果，然后因为需要点击，再为其添加一个button脚本。

在脚本中创建一个OnClick方法，然后在button中设置属性如下所示：

这样当点击按钮后就会触发脚本。 添加代码如下： //快捷键

public KeyCode keycode; //技能冷却时间

public float coldTime = 2; //计时器

private float timer = 0;

//Image组件

private Image filledImage; //开关变量

private bool isStartTimer = false;

// Use this for initialization void Start() {

//获取组件

filledImage = transform.Find(\"FilledImage\").GetComponent();

}

// Update is called once per frame void Update() {

if(Input.GetKeyDown(keycode)) {

isStartTimer = true; }

if (isStartTimer) {

timer += Time.deltaTime;

filledImage.fillAmount = (coldTime - timer) / coldTime; if (timer >= coldTime) {

filledImage.fillAmount = 0; timer = 0;

isStartTimer = false; } }

}

public void OnClick() {

isStartTimer = true;

}

运行结果，可以发现我们可以通过点击鼠标或者按快捷键施放技能。 用相同的方法，创建其他两个技能UI，自行尝试，最终效果如下：

3-3.角色面板和背包系统

首先还是新建一个场景window frame。

然后创建一个背景，新建Image，添加图片源bg-01，在Rect Transform中，将背景自适应屏幕大小。然后创建一个窗口面板，新建Image,添加图片源window。适当将图片放大，得到以下效果：

在这里，我们会发现，当放大窗口的时候，边框并没有被拉伸，因为我们已经把图片的类型改成了sliced，这是九宫格模式，如下所示：

我们已经切好了图片的九宫格，所以无论图片怎么被拉伸，边框是锁定的。

我们继续创建标题背景和标题内容，非常简单，分别新建Image和Text，直接看效果：

然后我们做一个角色面板

新建场景character，创建背景，和之前方法一样，创建角色窗口，不多叙述，直接看效果：

接着为角色控制面板创建关闭按钮，同样很简单，为按钮创建一个前景图和背景图，并且添加button组件，将点击效果设置为前景图，以此来显示点击效果。

接下来设计人物头像，首先用Image新建一个白色边框:

这张图片也是用九宫格事先切好的，所以边角不会被拉伸。

然后创建Image作为头像背景，添加图片源portrait。创建Image作为头像本身，添加图片源character。然后为任务添加等级，新建Text即可。

创建人物ID显示，方法还是添加图片和文字，直接看效果：

接着添加人物属性，创建Text显示属性名称，属性数值，Image显示属性背景。

这里最后的加号图片要为它添加一个button组件，点击可以增加我们当前的血量。 然后上述方法，分别再做魔法属性，能量属性。 最后效果如下：

接着我们来创建背包系统

创建Image作为边框背景，添加图片源frame-1。调整边框与左边的边框对齐。

然后创建物品栏选项，新建Image，添加图片源tab-normal,再创建一个Image，添加图片tab-select,作为物品栏的选中状态。然后为tab-normal添加一个toggle组件。同时将toggle中的graphic属性设置为tab-select。运行，我们就可以切换物品栏状态了。

然后再复制两个物品栏。

分别是装备，消耗品，任务道具。

接着我们要利用toggle进行不同物品栏的切换。

为knapsack添加一个toggle group组件。

然后分别将knapsack拖入到3个物品栏的group属性中，这样3个多选就变成了一个单选，也就是只能切换一个状态。如下所示：

一般情况下，我们默认tab1是选中状态。 然后我们开始创建物品面板：

在knapsack中创建一个空物体为panel1,复制两个分别为panel2,panel3。 分别为每个panel创建一个button组件,用于显示代替面板的内容。我们要通过tab切换panel,下面来实现一下

我们可以看到，每个tab都有on value changed，我们可以通过这个面板来显示和隐藏panel

我们把panel1拖进来，同时选择setactive，就可以实现这个功能。同时对tab2和tab3也时如此，这样就实现了切换功能。 初始状态下，tab1是默认存在的，tab2和tab3的is on属性是勾掉的。同时panel2和panel3初始也是隐藏的，我们在inspector最上方勾掉即可。这样我们就完整实现了这个功能。

接下来具体实现面板里面的内容：

首先在panel1下建立一个空物体Grid,然后为这个空物体添加一个组件，component->layout->grid layout group，调整grid大小，继续在panel1下创建一个Image命名为item,添加图片源slot，在item下创建Image，任意找一张装备图片源。

为了防止loyout布局对item的影响，我们需要在panel1中再建立一个空物体，将item作为空物体的子物体。这样，布局只会影响空物体，不会对item造成影响。我们将空物体命名为grid-item。

要注意一点，空物体与里面的子物体中心点要保持一致，这样才能居中显示。 然后把grid-item移到grid下面作为子物体。复制多个grid-item。效果如下：

然后我们需要在下方显示格子的个数和物品的个数，这个就是创建文字和图片，直接看效果：

同样的方法为panel2和panel3也创建物品面板。最后我们要为每个选项卡创建文本内容，即装备，消耗品，任务道具。方法很简单，就是Text文本，最后我们来看下效果：

3-4.关卡选择界面

新建场景select level。

首先要完成的还是背景制作，同上，这里不细说，直接看效果图：

接下来制作关卡按钮和锁定关卡按钮：

首先是每个关卡按钮，由Image和Text组成，第一种是已经通关的关卡，直接来看效果图：

第二种是未通关的关卡，效果如下：

因为这些按钮要按照grid排布，为了防止按钮被grid布局改变，我们依旧创建空物体，将按钮放在空物体中，之前也讲过这个做法。记得要将空物体和按钮的中心点设置一致。

在白色边框bg frame下创建一个空物体作为子物体命名为grid content，为空物体添加组件grid layout group，将start axis属性设置为垂直方向。这样便于制作之后的滚动页面。

然后将levelitem1和levelitem2分别放入空物体作为子物体，然后复制多个levelitem，调节group中的cell size属性，使得一个页面中有8个关卡按钮，效果如下：

因为关卡按钮是向右滚动，所以我们需要将grid的中心点设置在左侧边的中点。然后拉长grid至原来的4倍，我们的目的是设计32个关卡按钮。方法同上，最后效果如下：

接下来我们要设计关卡的滚动列表：

首先我们在白色边框的下面创建一个Image,命名为scrollpanel，作为滚动的背景，调整大小，使背景可容纳8个按钮。将之前做好的rgid content作为Image的子物体。

在scrollpanel中添加组件scroll rect，因为我们让按钮向右滑动，因此在scroll rect面板中，我们需要将垂直勾掉。然后将grid content拖入content属性中。 但是我们不需要显示超出的部分，所以我们要用遮罩： 在scrollpanel中添加组件mask。

因为滚动背景我们也不需要显示，因此将show mask graphic勾掉，最终效果如下：

接着我们需要控制滑动列表按照页数滑动：

我们需要一个脚本来控制，新建脚本buttonscroll，代码如下：

public class buttonscroll : MonoBehaviour, IBeginDragHandler, IEndDragHandler {

private ScrollRect scrollrect;

private float[] pagearray = new float[] { 0, 0.333f, 0.666f, 1.1f }; // Use this for initialization void Start () {

scrollrect = GetComponent(); } // Update is called once per frame void Update () { }

//实现接口

public void OnBeginDrag(PointerEventData eventData) {

}

public void OnEndDrag(PointerEventData eventData) {

float posx = scrollrect.horizontalNormalizedPosition; int index = 0;

float offset = Mathf.Abs(pagearray[index] - posx); for(int i=1;ifloat offsetTemp = Mathf.Abs(pagearray[i]-posx); if(offsetTempindex = i;

offset = offsetTemp; } }

scrollrect.horizontalNormalizedPosition = pagearray[index]; } }

我们到此就可以通过代码实现滚共列表的当前显示页面。

我们会发现，页面之间的过渡太僵硬，我们需要改进代码，使页面有一个缓动的效果。 代码改进如下：

public class buttonscroll : MonoBehaviour, IBeginDragHandler, IEndDragHandler {

private ScrollRect scrollrect; public float smoothing = 4;

private float[] pagearray = new float[] { 0, 0.333f, 0.666f, 1.1f }; private float targetHorizontal = 0; private bool isDraging = false; // Use this for initialization void Start () {

scrollrect = GetComponent(); } // Update is called once per frame void Update () {

//页面缓动效果 if(isDraging==false)

scrollrect.horizontalNormalizedPosition Mathf.Lerp(scrollrect.horizontalNormalizedPosition, targetHorizontal, Time.deltaTime*smoothing); }

//实现接口

public void OnBeginDrag(PointerEventData eventData) {

isDraging = true; }

public void OnEndDrag(PointerEventData eventData) {

isDraging = false;

float posx = scrollrect.horizontalNormalizedPosition; int index = 0;

float offset = Mathf.Abs(pagearray[index] - posx); for(int i=1;ifloat offsetTemp = Mathf.Abs(pagearray[i]-posx); if(offsetTempindex = i;

offset = offsetTemp; } }

targetHorizontal = pagearray[index];

//scrollrect.horizontalNormalizedPosition = pagearray[index]; }

=

}

运行游戏，可以发现页面之间的切换是有一个缓动效果的。

接下来我们添加一个控制页数滑动的按钮：

首先在白色边框下添加一个空物体toggle group，我们将按钮都放在这个物体中，在toggle group下面创建一个Image作为子物体，添加图片源knob，在konb下再创建一个子物体Image,添加图片源leave，调整位置，让叶子正好挡住圆圈。将knob的组件命名为toggle,给toggle添加组件toggle,将toggle下的子物体leave托给变量graphic,这样当选中的时候显示的是叶子也不是圆圈。因为我们是4页，所以再复制三个toggle。

然后我们需要把4个toggle做成一个组，这样才能选中一个，方法同上，我们需要在toggle group中添加toggle group组件，然后将toggle group分别拖入4个toggle的group变量。

最后效果就是这样的。

到此，我们分别实现了页面的滑动和页面的选择，但是并没有联系起来，最后我们需要把它们关系起来。

我们需要在buttonscroll脚本中注册4个方法。 代码如下：

public void MovePage1(bool isOn) {

if(isOn) {

targetHorizontal = pagearray[0]; } }

public void MovePage2(bool isOn) {

if (isOn)

{

targetHorizontal = pagearray[1]; } }

public void MovePage3(bool isOn) {

if (isOn) {

targetHorizontal = pagearray[2]; } }

public void MovePage4(bool isOn) {

if (isOn) {

targetHorizontal = pagearray[3]; }

}

我们在这里要为每个toggle注册信息，如下所示：

这样我们就可以通过点击页数控制页面，如下所示：

到这里我们可以用按钮控制页面选择，但是两者是双向的，接下来我们需要通过页面来控制按钮显示：

我们只需稍微改动一下代码，如下：

我们只需要增加如图所示代码即可，然后我们需要把4个按钮分别添加到buttonscroll脚本中的数组中，如下所示：

这样我们就实现了双向的控制。

以上就是UGUI的几个实例，有助于我们更好地掌握和理解UGUI的功能。

4.总结

通过上述第二部分介绍的各个组件的属性和例子，我们可以发现新版的GUI系统相对于旧版本的GUI系统有了很大的完善和进步，同时通过第三部分各组件结合开发的实例我们也可以看出GUI系统可以做出各种各样很炫酷的界面，这里介绍的都是一些比较常用的属性和典型的实例，有兴趣的开发者可以尝试更多的细节和功能，这样就可以做出更加炫酷的效果，总的来说，新版的GUI系统大大地提高了开发效率。