Adding an Image to Text, Unity Engine

Welcome, this is a short tutorial on how to add a 2D sprite/image to text, using Unity’s TextMeshPro asset.

Follow the steps below and we’ll end with a result looking something like this. Feel free to use whichever sprite you’d like, I just created a mock-up dollar sign for this example. Feel free to check out my free android game Asteroid Fury for an example of using it in your game.

Example of final result in this tutorial.

Firstly open your project, or create a new one. Once that’s done let’s get into it.

Step 1: Install TextMeshPro

Install TextMeshPro if your project hasn’t yet got it installed.
Can find it here: Window > Package Manager > TextMesh Pro

Step 2: Creating the Sprite Asset

Select a sprite that you want to use in text.

Once selected, Right Click > Create > TextmeshPro > Sprite Asset

It’ll create a new sprite asset. Example Below.

This newly created sprite asset should now be placed inside a new folder called “Sprites” which should be created within the “Resources” folder, the path looks like this (Assets > Resources > Sprites).

Step 3: Create Text (TMP) object.

Create a new “Text - TextMeshPro” object by right clicking the Hierachy window, UI > Text - TextMeshPro

If this is the first time you’re using TextMeshPro you may be prompted to Import TMP Essentials, proceed to import them.

Also if an existing Canvas object is not selected it will create a new Canvas with a Text(TMP) object.

Now select the new Text(TMP) object so it’s components are viewable in the Inspector Window.

Step 4: Setting Up the Text Mesh Pro UGUI component.

In the inspector under the component “Text Mesh Pro UGUI” scroll down to Extra Settings and open up the drop-down.

In these settings you’ll find a Sprite Asset heading, drag the newly created Sprite Asset into the empty slot right of the heading.

The Sprite asset acts like a library for all sprite images you’d like to access for this particular Text object. Otherwise it will default back to the Sprite asset that came with TextMeshPro.

Once that’s done, collapse the Extra Settings we won’t need it for the rest of this tutorial.

Step 5: Testing the Image

Head back up to the Text space found in the Text Mesh Pro UGUI component, and type the following in:

“ Look my first sprite in text <sprite index= 0> ”

The first image from your Sprite Asset should now be present in the Text(TMP) object in either the scene view or game view windows.

The above example clearly shows that the sprite isn’t in it’s right placement. You may be lucky and it’s perfect, but if you’re not that lucky, let’s fix it.

Step 6: Fix the sprite placement

Head to: Assets > Resources > Sprites and select your sprite asset.

In the inspector window expand the Sprite Glyph Table.

Click on the sprite image you want to adjust.

Firstly adjust the BX + BY to get the correct placement of the sprite.
This will vary depending on the sprite so play around with it until it looks right.
- I found adding a word after the symbol in the text helped with placement.
- eg. “ Look my first sprite in text <sprite index= 0> and a second one too <sprite index= 0> “
Then feel free to play around with the other variables

After a few adjustments it should start to look something like this:

This is only a quick and easy way to implement sprites within your text, in no way is this best practice and I’m sure there is much more robust ways of implementing sprites into your text.

Either way, I hope this short tutorial was beneficial to you and you’re able to use it within your game development.

Feel free to reach out to me over Twitter @JasonC_design
Or check out my game Asteroid Fury where I use this steps in my development.