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:
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.
Select the generated asset, usually has the same name with the spritesheet. In the inspector, the sliced sprites are shown under Sprite List.
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.
In Text Input Box, use the syntax “<sprite=id>” to display an emoji or icon.
In this case, the lit emoji is at ID number 37, so we used <sprite=37>.
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. 🔥💯