天天看點

【2.UI元素】3.Panel and Button

作者:青少年程式設計ABC

3.Panel and Button

3.1 Panel

Panel(面闆)本質上就是預先設定好的 Image。可以作為其他 UI 元素的父級。

在層級視窗右擊選擇 UI -> Panel 即可建立。

如下圖所示:

【2.UI元素】3.Panel and Button

3.2 Button

在層級視窗中右擊選擇 UI -> Button 即可建立。

Button 元素是由 Image元件、Button元件及其顯示文本的 Text 元件構成的。

如下圖所示:

【2.UI元素】3.Panel and Button

Button元件的變量:

【2.UI元素】3.Panel and 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.UI元素】3.Panel and Button

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 拖拽到監聽區,選擇腳本中的方法。如下圖所示:

【2.UI元素】3.Panel and 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 元件上即可。