遊戲製作之路(59)使用UGUI的文字
在前面學習過使用NGUI的內容,可以相容舊的遊戲程式碼,但是Unity 5.0之後使用UGUI作為主要遊戲介面開發,下面就來學習UGUI相關介面的操作內容,比如遊戲裡經常要顯示分數,那麼就來學習一下怎麼樣實現UGUI來顯示分數的過程。
先要建立一個空的3D工程,如下圖:
接著下來建立一個畫布Canvas,畫布物件定義了GUI的基本顯示區域,它是一個容器,可以在它上面放置按鈕、文字和其它部件。如下圖來建立一個畫布:
在主選單裡選擇GameObject/UI/Canvas,就可以建立一個畫布如下:
這時候發現左邊Hierarchy裡添加了Canvas和EventSystem物件,當你選中畫布物件之後,再按下鍵盤上F鍵,就可以把畫布調整到合適的大小,這時看到畫布上顯示一個很大的矩形。如果你切換到Game窗口裡並不能看到這個畫布,因為它在遊戲執行之後是不會看得到的,它是一個邏輯元件。接著下來要先修改畫布的大小,進行如下設定:
在這裡選擇一個簡單的模式,UI Scale Mode選擇Scale With Screen Size,表示使用者介面根據目標解析度進行自動拉伸,以保持整體的外觀和視覺效果,這是一個簡單快捷的UI模式,如果想保持高畫素,不要使用這個模式。同時設定螢幕預設解析度為1920X1080的大小。接著下來在畫布上建立一個文字顯示控制元件,如下圖:
在主選單裡GameObject/UI/Text,就可以建立一個文字顯示控制元件,如下圖:
在這裡發現文字顯示很小,不仔細地檢視,是看不見它的。那麼就需要調整這個文字顯示框的字型大小了,如下圖進行調整:
首先選中Text,然後按鍵盤F鍵,再按下左上角拉伸模式,然後就可以調整場景裡的文字顯示框的大小,再調整右邊的字型大小,就可以設定合適的文字顯示了。在這裡把字型大小修改為60,接著下來要調整文字在遊戲視窗的右上角進行顯示,如下圖:
先要在A處選擇移動工具,然後選中B處文字框,再在C處拖動文字框到畫布的右上角,就可以把這個分數顯示在右上角了,在Game窗口裡檢視如下:
在這裡終於看到文字顯示在右上角上面了,不過這裡把顏色也修改為白色顯示了。接著下來就是把遊戲裡的分數顯示到這個文本里,為了測試顯示,把指令碼新增在攝像機裡,如下圖:
在這裡添加了指令碼Score.cs,腳本里新增一個文字變數,如下修改程式碼:
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class Score : MonoBehaviour { public Text ScoreText = null; public static int ScoreTotal = 0; float Count = 0; // Use this for initialization void Start () { ScoreText.text = ScoreTotal.ToString(); } // Update is called once per frame void Update () { Count += Time.deltaTime; if (Count > 3) { Count = 0; ScoreTotal++; } ScoreText.text = ScoreTotal.ToString(); } }
最後需要在介面上設定ScoreText變數與UI上文字Text進行關聯,如下拖動:
設定這一步之後,就完成了整個UI與程式碼的關聯,就可以進入play模式檢視UI顯示分數了,如下圖:
在這裡看到右上角顯示分數,並且不斷地變化,其它相應的UI元件也這樣設定上去顯示。