Show emoji images in Unity UI text
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
- 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”
- step, set UI Text to rebuild text (so emojis are drawn as blank)
- step, generate new RawImage for each replaced emoji, position those correctly and set correct atlas UVs
- If you don’t need/want e.g Copyright symbol (a9.png) to be drawn as emoji then you can just remove the file (a9.png) and rebuild the atlas
- You can add/replace PNGs if you need new emojis or custom symbols (rebuild atlas after that)
- You have to get emoji graphics from somewhere. In this case I used those provided by Twitter via their Twemoji project. Graphics licensed under CC-BY 4.0 https://creativecommons.org/licenses/by/4.0/
- You have to create atlas from those emoji textures (EmojiAtlasBaker.cs does that)
- Every emoji shown requires new RawImage element
- You have to manually adjust RawImage settings (pivot etc.) to make them match your font
- Only supports one pixel size (albeit transform scaling can be used, but in that case pixel accuracy is lost)
Not all emojis are supported texture wise since current release of Twitter’s Twemoji project is “only” Unicode 7.0 complete.Twemoji is Unicode 8.0 complete
- Font needs to have (em quad)[https://en.wikipedia.org/wiki/Quad_(typography)] char (or something similar, that draws 1:1 blank)
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).
This document, code files and scene file are licenced under Public domain. See PUBLICDOMAIN file.