UGUI系列-原理分析(Unity3D)（二）

Unity UGUI 原理篇(三)：RectTransform

目标

1.理解 RectTransform Component 2.Anchor（锚点） 3.Pivot（支点） 4.Blue Print Mode 与 Raw Edit Mode

使用环境 与 版本

Window 7

Unity 5.2.4

RectTransform

RectTransform 是 Transform 的 2D 对应 Component，Transform 表示单个点，RectTransform 表示一个2D矩形(UI空间)，如果父子物体都有RectTransform，那麽子物体可以指定在父物体矩形中的位置与大小，简单来说RectTransform 就是定义UI元素的位置、旋转、大小

Anchor (锚点)

物体的锚点(对齐点)，如果父子都有 RectTransform 情况下，子物体可以依据 Anchor 对齐到父物体，又分为 Min 与 Max 位置，如下图物体四周有4个三角形

Anchor位置座标与关系 当我们使用滑鼠点选4个三角形调整Anchor时，会贴心的出现比例讯息，此比例是子物体在父物体中的缩放比例

如果将Anchor Min调整为(0.3, 0.5) ，Anchor Max调整为 (0.5, 0.7)，如下右图部分

注意看 左图 Pos X、Pos Y、Width、Height ，会改变为 右图 Left、Top、Right、Buttom

因为当 Anchor 在同一点时，显示的是物体的座标与大小，当 Anchor 不在同一点时(此时会形成矩形)，显示的会是 Anchor 矩形填充空间，如下图，(P.S.在我们移动物体时会贴心的显示目前与 Anchor 距离关系)

上面看完一定还是不了解怎麽运作，让我们来透过实例了解一下 Canvas 下有5张图，Anchor Min 与 Anchor Max 皆为 (0.5 , 0.5)，物体的位置会对齐到父物体的中心，当父物体大小改变时，情形如下

Canvas 下有1张图，Anchor Min 与 Anchor Max 皆为 (0.0, 1.0)，物体的位置会对齐到父物体的左上角，当父物体大小改变时，情形如下，物体会固定在左上角

Canvas 下有1张图，Anchor Min 为 (0.0, 0.0)， Anchor Max 为 (1.0, 0.0)，物体的位置会对齐到父物体的左下角与右下角，当父物体大小改变时，情形如下，物体宽度会随著父物体改变

由上面的几个实例可以知道，子物体会依据所设定 Anchor 对齐到父物体，当父物体大小改变时，透过 Anchor 更新子物体，上面有提到当我们点选4个三角形调整Anchor时，画面会贴心的出现比例讯息，相信有经验的人一定知道该比例的用意，此比例就是子物体在父物体中的缩放比例，以下举例 原来数值 Parent Size (400, 350)

Image Size (120, 105)

Anchor Min 为 (0.2, 0.5)， Anchor Max 为 (0.5, 0.8)

Parent Size 一半时数值 Parent Size (200, 175)

Image Size (60, 52.5) Image Size Width  =400 * 50% * 30% = 60 Image Size Height =350 * 50% * 30% = 52.5 Anchor Min 为 (0.2, 0.5)， Anchor Max 为 (0.5, 0.8)

经由上面可以得知父物体在缩小2倍后，父物体透过子物体的 Anchor 比例更新子物体，透过这种方式，我们可以达到不同萤幕解析度自动改变UI大小与位置 Anchor Presets

点选 RectTransform 左上角，可以开启Anchor Presets 工具，这边列出了常用的 Anchor ，可以快速套用，按住Shift 可以连同 Pivot 一起改变，按住 Alt 可以连同位置一起改变 Pivot (支点) 物体自身的支点，影响物体的旋转、缩放、位置，改变 UI Pivot 必须先开启控制面板的 Pivot 按钮，如下图

当 Pivot (0.5, 0.5)

Blue Print Mode(蓝图模式) 、 Raw Edit Mode(原始编辑模式)

Blue Print Mode (蓝图模式) 忽略了物体的 Local Rotation 和 Local Scale，方便以原来的旋转与大小调整物体

Inspector 中调整  Pivot

docs.unity3d.com/Manual/UIBa…

■ UnityのuGUIのレイアウト调整机能について解说してみる（RectTransform入门）

tsubakit1.hateblo.jp/entry/2014/…

Unity UGUI 原理篇（四）: Event System Manager 事件与触发

目标

1.Event System 事件系统 2.Input Module 输入控制 3.Graphic Raycaster 4.Physics Raycaster 与 Physics 2D Raycaster

使用环境 与 版本

Window 7

Unity 5.2.4

Event System

在建立出UI时，Unity会自动帮我们建立Event System物件，此物件是基于滑鼠、触摸、键盘的输入方式，传送 Event 到 Object 上，物件下有3个组件，分别为.Event System Manager、Standalone Input Module、Touch Input Module

1.Event System Manager

