Optimizing sprite sheets for Unity

Joachim Grill & Andreas Loew

Why you should use optimized sprites

I guess that you already know that sprite sheets increase the performance of your game. But with TexturePacker you can do even more.

Unity creates sprite meshes for you — they reduce the amount of overdraw by simply not drawing transparent pixels. The only problem is the quality of the generated mesh:

Sprite polygon quality in Unity and TexturePacker
Unity 5.2.2.f1 vs TexturePacker 4.0.0

TexturePacker comes with a new algorithm to create better meshes. As you see above:

What you are going to learn in this tutorial

TexturePacker, together with the free TexturePackerImporter, creates sprite sheet assets that can be directly used from Unity's graphical editor or through scripts.

Sprites are accessible through Unity's standard API using the Sprite class — no additional runtime code required! The sprite sheets also work with Unity's UI classes but don't support the optimized sprite meshes..

This is what you get:

Creating sprite sheets

To create a new sprite sheet, simply start TexturePacker and drag & drop the directories containing your sprites to the Sprites area. TexturePacker preserves the directory structure under the directory you added - allowing you to group and sort sprites. New sprites in the directory are added to the sheet as soon as you re-enter TexturePacker.

TexturePacker: Add sprites

Select the Data format Unity - Texture2d from the settings on the right side.

Click on the folder icon next to Data file name and choose a location in the Assets directory of your Unity project — the TexturePackerImporter script will re-import the sprite sheet into your project each time you publish an updated sheet with TexturePacker.

TexturePacker 4's default packing Algorithm is Polygon — which is good for sprites. It does not work with UI images — since they only work with rectangles — overlapping sprites would give you artifacts. In this case use MaxRects. You could also try MaxRects when packing polygon sprites, it might deliver better packing results depending on your sprite data.

Polygon packing is a complex process and takes some time. You can speed up things in 2 ways:
  • Increase the Tracer Tolerance — this will create less compex polygons
  • Use MaxRects — TexturePacker uses rectangles for packing but still uses the optimized meshes
The Unity Importer is currently not compatible with TexturePacker's Multipack feature. If a sprite is packed on a different sheet the connection with the texture breaks.

Finally press Publish to create the sprite sheet.

Optimizing polygon meshes

You can influence the quality of the meshes using Tracer Tolerance. A higher tolerance results in less vertices but more overdraw.

The best value for your project depends on 1 factors: Your CPU usage and GPU usage. Each vertex requires CPU power for the calculation. On the other hand: Each additional pixel adds work load on the GPU.

If your project is high on computation (CPU) but you still have some resources on the GPU side go for a lower vertex count - increase tracer tolerance.

If your project is high on graphics (CPU) but you still have some resources on the CPU side go for a lower overdraw - reduce tracer tolerance.

Keep an eye on the values TexturePacker is displaying at the bottom of the sprite sheet. In the following example you see that decreasing the overdraw by additional 2% comes with more than duplicating the vertex count.

Sprite polygon mesh quality: pixels vs triangle count
Tracer tolerance setting: Triangle count vs overdraw

Using sprites

To enable the import of TexturePacker sprite sheets in Unity, you have to install TexturePacker Importer, which you can download from the Unity Asset Store for free:

TexturePacker Importer

The script extends Unity to read sprite sheet data created with TexturePacker and to automatically create native Unity assets which you can use with the Unity Editor. The code of the script only runs during development. It does not become part of your product or game.

Import this package into your Unity project by opening the link from above in Unity:

The plugin comes with some demo assets — but it's perfect if you only install the TexturePackerImporter.dll.

It is important that the dll is located in a folder called Editor to ensure that it is automatically loaded by the Unity Editor.

The TexturePackerImporter checks for each texture file if a corresponding .tpsheet file exists. This is the data file written by TexturePacker — it is used by the Unity importer to slice the texture into individual sprites.

The assets and sprite sheets are automatically updated in Unity when changes are found. No manual intervention required!

Use the symbol next to the texture item to display the individual sprites. To create an animation simply select the frames and drag them onto the scene.

Unity Assets folder structure

Now you can use your sprites as usual, directly from the editor.

You can, of course, also access the sprite through the scripting API:

Pivot points

TexturePacker's next bigger update is going to come with a pivot point editor!

TexturePacker has not pivot point editor (yet) — the settings in TexturePacker are applied to all sprites.

If you want to edit the pivot points you currently have to use Unity's internal editor. Make sure to disable overwriting pivot points in Unity's preferences:

Unity UI

The UI classes of Unity ignore the polygon mesh information and simply use rectangular sprites. Since the UI also does not use the pivot points it's recommended to disable trimming, too:

Summary

TexturePacker simplifies the workflow for your sprites in Unity - automating the whole process.

Changing your sprites is quite simple:

Did you like the tutorial? Please share!