※中肯辭典
(註:有別於官方文件上的嚴謹說明,在此以工程師的角度來簡短說明此元素的特質與使用時機。)
遊戲中必定會有按鈕、文字顯示等UI元件,本篇文章來談談如何在Unity裡實作這些元素。
上一篇文章提到了該如何利用程式碼來實作「Replay」、「進到下一關」等功能,但是並沒有提及該如何與畫面上的按鈕結合,今天就要來補足這部分的說明!
上回我們是利用鍵盤Input來實作場景轉換,然而,如果想要和Unity的UI系統結合,就必須將功能獨立撰寫成一個函式。
記得務必在函數前加一個public,後續在引用時才不會出問題。
接著回到編輯器畫面,在Hierarchy裡點選右鍵,按下UI -> Button創造新的UI元件。
接下來,在Hierarchy裡就會生成Canvas(畫布)和Event System,這些都是Unity掌管UI系統的機制,Event System可以暫時不管他,我們先來看Canvas這個東西。
Canvas預設的規格有點像「投射在Camera上的一塊大畫布」,然而,由於我們現在的遊戲專案都不算太複雜,Camera只會有一個,我們可以把Canvas和攝影機綁定,方便後續的排版。
我們先點進Canvas物件裡,看”Canvas”元件中Render Mode
把原本的 Screen Space – Overlay 改成 Screen Space – Camera
這時底下會出現一個”Render Camera”的欄位,我們要把Hierarchy裡唯一的Camera指定過來。
做完這個步驟後,就會發現畫面上的畫布已經跟攝影機規格一致了。
再來我們點到”Button”裡,”Rect Transform”中的Pos是按鈕所在的座標,而Width、Height是按鈕的寬與高,在畫面中按鈕明顯太小了,可以依照自己喜好將它調大。
接下來,Button裡有個子物件Text,其中的Character類別裡頭掌管按鈕上面的文字內容(Text)、字型(Font)、粗體或斜體(Font Style)、字體大小(Font Size)等要素。
而Paragraph類別則可以設定字體的排版(Alignment,置左、置中等)、是否要自動換行(Horizontal Overflow,Wrap代表自動換行、Overflow代表可以超出範圍)等。
設定到自己滿意的外觀後,就要進入今日的重頭戲了
把程式碼和按鈕綁定在一起!!
回到Button物件,把Inspector資訊拉到最下面,會發現一個叫做On Click()的欄位,掌管的是按鈕被按下時,要採取什麼動作。按下”+”符號來連結我們要的功能。
在左下角比較短的欄位,我們必須先指定要使用哪一個物件裡的Script。
像我把上述的程式碼寫在Generator.cs的檔案中,而這個Script被套用在“物件產生器”上,所以我在這裡就要選取“物件產生器”。
選取完物件後,點選OnClick()裡右上方比較大的欄位,然後進入希望取用的Script的名稱(在這裡叫做Generator)的大類別裡,尋找自己撰寫好的函數。(注意:要帶有public性質的function才會在這裡出現!!)
如果上述的綁定流程都順利完成,進入Play模式後點選按鈕就會觸發Function的效果囉!
以下利用影片快速展示整個實作UI的流程。