How to add emojis to your game in Unity

Is your emoji game 💪 or 🗑?

This post will explain how to add emojis and/or small icons directly to your UI in Unity using its free plugin, TextMeshPro. If you are still using Unity’s native Text component instead of TextMeshPro, I suggest you contemplate your life choices because man, you’re missing a lot.

So you want to add emojis/inline icons/images in your game. First thing you’ll need is a sprite or a spritesheet. In Shots Fired, this is how our spritesheet looks like:

Emoji Spritesheet

Pre-sliced emoji spritesheet

Emoji Spritesheet Sliced

Sliced using Unity’s’ Sprite Editor.

Assuming you have imported and sliced the asset in Unity, find the asset in Project. Right click the asset and select Create>TextMeshPro>Sprite Asset. This will generate a TextMeshPro Sprite Asset from the selected spritesheet.

Emoji Sheet

Select the generated asset, usually has the same name with the spritesheet. In the inspector, the sliced sprites are shown under Sprite List.

Sprite List Inspector

In Sprite List, you can adjust the xy-position from thte sheet, xy-offset, width, height, and the name of a sprite. Make sure to take note of the ID of each sprite.

Chryse tip: We maintain a list of these IDs together with the corresponding emoji/icon so we can easily reference an icon while writing texts for the game. We also decided to just use IDs instead of renaming each icon so our writers and localizers will not have problems using these icons.

To add an emoji/icon in scene, select a game object that contains a TextMeshPro UGUI component. Expand Extra Settings and drag the generated Sprite Asset to the Sprite Asset field.

TextMeshPro Inspector Extra Settings

In Text Input Box, use the syntax “<sprite=id>” to display an emoji or icon.

TextMeshPro Inspector Text Input Box

In this case, the lit emoji is at ID number 37, so we used <sprite=37>.

In-game Emoji

This workflow can also work for displaying in-game icons for attributes such as a UI for the player’s current money or stat.

In Shots Fired, we used the emoji sheet from displaying emojis to in-game stats such as money and mobile data, tutorial icons for mobile apps, and such.

There you go.

Add unlimited emojis to your game with Unity and TextMeshPro for free! Just make sure you got your emoji game on point. 🔥💯


This entry has 0 replies

Comments open

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>