控管所有Event，负责将滑鼠、触摸、键盘输入方式(Input Module) 与 被选中的 Object 互相协调，每个 “Update” Event System 都会接收所有呼叫，并判断出这一瞬间要使用哪种Input Modules Event System Info 当按下Play后，点选Event System物件，会在inspector显示 选中物件、位置、接收事件的Camera等等资讯

.

First Selected

执行时第一次要选择的Object，例如：选择为 InputField (输入框) 后 ，按下Play后就会将游标 Force 在 InputField 上

Send Navigation Events

是否开启UI导航功能，导航功能是可以用键盘的 “上”、”下”、”左”、”右”、”Cancel(Esc)”、”Sumit(Enter)” 控制选择的UI

举例：如果画面上有多个选单按钮，我们可以设定按钮上的 Navigation Options 这裡使用Explicit方式，来指定按下键盘 “上”、”下”、”左”、”右” 要选取哪一个物件

Select On Up ：当键盘按下 “上” 键后要选择的物件，Down、Left、Right 不多做赘述

Visualize Buttin： 按下Visualize可以看到物件指向的黄线

Drag Threshold

Drag Event灵敏度，越低越灵敏

2.Standalone Input Module

电脑输入控制模组，主要影响著滑鼠与键盘的输入，使用 Scene 中的 Raycasters 计算哪个元素被点中，并传递 Event

Horizontal Axis

代表 Input Module 中的 Horizontal Axis，可以被设定为 Input Manager 中的值，Vertical Axis、Submit Button、Cancel Button 不多做赘述

Input Actions Per Second

每秒能输入的最大按钮与滑鼠次数

Repeat Delay

重複输入的延迟

事件执行完整流程

键盘输入

(1)Move Event：透过 input manager 验证输入 axis、left、right、up、down 按钮，传递给 selected object

(2)Submit 、Cancel Button：物件已经 Preesed (按下)时，透过 input manager 验证输入  submit 、cancel 按钮，传递给 selected object

滑鼠输入

  如果是新的按下

a.传送 PointerEnter event

b.传送 PointerPress event

c.将 drag 相关暂存

e.传送 BeginDrag event

f.设定Event system中的 selected object 为按下的Object

  如果是持续按下(Drag)

a.处理移动相关

b.传送 Drag event

c.处理 Drag 时跨到其他物体的 PointerEnter event、PointerExit event

  如果是释放(滑鼠放开)

a.传送 PointerUp event

b.如果滑鼠放开与按下时的物件一样，传送 PointerClick event

c.如果有 drag 相关暂存，传送 Drop event

d.传送EndDrag event

(3)滑鼠中键滚轮传送scroll event

3.Touch Input Module

触摸输入模组，主要用于移动设备上，可以透过Touch、Drag的方式响应，使用 Scene 中的 Raycasters 计算哪个元素被点中，并传递 Event

事件执行完整流程

与Standalone Input Module 的滑鼠输入一样，滑鼠点下想成触摸即可

4.Event System 触发流程

(1)使用者输入(滑鼠、触摸、键盘)

(2)透过 Event System Manager 决定使用 Standalone 还是 Touch Input Module

(3)决定使用的 Input Module 后，透过 Scene 中的 Raycasters 计算哪个元素被点中

(4)传送Event

Graphic Raycaster (图形 射线检测员)

组件位置：Unity Menu Item → Component → Event → Graphic Raycaster

建立 Canvas 物件时下的其中一个 Component，Raycaster 会观察 Canvas下所有图形，并检测是否被击中，射线检测其实就是指定位置与方向后，投射一条隐形线并判断是否有碰撞体在线上，射线检测这点官方已经有详细说明，这裡用于判断是否点选到UI图形

Ignore Reversed Graphics：

背对著画面的图形，射线检测是否要忽略此图形

举例：当图形Y轴进行旋转180后，此时是背对著画面，这时是如果有打勾，就会忽略不检测此图形

Blocked Objects 、 Blocking Mask：

主要用于当Canvas Component Render Mode 使用 World Space 或是 Camera Space 时，UI 前有 3D 或是 2D Object 时，将会阻碍射线传递到 UI 图形

Blocked Objects 阻碍射线的 Object 类型

Blocking Mask 勾选的 Layer 将会阻碍射线

举例：如果画面上有一个 Button 与 Cube 位置故意重叠，现在点击重叠之处会发现 Button 还是会被触发

如果将Cube 的 Layer 改为 Test01 ，Blocked Objects 设定为 Three D，Blocking Mask 只勾选 Test01，再次点选重叠区域，会发现 Cube 会阻碍射线检测，此时按钮会接收不到射线，当然也不会有反应

Physics Raycaster (物理物件 射线检测员) 组件位置：Unity Menu Item → Component → Event → Physics Raycaster

