I always wondered how people integrated images and text in their UI, which can be seen in many tutorials. The way I did before was writing the text and dragging the image near it to make it look like it was integrated along with it. The problem with it was that the anchor for text and image didn't always fit properly, making images appear at different locations compared to text on different resolution screens.

And then, I came across TextMeshPro, a really cool text for unity that supports multiple features unsupported by the default text system from Unity.

Step 1: Find Your Image

You need to have an image that you want to integrate with text. I made simple Xbox button icons to show you how it is done.

Step 2: Import Image Settings

Convert your imported image sprite mode to multiple. Note that this texture must have multiple sprites that can be sliced so that we can use a single atlas to show different images.

1.png
Sprite Mode to Multiple

Step 3: Slice the Images

Slice the Images by opening the sprite editor.

2.png
Images in Sprite Editor

Step 4: Create the Sprite Asset

You need to create a sprite asset for TextMeshPro use. To do that, you need to first select the image you want to create a sprite asset from.

An image showing how you can do that is shown below:

3.png
Sprite Asset in TextMeshPro

Step 5: Add TextMeshPro to the Canvas

Now create TextMeshPro text in canvas. Expand the extra settings. There you will find a location to put newly created sprite assets.

4.png

Step 6: Using Text With Images

After setting these up, we can simply write any text we want, and when we want to add an image, we simply use the index of sprite in our sprite atlas. All the images sliced are indexed while creating the sprite asset. A simple example of how we can use an image is:

Press <size=60> <sprite=0> </size> to jump //

Here, 0 is the index of the sprite. To increase the image size, I am using a size tag.

I have used all the sprite indices to show different images in the example below.

5.png
Image Example

Using these steps, you will be able to integrate images easily using TextMeshpro.

In the example above, I use different tags like size and sprite, which are rich text supported. To learn more about all the different tags supported, please refer to TextMeshPro's official documentation.

That's it I hope you learned something new. Please leave any comments you have about this article.