Unity 富文本插件TextMeshPro 的使用

組件介紹:


 

Main Setting:
Font Asset:TMP的字體資源。
Materail Preset:字體用到的材質
Font Style:字體風格,粗體,斜體,下劃線等等
Auto Size:自動適應大小(和Text一樣)
Vertex Color:字體顏色
Color Gradient:勾選之後會出現漸變色的控制參數
Override Tags:勾選之後富文本的<color>標籤會失效
Spacing Options:字體、單詞、行、段落間距。單詞的判定依據是空格,段落的判定依據是換行。
Alignment:對齊方式
Wrapping:是否自動折行
Overflow:溢出方式
    Overflow:可以溢出

    Ellipsis:超出時將超出部分用...替代

    Truncate:無法溢出

    Page:將文本內容分成很多頁可以通過切換頁籤id來切換內容

    Linked:可以關聯一個其他的TMP組件多餘部分將顯示在新的組件裏面(實際測了下沒有起效果)

    Masking:不明

    ScrollRect:不明

Extra Setting:
Margins:上下左右邊界調整
Geometry Sorting:不明
RichText:是否支持父文本
Raycast Target:是否支持UI事件響應
Parse Escape Characters:是否解析轉義字符
Visible Descender:不明
Sprite Asset:關聯的表情資源文件(如果沒有設置,在使用圖文混編的時候會自動啓用系統默認的表情資源)
Kerning:是否開啓自動緊縮。有些字母排列在一起的時候會顯得比較空如T e,開啓後會顯示爲Te。
Extra padding:官方文檔說的是某些比較小的字體在排版時可能被裁剪掉,開啓該選項可以防止這個現象。目前沒有遇到過這個情況,如果以後遇到了就開啓試試吧。
輪廓、陰影、外發光:
以上這些特性由shader實現,所以使用這些特性需要通過調整材質面板對應的參數

輪廓:

 

outline:外輪廓參數,其中:【Color】是輪廓顏色。【Thickness】決定了外輪廓的厚度。【Texture】則會將texture的紋理採樣之後和color混合輸出最終顏色,這裏的texture應該設置爲repeat模式。因爲speed參數可以使得外輪廓有一個uv流動的效果,可以用來做流動的外輪廓,如果用clamp就沒有流動效果了。
Face:控制內部的表現(外輪廓以內的字體部分),和outline聯合使用,其中:【Color】是內部顏色,該顏色會合字體頂點色(組件面板的Vertex Color)疊加在一起作爲最終字體的顏色。【Softness】是會控制外輪廓的柔和程度。【Dilate】控制的是內部區域的大小。texture同outline,不過紋理會疊加到內部區域。
陰影:

 

輪廓參數中有一個勾選框,可以開啓和禁用該特性。
【Color】陰影顏色,【Offset】陰影的偏移量,【Dilate】影響陰影大小,【Softness】柔和程度。
外發光:

 

【Color】外發光顏色,【Offset】內外交界處的偏移爲整數則沿法線向外偏移,【Inner】外發光向內部擴散的距離,【Outer】外發光向外部擴散的距離,【Power】強度。
表情混編使用:
      我們平時開發遊戲的時候經常會遇到圖文並列的情況。比如一個上商店界面,需要在購買按鈕上展示消耗的貨幣圖標和數量。一般處理的時候都是做兩個預製件,一個處理圖片,一個處理文字,在用佈局組件控制排版。比較繁瑣。。。

      有了TMP的混編功能只需要一個TMP組件加一個帶富文本的字符串就可以實現功能了。如string costtxt = string.format("<sprite=index> X {0}", costnum)。極大的簡化了工作量,像一些圖文混編的聊天功能也可以用TMP組件輕鬆的實現。ps:其中index是關聯的表情資源(Extra Setting裏的Sprite Asset)的序號(這個可以看錶情製作這塊)。

下面是一個使用的參考:

 

表情資源製作:
1.導入需要用於製作表情的圖片到unity中,將Sprite Mode設置爲Multiple。

2.點擊sprite Editor將每一個表情分割出來。(圖是百度隨便扒的)


 

爲了使文字和圖片對齊,中心點設置爲左下。
3.保存退出sprite編輯界面,右鍵選中處理好的圖片,依次選Create->TextMeshPro->Sprite Asset即可生成Sprite Asset。

4.將生成好的Sprite Asset拖到TMP組件中使用。

 

5.編寫富文本

 

6.最終效果

 

中文字體制作:
字體資源的製作有很多種方式,這裏只介紹一種添加中文支持的方式(因爲我在自己的項目中只用了這一種 ^-^! )。

1.在window->TextMeshPro裏面打開Font Asset Creator

 

Source Font File中添加支持中文的字庫
Character Set 設置爲Custom Characters(自定義字符集)
Custom Character List中添加需要用到的中文字符,點擊保存就得到支持中文的TMP字體了。
***這裏有一個內存優化點

Atlas Resolution 決定了生成字體圖片的大小

Samping Point Size 可以設置爲自動尺寸和自定義尺寸兩種模式

如果設置爲自動尺寸則生成的單個字符會自動縮放以佔滿整個圖片

如果設置爲自定義尺寸則可以指定遊戲中使用最多的那個尺寸大小,然後根據最終所有字符佔用的尺寸大小來調整Atlas Resolution,以避免佔用多餘的內存。

關於性能:
關於性能有兩個點可能要注意一下。

1.使用圖文混編圖片和文字會分別佔用一個dc(因爲二者使用的材質信息不同)。因此TMP中混編的圖片同樣要注意不要和字體發生重疊,否則就會打斷文本自身的合併處理增加dc。如果有重疊的時候就將帶圖片的放在上層(貌似同一個組件中圖片的層級會默認比文字高),這樣文字和文字之間dc仍然是合併的。

2.TMP組件支持的外發光,光照,陰影這些特性都是在shader中實現的,如果全開的話勢必會增加渲染的開銷。建議根據項目情況去選擇不同的shader來生成字體,比如插件自己提供的mobile裏的shader(mobile裏的shader不僅僅是刪除了部分功能如光照外發光,本身對外輪廓,陰影的算法也做了簡化)。如果使用需求明確的話,也可以根據需求去裁減修改插件提供的shader。總之夠用就行。
——————— 

引用: https://blog.csdn.net/FlyToCloud/article/details/104402316?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.nonecase

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章