寫在前面呼奢，最近在寫聊天系統(tǒng)，這里面就有一個(gè)很重要的環(huán)節(jié)就是表情與文字混排需要解決本橙。前段時(shí)間有客戶說微信登錄，有的人微信名字含有emoji脆诉，這樣直接使用會(huì)顯示亂碼甚亭。就一起解決了。
功能
◆打包圖集
◆圖文混排
◆使用輸入法直接輸入emoji轉(zhuǎn)化顯示
怎么用击胜？
打包圖集
點(diǎn)擊Tool->Bake Emoji Atlas然后設(shè)置好各個(gè)選項(xiàng)點(diǎn)擊生成即可亏狰。
顯示emoji
EmojiTextManager.Instance.SetChatTextEmoji(Emoji, "{emoji:54}Emoji表情{emoji:4}", "54|4|", emojiAtlas);
使用這個(gè)是已知emoji的id，用于聊天表情框選擇等偶摔。
EmojiTextManager.Instance.SetUITextThatHasEmoji(inputEmoji, "自行車: \U0001F6B4, 國(guó)旗: \U0001F1FA\U0001F1F8", emojiAtlas);
使用于用戶直接用輸入法輸入emoji或者獲得網(wǎng)絡(luò)消息中含有emoji的Unicode的時(shí)候暇唾。
EmojiTextManager.Instance.SetUITextThatHasIconByAtlas(qq, "{emoji:44}QQ{emoji:55}表情{emoji:4}", iconAtlas);
與第一個(gè)同樣，區(qū)別在于這是使用自定義的圖集辰斋。
EmojiTextManager.Instance.ConvertInputFieldText(str);
用于用戶使用輸入法輸入emoji策州，顯示輸入框中的表現(xiàn)。
填充數(shù)據(jù)
EmojiTextManager.Instance.ParseEmojiInfo(resStr);
EmojiTextManager.Instance.ParseNormalIcon(resStr);
這個(gè)需要在使用顯示圖片之前調(diào)用宫仗。
具體實(shí)現(xiàn)
打包圖集
設(shè)置好上面的參數(shù)够挂。生成會(huì)把圖片文件夾中的圖片遍歷打到一個(gè)Texture2D中，然后把每張圖片在圖集的位置大小記錄下來藕夫，然后把這些數(shù)據(jù)存入xml文件中孽糖。在生成每個(gè)表情時(shí)可以設(shè)置UV來確定哪一個(gè)圖片枯冈。
圖文混排
這個(gè)功能在網(wǎng)上看到大多是使用的富文本加重寫Text組件來實(shí)現(xiàn)的。這次并沒有使用這個(gè)方案办悟，
使用的Git上面的這個(gè)開源方案霜幼，但是這個(gè)方案有一個(gè)致命問題——只適用于一個(gè)分辨率。解決這個(gè)問題的方案是使用了NGUI中的使文字漸變的功能的原理誉尖。
public class EmojiEffect : BaseMeshEffect{
public override void ModifyMesh(VertexHelper vh){}
}
繼承與BaseMeshEffect抽象類，然后重寫ModifyMesh方法铸题。這個(gè)方法會(huì)在你修改文字時(shí)調(diào)用铡恕。值得注意的是這個(gè)方法在編輯器下也會(huì)調(diào)用。然后使用下面的代碼獲得文字的頂點(diǎn)丢间。
var vertexList=newList<UIVertex> ();
vh.GetUIVertexStream(vertexList);
這里的每一個(gè)文字有6個(gè)頂點(diǎn)探熔。第一個(gè)和最后一個(gè)頂點(diǎn)在一個(gè)位子，以順時(shí)針增加烘挫，第三個(gè)和第四個(gè)頂點(diǎn)是在一起诀艰。如下示意圖：
根據(jù)頂點(diǎn)位子來確定表情位置，在表情的位置使用了占位符替換饮六。
private const char emSpace = '\u2001';
根據(jù)字符串匹配判斷表情在那個(gè)字符的后面其垄。可以看看這篇文章使用正則表達(dá)式匹配卤橄，當(dāng)然也有使用直接遍歷比對(duì)绿满。
寫在后面
這個(gè)里面還有很多沒有優(yōu)化，一些東西也沒有改窟扑，等后面有時(shí)間了再來修改吧喇颁。:-)
先寫這么多吧。
嗯嚎货，一定要好好鍛煉橘霎，好好減肥！
這個(gè)是工程地址殖属。
2017/11/24更新
這里有一個(gè)小提示姐叁，這個(gè)顯示功能需要在物體激活狀態(tài)才會(huì)正常運(yùn)行，當(dāng)然這里有一個(gè)特殊情況就是打開一個(gè)界面需要運(yùn)行此方法忱辅，但是立馬又關(guān)閉了這個(gè)界面七蜘，會(huì)有一個(gè)小的報(bào)錯(cuò)，如果是切頁(yè)類型的話墙懂，就會(huì)造成顯示錯(cuò)誤橡卤。
2017/12/14更新
如果文字被截?cái)嗔耍@里需要做一下判斷损搬，不然會(huì)報(bào)空碧库。應(yīng)該是文字沒有被渲染出來柜与，所以頂點(diǎn)也不會(huì)有，所以這里頂點(diǎn)列表中就會(huì)越界嵌灰。
