UGUI学习记录

 

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文档

仓库链接