一、Unity的GUI用法
【注】使用 UI 必须要在程序开头引用 using UnityEngine.UI; 命名空间。
(一)UI 基本简介
1、操作 UI 时最好将界面选中箭头所指的这两项,来方便操作。此时:鼠标左键移动UI内元素,鼠标右键移动场景。同一画布下,下面的控件会覆盖上面的。
2、画布的渲染模式
- Screen Space - Overlay :为2D模式,在此模式下,当主相机移动时,UI 保持不动。且 UI 可以覆盖场景中的3D物体
- Screen Space - Camera:模式需要提供相机,此时物体可以盖住画布,且相机动,画布也跟着动。(可以设置UI相机,深度值大于主相机)
- World Space:世界空间(可以设置UI相机,只看UI内容),让UI贴到物体上。
3、属性
(二)、UI 下的组件
1、UI 下的一些组件:
2、所有的 UI 组件全部是位于 Canvas 下面。如当要创建一个 Text 组件时,Unity会自动创建 Canvas 和 Event System。
3、也可以先创建 Canvas(在创建Canvas时会自动创建 Event System),然后右键 Canvas 来创建相应的 UI 组件。
二、Canvas 下的组件简介
1、Text :显示文本框
(1)、富文本语法
如可以让字体显示不同的颜色,如下图
【注意】若要显示富文本效果,必须要勾选 Rich Text 选项
2、Button:按钮中含有Text属性,可以用来修改内容。
可以设置按钮的正常颜色,按下时颜色。导航一般选中 None
3、Toggle:开关选项,可以用来勾选。
(1)、创建Toggle后就会默认自带如下几项
4、Slider:滑动条。各个模块的颜色如下:
5:Image:添加图片。
如果想在 UI 中添加图片,步骤如下:
(1)、必须先创建 UI 中的 Image。
(2)、选中创建的 Image ,并在组件的 Source Image 中选中提前准备好的图片即可
【注】:调整图片的大小时,当选中图片后,按Alt 键可以对称的调整图片的大小。
6、Dropdown:下拉框选项
三、UI下组件的应用实例
1、设计进度条来显示具体的分数,进度条的背景是图片。
(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();
}
}
最终效果如下图所示: