Unity基础（08）—— GUI

一、Unity的GUI用法

【注】使用 UI 必须要在程序开头引用 using UnityEngine.UI;  命名空间。

（一）UI 基本简介

1、操作 UI 时最好将界面选中箭头所指的这两项，来方便操作。此时：鼠标左键移动UI内元素，鼠标右键移动场景。同一画布下，下面的控件会覆盖上面的。

 

２、画布的渲染模式

• Screen Space - Overlay ：为2D模式，在此模式下，当主相机移动时，UI 保持不动。且 UI 可以覆盖场景中的3D物体
• Screen Space - Camera：模式需要提供相机，此时物体可以盖住画布，且相机动，画布也跟着动。（可以设置UI相机，深度值大于主相机）
• World Space：世界空间（可以设置UI相机，只看UI内容），让UI贴到物体上。

３、属性

（二）、UI 下的组件

1、UI 下的一些组件：

 

2、所有的 UI 组件全部是位于 Canvas 下面。如当要创建一个 Text 组件时，Unity会自动创建 Canvas 和 Event System。

3、也可以先创建 Canvas（在创建Canvas时会自动创建 Event System），然后右键 Canvas 来创建相应的 UI 组件。

 

 

---

二、Canvas 下的组件简介

１、Text ：显示文本框

（１）、富文本语法

如可以让字体显示不同的颜色，如下图

【注意】若要显示富文本效果，必须要勾选 Rich Text 选项

                  

２、Button：按钮中含有Text属性，可以用来修改内容。

可以设置按钮的正常颜色，按下时颜色。导航一般选中 None

３、Toggle：开关选项，可以用来勾选。

（1）、创建Toggle后就会默认自带如下几项

   

４、Slider：滑动条。各个模块的颜色如下：

 

５：Image：添加图片。

如果想在 UI 中添加图片，步骤如下：

（1）、必须先创建 UI 中的 Image。

 

（2）、选中创建的 Image ，并在组件的 Source Image 中选中提前准备好的图片即可

 

【注】：调整图片的大小时，当选中图片后，按Alt 键可以对称的调整图片的大小。

6、Dropdown：下拉框选项

    

 

---

三、UI下组件的应用实例

１、设计进度条来显示具体的分数，进度条的背景是图片。

（1）、在 Canvas 下添加 Image，作为外层背景。选中Image ，将提前准备好的背景图片放在 Source Image 下

     

（2）、复制 Canvas 下刚刚添加的  Image 为 Image01， 作为内层背景，让其成为 Image 的子物体，并调整其大小。然后将Image01 的颜色设置为黑色。

（3）、复制  Image01 为 Image02 ，让其成为 Image 的子物体，并将其颜色设置为绿色。绿色将表示进度条进度的多少

  

 再将 Image02 的对应属性修改成如下图红框中的内容，来为后面的进度条填充作准备。

• Source Image ：表示 Image02 的背景图片
• Color：表示该图片的填充颜色
• Image Type：将该图片的方式改成填充 Filled 的方式。改成填充的方式后会出现如下所示的对应填充参数
• Fill Method：将填充的方式改成水平的填充方式
• Fill Origin：改成从左边开始填充，从左往右
• Fill Amount：调整成 1 ，此时可以看见填充满的样子，来方便调整该图片的位置

  

（4）、点击 Image 在其上添加 Slider 组件，将 Image02 拖放到 Slider的填充区（Fill React），如下图中箭头所指的位置

拖动完成后，绿色图片 Image02 的位置和大小会出现变动，将其调整到之前的位置即可。此时可以通过 Slider 组件的 Value 值来修改其填充的大小（如下图箭头所指的是 Value =78 时的填充状态）。

【注】：Min Value 是Value值的最小值；Max Value 是 Value 值的最大值。

（5）、在Image 下添加 Image03，并在Source Image 中添加一个圆环，如下图。 

   

（6）、在Image 下添加 Text ，将其重新命名为 ShowScore ，调整其字体大小、颜色、样式，如下图。   

   

（7）、创建一个脚本，通过代码将 Slider 中的 Value 值赋给Text 组件的 text 值，便可以将 Value 的值显示出来。然后创建一个空物体，将该脚本挂载在空物上。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ChangeBottonSize : MonoBehaviour 
{
    Slider slid;
    Text textDiaplay;

    void DisplayScore()
    {
        textDiaplay.text = slid.value.ToString("F0");
        textDiaplay.color = Color.red;
        textDiaplay.fontSize = 27;
    }
	
	void Start ()
    {
        slid = GameObject.Find("Canvas/Image").GetComponent<Slider>();
        textDiaplay = GameObject.Find("Canvas/Image/ShowScore").GetComponent<Text>();
	}
    private void Update()
    {
        DisplayScore();
    }
}

  最终效果如下图所示：