第74節 - Unity: Convert Numbers Image to Custom Font
這一節我會介紹Unity: Convert Numbers Image to Custom Font，即是把我們自製字體(Font)的image檔案(.png、.jpeg或gif)，用Unity預設的功能改變成為Custom Font，之後就可以像一般字體一樣在Unity內執行，如下圖:
1) Result (執行結果):
以下是本節第74節 - Unity: Convert Numbers Image to Custom Font的執行結果:
2) Step By Step Tutorial
以下會詳細介紹每一個步驟:
- 選擇Main Camera。
- 設定Orthographic Size = 300。
- 把三圖片拖放到Assets區域內。
- 在Assets區域內，按Mouse右鍵，選擇Create>Custom Font，輸入NumbersFont。
- 設定Character Rect Size = 10，即設定數字0 - 9。
- 設定Element 0，即數字0 的所有值。
- 設定Advance = 100，即字體的Width，設定Advance = Vert W = 100，如果Advance>Vert W ，即兩個字體中間的Spacing會增加。
- 設定其他Element 2 - 9，即數字2 - 9的所有值。
- 0 Ascii Code = 48。
- 設定Uv的所有值。
- 設定Vert的所有值。
- 0 Ascii Code = 49。
- 設定Uv的所有值。
- 設定Vert的所有值。
- ASCII Code的256個數值。
- 在Assets區域內，按Mouse右鍵，選擇Create>Material，輸入NumbersMat。
- 在Albedo內，選擇Numbers圖片。
- 選擇Shader>GUI/Text Shader。
- 在Assets區域內，把NumbersMat拖放到Default Material內。
- 建立一個Canvas。
- 選擇Main Camera，把Main Camera拖放到Render Camera內。
- 設定Canvas的不同值。
- 建立一個UI Image - ImageBg。
- 設定ImageBg的Anchors位置在中間、ImageBg的座標、高度和寬度。
- 把numberBg圖片拖放到Image內。
- 建立一個UI Image - ImageText。
- 設定ImageText的Anchors位置在中間、ImageText的座標、高度和寬度。
- 把cash圖片拖放到Image內。
- 建立一個UI Text - Text。
- 設定Text的Anchors位置在中間、Text的座標、高度和寬度。
- 把NumberFont圖片拖放到Font內，並設定其他值。
- 選擇Main Camera。
- 建立一個人C# Script - MyScript1。
- 把MyScript1拖放到MyScript1內，並把Text GameObject拖放到以上位置。
- 建立public和private變數。
- 建立一個StartCoroutine()方法。
注意: 我在第62節 - Unity: StartCoroutine, StopCoroutine, IEnumerator & Yield介紹過StartCoroutine()方法的用法。 - 建立一個IEnumerator Type 的counterNumber()方法。
- 完成圖如上。
執行結果
- 執行結果，如上。