网站广告/媒体发布公司

一、UGUI的基本组成部分

• Canvas   （画布）所有UI都需要放在Canvas画布下面，不然无法显示
• EventSystem     所有的事件响应系统都需要依赖于EventSystem,若删除该组件，交互效果就                            不会显示

1.Canvas(画布)

• Render Mode : 渲染模式

       

       （1）Screen Space - Overlay ：表示画布上的内容在最上层绘制

       （2）Screen Space - Camera : 指定摄像机渲染

       （3）World Space : 此时画布以及画布中的内容为片状的3D对象

• UI Scale Mode 

       

      

二、Canvas中的UGUI元素

•  Image  （图片）
•  Text（文本）
•  Button（按钮）
•  Slider（滑动条）
•  Toggle（开关）

1.Image

    

•  Rect Transform

    

    

2.Text

    

•  Font ： 字体
• Font Style ：字体的类型（Normal-正常、Bold-加粗、Italic-斜体、Bold and Italic-加粗斜体）
• Font Size ：字体的大小
• Line Spacing :  行间距
• Rich Text ：富文本
• Alignment : 对齐方式
• Align By Geometry ：勾选后，文本在Rect的上方显示
• Horizontal Overflow : Wrap -（超出Rect的水平边界时不显示）、Overflow - (超出Rect的水平边界依然显示)
• Vertical Overflow : Truncate -（超出垂直边界时不显示）、Overflow - (仍然显示)
• Best Fit ：勾选后文本内容会自动匹配Rect的大小
• Raycast Target ：作用是允许UI元素接收射线，这是实现按钮点击等交互功能的基础

        富文本：

   

    

3.Button

    

• Interactable：勾选后代表该按钮可交互
• Transition:点击按钮交互时的按钮形态的变化
  None : 无
  Color Tine : 颜色变化
  Sprite Swap ：精灵图片变化
  Animation : 动画
• Normal Color ：正常颜色
  Highlighted Color : 当鼠标经过时的颜色
  Pressed Color : 点击中的颜色
  Selected Color : 被选择后的颜色
  Disable Color : 取消勾选可交互选项后的颜色

4.Slider

     

• Interactable ：是否可交互
• Transition : 确定滑动条以何种方式对用户操作进行可视化响应的属性
• Navigation ：确定控件顺序的属性
• Fill Rect : 滑动条中填充区域的图形
• Handle Rect : 用于滑动条中“控制柄”部分的图形
• Direction ：滑动条滑动的方向
• Min/Max Value ：最小、最大数值
• Whole Numbers ：是否应该将滑动条约束为整数值
• Value ：滑动条当前的数值

5.Toggle

    

    

    

    可以利用多个开关制作单选复选框开关：

1. 首先在Canvas中创建一个空对象（此时的空对象只有一个 Rect Transform组件），将空对象命名为 Toggle Group ,并为此空对象添加一个Toggle Group的组件
2. 全选开关，然后将Toggle Group对象拖动到开关对象的Group中
3. 此时的单选复选框开关必须选择一个，不能全部取消勾选，这时可以在Toggle Group对象的Toggle Group组件中勾选 Allow Switch Off（允许全部关闭）

---

三、注意

      UI的调节最好在2D视角下。