最近遇到一個(gè)需求，在聊天框中支持用戶的Emoji輸入，查了半天資料沒(méi)有一個(gè)能說(shuō)清楚的，于是自己研究琢磨了下。
最終效果
最終效果可以在APP輸入框中使用系統(tǒng)的輸入法輸入emoji表情并顯示，如下

1 制作Emoji圖集

1.1 準(zhǔn)備好emoji素材

找到emoji圖片，注意需要是 unicode.png 格式命名的。github上一些開源項(xiàng)目有這些圖，或者到這個(gè)鏈接(提取碼: 0uN0 )下載

準(zhǔn)備使用。

1.2 下載 TexturePackerGUI 軟件

到這個(gè)鏈接下載并安裝，打開軟件

語(yǔ)言的切換在這里

1.3 制作圖集并輸出

將Emoji圖片文件夾拖入到左側(cè)欄目里，同時(shí)右側(cè)的數(shù)據(jù)格式切記選擇 JSON（Array）， 而不是 Unity的texture和json格式.
點(diǎn)擊發(fā)布精靈表，輸出保存即可。

2 制作TextMeshPro素材資源

2.1 導(dǎo)入 TextMeshPro 庫(kù)

項(xiàng)目中在 PackageManager中導(dǎo)入 TextMeshPro , 注意版本為Pre-Release的3.2.x的而不是當(dāng)前最新的Release 3.0.x

在 Project Settings 可以打開Pre版本的展示

不過(guò)可能是網(wǎng)絡(luò)因素或者中國(guó)版因素，很大可能開啟了pre版本拉取依舊package manager里不展示，如果這樣的話可以到 TextMeshPro的github源碼庫(kù)下載并導(dǎo)入該庫(kù)

記得將Essential素材導(dǎo)入

2.2 制作 TextMeshPro 的 Sprite Assets

打開 Sprite Importer 開始制作TextMeshPro的SpriteAssets

將1.3制作輸出的文件拖入，勾選 use filenames as Unicode

然后Create Sprite Asset,沒(méi)問(wèn)題的話會(huì)輸出結(jié)果

再點(diǎn)擊 Save Sprite Asset 保存即可

建議將這些素材放到TMP Essential目錄里，剛好他里面也有個(gè)emoji的demo

3 打出完美的emoji表情

3.1 將上一步的 Sprite Assets 引用到 TextMeshPro 的設(shè)置中

選中 TMP Settings 將上一步導(dǎo)出的 Sprite Assets 拖入設(shè)置為 Default Sprite Assets

此時(shí)就可以測(cè)試TextMeshPro打字打emoji了，win10的默認(rèn)微軟輸入法和市面上的輸入法一般都支持直接打emoji，例如鍵盤輸入拼音 haha 候選里面就會(huì)有emoji

UI結(jié)果如下所示，不盡人意，圖片內(nèi)容有裁剪和其他內(nèi)容，并且圖片位置下移或不對(duì)勁

3.2 調(diào)整 TexturePackerGUI 輸出的細(xì)節(jié)

按照如下設(shè)置配置 TexturePackerGUI

重要的幾個(gè)點(diǎn)為布局里的

• 大小限制-POT（2的冪）
• 強(qiáng)制正方形-勾選
• 縮放模式-平滑
• 算法-網(wǎng)格/條帶
• 允許旋轉(zhuǎn)-不勾選

做到上述配置，再次導(dǎo)出并制作Sprite Assets， 并在 TMP Settings 里拖入新的Sprite Assets即可觀察效果。 建議新制作導(dǎo)出制作Sprite Assets是重新命名保存?zhèn)€新的文件并在TMP重新拖動(dòng)，防止Unity不更新素材文件等。
到這里，圖片可以正常顯示了。

不過(guò)位置依舊不對(duì)，需要將圖集的錨點(diǎn)重新設(shè)置，按照實(shí)際圖片的需求設(shè)置并導(dǎo)出測(cè)試。我使用的emoji圖片需要以下設(shè)置。
在 TexturePackerGUI 左邊的列表隨便選中一張圖雙擊進(jìn)入詳情，將錨點(diǎn)設(shè)置為下面這樣，默認(rèn)應(yīng)該是預(yù)定義里的中央0.5；0.5 ，自己調(diào)整并且點(diǎn)擊那個(gè)回車按鍵，這樣新導(dǎo)入的圖片就會(huì)使用這個(gè)配置。我這里設(shè)置為0.8并且按了回車。然后將左邊的圖片文件夾選中點(diǎn) delete 按鍵刪了，重新導(dǎo)入，這時(shí)所有圖片都是這個(gè)錨點(diǎn)配置了，重新點(diǎn)擊發(fā)布精靈表 即可

最終的效果如圖，這樣就基本OK了

這個(gè)鏈接(提取碼: 3pv3 )可以下載最終導(dǎo)出的json和png直接制作sprite assets

至此，就結(jié)束了TextMeshPro制作帶unicode的emoji表情功能的sprite assets

如果您覺(jué)得對(duì)您有幫助，可以點(diǎn)這里請(qǐng)我喝杯咖啡，同時(shí)相關(guān)資源也會(huì)同步免費(fèi)發(fā)布文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-801561.html

到了這里，關(guān)于Unity中使用TextMeshPro打出Emoji表情的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！