如題
這篇會提及數個於 Unity 中,讓 TextMeshPro 能夠顯示 pixel-perfect 像素風格字體的做法。
整體會比較偏個人筆記的性質,細節上可能會比較不全面還請多海涵。
※ 自己測試的 Unity 版本為 2019.4.25f1;TextMesh Pro 為 2.1.6
部分功能可能會有微小的差異,但大致上的方向應該是相同的。
◆ 前置作業
首要之務,把需要的字型檔案,扔進 Unity 專案。
如果你的字型要顯示的是中文這種字元種類非常龐大的,可以準備自己要用來生成的字元文檔。
接下來要做的是生成該字型的 FontAsset
Window > TextMeshPro > Font Asset Creator
※ 注意:生成的 FontAsset 需要放置於 TMP Settings 所設定的資料夾內才能生效
① 原生像素風格字型
該方法適用於本身就屬像素風格樣式的字型,在進行生成之前必須知道它的字體大小,否則會無法形成完美像素。
此次的範例我們將使用 Silver 這個字型,它的字體大小在 19px 時才能夠完好地顯示。
在 Font Asset Creator 中,設定相關的參數來生成:
- Sampling Point Size: 保持 19px
- Atlas Resolution: 設定一個可以容納你所需要文字量的大小
- Character Set: 這邊我使用自備的字元文檔,它的目的是盡可能地通用化,當初塞了基本字符外,還有常用的繁簡中、日、韓文字符。雖然字元一多,生成的時間也會被拉長,但好處是可以盡可能地避免意外缺字時,還要重新補字然後更新該 FontAsset。可以看到生成結果的 11001/30642,表示該字型略過了快 2 萬多個不支援的字元,此屬正常現象。
- Render Mode: 如果我們的目標是像素風格的字型,則這邊將必須採用 Raster 或是 Raster Hinted 才能使其不模糊,兩種用起來感覺大同小異就是。
生成成功後,先留意一下該 FontAsset 的 Scale 欄位,必須將該值進行調整。
將它設為你專案中 Sprite 等素材的 10 ÷ PPU,確切原因不明,但不這麼做顯示出來的文字就不會是完美像素。
由於我專案中 PPU 是 16,所以將此欄位設為 0.625:
隨後就能運用在 TextMeshPro 文字物件上了,同樣別忘了字體大小。
這邊放一個 16×16 的 Sprite 做對比,可以看到文字的像素比例上是正確的。
原生像素字型的部署大致上就這樣,通常只要留意每個字型本身的字體大小外,應該是生成過程間最沒有爭議的一種了。
此處生成了兩組 FontAsset,其 Sampling Point Size 都固定為 12px,而 Render Mode 則為 Raster Hinted 及 Smooth Hinted。
右側 Smooth Hinted 的那組有另外將其 Atlas 的 FilterMode 改為 Point,否則會出現模糊化的現象。
兩組比較下來可以看到,左右兩邊差在反鋸齒效果的有無,就美觀上而言,非原生像素字型採用右側的生成設置應該是比較好的。
但左側的設置在字體大小較大的場合,仍然能夠維持較好的可辨讀性:
Δ 由上而下分別是 12, 16, 19, 24px
畢竟字型本身並非為像素風格所設計,無論是上述何種設置所產生的結果,在細部的處理上仍然不夠完善,但對大部分的開發者來說應該也夠用了。
若你和我一樣,是比較講究的那種,可以進一步參考下一個做法。
③ 自訂像素字型
理論上不需要既有字型檔案,而是將自行繪製的文字顯示到 TextMeshPro 的做法,所以也並非限定於像素風格的字型。
這將適用於字元數量可以掌控的場合,不然後面會調整到懷疑人生。
我們這次同樣生成精靈文字型,但先在繪圖軟體弄上需要的字元,對細部進行修復後,再進行排列。
把它轉換為字型檔案,流程上請參考此影片,畢竟這個做法我也是從這學來的。
影片中把 png 轉成字型檔案的網址,左上角有語言選項可以切換成中文介面:
留意輸入及輸出兩個標籤內的參數都有設定妥當,指向各個參數欄位都會顯示它的附加說明。
右側的示例區塊可以自行輸入想要的文字,在轉換為字型檔案前,最好先檢視看看裁切狀況還有比例有沒有失準的問題。
接下來同樣是將該字型檔案扔進 Unity 生成為對應的 FontAsset。
影片中的 Packing Method 欄位使用的是 Optimum,但我這邊測試如果使用該選項,在原本字體形狀較為複雜的情況下,可能會出現部分像素產生丟失的問題,故建議還是維持 Fast 就好。
對生成的 FontAsset 於 Inspector 上按右鍵 > Extract Atlas,建立材質貼圖的副本。
再來是對該副本進行編輯,直接將每個字元的原有圖像逐字貼到相應的位置上,即為讓下圖例從左變成右邊的樣子。
將該 FontAsset 的材質貼圖指派為修改後的副本,並將 Shader 調整為 TextMeshPro/Bitmap Custom Atlas。
同樣注意副本的 Filter Mode 也需要設為 Point,否則會導致文字出現模糊的狀況。
最後大概是最為費工的一個步驟,對 FontAsset 的 Glyph Table 中的字形們進行調整,需要調整的主要就這幾個欄位:
※ 如果你的自訂字型是屬於所有字元呈現寬高一致的,此部分或許可以忽略掉。
- BX: 水平位置
- BY: 垂直位置
- AD: 字形寬度
調整完之後,總算是可以到 TextMeshPro 物件上進行使用該字型了。
最後來個對比圖,下排是前面 ② 非原生像素風格字型 方法所生成的文字。上排則是這次 ③ 自訂像素字型 所生成的,同樣的字體大小下,兩者的精細度可說是有明顯的差距。
以上就是自己現階段於 TextMeshPro 上建立像素字體的數個參考方向。
會打這篇主要還是如同前言所說,想順帶做個筆記,將來自己忘了怎麼做也能回來看一下這樣。
當然若能幫上其他有需求的開發者也是再好不過,如果有相關的問題或是其他做法的話,也歡迎大家提出哦。
※ 本篇文章同步發表於小屋及 Unity 板