UGUI官方文档与中文翻译
官方文档:
中文翻译:UGUI中文翻译
UGUI基础(Unity Graphic User Interface)
UGUI是Unity引擎内自带的UI系统。(后续学习UIElements)
六大基础组件
六大基础组件是什么:
Canvas对象上的组件:
- Canvas:画布组件,主要用于渲染UI控件。
- Canvas Scaler:画布分辨率自适应组件,主要用于分辨率自适应。
- Graphic Raycaster:射线事件交互组件,主要用于控制射线响应相关。
- Rect Transform:UI对象位置锚点控制组件,主要用于控制位置和对齐方式。
EventSystem对象上的组件:
- Event System:玩家输入事件响应系统
- Standalone Input Module:独立输入模块组件
- 二者均主要用于监听玩家操作
Canvas
Render Mode:
- Screen Space - Overlay:
- Pixel Perfect:
- Sort Order:
- Target Display:
- Screen Space - Camera:
- Pixel Perfect:
- Render Camera:
- Order In Layer:
- World Space
- Event Camera:
- Sorting Layer:
- Order In Layer:
Additional Shader Channels:
Vertex Color Always:
Canvas Scaler
宽高*缩放系数Scale = 屏幕分辨率
屏幕分辨率:
参考分辨率:
画布宽高和缩放系数:
分辨率大小自适应:
UI Scale Mode:
- Constant Pixel Size:
- Scale With Screen Size:
- ConstantPhysical Size:
Constant Pixel Size
UI原始尺寸 = 图片大小(像素) / (Pixels Per Unit / Reference Pixels Per Unit)
参考对象越大,自身看起来越大,参考对象越小,自身看起来越小。参考它,它怎么变化(放大/缩小),自身怎么变化(放大/缩小)
一个单元格越大,自身看起来越小,一个单元格越小,自身看起来越大
Scale With Screen Size
Reference Resolution
Screen Match Mode
Match
计算公式
ConstantPhysical Size
3D模式
Graphic Raycaster
Rect Transform
Event System
Standalone Input Module
三大基础组件
Image
- Source Image:图片来源,必须是Sprite类型
- Color:颜色,叠加计算,会将颜色叠加到图像上
- Material:图像的材质,一般不修改
- Raycast Target:是否作为射线检测得目标,如果不勾选,将不会响应射线检测
- Maskable:是否能被遮罩
- Image Type:图片类型
- Simple-普通模式,均匀缩放整个图片
- Sliced-切片模式,九宫格拉伸,只拉伸中央十字区域
- Tiled-平铺模式,重复平铺中央部分
- Filled-填充模式
- Use Sprite Mesh:使用精灵网格,勾选的话Unity会帮助生成图片网格
- Preserve Aspect:确保图像保持其现有尺寸
- Set Native Size:设置为图片资源的原始大小
组合控件
图集制作
UGUI进阶
UI事件监听接口
EventTrigger事件触发器
屏幕坐标转UI相对坐标
Mask遮罩
CanvasGroup整体控制
模型和粒子显示在UI之前
异形按钮
自动布局组件
实践项目
UGUIdemo文档
仓库链接