標籤：

[專欄精選]TextMeshPro插件

12-21

本文節選自洪流學堂公眾號專欄《鄭洪智的Unity2018課》，未經允許不可轉載。

洪流學堂公眾號回復專欄，查看更多專欄文章。

小新：「UI裡面還有一類組件是用TextMeshPro開頭的，這類組件有啥用啊？」

大智：「TextMeshPro是Unity收購的一個第三方插件，可以解決文字渲染的很多問題，可以替換UI Text。比如UI Text就沒辦法對文字加入特效。」

小新：「哇，可以直接對文字加入動態特效啊？那就不用美術同學辛苦去做了？」

大智：「是的哦」

小新：「那我們今天就來學習一下這個吧！」

TextMesh Pro

TextMesh Pro是Unity中文字渲染的終極解決方案，原本是一個第三方插件，後被Unity收購後併入Unity，現在可以免費使用。

安裝

對於Unity2018及以後的版本，可以從菜單欄Window > Package Manager中安裝TextMesh Pro。

Unity2018.2及之後的版本TextMesh Pro包會被默認安裝到工程中，無需手動安裝。

對於Unity2017及之前的版本，可以通過AssetStore（assetstore.unity.com/pa）下載導入此插件。

創建

TextMeshPro最基礎的用法就是使用它的Text組件來顯示文本。有兩種使用方法，一種是通過網格MeshRenderer渲染，一種是通過UI系統渲染。

Mesh方式創建方法：Hierarchy的Create菜單（右鍵菜單）> 3D > TextMesh Pro - Text

UI方式創建方法：Hierarchy的Create菜單（右鍵菜單）> UI > TextMesh Pro - Text

第一次創建時，會彈出一個提示窗口：

這似乎是您第一次訪問TextMesh Pro，因此我們需要為您的項目添加對使用TextMesh Pro至關重要的資源。這些新資源將放置在項目的根目錄中的「TextMesh Pro」文件夾。

點擊下方的按鈕Import TMP Essentials即可。

導入必要資源後，下方的TMP Examples & Extras會變為可點擊狀態。這些資源是可選導入的，可以點擊Import TMP Examples & Extras來導入實例和額外資源。

Examples＆Extras包中包含額外的資源和示例，可以更輕鬆地發現和學習TextMesh Pro的強大功能。這些額外資源將與TMP基本資源放在同一文件夾中。

TextMesh Pro - Text 和 UGUI - Text 的區別

TextMesh和UIText的渲染對比

UGUI的Text使用了一張字體貼圖，Unity把所有需要顯示的字元放到了一張圖集中，字元的形狀是通過像素定義的。當我們放大時，像素不夠用就會出現文字變模糊的情況。

TextMesh Pro的Text使用了不同的技術來渲染文字，叫做Signed Distance Field（後面簡稱SDF，對該技術感興趣的同學可以自行搜索一下）。和UGUI類似，這個技術同樣需要將字元放到一個圖集中，但是不使用像素來代表字元的形狀，而使用SDF技術來生成字元的形狀。使用這種技術字元在渲染時不會因為縮放而造成字元模糊的情況，總是能夠準確的渲染字元的邊緣。

創建字體

TextMesh Pro無法像UGUI Text那樣使用動態字體，因為TextMesh Pro需要對字體進行預處理來計算SDF，這部分計算非常耗時。這對於英文字體來說影響不大，一個字體文件或一張貼圖包含的信息都很少，但是對於字元非常多的語言如中文就影響很大。

所以對於中文環境建議如下：

  • 對於遊戲中顯示的文字可以使用TextMesh Pro的SDF字體，提高顯示效果和特效處理。
  • 對於遊戲中的輸入框建議使用UGUI自帶輸入框，使用動態字體。

創建SDF字體文件的過程如下：

1、菜單欄打開Window > TextMeshPro > Font Asset Creator

2、在Font Source中選擇你想要創建的字體

3、在Character Set中選擇要生成的字符集

4、其他選項根據需要進行設置（下面會詳細說明每個屬性的作用）

