unity中的UI介绍
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;}}
}
10. Layout组件
功能: 用于自动排列 UI 元素
常见类型:
- Horizontal Layout Group: 水平排列子元素
- Vertical Layout Group: 垂直排列子元素
- Grid Layout Group: 网格排列子元素
- Content Size Fitter: 自动调整内容的大小
- Aspect Ratio Fitter: 保持内容的宽高比
使用方法:
- 选择需要应用布局的 GameObject
- 在 Inspector 视图中点击 Add Component,选择相应的 Layout 组件
- 设置 Layout 组件的属性,如 Child Alignment、Child Force Expand 等