【原创】UGUI基本控件讲解

da11

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class UGUI : MonoBehaviour
{
    /*
    UGUI是什么
    · Unity 图形用户界面 Unity Graphical Interface是Unity 4.6以上版本新加入的界面显示系统



    UGUI与OnGUI对比
    · 全新的布局系统
    Rect Transform      Layout Group

    · 强大的事件机制
    鼠标指针类   拖拽类     点选类     输入类

    · 最佳的执行效能
    减少了GPU负担

    UGUI与NGUI对比--优点
    · 由NGUI创始人参与开发
    · 自适应系统更完善
    · 更方便的深度处理
    · 淡化了Atlas，直接使用Sprite Packer

    UGUI与NGUI对比--缺点
    · UGUI没有Tween组件
    · 开发效率暂时低于NGUI


    UGUI基础控件
    · Canvas 画布（可以理解为屏幕）
    · 简介
      画布，绘制UI元素的载体，所有UI元素必须在Canvas之下。（如果某个UI元素分离出了Canvas，则会显示不出来）
      UI元素的绘制顺序依赖于层次面板中的顺序。
    · 画布的屏幕座标和世界坐标重合，所以知道画布的屏幕坐标就可以获取到世界坐标，反之同理！

    · 属性
    · Render Mode 渲染模式
      Screen Space-Overlay 覆盖模式：UI元素将绘制在其他元素之前，且绘制过程独立于场景元素和摄像机设置，画布尺寸由屏幕大小和分辨率决定
        --Pixel Perfect 完美像素：若勾选，则会锐化屏幕显示效果。
        --Sort Orfer 渲染顺序：在多个Canvas中，值越大越渲染到最上层。（在单个Canvas中，越底层的元素越在上层展示）



        --使用覆盖模式的性能会好于渲染相机模式

      Screen Space-Camera  渲染相机模式：
        --注意，如果选择这个模式，没有提供相机对象，则默认还是Screen Space-Overlay 覆盖模式
        --画布的信息都会受相机的参数影响，哪个物体离相机近，哪个物体就越展示在上层
        --Cancas对象被绘制在一个与摄像机固定距离的平面上，且绘制效果受摄像机参数的影响。
        --Plane Distance 相机与画布之间的距离（平面与摄像机的距离）
        --Sorting Layer 排序层：通过Edit--Project Settings--Tags and Layers调整Canvas渲染顺序。
        --2D-UI渲染时，UI相机的Projection选项应选择Orthographic

        如果需求是有一个为物体需要盖住UI，或者要在UI上加上特效，需要特效展示在UI前方，则选择渲染相机模式！！

      World Space  世界空间模式：画布渲染于世界空间，与场景中其他3D物体性质相同。
        --如果使用的是虚拟现实UI，则使用这种模式，画布（Canvas)较大，需要将Scale调小至0.01
        --使用场景比如cube贴个text上去


    2D-UI：和相机保持静止状态，相机移动，UI不会跟着移动
    3D-UI：和相机保持相对状态，相机移动，UI会跟着移动（在2D渲染模式中，2D-UI会遮盖着3D-UI）

    注意：操作UI时，最好在Unity界面的Scene场景上选中2D来操作，因为UI设置都是以像素为单位的！


    温馨提示：Screen Space-Camera 模式中，主相机在带着UI旋转移动时，将会消耗巨大的性能资源，为了优化，建议以下操作
    实际项目情况需要创建多一个相机专门渲染UI的相机，将此相机的深度值（Depth）设置的比主相机的深度值（Depth）要大（因为多个相机会互相覆盖）
    比如主相机的深度值（Depth）为0，那专门渲染UI的相机深度值（Depth）要设置为1
    然后在画布（Canvas)的渲染相机中把专门渲染UI的相机拉进去。
    此时世界有两个相机，你会发现一个物体出现在屏幕有两个。此时，需要将专门渲染UI的相机的Clear Flags调整为Depth Only,Culling Mask调整为UI
    既只显示UI层的物体，主相机也要同步设置将Culling Mask调整为除了UI外的所有层。这样就完成了UI和场景独立
    如果有个物体想覆盖在UI上，只需将需覆盖的物体层调整为UI，然后放到Canvas目录下即可。
    项目一般将专门渲染UI的相机的Position的位置调整为远离主场景之外的位置，如X轴为10000米，这样就形成了互不干扰



    Rect Transform  矩形变换
    · 简介
      派生自Transform，在UGUI控件上替代原有变换组件，表示一个可容纳UI元素的矩形。
    · 属性
      Pos（XYZ）：控件 轴心点相对于自身锚点的位置！！--超级重点！！！

      Anchor 锚点：UI元素的4个顶点与锚点的间距保持不变
                  锚点总是相对于父级，不能超越父物体范围
                  锚点在一起没分开Pos面板表示的是点   -->  PosX posY Width Hight
                  锚点分开表示拉伸 -->  Left Right Top Bottom

        --在Rect Transform  矩形变换下方一点有个可以快速设置锚点和轴心点的设置区域，常用！



        --锚点一般图片和文字的只做位置的自适应（中间不分开）（分开的是大小自适应）

      Pivot 轴心点（UI元素中间的点）：移动、旋转与缩放都围绕轴心点发生变化，0,0为左下顶点，1,1为右上顶点

     · 注意，Scene面板上要选择Pivot，不能选择Center，不然轴心点一直会在中心居中！！




    Image 图片
    · 属性
      Image Type 贴图类型：
        Simple 简单
            --Preserve Aspect 保持贴图原始比例
            --Set Native Size 将贴图设置为原始尺寸

        Sliced 切割
            --Fill Center 填充中部区域，如果取消中部区域为透明

        Tiled 平铺
            --保持图片原始尺寸，从左下角重复多次填充空白

        Filled 填充
            --可以呈现出从空白到完整填充的过程。
            --Fill Method 填充方式：
                Horizontal:水平填充
                Vertical：垂直填充
                Radial 90：填充90度
                Radial 180：填充180度
                Radial 360：填充360度
            --Fill Amount（适合使用技能冷却旋转）   

      Source Image 源图片，从资源面板拽过来（注意：资源面板的图片可能无法直接拽的进去，需要将资源面板的图片转换为Sprite格式）



      Color 调整Image颜色（RGB）及透明度（A）（淡入淡出效果）

      Set Native Size 设置图片原大小为POS面板的宽高

      Material 材质，一般UI不加材质，所以默认为None

    Text 文本
      Text 的POS大小实际上是显示区域，不会变换字体的大小
      Character 字体设置
        --Font 调整字体样式
        --Font Style 调整字体加粗
        --Font Size 调整字体大小
        --Line Spacing 调整行间距
        --Rich Text 富文本标记，在Text文本框中修改字体样式时勾选
            富文本语法：
            <b>粗体</b>
            <i>斜体</i>
            <size=14>字号</size>
            <color=green>颜色</color>
            更多的富文本标记可以百度搜--“UGUI图文混排”
            使用案例：12345<color=red>678</color>9  这样，678就变成了红色

      Paragraph 段落设置
        --Alignment 对齐方式
        --Horizontal Overflow 水平溢出
        --Vertical Overflow 垂直溢出

        --Best Fit 字体自适应
            --Min Size  字体自适应最小大小
            --Max Size  字体自适应最大大小


    Button 按钮
      --Interactable 是否交互，不勾选等于取消按钮交互（不是物体和组件禁用）
      --Transition 过渡模式
        -- None 无过渡
        -- Color Tint 颜色的渐变
            --Normal Color 正常的颜色
            --Highlighted Color 高光颜色
            --Pressed Color 按下去的颜色
            --Disabled Color 取消按钮禁用时的颜色

        -- Sprite Swap 图片交换过渡
            --放的都是图片

        -- Animation 动画过渡
            --点击Auto Generate Animation 生成4个动画片段，并在相应路径保存
            --录制对应的4个动画片段，即可



        --Navigation 导航，正常需设置为None

    Toggle 复选框
        --Is On 代表复选框是否被选中了

        Label 复选框文本
        Checkmark 点击复选框中间的图案，模式是打勾

    Slider 滑块
        --Min Value 设置最小滑块值
        --Max Value 设置最大滑块值
        --Value 滑块现在的值

        滑块可以拉动的组件-Handle Slide Area、Handle，如做人物血条时，可以删掉或者禁用



    Scrollbar 滚动条
        --Value 滑块现在的值
        --Size 滑块的大小

    Dropdown 下拉框
        --Options 每项内容的设置

        可以在禁用的Template模板中修改内容样式，修改后禁用Template模板即可在下拉框中应用



    Input Field 输入框
    · 属性
        Character Limit 字符数量限制
        Content Type 内容类型
            --Standard 标准
            --Integer Number 数字
            --Alphanumeric 字母数字
            --Email Address 邮件地址
            --Pin 仅输入整数，用*隐藏字符
            --Custom 自定义
            --Autocorrected 自动验证
            --Decimal Number 小数
            --Name 姓名
            --Password 密码

        Line Type 行类型
            --Single Line 单行
            --Multi Line Submit 多行文本，回车提交
            --Multi Line Newline 多行文本，回车换行
        Caret Blink Rate 光标闪烁速度
        Selection Color 选择的字符颜色




    */

    public Vector2 size;

    RectTransform RectTF;

    private void Start()
    {
        //两种方式获取RectTransform组件，第二个是强制将transform组件转换成RectTransform（子类型转换为父类型）
        //RectTransform RectTF = this.GetComponent<RectTransform>();
        RectTF = this.transform as RectTransform;
    }

    private void Update()
    {
        //世界坐标
        //当画布为Screen Space-Overlay时，世界坐标（单位：米）等同于屏幕坐标（单位：像素）
        //this.transform.position

        //this.transform.rotation旋转也适用UI
        //this.transform.rotation

        //当前UI轴心点相对于父物体（父UI）轴心点的位置（单位：像素）
        //this.transform.localPosition


        //RectTransform组件的position相等于this.transform.position世界坐标！！
        //RectTF.transform

        //自身轴心点相对于锚点的位置（Unity编译器中显示的POS面板）
        //RectTF.anchoredPosition3D

        //获取/设置锚点X轴（画布左侧）Y轴（画布右侧）的位置
        //RectTF.anchorMin

        //获取/设置轴心点的位置
        //RectTF.pivot

        //获取UI宽度(只读属性)
        //RectTF.rect.width

        //获取UI高度(只读属性)
        //RectTF.rect.height

        //设置UI宽度--Horizontal 是水平的，所以是宽度
        //RectTF.SetSizeWithCurrentAnchors(水平垂直枚举【Horizontal/Vertical】, float大小数值);
        //RectTF.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 100);

        //设置UI高度--Vertical 是垂直的，所以是高度
        //RectTF.SetSizeWithCurrentAnchors(水平垂直枚举, float大小数值);
        //RectTF.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 100);

        //当锚点不分开时，数值可以理解为UI宽高
        //锚点分开时是物体大小-锚点间距
        //所以建议获取UI宽高使用RectTF.rect  设置UI宽高使用RectTF.SetSizeWithCurrentAnchors
        //否则之后使用RectTF.sizeDelta时，锚点分开代码逻辑会出错！！
        size = RectTF.sizeDelta;

    }

}

da11

UGUI补充--20230416
1.首先在Game面板调整正确要制作UGUI项目的分辨率或者分辨比例



2.分辨率需选择：FixedResolution类型

3.然后在Canvas画布上的Canvas Scaler 组件中选择 UI Scale Mode(UI缩放模式)  --> XY（X对应宽度分辨率，Y对应高度分辨率）分辨率填写上个步骤的分辨率 --> 一般下面的Match值，如果是X值小，就选Width，否则选Height（根据选择宽度或者高度进行缩放）（必须首先设置此项才能开始后续项目制作）



4.在制作UI项目（2D项目）过程中，需要在Canvas画布下创建Panel物体。方便移动多个Panel物体达到移动游戏界面的效果




5.注意UI的轴心点和锚点是否设置对位置（如对应的UI-1相对于画布不动，那就需要锚点在对应的UI-1四周的四个点上，如果需要Text向下扩展高度，则轴心点可以放在Text的顶端中部，这样Text只会向下扩展高度），否则自适应时可能会位置异常！