主題

【碰撞器應用+UI應用】二、新增物件＆元件介紹

澄鷹 | 2018-07-22 01:08:08 | 巴幣 504 | 人氣 1125

　　在第一節中，我們已經確定了我們這次需要在先前的遊戲中增加甚麼元素與修改甚麼功能：

　　1.在場景中，我們需要新增：

　　　　a.分數

　　　　b.血條

　　　　c.扣血的物件

　　　　d.補血的物件

　　　　e.加分的物件

　　2.修改掉多段跳的設定

　　3.利用程式使分數、血條增減能正常運作

　　這次的更新大概就這些，那我們可以開始製作了。

　　※教學內容若有錯誤，歡迎在下方留言向我反應，感謝你們～　

　　※解釋元件功能時，我沒有提到的地方表示我沒有用過、不清楚那個功能的用法。

-----------------------------------------------------------------------------------------------------------------------------

　　我們先在場景上增加我們所需要的物件，先把「分數」這部分做出來。

　　在Hierarchy上：右鍵→UI→Text

　　新增Text物件之後，會發現他被放在一個「Cavas」底下。

　　這是正常現象，只要新增的物件為「UI」，Unity就會自動建立Canvas這個物件，並且把所有新增的UI塞到這個物件底下。我們暫時先不理他，只要知道他是建立UI就會出現的東西就好。不用調整也不要刪除。

　　現在我們點選剛剛新增的「Text」，來看看它擁有哪些屬性和設定：

　　最上面的「Text」是這個物件的名稱。這是我們為了做分數而建立的物件，所以我將它命名為「Score」

　　在這次的教學中，我們會用到名稱下面的Tag。至於Layer我們先暫時不提，等到日後有機會再來討論它。

　　不過，我們暫時還用不到Tag，所以也先不用設定，先繼續往下看這個物件擁有的屬性和設定：

　　Rect Transform：與Transform有相同的功用，不過較為不同的是，這個元件可以為物件個別設定寬與高，而且具有對齊的功能。
　　　　

：對齊。
　　　　Pos X、Y、Z：位置。
　　　　Width：物件的寬。
　　　　Height：物件的高。
　　　　Rotation：方向、旋轉角度。
　　　　Scale：大小。

　　※這個元件通常出現在「UI」類型的物件當中。取代Transform元件。

　　※UI與一般物件最大的不同在於，UI會跟著螢幕移動，UI的長寬設定也是根據螢幕的大小而定。通常用於遊戲中「選單」、「功能鍵」等不會隨著遊戲場景而移動的物件。

　　※UI會在圖層的最上層。也就是一定會覆蓋其他非UI物件顯示在螢幕上的意思。

　　Text (Script)：Text物件必有的元件。用來顯示一段文字。
　　　　Text：顯示的文字內容。為Text元件最主要的部份。
　　　　Character：字體設定。
　　　　　　Font：字型設定。
　　　　　　Font Style：字體風格（斜體、粗體等）
　　　　　　Font Size：字體大小。
　　　　　　Line Spacing：行距。
　　　　Paragraph：段落設定。
　　　　　　Alignment：對齊。
　　　　Color：字體顏色。

　　※Paragraph中Alignment的對齊設定與Rect Transform的對齊不一樣的地方在於：Rect Transform的對齊是指這個物件與螢幕大小之間的位置關係；Alignment的對齊是指字串與這個物件大小之間的位置關係。

　　在上圖中，黑框表示螢幕範圍，藍框表示物件範圍，中間的「YA」則是文字。

　　以上圖的位置關係來說，Rect Transform的對齊應該是「靠左靠上對齊」，Alignment的對齊應該是「垂直水平置中對齊」

　　建立完物件之後，在場景中或許還看不到任何東西，又或許他可能會出現在很奇怪的位置，沒關係，這也是正常現象。

　　我們可以運用剛剛所說的，Rect Transform的對齊功能，來快速設定我們的物件位置。

　　點開它之後，會跑出這個小窗格：

　　然後，按住Alt+Shift，會看到它的樣子改變了：

　　選擇左上方那個圖像：

　　這時候，查看Game視窗的畫面，應該可以在畫面的左上角看到小小的「New Text」字樣。

　　不過，這樣的文字有太多缺點。第一、顏色太深看不清楚。第二、太貼近邊界，感覺好擠。

　　所以我們回到Rect Transform，將Pos X與Pos Y分別設定成10、-10

　　並且到Text元件中，設定字體的顏色：

　　直接點選色條，就會跳出色彩的視窗：

　　我們在下方的「Hex Color」輸入欄位中，填入8個F。將顏色設定為純白色。

　　設定完成，這樣的畫面是不是看起來舒服多了呢？

　　這個字串「New Text」似乎並不是我們需要的文字，雖然我們可以先不理它，因為之後會用程式改變它所顯示的文字內容，不過，如果今天我們著手的是一個大型的遊戲專案，建立好UI之後沒有特別設定的話，乍看之下有可能會無法理解這個Text是被拿來做甚麼用的。

　　所以，我們需要把預設顯示的文字改掉。

　　點選Score之後，查看Text元件，剛剛有說在Text元件下有一個Text的設定，這是用來設定顯示的文字內容的。我們將它改成「分數：」

　　現在，在Game視窗中會變成這樣：

　　有沒有感覺好像有一點FU了啊

？

　　我們要拿來顯示分數的物件已經完成了，根據我們一開始想要增加的遊戲元素，我們還需要新增一個血條。

　　在Hierarchy上：右鍵→UI→Slider

　　沒有意外的話，會看到畫面中出現了一個長條型的滑動條。我們會用這個來當作我們的血條。

　　※注意，如果新增Slider之後，發現在Hierarchy中的階層關係是這樣：

　　那在之後製作的過程可能也會發生一些問題，為了以防萬一，我們將Slider向外拉到與Score同樣階層的地方。像這樣：

　　新增完之後，點選Slider，我們來看看新增的這個物件有甚麼屬性和設定。

　　Slider (Script)：Slider物件必有的元件。用來製作出像血條那樣的滑動條。
　　　　Interactable：用來設定是否可以手動調整滑動條的數值。
　　　　Normal Color：調整數值的控制桿，正常情況的顏色。
　　　　Highlighted  Color：調整數值的控制桿，被游標指著時的顏色。
　　　　Pressed  Color：調整數值的控制桿，被游標按著的顏色。
　　　　Disabled  Color：調整數值的控制桿，無法使用時的顏色。
　　　　Min Value：滑動條的最小值。
　　　　Max Value：滑動條的最大值。
　　　　Value：滑動條當前的數值。

　　　　On Value Changed (Single)：當滑動條被改變的時候，觸發事件。

　　首先，我們先把Slider的名字改成「Healthy」，這是我們的血條。

　　再來，我們新增的Healthy出現的地方真的很詭異，必須重新設定它的位置。

　　選擇「Healthy」後，查看它的Rect Transform。並且像設定Score一樣，用同樣的方法，點開對齊的圖案，按住Alt+Shift......

　　到這裡，與剛剛不同的是，我們這次選擇的是這個：