UI Sprite Atlasing

Images can be used in conjunction with Unity UI to add more contrast or visual flair. Sprites are a great way of conveniently storing and using multiple images from a single Texture. Sprites in Unity are referenced from a Sprite Atlas asset. A Sprite Atlas is simply a grid of images compiled into a single Texture. This Texture can either be imported into Unity and converted into a Sprite Atlas, or created within Unity from a collection of Textures in the Scene.

Sprite Atlases must be loaded into memory whenever they are referenced. To manage load times and reduce the amount of Texture memory (VRAM) used within your projects, it’s best to group Sprites across different atlases depending on where and how often they are used. For instance, the main menu should have one Sprite Atlas as it likely has a specific set of Sprites that are only used within that Scene. In-game UI components should probably exist on another Sprite Atlas (or series of atlases), as they will likely be consistent across all in-game Scenes.

If your Scene already contains Textures intended to be used as Sprites, we can create a Sprite Atlas from within Unity.

1. Right-click in the Project view and navigate to Create > Sprite Atlas.

This automatically creates an empty Sprite Atlas within your Scene. To populate our new Sprite Atlas, we must first enable Sprite Packing.

2. Navigate to Edit > Project Settings > Editor. Under Sprite Packer, set the mode to Enabled for Builds (Figure 01).

Figure 01: Enabling the Sprite Packer in Unity’s Project Settings window

3. Click on the new Sprite Atlas and navigate to the Inspector.

4. Expand the Objects for Packing drop-down. From here, click the + symbol to add Textures or folders to the Atlas (Figure 02).

5. When you’re done, click Pack Preview to finish populating the Atlas.

Using this method, Unity will try its best to optimally pack your Textures into the Sprite Atlas by minimizing the space between them.

Figure 02: The Objects for Packing tab allows us to populate our Sprite Atlas from Textures within Unity.

If you wish to use your own atlas, place it in your Assets directory, in a folder named along the lines of Resources > Sprites.

*NOTE* If it is not installed in your project already, please import the 2D Sprite package

before proceeding. Read about installing packages here: Adding and removing packages

6. Within Unity, click on the imported Sprite Texture and navigate to the Inspector.

7. From here:

Change the Texture Type to Sprite (2D and UI) and set the Sprite Mode to Multiple (Figure 03).

Figure 03: Import settings for a Sprite Atlas within the Inspector

Once the Sprite Atlas has been imported, we will slice it to isolate the individual images.

8. Navigate to the Sprite Editor, then click the Slice drop-down menu. These will be the most important settings for creating a working Sprite Atlas.

9. In the drop-down:

Set the Type to Grid by Cell Size

Set the Pixel Size to 128x128 (or however large each image is in the Sprite Atlas)

Set the Pivot to Top Left

10. Next, select Slice from the drop-down

The Sprite Atlas should now be ready for in-game use. Individual Sprites from the atlas can be added to the UI either through a TextMesh Pro component or an Image component.

NOTE Only one of these components can be added to a Unity UI GameObject.

You can add Sprites via TextMesh Pro by creating a Sprite Asset. For the time being, let’s add Sprites using the Image component.

11. Create a new image via Right-click > UI > Image. This will parent a new GameObject with an Image component to an existing Canvas in your Scene (or create a new Canvas if one is not present).

12. Navigate to the Image component and under Source Image, select one of the Sprites from your atlas (Figure 04).

Figure 04: The Image component within a new GameObject

The Sprite can now be positioned freely within your canvas.

Unity’s official documentation on Sprite Atlases contains useful suggestions to further optimize Sprites in your Scene, including reducing the amount of empty space in your atlases either within Unity or an external image editing application.