·Screen Space-Overlay覆盖模式：UI元素将绘制在其他元素之前，且绘制过程独立于场景元素和摄像机设置，画布尺寸由屏幕大小和分辨率决定

Pixel Perfect完美像素：若勾选，则会锐化屏幕显示效果

Sort Order渲染顺序：在多个Canvas中，值越大，越渲染到最上层

（同一个Canvas内，由先后顺序决定）

·Screen Space-Camera摄像机模式:提供UI Camera,Canvas对象被绘制在一个与摄像机，固定距离的平面上，且绘制效果受摄像机参数的影响

Render Camera渲染摄像机

Plane Distance平面与摄像机的距离

Sorting Layer排序层：通过Edit—>Project Setting—>Tags and Layer调整Canvas渲染顺序

·World Space世界空间模式：画布渲染与世界空间，与场景中其他3D物体性质相同

需求：UI是UI，3D是3D

在创建一个摄像机—UIcamera—（照）画布

UICamera渲染UI元素，MainCamera渲染主场景、3D物体

多个摄像机在同一场景里会有覆盖——>调Depth值；

UICamera和主Camera同时把物体显示界面中——>需把Depth大的摄像机，Clear Flags改成Depth Only（仅深度:空白部分不渲染）；

因为有两个摄像机，一个物体屏幕里会显示两个——>UICamera—Culling Mask(UI),UI摄像机只绘制UI元素，主相机不看UI；

想让3D物体盖住UI，可以把3D物体层变成UI

Rect Transform矩形变换

派生自Transform,在UGUI控件上代替原有变换组件，表示一个可容纳UI元素的矩形

属性：

Pos:控件轴心点相对于自身锚点的位置

Anchor锚点：UI元素的4个顶点与锚点的间距保持不变

锚点总是相对于父级，不能超越父物体范围

表示点—>PosX PosY Width Hight

表示拉伸—>Left Right Top Botton

Pivot轴心点：移动，旋转与缩放都围绕轴心点发生变化，0,0为左下顶点，1,1为右上顶点把锚点分点：屏幕的比例发生变化，图片也变

（背景图片做大小自适应，其他图片一般都做位置自适应）

UI也有世界坐标（单位：米）this.transform.position

（当画布为Overlay时，等同于屏幕坐标（单位：像素））

API:

//相对于父物体位置

//当前轴心点相对于父UI的轴心点位置（单位：米或像素）

this.transform.localPosition;

RectTransform rtf=GetComponent<RectTransform>();

或RectTransform rtf=this.transform as RectTransform;

//自身轴心点相对于锚点的位置（编译器中显示的Pos）

rtf.anchoredPosition3D;

//获取/设置锚点

rtf.anchorMin;

//获取UI宽度（只读）

rtf.rect.width;

//设置UI宽度/高度

rtf.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal,250);/Vertical

//当锚点不分开时，数值可以理解为UI宽高;实际：物体大小减去锚点间隔

rtf.sizeDelta;

Button控件

Interactable 是否交互

Transition:

·Color Tint颜色过度

Highlighted Color高光颜色（光标移入时）

Pressed Color按压颜色

Selected Color 确定后颜色

Disabled Color 不交互颜色

·Sprite Swap精灵切换根据按钮状态，显示不同的图片

·Animation Auto Generate Animation自动生成动画

Text文本标签

富文本语法（个别的字想以不同的方式去展示）Rich Test勾选

<b>粗体</b>

<i>斜体</i>

<size=14>字号</size>

<color=green>颜色</color>

Paragraph

Horizontal Overflow/vertical 水平溢出/垂直

Best Fit忽略大小属性，将文本适合控件的矩形

（字体随文本大小而变大、变小）

Image图片

属性：

Image Type贴图类型（把图片类型Texture Type:Sprite 2D and UI）

Simple 简单

Preserve Aspect 保持贴图原始比例

Set Native Size 将贴图设置为原始尺寸

Sliced 切割

Fill Center 填充中部区域，如果取消则中部区域为透明

Tiled 平铺

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

Filled 填充

可以呈现出从空白到完整填充的过程

Fill Amount(平滑增减效果)

Set Native Size设置图片本地大小

Slider

属性:

Fill Rect填充矩形区域

Handle Rect 手柄矩形区域

Direction 手柄方向

Min/Max Value 最小/最大值

Whole Numbers 整数数值

游戏血条制作——>

Input Field输入框

属性：

·Line Type行类型

Single Line单行

Muti Line Submit多行文本，回车提交

Muti Line NewLine 多行文本，回车换行

Caret Blink Rate 光标闪烁速度

Selection Color 选择的字符颜色

做UI之前要：

Canvas—>Canvas Scaler(组件)下UI Scale Mode选择Scale With Screen Size（基于屏幕大小）

Reference Resolution（参考分辨率） X 768 Y 1024

表格自动布局组件 Grid Layout Group

可实操，可用代码——>

void Start()

    {

        for(int i=0;i<4;i++)

        {

            for(int j=0;j<4;j++)

            {

                GameObject go = new GameObject(i.ToString() + j.ToString());

                go.AddComponent<Image>();//添加UI元素

                go.transform.SetParent(this.transform,false);//指定父物体

//false:创建的游戏对象，不使用世界的位置

            }

        }

}

效果图：

Unity—UGUI控件

UGUI控件

Canvas画布