学习Unity：day 16~17 2023/9/25~26

• UGUI

一、简介

1、是什么？

UGUI 是 Unity 官方的 UI 实现方式，自从 Unity 4.6 起，Unity 官方推出了新版 UGUI 系统。
新版 UGUI 系统相比于 OnGUI 系统更加人性化，而且是一个开源系统，利用游戏开发人员进行游戏界面开发。
UGUI 系统有 3 个特点：灵活、快速、可视化。对于游戏开发者来说，UGUI 运行效率高，执行效果好，易于使用，方便扩展，与 Unity 3D 兼容性高。
在 UGUI 中创建的所有 UI 控件都有一个 UI 控件特有的 Rect Transform 组件。
在 Unity 3D 中创建的三维物体是 Transform，而 UI 控件的 Rect Transform 组件是UI控件的矩形方位，其中的 PosX、PosY、PosZ 指的是 UI 控件在相应轴上的偏移量。UI 控件除了 Rect Transform 组件外，还有一个 Canvas Renderer（画布渲染）组件。

2、UGUI优势

    1：使用Unity自身的Animation做UGUI的动画系统，可以使用粒子效果
    2：引用锚点概念使屏幕自适应更加简单
    3：UGUI的深度处理：以精灵在“层级试图”的父对象中上下循序，决定其是否被“覆盖”的顺序，无需人工进行“层的设定”
    4：自动图集打包机制：Ngui必须先打包出图集然后才能开始做界面，这一点很烦，且图集尽量控制在512*512以内。千万别超过1024*1024。图集改如何规划等等。而UGUI淡化图集概念，做界面时候只用小图，而在打包的时候Unity才会把你的小图合并在一张大的图集里面，这一切自动完成。

3、注意

1）设置分辨率
2）设置画布的分辨率
3）修改图片的类型为Sprite
4）脚本引入UI命名空间

二、基础知识

1、画布

1）最下面显示在最上面

2）渲染模式

1：Screen Space—Overlay：屏幕空间—覆盖模式
            UI元素始终置于屏幕的最上层
2：Screen Space—Camera：屏幕空间—摄像机模式
            画布将自动改变尺寸来匹配屏幕
            画布平面与摄像机距离可设置
3：World Space：世界空间模式
            UI呈现为场景中的平面对象

3）缩放比例控制组件

1：constant pixel size：固定像素大小
            使UI元素在像素中保持相同的大小，而与屏幕大小无关
2：scale with screen size：固定屏幕大小
            UI元素越大，屏幕越大
3：constant physical size：固定物理大小
            使UI元素保持相同的物理大小，而不管屏幕大小和分辨率

2、Sprite（精灵）切图

3、Rect Transform

1）定义

带位置的矩形框
2）位置
3）长宽
4）锚点
       Shft
        Alt

4、可视化元素

1）

2）Image（图片）（四种类型）

3）Raw image（原始图片）
    小地图
    视频播放

4）Mask遮罩
    Mask：Show Graphic
    RectMask2D

5）Text文本

1：基础
1》字体：发布WebGL默认字体不显示
2》Font Style：字体风格
3》Rich Text：是否使用富文本
4》Best Fit：字体自适应
5》溢出处理
1>Horizontal Overflow：水平溢出，
      Overflow：溢出，文本显示不受Text元素的宽度限制，
      Wrap：截断，超出的字不显示
2>Vertical Overflow：垂直溢出，
6》富文本
            勾选 Rich text
            <b>粗体</b>
            <i>斜体</i>
            <size=50>大小</size>
            //颜色支持rgb格式和直接使用名称的方式
            <color=#ff000000>颜色</color>
            <color=red>颜色</color>

               
2：基本界面
3：增加阴影：Shadow
4：增加轮廓：Outline
5：打字机效果

5、交互元素

1）

2）Toggle开关
    ToggleGroup分组

3）Button按钮

1：过渡
    Button颜色过渡
    Button精灵过渡
    Button动画过渡

2：点击事件的绑定
        //第一种
        btnExit = GameObject.Find("Canvas/btnExit").GetComponent<Button>();
        //btnExit1.onClick.AddListener(()=> BtnExit());
        //第二种
        btnExit.onClick.AddListener(() =>
        {
            Debug.Log("btnExit99999");
        });
        //第三种
        btnExit.onClick.AddListener(BtnExit);

4）Input Field 文本输入

5）Scroller滚动条

6）ScrollRect滚动矩形
    目标物体选择子物体
    子物体要比父物体大

7）Slider滑动条
1：方向
2：value
3：min value
4：max vlaue

6、布局组件

1）自动布局

Grid Layout Group（网格布局组）
Horizontal layout Group（水平布局组）
Vertiacal Lyout Group（垂直布局组）

2）适配器

内容大小适配器 (Content Size Fitter)
宽高比适配器 (Aspect Ratio Fitter)

7、技巧

按住Shift拖动可以固定长宽比放大缩小