Unity3d入门基础之UGUI-基本控件的学习

基础控件

Canvas 画布 重点

Ø  简介

画布绘制UI元素的载体，所有UI元US必须在Canvas之下。UI元素的绘制顺序 依赖于参差面板中的顺序

Ø  属性

u  Render Mode 渲染方式

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

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

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

     

  Screen Speace-Camera 摄像机模式：提供UICamear，Cancas对象被绘制在一个与摄像机固定的距离的平面上，且绘制效果受摄像机参数的影响

     RenderCamera 渲染摄像机

         Plane Distance 平面与摄像机的距离

         Sorting Layer 排序层：通过Edit-Project Settings-Tags and Layers 调整Canvas渲染顺序

      

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

 

Rect Transform 矩形变换  重点

Ø  •简介

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

Ø  •属性

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

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

        

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

                           表示点     --> PosX  PosY Width  Hight

                           表示拉伸  --> Left  Right  Top  Bottom

                           位置自适应    固定否个物体的

                           大小自适应

    Pivot 轴心点：移动、旋转与缩放都围绕轴心点发生变化，

                          0,0为左下顶点，1,1为右上顶点

Ø  应用：

//当前UI的世界坐标

//如果画布模式为 overlay （覆盖模式）那么 pos 等同于 屏幕坐标  （从左下角开始的...）

//世界坐标 与 屏幕坐标 重合

 Vector3   pos = transform.position;

//当前UI的坐标（轴心点）是 相对它的 父的轴心点

//父UI的轴心点 指向  当前 UI的轴心点

Vector3 localPos = transform.localPosition;

 //UI的旋转

 transform.Rotate(0, 0, 1);

 transform.rotation =Quaternion.AngleAxis(10,Vector3.up);

//UI的缩放

 //获取UI的宽度 高度

 RectTransform recTF = transform asRectTransform;

 RectTransform recTF1 =GetComponent<RectTransform>();

  float wid=recTF.rect.width;

//设置 UI的宽度 高度

recTF.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal,100);

//当前物体的轴心点相对于 锚点的位置

Vector3 anchorepos = recTF.anchoredPosition3D;

//大小增量

//UI大小 -  UI锚点大小（间距）

//当锚点表示位置自适应时 ， sizeDelta 等于 UI大小

Vector2 v1= recTF.sizeDelta;

Image 图片

Ø  •属性

    Image Type 贴图类型： 

    Simple简单

       Preserve Aspect 保持贴图原始比例

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

    Sliced 切割  

       FillCenter 填充中部区域，如果取消中部区域为透明

    Tiled 平铺

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

    Filled 填充

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

 

 

 

Text 文本标签

 

Ø  •属性

   Character 字符

    Font 字体            Font Style 样式        Font Size 大小

    LineSpacing 行间距       Rich Text 是否使用富文本样式

   Paragraph 段落

   Alignment 对齐方式   

   Horizontal /  VerticalOverflow  水平 / 垂直 溢出

    BestFit 大小自适应范围在Min Size  与 Max Size 之间

Color颜色      Material 材质

Ø  •富文本语法

   <b>粗体</b>

   <i>斜体</i>

   <size=14>字号</size>

   <color=green>颜色</color>

Button 按钮

 

Ø  •属性

  Interactable 是否启用交互

    Transition 过渡方式

      Color Tint 颜色过渡

        Normal正常    Highlighted 高亮    Pressed点击

       Disabled 禁用    Multiplier 颜色倍数   

       Fade Duration 变化时间

      Sprite Swap 精灵切换过渡

      Animation 动画过渡

   

    Navigation                      导航

        Horizontal                   水平导航

        Vertical                     垂直导航

        Automatic                   自动导航

        Explicit                        显式导航

    visualize                          可视化--显示导航路径

 

Input Field  输入框

 

Ø  •属性

    Character Limit 字符数量限制

    Content Type 内容类型

       Standard 标准                      Autocorrected 自动验证

       Integer Number 数字          Decimal Number 小数

       Alphanumeric 字母数字       Name 姓名 

       Email Address 邮件地址       Password 密码

        Pin仅输入整数，用*隐藏字符

       Custom 自定义

    Line Type                   行类型

       Single Line             单行

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

       Multi Line Newline 多行文本，回车换行

    Caret Blink Rate         光标闪烁速度

    Selection Color          选择的字符颜色

Toggle 开关

Ø  •属性

    IsOn                     复选框的选中状态

    ToggleTransition  状态改变时,是否启动过渡效果

   Graphic                 切换的背景图片

Group                    单选组

 

 

 

 

 

 

 

 

 

 

 

Slider  滑块

Ø  •属性

    FillRect                 填充矩形区域

    HandleRect              柄矩形区域

   Direction                手柄方向

    Min /Max Value          最小/最大值

    WholeNumbers          整数数值

Value                   数值

 

 

 

 

 

 

 

 

 

 

 

Scrollbar  滚动条

Ø  •属性

   Size                              手柄大小

Numberof Steps         从开始 滑动 到末尾的步骤