透过 Camera 检测 Scene 中的 3D GameObject(必须有 Collider Component)，有实现 Event Interfaces 接口的物件将会接收到 Message 通知，例如能让 3D GameObject 能接收 点下Event 或是 拖拉Event 等等…..，看更多 Event 请点我

接下来让我们透过实例理解

1.建立 EventSystem，进行 Event 处理

物件位置：Unity Menu Item → GameObject → UI → EventSystem

2.Camera下增加 Physics Raycaster Component，用来观察射线

3.实现 Event Interfaces 接口，这裡有两种方式，一种是建立 Script 直接实作 Interfaces ，一种是使用Event Trigger Component

第一种 建立 Script 直接实作 Interfaces

a.建立一个 Script，实作 Event Interfaces

EventTest.cs

using UnityEngine;
using UnityEngine.EventSystems;
public class EventTest : MonoBehaviour, IPointerDownHandler
{
    public void OnPointerDown(PointerEventData eventData)
    {
        print(gameObject.name);
    }
}
复制代码

Line. 2：using  UnityEngine.EventSystems 汇入命名空间

Line. 4：继承 Event Interfaces，这裡是IPointerDownHandler(点下事件)，看更多 Event 请点我

Line. 6~8：实作方法，传入 PointerEventData 为事件资料

b.建立一个3D物件(此称为Cube)，并增加 BoxCollider Component

c.将 Script 放至 Cube 下，Inspector 中会出现 Intercepted Events 资讯，显示出正在监听的 Event

d.此时点击 Cube 就会通知 OnPointerDown 方法并传入事件资讯

第二种 使用Event Trigger Component 实作 Interfaces

a.建立一个 Script，实作方法，用于接收 Event Trigger 通知

EventTriggerTest.cs

using UnityEngine;
using UnityEngine.EventSystems;
public class EventTriggerTest : MonoBehaviour
{
    //BaseEventData 動態傳入事件資訊
    public void OnPointerDown(BaseEventData eventData)
    {
        print("OnPointerDown--BaseEventData");
    }
    //純呼叫
    public void OnPointerDown()
    {
        print("OnPointerDown--non");
    }
    //傳入int
    public void OnPointerDown(int i)
    {
        print("OnPointerDown--int");
    }
}
复制代码

Line. 2：using  UnityEngine.EventSystems 汇入命名空间

Line. 6~8：实作方法，这边实作3种

b.建立一个3D物件(此称为Cube)，并增加 BoxCollider Component

c.将 Script 放至 Cube 下

d.Cube 下加入 Event Trigger Component，主要接收来至 Event System 的 Event ，并呼叫有实作的 Event

组件位置：Unity Menu Item → Component → Event → Event Trigger

e.点选 Add New Event Type 选择要实作的 Event 类型 ，这裡使用PointerDown(点下事件)举例

f.此时会新增一个UnityEvents，是一种透过编辑器设定的方式，设定 Event 触发时要通知的方法与属性，详细可以参考以下，这边简单说明

胡乱说‧随便写 – Unity：使用 UnityEngine.Events 让程式更灵活、稳定

Unity – Manual: UnityEvents

点下 “+” 按钮后，拖入要通知的Scene GameObject，Unity Event 就会寻找此 GameObject 上所有 Public 的方法与属性 ，就可以新增 Event 触发时 “通知的方法” 与 “预修改属性”

g.GameObject 拖入 Cube，通知方法设定 Script 中的3个方法

h.此时点击 Cube 就会触发 PointerDown ，通知 Script 中的3个方法

4.实作注意点：

■ Scene 必需有 EventSystem GameObject

■ Camera 必需有 Physics Raycaster Component

■ 3D GameObject 必须有 Collider Component

■ 实作 Event Interfaces 的方式，一种是建立 Script 直接实作 Interfaces ，一种是使用 Event Trigger Component，由上面实作可以知道，使用 Event Trigger 的方式可以使用编辑器设定，设定触发时的 “通知方法” 与 “修改属性”，且更为弹性

Physics 2D Raycaster 组件位置：Unity Menu Item → Component → Event → Physics 2D Raycaster

跟 Physics Raycaster 只差在于，Physics 2D Raycaster 是检测 Scene 中的 2D GameObject，当然 GameObject 上必须有 Collider2D Component，这边不再赘述

后记 我们透过输入的方式不同与 Raycaster 的关系，理解了整个 Event System 触发流程，而且也知道怎麽实作 Event 与应用 Event，不管是3D、2D、UI物件都可以方便的套用，大大提升开发速度、简化语法，可说是非常方便的功能

参考资料 ■ Unity – Manual: Event System

docs.unity3d.com/Manual/Even…

■ Unity – Manual: UnityEvents

docs.unity3d.com/Manual/Unit…

■ Unity – Raycasting

unity3d.com/cn/learn/tu…

■ 胡乱说‧随便写 – Unity：使用 UnityEngine.Events 让程式更灵活、稳定

godstamps.blogspot.tw/2015/10/uni…