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

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世界的对象,可以受摄像机视角影响

使用方法:

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

2. Image(图像)

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

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

使用方法:

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

3. Button(按钮)

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

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

使用方法

  1. 在 Hierarchy 视图中右键选择 UI -> Button 创建一个新的按钮
  2. 选中按钮,然后在Inspector视图中设置Text、Image和其他属性
  3. 在On Click()事件中添加需要执行的函数
using UnityEngine;
using UnityEngine.UI;public class ButtonHandler : MonoBehaviour
{public void OnButtonClicked(){Debug.Log("Button Clicked!");}
}

4. Text(文本)

功能:用于显示文本
属性

  • Text:显示的文本内容
  • Font:使用的字体
  • Color:文本的颜色
  • Alignment:文本的对齐方式
  • 在这里插入图片描述

使用方法

  1. 在Hierarchy视图中右键选择UI->Text创建一个新的文本
  2. 选中文本,然后在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:输入框失去焦点时触发的事件

使用方法:

  1. 在 Hierarchy 视图中右键选择 UI -> Input Field 创建一个新的输入框
  2. 选中输入框,然后在Inspector视图中设置Text、Placeholder或其他属性
  3. 在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: 切换按钮状态改变时触发的事件

使用方法:

  1. 在 Hierarchy 视图中右键选择 UI -> Toggle 创建一个新的切换按钮
  2. 选中切换按钮,然后在 Inspector 视图中设置 Is On 和其他属性
  3. 在 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: 滑动条值改变时触发的事件

使用方法:

  1. 在 Hierarchy 视图中右键选择 UI -> Slider 创建一个新的滑动条
  2. 选中滑动条,然后在 Inspector 视图中设置 Value、Min Value、Max Value 和其他属性
  3. 在 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: 选中选项改变时触发的事件

使用方法:

  1. 在 Hierarchy 视图中右键选择 UI -> Dropdown 创建一个新的下拉菜单
  2. 选中下拉菜单,然后在 Inspector 视图中设置 Options、Value 和其他属性
  3. 在 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: 滚动的灵敏度

使用方法:

  1. 在 Hierarchy 视图中右键选择 UI -> Scroll Rect 创建一个新的滚动区域
  2. 选中滚动区域,然后在 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: 保持内容的宽高比

使用方法:

  1. 选择需要应用布局的 GameObject
  2. 在 Inspector 视图中点击 Add Component,选择相应的 Layout 组件
  3. 设置 Layout 组件的属性,如 Child Alignment、Child Force Expand 等

http://www.mrgr.cn/news/79672.html

相关文章:

  • 外包干了5天,技术明显退步。。。。。
  • 《蓝桥杯比赛规划》
  • unity 2D像素种田游戏学习记录(自用)
  • LearnOpenGL学习(高级OpenGL --> 帧缓冲,立方体贴图,高级数据)
  • kubeadm安装K8s集群之基础环境配置
  • VCU——matlab/simulink软件建模
  • ubuntu22.04 使用可以用的镜像源获取你要的镜像
  • Redisson分布式锁
  • Win10环境vscode+latex+中文快速配置
  • Java-JMX 组件架构即详解
  • Oracle DataGuard启动与关闭顺序
  • spring 源码分析
  • SQL语句在MySQL中如何执行
  • Linux Vi/Vim使用 ⑥
  • AKE 安全模型:CK, CK+, eCK
  • 计算机网络原理之HTTP与HTTPS
  • vue3-canvas实现在图片上框选标记(放大,缩小,移动,删除)
  • 小程序IOS安全区域优化:safe-area-inset-bottom
  • HTML综合
  • 【系统架构核心服务设计】使用 Redis ZSET 实现排行榜服务