3.Panel and Button
3.1 Panel
Panel(面闆)本質上就是預先設定好的 Image。可以作為其他 UI 元素的父級。
在層級視窗右擊選擇 UI -> Panel 即可建立。
如下圖所示:
3.2 Button
在層級視窗中右擊選擇 UI -> Button 即可建立。
Button 元素是由 Image元件、Button元件及其顯示文本的 Text 元件構成的。
如下圖所示:
Button元件的變量:
包括:Interactable 開關區、Transition 過渡區、Navigation 導航區、監聽區四個部分,其中前 3 個區域繼承了 Selectable 類,Selectable 元件包括除監聽區以外的其他 3 個區域,如果給 Image元件添加 Selectable 元件,就可以形成一個沒有監聽區的 Button 按鈕。
3.2.1 Interactable
用于設定是否可以互動。,不勾選的情況下,該按鈕呈不可用狀态。
3.2.2 Transition
互動類 UI 元素的 Transition (過渡方式)包括:
- Color Tint (顔色過渡)
- Sprite Swap (圖像變換)
- Animation (動畫過渡)
每種過渡方式的過渡狀态包括:
- Normal(正常)
- Highlighted(懸停)
- Pressed(按下)
- Selected(選中)
- Disabled(不可用)
1.Color Tint (顔色過渡)
Color Multiplier(顔色倍數)設定顔色的倍增
Fade Duration(陰影持續時間)設定過渡時間(秒)
2.Sprite Swap (圖像變換)
設定不同狀态下的圖像即可。
3.Animation (動畫過渡)
操作步驟:
(1)選擇 Button 元件過渡區的 Auto Generate Animation(生成動畫)按鈕,然後輸入名稱,自動生成一個 Animator 元件,可以通過 Inspector 面闆看到 Button 元件中增加的 Animator 元件,同時,在 Project 面闆中也會自動生成動畫狀态機圖示。
隻有通過 Auto Generate Animation 按鈕生成的動畫才會自帶動畫過渡的 5 種狀态。
(2)輕按兩下動畫狀态機圖示,打開動畫狀态機。
(3)選擇菜單 Windows -> Animation -> Animation,打開 Animation 面闆。
Animation 與 Animator 的差別:Animator 是動畫系統面闆,用于處理多個動畫之間的過渡;Animation 面闆是錄制具體某個動畫關鍵幀的面闆。
(4)在 Animation 面闆的左側 Preview 下面可以通過下拉清單選擇每個狀态,選擇狀态後,單擊紅色點錄制動畫,錄制完畢單擊紅色點關閉。
3.2.3 Navigation
Navigation 是鍵盤或者控制器決定以什麼順序選擇 UI 元素的控制機制。Navigation 的 6 中模式:
None - 不設定導航
Everything - 全部,勾選後下面的 4 種模式全選
Horizontal - 水準方向,選擇鍵盤或控制器的左右鍵時,選擇所按鍵方向的下一個 UI 元素,忽略上下鍵
Vertical - 垂直方向,選擇鍵盤或控制器的上下鍵時,選擇所按鍵方向的下一個 UI 元素,忽略左右鍵
Automatic - 自動,選擇上下左右鍵時,選擇所按鍵方向的下一個最合适的 UI 元素
Explicit - 明确,設定上下左右鍵按鍵方向的下一個選擇的 UI 元素
3.2.4 監聽區
監聽區可以執行預先設定好的指令,進而使 UI 元素具有一定的功能。Button 元素的監聽區為 On Click,也就是單擊滑鼠時的監聽。監聽模式包括:
- Off - 不監聽
- Editor And Runtime - 編輯和運作時都監聽
- Runtime Only - 隻在運作時監聽
單擊監聽區的 “+” 按鈕會自動添加一個事件。一個監聽區可以設定多個監聽事件,運作時按住從上到下的順序來執行。
1.設定監聽區實作功能
示例:通過點選按鈕讓 3D 物體 Cube 換一種材質。
在 Button 的監聽區添加事件,将 Cube 拖拽到監聽區,在 Function 下拉清單中選擇 Mesh Renderer 元件中的變量 Meterial,并設定一個材質,如下圖所示:
2.設定 Button 元件的腳本
在 Project 視窗中右擊選擇 Create -> C# Script,命名為 ButtonClick,輕按兩下腳本并編寫代碼如下:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ButtonClick : MonoBehaviour
{
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
}
public void OnButtonClick()
{
Debug.Log("The button is clicked.");
}
}
将 Project 視窗中的 ButtonClick 腳本拖入到 Button 的 Inspector 面闆中使其成為元件。
在 Button 的監聽區設定:将 Button 拖拽到監聽區,選擇腳本中的方法。如下圖所示:
3.通過挂載腳本實作功能
建立腳本并編寫代碼如下:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ButtonClick : MonoBehaviour
{
private Button button;
// Start is called before the first frame update
void Start()
{
button = GetComponent<Button>();
button.onClick.AddListener(OnButtonClick);
}
// Update is called once per frame
void Update()
{
}
void OnButtonClick()
{
Debug.Log("The button is clicked.");
}
}
上面的代碼中,在 Start 方法中擷取按鈕并為按鈕添加事件,将腳本挂載到 Button 元件上即可。