mcraiha / Unity-UI-emoji

Show emoji images in Unity UI text
174 stars 34 forks source link
emoji unity

Update: TextMesh Pro is now free, and it will be integrated to Unity. So if you want to use Emojis in your Unity project, I would suggest that you use it instead of Unity-UI-emoji.

Unity-UI-emoji

Show emoji images in Unity UI text

Emojis

WebGL demo

Introduction

Since Unity doesn't have build-in emoji support in it, I wanted to test out different approaches for showing emoji in Unity projects.

This one shows emoji via UI Text.

How to use

Download and import the Unitypackage unity_emoji_v200.unitypackage to your project. Open showoff scene and press play to see the emojis in action.

Basically you have to have a RawImage with emoji atlas set in the scene (in this case rawImageToClone in ShowOffEmoji.cs) to be used for emoji replacement. After that you can call

StartCoroutine(this.SetUITextThatHasEmoji(uiText, "⚽ ➕ ❤ = I love football"));

to set your uiText.

How does it work under the hood

  1. step, rebuild the input string and replace any emoji (or special char) with (em quad)[https://en.wikipedia.org/wiki/Quad_(typography)] char, e.g. string "my ™ is best" -> "my   is best"
  2. step, set UI Text to rebuild text (so emojis are drawn as blank)
  3. step, generate new RawImage for each replaced emoji, position those correctly and set correct atlas UVs

Tips

Limitations

Ugly stuff

All emojis that fit into single C# char (e.g. chars like ⚽ ➕ ❤) can be written directly to code but longer ones have to entered as escape sequences. Certain emojis require 4 chars (like US Flag, U+1F1FA U+1F1F8) since it build from 2 emojis (letters U U+1F1FA and S U+1F1F8).

Licences

This document, code files and scene file are licenced under Public domain. See PUBLICDOMAIN file.

Emoji textures (in Assets/Textures/Emojis folder) and Emoji atlas are licensed under CC-BY 4.0 https://creativecommons.org/licenses/by/4.0/. All emoji textures are from Twitter's Twemoji project.

Roboto font (in [Assets/Fonts/Roboto-Regular.ttf]) is licensed under Apache License, version 2.0 [http://www.apache.org/licenses/LICENSE-2.0.html]. It is from Google Fonts.