前言
MMO游戲中需要富文件組件,大體功能包括圖文混排,表情,超鏈接,文字動畫等富文本功能,且DC數占用少。
本文選擇Unity免費提供的TextMesh Pro 解決方案。
軟件環境
Unity3D 5.3.7p4
TextMesh Pro 1.0.555.0b11(Jul 06.2017)
TexturePack 3.x
TextMeshPro文檔和資料
Asset Store(免費下載):https://www.assetstore.unity3d.com/cn/#!/content/84126
官方文檔:http://digitalnativestudios.com/textmeshpro/docs/
官方論壇:http://digitalnativestudios.com/forum/index.php
視頻介紹:Unity納入TextMesh Pro,打開文本開發新世界
此插件之前是收費的,但Unity把它收購了,目前免費提供給Unity開發者。詳見:TextMesh Pro Joins Unity:https://blogs.unity3d.com/cn/2017/03/20/textmesh-pro-joins-unity/
目前在AssetStore開放下載的版本,沒有源碼,提供的是DLL
自定義圖集
我們的項目中使用自定義表情和文字,沒有使用示例圖集。
制作自定義圖集
1、把所有的表情圖片導入到TexturePack,打成圖集(TexturePack打圖集的設置在后面會介紹)
2、TexturePack導出的文件有兩個,xxxAtlas.png和xxxAtlas.json
3、把Atlas.png和Atlas.json,導入Unity中,放在TMP指定的目錄中
4、點擊 Window – TextMesh Pro – Sprite Import
5、制作TextMeshPro可識別的圖集后,(在TMP Settings.asset設置默認圖集)
在TextMesh的Text中輸入文字和表情符號,就可以解析出表情啦
TexturePack打圖集的設置
DataFormat設置為Json(Arry) TextMeshPro能夠識別的格式
Size constraints: POT (尺寸設置為2的次方) 這一點很重要,節省內存
左右和上下間隙和Border padding 、Shape Pading 、Inner Padding 都設置為0 ,目地是為保證每一個圖片是對齊的。
不自動旋轉圖片 Auto Rotation 取消勾選
Scale mode 設置為 Smooth
最重要的是:讓合成后的表情圖集每一個都是對齊的
設置默認圖集(Sprite Atlas )
默認情況下,圖集資源要放置在相對於 Resource 目錄下!
在TextMeshPro目錄 TextMeshPro\Resources\TMP Settings.asset 文件可以設置默認的Sprite Atlas。
參考官方文檔:http://digitalnativestudios.com/textmeshpro/docs/settings/#sprites
遇到的問題
在項目中我是自定義圖集和文字,實現圖文混排,在過程中遇到表情和文字不對齊的問題。
表情和文字不對齊
文字和表情混排時,文字和表情上下位置不對齊,表現如下所示:
找出問題
經過仔細的觀察對比,發現我們打出來的表情圖集和示例圖集有區別。
1、我們打出的圖集並不是2的次方
2、我們打出的圖集,有的表情會有旋轉
3、我們打出的圖集,從上往下看,或者從左往右看,並不是排成一條線的,也就說沒有對齊!
制作圖集的要點
在美術同事制作過程中,強烈建議每個表情都是居中對齊:即保證上和下,左和右之間的空白間隙是一致的!
如下圖所示的表情,上和下的間距很明顯就是不一樣的,上方間距小於下方間距。美術給出的解釋是:表情底部有陰影。
圖片間隙不相同?
如果你們美術同事設計的單張圖片的上下留邊,或左右留邊是不相同的,那要如何處理呢?
在TextMeshPro的圖集設置中,可以通過(Gloable)offset y 進行偏移值,讓表情對齊,它會自動進行保存,並在保存后,讓初始值變為0