当前位置：网站首页>Unity—UGUI control

·Screen Space-Overlay覆盖模式：UIElements will be drawn before other elements,And the drawing process is independent of scene elements and camera settings,画布尺寸由屏幕大小和分辨率决定
Pixel Perfect完美像素：若勾选,It will sharpen the screen display effect
Sort Order渲染顺序：在多个Canvas中,值越大,The more rendered to the top layer
（同一个Canvas内,Determined by the order of precedence）
·Screen Space-Camera摄像机模式:提供UI Camera,CanvasObjects are drawn in one with the camera,on a fixed distance plane,且绘制效果受摄像机参数的影响
Render Camera渲染摄像机
Plane Distance平面与摄像机的距离
Sorting Layer排序层：通过Edit—>Project Setting—>Tags and Layer调整Canvas渲染顺序
·World Space世界空间模式：Canvas rendering with world space,与场景中其他3D物体性质相同

需求：UI是UI,3D是3D

while creating a camera—UIcamera—（照）画布
UICamera渲染UI元素,MainCamera渲染主场景、3D物体
Multiple cameras in the same scene will have overlays——>调Depth值;
UICamera和主CameraAt the same time, the object is displayed in the interface——>需把Depthbig camera,Clear Flags改成Depth Only（仅深度:Blank parts are not rendered）;
Because there are two cameras,An object screen will display two——>UICamera—Culling Mask(UI),UIThe camera only drawsUI元素,The main camera doesn't lookUI;
想让3D物体盖住UI,可以把3DThe object layer becomesUI

Rect Transform矩形变换

派生自Transform,在UGUIReplace the original transform component on the control,Indicates that one can accommodateUI元素的矩形

属性：

Pos:The position of the control's pivot point relative to its own anchor point

Anchor锚点：UI元素的4The distance between the vertex and the anchor point remains the same

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

表示点—>PosX PosY Width Hight

表示拉伸—>Left Right Top Botton

Pivot轴心点：移动,旋转与缩放都围绕轴心点发生变化,0,0为左下顶点,1,1Divide the anchor point for the upper right vertex：The ratio of the screen changes,The picture also changed

（The background image is adaptive to size,Other pictures are generally position adaptive）

UIThere are also world coordinates（单位：米）this.transform.position

（When the canvas isOverlay时,Equivalent to screen coordinates（单位：像素））

API:

//Position relative to the parent object
//The current pivot point is relative to the parentUIposition of the pivot point（单位：meters or pixels）
this.transform.localPosition;
RectTransform rtf=GetComponent<RectTransform>();
或RectTransform rtf=this.transform as RectTransform;
//The position of the own pivot point relative to the anchor point（displayed in the compilerPos）
rtf.anchoredPosition3D;
//获取/设置锚点
rtf.anchorMin;
//获取UI宽度（只读）
rtf.rect.width;
//设置UI宽度/高度
rtf.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal,250);/Vertical
//When the anchor points are not separated,Numerical values can be understood as UI宽高;实际：Object size minus anchor point spacing
rtf.sizeDelta;

Button控件

Interactable 是否交互
Transition:
·Color Tint颜色过度
Highlighted Color高光颜色（光标移入时）
Pressed Color按压颜色
Selected Color Color after confirmation
Disabled Color Do not interact with colors
·Sprite Swap精灵切换根据按钮状态,显示不同的图片
·Animation Auto Generate Animation自动生成动画

Text文本标签

富文本语法（Individual characters want to be displayed in different ways）Rich Test勾选

<b>粗体</b>
<i>斜体</i>
<size=14>字号</size>
<color=green>颜色</color>

Paragraph

Horizontal Overflow/vertical 水平溢出/垂直

Best FitSize property is ignored,Fits the text to the control's rectangle

（Fonts grow larger with text size、变小）

Image图片

属性：
Image Type贴图类型（Put the picture typeTexture Type:Sprite 2D and UI）
Simple 简单
Preserve Aspect 保持贴图原始比例
Set Native Size 将贴图设置为原始尺寸
Sliced 切割
Fill Center 填充中部区域,If canceled, the middle area is transparent
Tiled 平铺
保持图片原始尺寸,从左下角重复多次填充空白
Filled 填充
可以呈现出从空白到完整填充的过程
Fill Amount(Smooth increase and decrease effect)
Set Native SizeSet the image local size

Slider

属性:
Fill Rect填充矩形区域
Handle Rect 手柄矩形区域
Direction 手柄方向
Min/Max Value 最小/最大值
Whole Numbers 整数数值

Game blood bar production——>

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（Based on screen size）

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

Table auto layout component 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:Created game object,The world position is not used

            }

        }

}

效果图：