Use EMOJI expressions in Unity's UGUI

Article directory

by the head

In the project, there was an emoji in the player's name that needed to be displayed, so I started to work on this function.
After checking various information, I found that ugui can't seem to get it. First, I read https://github.com/mcraiha/Unity-UI-emoji on github, but I couldn’t use it after downloading it, and then I also read it on csdn. They were all well written, but they all ran with 2021.3 unity The effect described in the blog does not come out. So at that time, I turned to use textmeshpro to make this emoji, so I came up with the last article.
In the past two days, I saw that there are big guys on Aidian who gave a reward for the last article, so I suddenly felt the importance of knowledge sharing, which can save others from taking detours, save time and prolong their lives in disguise. So I will also write an article on using ugui to solve emoji display in the future.

EMOJI's UGUI solution

Finally, I refer to the graphics and text mixing scheme in https://github.com/zouchunyi/EmojiText and https://github.com/coding2233/TextInlineSprite
Modify it to display emoji pictures, and support emoji recognition and input at the same time
Optimized the space occupied by the emoji map and optimized the generation of the emoji atlas
Added batch modification of the size of emoji pictures and blank pixels around them

Text supports Emoji

insert image description here

Just replace the Text component with the EmojiText component

InputField supports Emoji

insert image description here

Replace the Text in the InputField with EmojiText, and then drag it into the TextComponent in the InputField
Note: When using the InputField, you need to uncheck the richText option of EmojiText

Canvas Settings

insert image description here

When using Canvas of EmojiText, at least TexCoord1 must be checked in Additinal Shader Channels

EMOJI atlas generation

insert image description here

Fill in the input and output addresses and click start

defect

EmojiText does not support the input of blank characters such as spaces, which will cause errors such as calculation positions, so all blank characters have been automatically removed in the code

EMOJI picture acquisition and batch modification

https://github.com/twitter/twemoji

The emoji pictures collected by this github are used, currently contains 3689 emoji pictures
The picture is 72*72 size
The project does not need such a large picture, so it needs to be zoomed in as a whole, and at the same time, it is necessary to leave a few pixels around for display effect, otherwise the effect will not be good
The following is the code for python batch processing

#! /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()

Import the processed pictures in the output folder into unity, then select all the pictures and check read/write and then apply, then you can use the above atlas generation tool to operate
insert image description here

If you think it is helpful to you, you can click here to buy me a cup of coffee , and related resources will be released simultaneously for free