初心者培訓班 - Unity基本觀念

Unity基本功(9) – 按鈕、文字UI元件應用

※中肯辭典

(註:有別於官方文件上的嚴謹說明,在此以工程師的角度來簡短說明此元素的特質與使用時機。)

遊戲中必定會有按鈕、文字顯示等UI元件,本篇文章來談談如何在Unity裡實作這些元素。



螢幕快照 2017-07-10 上午12.28.29.png

上一篇文章提到了該如何利用程式碼來實作「Replay」、「進到下一關」等功能,但是並沒有提及該如何與畫面上的按鈕結合,今天就要來補足這部分的說明!

螢幕快照 2017-07-10 上午12.49.40

上回我們是利用鍵盤Input來實作場景轉換,然而,如果想要和Unity的UI系統結合,就必須將功能獨立撰寫成一個函式

螢幕快照 2017-07-13 上午12.23.16.png

記得務必在函數前加一個public,後續在引用時才不會出問題。

螢幕快照 2017-07-13 上午12.26.48.png

接著回到編輯器畫面,在Hierarchy裡點選右鍵,按下UI -> Button創造新的UI元件。

螢幕快照 2017-07-13 上午12.28.12.png

接下來,在Hierarchy裡就會生成Canvas(畫布)Event System,這些都是Unity掌管UI系統的機制,Event System可以暫時不管他,我們先來看Canvas這個東西。

螢幕快照 2017-07-13 上午12.34.01.png

Canvas預設的規格有點像「投射在Camera上的一塊大畫布」,然而,由於我們現在的遊戲專案都不算太複雜,Camera只會有一個,我們可以把Canvas和攝影機綁定,方便後續的排版。

螢幕快照 2017-07-13 上午12.36.01.png

我們先點進Canvas物件裡,看”Canvas”元件中Render Mode

把原本的 Screen Space – Overlay 改成 Screen Space – Camera

這時底下會出現一個”Render Camera”的欄位,我們要把Hierarchy裡唯一的Camera指定過來。

做完這個步驟後,就會發現畫面上的畫布已經跟攝影機規格一致了。

螢幕快照 2017-07-13 上午12.41.04.png

再來我們點到”Button”裡,”Rect Transform”中的Pos是按鈕所在的座標,而WidthHeight是按鈕的寬與高,在畫面中按鈕明顯太小了,可以依照自己喜好將它調大。

螢幕快照 2017-07-13 上午12.44.01.png

接下來,Button裡有個子物件Text,其中的Character類別裡頭掌管按鈕上面的文字內容(Text)、字型(Font)、粗體或斜體(Font Style)、字體大小(Font Size)等要素。

而Paragraph類別則可以設定字體的排版(Alignment,置左、置中等)、是否要自動換行(Horizontal Overflow,Wrap代表自動換行、Overflow代表可以超出範圍)等。

設定到自己滿意的外觀後,就要進入今日的重頭戲了

把程式碼和按鈕綁定在一起!!


螢幕快照 2017-07-13 上午12.51.29.png

回到Button物件,把Inspector資訊拉到最下面,會發現一個叫做On Click()的欄位,掌管的是按鈕被按下時,要採取什麼動作。按下”+”符號來連結我們要的功能。

螢幕快照 2017-07-13 上午12.53.25

在左下角比較短的欄位,我們必須先指定要使用哪一個物件裡的Script。

像我把上述的程式碼寫在Generator.cs的檔案中,而這個Script被套用在“物件產生器”上,所以我在這裡就要選取“物件產生器”

螢幕快照 2017-07-13 上午12.57.42.png

選取完物件後,點選OnClick()裡右上方比較大的欄位,然後進入希望取用的Script的名稱(在這裡叫做Generator)的大類別裡,尋找自己撰寫好的函數。(注意:要帶有public性質的function才會在這裡出現!!)

如果上述的綁定流程都順利完成,進入Play模式後點選按鈕就會觸發Function的效果囉!

以下利用影片快速展示整個實作UI的流程。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s