How to create a custom font and change the text color for hover in Unity.

[目的]
以下分享在Unity中,關於文字的設定與解法:
如何解決文字模糊與客製化字型,以及在Unity預設中,按鈕滑鼠移入文字無法變更顏色時該如何製作。

[作法]
1. 若在場景中,增加UI>Button,可以發現文字總是模糊的,可以新增 Unity Asset Store 中的插件 TextMeshPro,新增一個新的Text UI到場景中,文字很明顯呈現清楚狀態。

這張圖片的 alt 屬性值為空,它的檔案名稱為 image-63.png

2. 接下來自訂字型, 先取得所要使用的字型檔案,直接將字體拖曳至Unity的Assets資料夾中。

3. 開始Create給 TextMeshPro使用字體 ,首先在Unity編輯器上方點擊Unity Window → TextMeshPro →Font Asset Creator。

這張圖片的 alt 屬性值為空,它的檔案名稱為 image-64.png

4. 開啟創建文字面板,更改Font Source為剛所拖曳進來的字型。接著更改Character Set為Custom Character。

這張圖片的 alt 屬性值為空,它的檔案名稱為 image-65.png

5. 更改完畢後,下面會出現一個Custom Character Lis,就是所要自訂的字庫,接下來新增所要的字到字庫裡面,在Custom Character List打上會要使用的文字,我這邊就先打上A-Z的大小字母,(記住沒有建立字庫的文字,是不會被顯示出來的喔。)

這張圖片的 alt 屬性值為空,它的檔案名稱為 image-66.png

6  接著修改一下字體大小,將Font Size改成Custom Size ,可以先設定預設大小, 按下Generate Font Atlas開始生產字體,完畢後可以在欄位中看到的字體庫 , 沒有問題後,按下最下方的Save TextMeshPro Font Asset進行儲存。

這張圖片的 alt 屬性值為空,它的檔案名稱為 image-67.png

7.回至場景後, 選擇一開始所增加的UI TextMeshPro, 至右方視窗將字體設定為剛剛創建的字體,就會出現所設定的字型。

這張圖片的 alt 屬性值為空,它的檔案名稱為 image-68-1024x534.png

8.接下來的步驟,即是製作按鈕mouse over時會改變文字顏色的方法,主要方式是就將目標物件改為Text,用text本體顏色加上Highlighted color 達成mouse over 效果。

(1)至Button(Script)中,Target Graphic由Button改為Text(TMP)。並改變Highlighted color的顏色。

這張圖片的 alt 屬性值為空,它的檔案名稱為 image-69-1024x267.png

(2)接下來選擇UI Button中Text,直接改掉Text本身的顏色,接這按Play看看,即會看到Button文字當mouse over時,會更改顏色。

這張圖片的 alt 屬性值為空,它的檔案名稱為 image-70.png

[小結]Unity裡面功能很多,常常會因為一時不知道該如何設定或是疏忽,而做不出其中效果,以上簡單紀錄在製作中所遇到問題與解法。
參考資料:https://www.youtube.com/watch?v=DAc2XMF6gsA
https://www.youtube.com/watch?v=nBcP7FaDPE0

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *