当前位置：首页 > news >正文

unity中的UI介绍

news 2025/4/26 18:01:09

unity中的UI介绍

1. Canvas（画布）
2. Image（图像）
3. Button（按钮）
4. Text（文本）
5. Input Field（输入框）
6. Toggle（切换按钮）
7. Slider（滑动条）
8. Dropdown（下拉菜单）
9. Scroll Rect（滚动区域）
10. Layout组件

在unity中，UI组件是创建用户界面的关键元素，内置的UI基于unityEngine.UI命名空间，提供了多种预定义的UI组件和工具用于创建用户界面

1. Canvas（画布）

功能：Canvas是所有UI元素的根对象，其决定了UI元素如何渲染以及如何响应屏幕分辨率的变化

类型：

Screen Space - Overlay:UI元素直接绘制在屏幕上，不受摄像机影响
Screen Space - Camera:UI元素相对于某个摄像机绘制
World Space:UI元素作为3D世界的对象，可以受摄像机视角影响

使用方法：

在Hierarchy视图中右键选择UI->Canvas创建一个新的Canvas
选择Canvas,然后在Inspector视图中设置其Render Mode和相关属性

2. Image（图像）

功能：用于显示图像和颜色
属性：

Source Image:设置图像的Sprite
Color:设置图像的颜色和透明度
Type:可以选择Simple(普通)、Sliced(切片)、Tiled(平铺)等类型

使用方法：

在 Hierarchy 视图中右键选择 UI -> Image 创建一个新的 Image
选中Image，然后在Inspector视图中设置Source Image和其他属性

3. Button（按钮）

功能：用于创建可点击的按钮
属性：

Text:按钮上的文本
Image:按钮的背景图像
Transition:按钮的过渡效果（Color Tint、Sprite Swap、Animation）
On Click():按钮点击时触发的事件

使用方法：

在 Hierarchy 视图中右键选择 UI -> Button 创建一个新的按钮
选中按钮，然后在Inspector视图中设置Text、Image和其他属性
在On Click()事件中添加需要执行的函数

using UnityEngine;
using UnityEngine.UI;public class ButtonHandler : MonoBehaviour
{public void OnButtonClicked(){Debug.Log("Button Clicked!");}
}

4. Text（文本）

功能：用于显示文本
属性：

Text:显示的文本内容
Font:使用的字体
Color:文本的颜色
Alignment:文本的对齐方式

使用方法：

在Hierarchy视图中右键选择UI->Text创建一个新的文本
选中文本，然后在Inspector视图中设置Text、Font和其他属性

using UnityEngine;
using UnityEngine.UI;public class TextManager : MonoBehaviour
{public Text myText;void Start(){myText.text = "Hello, Unity!";}
}

如何在代码中使用Text：

using UnityEngine;
using TMPro;public class PlayerMovement : MonoBehaviour
{public int score = 0;public TextMeshProUGUI textComponment;public float moveSpeed = 5f;void Update(){//获取水平和垂直输入float horizontalInput = Input.GetAxis("Horizontal");float verticalInput = Input.GetAxis("Vertical");//计算移动方向Vector3 moveDirection = new Vector3(horizontalInput, 0, verticalInput).normalized;//应用移动transform.Translate(moveDirection * moveSpeed * Time.deltaTime);}// 碰撞器//private void OnCollisionEnter(Collision collision)//{//  if (collision.gameObject.tag == "food")//    {//        Destroy(collision.gameObject);//    }//}private void OnTriggerEnter(Collider other){if (other.tag == "food"){score++;textComponment.text = score.ToString();Destroy(other.gameObject);}}
}

若需要使用text，则需要引入TMPro，在定义了textComponment组件后，之后会在unity中出现此组件，然后将Text(TMP)拖到组件框中即可在代码中使用在这里插入图片描述

5. Input Field（输入框）

功能：用于接收用户输入的文本
属性：

Text: 当前输入的文本
Placeholder：输入框为空时显示的占位文本
Character Limit：输入的最大字符数
Line Type: 输入框的行类型（单行、多行、隐藏输入）
On End Edit：输入框失去焦点时触发的事件

使用方法：

在 Hierarchy 视图中右键选择 UI -> Input Field 创建一个新的输入框
选中输入框，然后在Inspector视图中设置Text、Placeholder或其他属性
在On End Edit事件中添加需要执行的函数

using UnityEngine;
using UnityEngine.UI;public class InputFieldHandler : MonoBehaviour
{public InputField myInputField;public void OnInputFieldEndEdit(string text){Debug.Log("Input: " + text);}
}

6. Toggle（切换按钮）

功能：用于创建可切换的按钮
属性：

Is On: 当前的状态（开或关）
Graphic: 切换按钮的图像
On Value Changed: 切换按钮状态改变时触发的事件

使用方法：

在 Hierarchy 视图中右键选择 UI -> Toggle 创建一个新的切换按钮
选中切换按钮，然后在 Inspector 视图中设置 Is On 和其他属性
在 On Value Changed 事件中添加需要执行的函数

using UnityEngine;
using UnityEngine.UI;public class ToggleHandler : MonoBehaviour
{public Toggle myToggle;public void OnToggleValueChanged(bool isOn){Debug.Log("Toggle is: " + (isOn ? "On" : "Off"));}
}

7. Slider（滑动条）

功能：用于创建可拖动的滑动条
属性：

Value: 当前的值
Min Value: 最小值
Max Value: 最大值
On Value Changed: 滑动条值改变时触发的事件

使用方法:

在 Hierarchy 视图中右键选择 UI -> Slider 创建一个新的滑动条
选中滑动条，然后在 Inspector 视图中设置 Value、Min Value、Max Value 和其他属性
在 On Value Changed 事件中添加需要执行的函数

using UnityEngine;
using UnityEngine.UI;public class SliderHandler : MonoBehaviour
{public Slider mySlider;public void OnSliderValueChanged(float value){Debug.Log("Slider value: " + value);}
}

8. Dropdown（下拉菜单）

功能: 用于创建下拉菜单
属性:

Options: 下拉菜单的选项列表
Value: 当前选中的选项索引
On Value Changed: 选中选项改变时触发的事件

使用方法:

在 Hierarchy 视图中右键选择 UI -> Dropdown 创建一个新的下拉菜单
选中下拉菜单，然后在 Inspector 视图中设置 Options、Value 和其他属性
在 On Value Changed 事件中添加需要执行的函数

using UnityEngine;
using UnityEngine.UI;public class DropdownHandler : MonoBehaviour
{public Dropdown myDropdown;public void OnDropdownValueChanged(int index){Debug.Log("Selected option: " + myDropdown.options[index].text);}
}

9. Scroll Rect（滚动区域）

功能: 用于创建可滚动的区域
属性:

Content: 滚动区域的内容
Horizontal: 是否启用水平滚动
Vertical: 是否启用垂直滚动
Scroll Sensitivity: 滚动的灵敏度

使用方法:

在 Hierarchy 视图中右键选择 UI -> Scroll Rect 创建一个新的滚动区域
选中滚动区域，然后在 Inspector 视图中设置 Content、Horizontal、Vertical 和其他属性

using UnityEngine;
using UnityEngine.UI;public class ScrollRectHandler : MonoBehaviour
{public ScrollRect myScrollRect;void Update(){if (Input.GetKeyDown(KeyCode.UpArrow)){myScrollRect.verticalNormalizedPosition += 0.1f;}if (Input.GetKeyDown(KeyCode.DownArrow)){myScrollRect.verticalNormalizedPosition -= 0.1f;}}
}