2016年8月21日 星期日

Unity:UGUI的鍵盤控制

Unity 專案的製作都是在電腦上進行的,所以,習慣上都是使用滑鼠去點擊按鈕或其他可控制的 UI 元件;除了在電腦上使用滑鼠點擊之外,在行動裝置上也是從觸控螢幕直接點擊,因此,比較少會需要完全使用鍵盤控制以及在 UI 元件間切換,但是,如果在只能使用鍵盤或者手把控制的環境下,UI 的製作就必須要有良好的導航機制,而在 Unity 4.6 之後的新 GUI 系統(UGUI)則會在 UI 的製作過程自動建立 UI 元件間的導航關係,讓我們可以很方便地將 UI 的控制轉換成方便於鍵盤或手把的使用。


影片網址:https://youtu.be/zgBVoaaZpxU

以上影片的示範中,我們先在場景中放置三個 Button 以及其他的可控制 UI 元件,所謂可控制 UI 元件即是指除了用於顯示圖文之外,也可回應玩家輸入與控制的 UI 元件;另外,也有一個 Text 用來在畫面上顯示哪個 Button 被點擊。

為了方便觀察,所以,將每個可控制 UI 元件的 Highligted Color 欄位指定成較顯眼的顏色,讓 UI 元件的操作,可以更清楚的表現在畫面上。

當在 Hierarchy 視窗選取任何一個可控制 UI 元件時,在 Inspector 視窗就可以看到 Navigation 欄位以及 Visualize 按鈕,如果按下 Visualize 按鈕,就可以在 Scene 看到各個可控制 UI 元件之間的導航關係。



當場景載入完成之後,還沒有任何 UI 被選取的情況下,雖然,UI 元件已自動建立導航關係,但此時如果使用鍵盤或手把來控制的話,並無法對 UI 進行任何操作,所以,在此要建立一個簡單的 Script 用於初始化行為,讓場景載入完成之後可以去執行某個 UI 元件的 Select()


這段程式碼在 Start() 時執行 UnityEvent 事件欄位的內容,而不寫死程式碼去對某個物件執行 Select(),主要是希望可以更彈性指定所執行的初始化行為,關於 UnityEvent 相關的做法可以參考以前發佈的文章「Unity:使用 UnityEngine.Events 讓程式更靈活、穩定」。

在完成指定執行 Select() 的 UI 元件之後,當場景載入完成,會先選取所指定的 UI 元件,然後就可以透過鍵盤的方向鍵或 A W S D 等按鍵來切換所選取的 UI 元件,並可配合 Enter 按鍵(或 Mac 的 Return 鍵)來執行一些行為,其中,比較特別的地方是 InputField 被選取後,鍵盤的操作主要針對欄位內容文字的輸入,所以,如果要切換選取別的 UI 元件,則要先按一下 ESC 或 Enter 才可繼續使用方向鍵接換到其他 UI 元件。

可控制 UI 元件間的導航關係,預設是由 GUI 系統依照每個 UI 元件所擺放的位置自動建立的,如果不想使用自動建立的導航關係,也可以在 Navigation 欄位選擇其他項目,來針對個人需求自行指定導航關係。

目前版本 Unity 5.4.0f3

範例下載:
https://1drv.ms/u/s!Amn-aiApij3RghesKZj1QUOmvIQ4


2016/10/08 補充:
本文中使用自己寫得程式碼執行 UI 元件的 Select() 來選取所指定的 UI 元件,但在多數情況下,還有更簡單的做法,就是直接在 EventSystem 的 First Selected 欄位指定 UI 元件就行了。
感謝網友 宣雨松 於 YouTube 影片留言補充。