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.aspx). 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.