在Unity的UGUI中使用EMOJI表情

---

由头

• 项目中遇到有玩家名称里面有emoji，需要显示，于是开始着手弄这个功能。
• 查了各种资料，发现ugui好像弄不了。先是在github上看了 https://github.com/mcraiha/Unity-UI-emoji 但是下载下来用不了，然后在 csdn 上也各种看了下，都写的有板有眼的但是用2021.3的unity都跑不出来博客里描述的效果。所以当时转向用textmeshpro弄这个emoji，所以才有了上一篇文章。
• 这两天看到爱发电上有大佬因为上一篇文章打赏了一笔，所以顿感知识分享的重要性，可以让他人少走弯路节省时间变相的延长了生命。所以把后续用ugui解决emoji显示的也来写一篇。

EMOJI的UGUI解决方案

• 最终参考了 https://github.com/zouchunyi/EmojiText 和 https://github.com/coding2233/TextInlineSprite 里的图文混排方案
• 修改为了emoji图片显示，同时支持emoji的识别和输入
• 优化了emoji图的占位空间，优化了emoji图集的生成
• 增加了emoji图片的尺寸批量修改和四周留空白像素

Text支持Emoji

将 Text组件替换为 EmojiText组件即可

InputField支持Emoji

将 InputField里的Text的换成EmojiText，然后拖入InputField里的TextComponent即可
注意：当使用InputField的时候，需要将EmojiText的richText选项取消勾选

Canvas设置

使用EmojiText的Canvas， Additinal Shader Channels 里 至少要勾选上 TexCoord1

EMOJI图集生成

填写好输入和输出地址，点击开始即可

缺陷

EmojiText 不支持空格等空白字符输入，会导致计算位置等错误，所以已在代码中自动将所有空白字符剔除

扫描二维码关注公众号，回复： 14913144 查看本文章

EMOJI图片获取和批量修改

https://github.com/twitter/twemoji

• 使用了该github收集的emoji图片，目前包含3689个emoji图片

• 该图片为 72*72 大小的

• 项目不需要那么大的图，所以需要整体缩放一下，同时为了显示效果还需要将四周留白几个像素不然效果会不好

• 下面为python批量处理的代码

#! /usr/local/bin/python3
# -*- coding: utf-8 -*-

import sys
import os
import glob
from PIL import Image

def main():
    input_dir = 'input/'
    output_dir = 'output/'
    size_output = 32,32

    # 目录不存在则创建
    if not os.path.exists(output_dir):
        os.mkdir(output_dir)

    if os.path.exists(input_dir):
        paths = glob.glob(os.path.join(input_dir, '*.png')) # 遍历图片
        for path in paths:
            try:
                logo = Image.open(path)
                old_size = logo.size
                new_size = old_size[0]+2,old_size[1]+2
                new_im = Image.new("RGBA",new_size) # 创建一个比当前图片大的，然后把当前图片放到中央，这样四周就有了多余像素
                box = tuple((n - o) // 2 for n, o in zip(new_size, old_size))
                new_im.paste(logo, box)
                new_im.thumbnail(size_output)  # 缩放到指定大小
                new_im.save(output_dir + os.path.basename(path))

            finally:
                logo.close()
                new_im.close()

if __name__ == '__main__':
    main()

将output文件夹里的处理过的图片导入unity，然后选中所有图片勾选上 read/write 然后apply，方可使用上面的图集生成工具进行操作

---

如果您觉得对您有帮助，可以点这里请我喝杯咖啡，同时相关资源也会同步免费发布