创建面板
创建Canvas,存放UI组件:
右击,UI --> Canvas
帮助按钮:
点击Canvas,右击,UI --> Button,自带Text
帮助文本:
创建Panel,将Text放在里面(点击Canvas,右击,UI --> Panel,点击Panel,右击UI --> Text)
重命名为
调整参数
Canvas:
1.Render Mode:渲染模式
模式 | 中文名称 | 特点 | 适用场景 |
Screen Space - Overlay | 屏幕空间 - 覆盖 | 直接覆盖在屏幕最上层,不依赖摄像机 | 所有全屏UI、菜单、HUD等 |
Screen Space - Camera | 屏幕空间 - 相机模式 | 由指定摄像机渲染,可以和其他3D内容混合 | 可以叠加3D特效或模型的UI |
World Space | 世界空间 | UI作为场景中的一个3D对象存在 | 血条、标签、可旋转UI面板等 |
Screen Space-Overlay ——屏幕空间覆盖模式(demo所使用的)
- Canvas 下的所有的UI永远位于屏幕的前面,覆盖掉相机渲染场景显示的元素
- 不受任何摄像机影响
属性 | 功能 |
Pixel Perfect | 使UI元素像素对应,效果就是边缘清晰不模糊 |
Sort Order | 多个Canvas时,数值越大越后渲染。值大的画布,会挡住值小的(在这个demo中,Main Camera默认的Depth为-1,所以帮助页面在最上面) |
Target Display | 目标显示器,如果有多个屏幕的话可以选择 |
Screen Space-Camera —— 相机模式
- UI 由指定的摄像机渲染,而不是始终覆盖在所有内容之上。
- 允许你在摄像机和 UI 之间放置 3D 模型、粒子效果等。
- UI 分辨率会根据摄像机视口自适应。
- 适合需要“嵌入”到摄像机画面中的 UI。
属性 | 功能 |
| 同样用于像素对齐 |
| 指定用于渲染这个 Canvas 的摄像机 |
| 值越大,该UI越显示在前面 |
- 如果你想让 UI 和 3D 场景元素进行深度排序(比如 UI 在粒子后面),可以选择该模式。
- 注意:如果多个 Canvas 使用了相同的摄像机渲染,则它们的显示顺序由
Order in Layer
决定。
World Space —— 世界模式
- Canvas 作为一个普通 3D 对象存在于场景中。
- 可以被摄像机拍摄到,像普通物体一样参与透视、旋转、缩放等。
- 经常用于动态 UI,如角色头顶的血条、浮动对话框等。
2.Canvas Scaler:画布缩放
Constant Pixer Size —— 恒定像素大小
- UI 元素保持固定的像素大小,不随屏幕分辨率或 DPI 改变。
- 当你希望 UI 元素始终保持相同的物理尺寸时使用。例如,在 VR 应用中,你可能希望按钮等交互元素在任何情况下都保持一致的大小以便用户点击
- 在高分辨率屏幕上,UI 可能显得过小;在低分辨率屏幕上则可能显得过大。
- 不适合需要自适应不同设备的应用。
Scale With Screen Size —— 根据屏幕大小缩放(demo所用)
- UI 元素的大小基于当前屏幕分辨率与设计分辨率的比例进行缩放。你可以指定一个参考分辨率(Reference Resolution),Canvas 会根据实际屏幕分辨率相对于这个参考分辨率的比例来缩放所有 UI 元素。
- 适用于大多数应用,尤其是那些需要支持多种设备和屏幕比例的情况。
- 属性:
-
- Reference Resolution:设定一个理想的分辨率作为基准。
- Match:决定宽度和高度哪个更重要。值为0表示仅匹配宽度,值为1表示仅匹配高度,介于两者之间的值表示同时考虑宽度和高度。
- 优点:
-
- 能够较好地适应不同分辨率的屏幕。
- 减少了因直接拉伸而导致的界面失真问题。
- 缺点:
-
- 如果设置不当,可能会导致 UI 被不均匀地拉伸或压缩,尤其是在宽高比差异较大的设备上。
(Match 为0:仅匹配宽度Width,1:仅匹配高度Height,0.5的话,根据宽度和高度的比例平均地调整大小)
Constant Physical Size —— 恒定物理大小
- UI 元素按照物理单位(如厘米、英寸)而不是像素来定义其大小。这意味着无论屏幕分辨率如何变化,UI 元素的实际物理尺寸都将保持不变。
- 主要用于需要精确控制物理尺寸的应用,比如 AR 或 VR 环境下的 UI 设计。
- 注意点:
-
- 需要确保设备支持获取准确的 DPI 信息。
- 对于普通移动应用或桌面应用来说,这种模式不太常用。
帮助按钮:(注意颜色透明度)
帮助文本:
编写脚本
挂载在Canvas_Overlay_Help对象上
//挂载在Canvas_Overlay_Help对象上
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Job4HelpButtonController : MonoBehaviour
{
public GameObject helpPanel; //绑定版主面板
public Button helpButton; //绑定帮助按钮
private Text buttonText; //绑定帮助文本
void Start()
{
//获取按钮的文本文件
buttonText = helpButton.GetComponentInChildren<Text>();
//初始状态:隐藏帮助版面,按钮显示“显示帮助”
helpPanel.SetActive(false);
buttonText.text = "显示帮助";
}
// 点击按钮切换状态
public void ToggleHelp()
{
bool isHelpActive = helpPanel.activeSelf;
helpPanel.SetActive(!isHelpActive);
buttonText.text = isHelpActive ? "显示帮助" : "隐藏帮助";
}
}
添加按钮点击:
将Canvas_Overlay_Help拖拽到None中,选择Function