1. 程式人生 > >TextMesh Pro Emoji Align With Text(表情和文字對齊)

TextMesh Pro Emoji Align With Text(表情和文字對齊)

圖文 unity source taf smo 間隙 之前 設置 ons

前言

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、點擊 WindowTextMesh ProSprite 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

TextMesh Pro Emoji Align With Text(表情和文字對齊)