5、點擊下方的Generate Font Atlas按鈕生成字體

6、生成結束後記得點擊Save保存**

Font Creator窗口屬性

Font Source 選擇要創建SDF字體的源字體

Font Size 創建字體的字型大小的大小。

  • Auto Sizing 建議使用該選項。根據給定Atlas Resolution（圖集解析度）來計算並使用最大字型大小。
  • Custom 自定義字型大小。

Font Padding 圖集中每個字元之間的間隔，以便在渲染時能卻分他們的邊緣。此外padding也用於文字的特效，所以不宜過小；但是也不宜過大，過大會造成更大的atlas解析度或者atlas上能承載的字元更少。對於512*512的圖集，padding為5通常比較合適。

Packing Method 打包方式

  • Fast 可能計算出不是最大的字型大小，但是計算速度會快一些
  • Optimum 可以計算出圖集上能承載的最大的字型大小

    通常在測試設置時使用Fast，在最終打包時使用Optimum

Atlas Resolution 使用SFD字體時，更高的解析度會產生更精細的漸變，從而產生更高質量的字體。對於大多數字體，僅包含所有ASCII字元時，512x512紋理解析度足夠用。

當需要支持數千個字元時，不得不使用大紋理。但即使在最高解析度下，也可能無法滿足所有要求。在這種情況下，可以通過創建多個字體資源來拆分字元。將最常用的字元放在主字體資源中，將其他字元放在後備(fallback)字體資源中。

Character Set 字體文件中的字元不會自動包含在字體資源中。你必須指定你需要的那些。你可以選擇一些預定義的字符集，也可以自己提供字元列表。

  • ASCII 大小寫字母+數字+常見符號
  • Extended ASCII 包含所有的ASCII字元
  • ASCII lowercase 小寫字母+數字+常見符號
  • ASCII uppercase 大寫字母+數字+常見符號
  • Numbers + Symbols 數字+常見符號
  • Custom Range 使用十進位來制定字元的編碼範圍，可以使用減號和英文逗號來指定範圍，如32-126,161-255

使用自定義字元範圍時，可以直接引用一個SDF字體，使用這個字體中的字符集

  • Unicode Range(Hex) 使用16進位來制定字元的編碼範圍，可以使用減號和英文逗號來指定範圍，如20-7E,A1-FF
  • Custom Characters 自定義字元，直接輸入對應的字元
  • Characters from file 從外部文件中導入字元

注意要包含空格字元，除非確定你不需要它

Font Style 你可以選擇幾種不同的字體樣式。這些設置僅適用於點陣圖字體。

你可以通過shader配置SDF字體的樣式，可以選擇粗體、斜體、粗體加斜體和描邊，也可以控制粗體和輪廓的強度。

Font Render Mode 距離場模式創建SDF紋理需要與SDF shader一起使用。字元是在高解析度下採樣來創建良好的漸變。16x是默認值並且足以用於大多數情況。32x生成較慢但可以讓複雜或小字元產生更好的質量。

其他模式直接將字元渲染為點陣圖，以便與點陣圖字體一起使用。Raster模式不使用抗鋸齒，Smooth模式使用抗鋸齒。兩者都有一個Hinted模式，它將字元像素與紋理像素對齊以獲得更清晰的結果。

Get Kerning Pairs? 你可以選擇從字體中提取字距數據。此數據用於調整特定字元對之間的間距，以產生更好的視覺效果。但是請注意很多字體沒有字距數據。

總結

大智：「SDF字體創建完以後就能用於TMP的text了。」

小新：「這個插件確實很強大，文字顯示看起來真舒服。」

今日思考題

大智：「把你的界面里的文字替換成TMP的text看看效果如何吧！」

小新：「好嘞」

大智：「收穫別忘了分享出來！也別忘了分享給你學Unity的朋友，也許能夠幫到他。」

洪流學堂公眾號回復專欄，查看更多專欄文章。


推薦閱讀：

TAG:Unity（遊戲引擎） |