Unity中的UI系统之UGUI

[toc]

概述

六大基础组件

• 六大基础组件概述
  • Canvas画布
  • Canvas Scaler分辨率自适应
  • Graphic Raycaster控制射线响应
  • RectTransform UI控制位置对齐方式
  • EventSystem事件系统
  • Standalone Input Module监听玩家操作
• Canvas渲染模式的控制
  • Canvas组件用来干啥
    -渲染UI子对象
  • 多个Canvas对象
    • 管理不同渲染方式，分辨率适应方式
  • Canvas组件的三种渲染方式Render MOde
    • Screen Space-overlay
      • Pixel Perfect抗锯齿
      • SoretOrder 多个Canvas渲染排序
    • Screen Space-Camera
      • Render Camera
      • Plane DistanceUI平面与摄像机距离
      • Sorting Layer排序层内的序号
      • Order in Layer排序层序号
    • World Space
• Canvas Scaler
  • 用处：分辨率大小自适应
  • 基本概念
    • 画布尺寸和缩放系数
    • 参考分辨率
    • 屏幕分辨率 实际Game分辨率
  • 三种适配方式
    • Scale With Screen Size 缩放模式
    • Constant Pixel Size 恒定像素模式
    • Constant Physical Size恒定物理模式
  • Constant Pixel Size恒定像素模式
    • Scale Factor
    • Reference Pixels Per Unit
      • UI原始尺寸=图片大小/(Pixels Per Unit/Reference Pixels Per Unit)
  • Scale With Screen Size 缩放模式
    • Scale With Screnn Size缩放
  • Constant Physical Size恒定物理模式
    • 根据DPI修改原始尺寸保持显示大小不变
    • 不怎么用
  • 3D模式
    • Canvas渲染模式改为World Space
    • Dynamic Pixels Per Unit 动态像素密度
      • 使得UI元素显示更清晰
• Graphic Rycaster
  • 用处：根据图形检测UI输入事件
  • 参数
    • Ignore Reversed Graphics是否忽略反转图形
    • Blocking Objects碰撞器阻挡
    • Blocking Mask层级阻挡（优先级高于碰撞器）
• EventSystem以及Standalone Input Module
  • EventSystem
    • 输入事件监听管理分发
  • Standalone Input Module
    • 热键映射
• RectTransform
  • 处理UI元素位置大小
  • 关键概念
    • 中心点（轴心点）
    • 锚点
      • 一个点时，控制轴心点相对位置
      • 一个面时，控制rect相对大小（边的相对位置）

三大基础控件

• Image
  • 显示图片
  • 关键概念
    • Source Image
    • 是否截取射线
    • 图片类型
      • 普通模式：不缩放
      • 切片模式：只缩放中心区域
      • 平铺模式：重复中心纹理
      • 填充模式：进度条效果
    • 设置原始大小

        #region 知识点三 代码控制
        Image img = this.GetComponent<Image>();
        img.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");

        (transform as RectTransform).sizeDelta = new Vector2(200, 200);
        img.raycastTarget = false;

        img.color = Color.red;
        #endregion

• Text
  • 字体，样式，大小，对齐
  • 富文本
  • 水平，垂直溢出
  • 自适应大小

        #region 知识点五 代码控制
        Text txt = this.GetComponent<Text>();
        txt.text = "唐老狮 哈哈哈哈哈";
        #endregion

• Raw Image用于大图，使用较少
  • UV Rect图像在UI矩形内的偏移和大小

        #region 知识点三 代码控制
        RawImage raw = this.GetComponent<RawImage>();
        raw.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_08");
        raw.uvRect = new Rect(0, 0, 1, 1);
        #endregion