[Unity] 不使用滑鼠來操作 UI (UI Navigation)

510 字

3 分鐘

[Unity] 不使用滑鼠來操作 UI (UI Navigation)

2022-11-30

技術筆記

unity

在 Unity 中，如果要使用上下左右 (i.e. 鍵盤、搖桿、D-pad)控制 UI，就必須要先設定 UI Navigation。

手動啟用#

先找到場景上的 Event System，設定好 First Select，也就是開啟場景時第一個被選擇的 UI 物件 (雖然這個欄位可以放所有 GameObject，但如果該 GameObject 不可以被選擇，視同沒有效果)

同時，Unity 預設的顏色都很白、不容易被察覺。這裡我們把「被選中」顏色設的明顯一點 (#39C5BB)。

使用 Navigation 設定該物件可以透過上下、左右或是我全都要來選中；點選 Visulaization 可以看到 UI 互動的流程圖。

自動化腳本#

如果懶得設定上面那些東西，我寫了個小腳本可以動態變更場景上的可選擇物件，取名叫 UiNavigationTweak 然後拉進場景裡就可以了。

1
using UnityEngine;
2
using UnityEngine.UI;
3
using System.Collections;
4
using System.Collections.Generic;
5
using UnityEngine.EventSystems;
6

7
public class UiNavigationTweak : MonoBehaviour
8
{
9
    void Start()
10
    {
11
        Refresh();
12
    }
13

14
    public void Refresh()
15
    {
16
        var selectables = Transform.FindObjectsOfType<Selectable>();
17
        var eventSystem = GameObject.FindObjectOfType<EventSystem>();
18
        Color32 mikuColor = new Color32(0x39, 0xc5, 0xbb, 0xff);
19
        int i = 0;
20
        // mod all selected color
21
        foreach(var selectable in selectables)
22
        {
23
            var c = selectable.colors;
24
            c.selectedColor = mikuColor;
25
            selectable.colors = c;
26
            i++;
27
        }
28
        // evs
29
        if(i > 0 && eventSystem)
30
        {
31
            eventSystem.SetSelectedGameObject(selectables[0].gameObject);
32
            Debug.Log($"[UiNavigationTweak] Modded {i} objects.");
33
        }
34
    }
35
}

:::spoiler 如果專案會動態改變 UI，可以利用定期偵測這些變更把它套用

也可以由外部腳本呼叫 Refresh()

1
using UnityEngine;
2
using UnityEngine.UI;
3
using System.Collections;
4
using System.Collections.Generic;
5
using UnityEngine.EventSystems;
6

7
public class UiNavigationTweak : MonoBehaviour
8
{
9

10
    /// <summary>
11
    /// Start is called on the frame when a script is enabled just before
12
    /// any of the Update methods is called the first time.
13
    /// </summary>
14
    IEnumerator Start()
15
    {
16
        while(true)
17
        {
18
            Refresh();
19
            yield return new WaitForSeconds(1);
20
        }
21
    }
22

23
    /// <summary>
24
    /// Start is called on the frame when a script is enabled just before
25
    /// any of the Update methods is called the first time.
26
    /// </summary>
27
    public void Refresh()
28
    {
29
        var selectables = Transform.FindObjectsOfType<Selectable>();
30
        var eventSystem = GameObject.FindObjectOfType<EventSystem>();
31
        Color32 mikuColor = new Color32(0x39, 0xc5, 0xbb, 0xff);
32
        int i = 0;
33
        // mod all selected color
34
        foreach(var selectable in selectables)
35
        {
36
            var c = selectable.colors;
37
            c.selectedColor = mikuColor;
38
            selectable.colors = c;
39
            i++;
40
        }
41
        // evs
42
        if(i > 0 && eventSystem)
43
        {
44
            Debug.Log($"[UiNavigationTweak] Modded {i} objects.");
45
            if(!eventSystem?.currentSelectedGameObject?.activeInHierarchy ?? true)
46
                eventSystem.SetSelectedGameObject(selectables[0].gameObject);
47
        }
48
    }
49
}