Packing normal maps into sprite sheets

Andreas Löw texturepacker spriteilluminator tutorial

Why create identical sheets for sprites and normal maps?

Most game engines that support dynamic lighting and sprite sheets — e.g. Unity — require the normal maps to be packed in the same way as the sprites.

The reason is simple: The OpenGL shaders are fed with one set of coordinates and 2 textures. Using a different layout would require handling additional coordinates.

2 ways to pack identical sheets

There are 2 obvious ways to accomplish the goal:

Pack sheets, generate normal maps

Packing the sheets first then generate the normal maps on the whole sprite sheet sounds like a good idea — but it is not:

• You have to re-generate the whole normal maps each time a single sprite changes
• You can't re-distribute the sprites across your sprite sheets
• Selecting different normal map generator parameters for each sprite is hard
• Sprites rotated during the packing process require separate treatment

Generate normal maps, pack sheets

This way has several advantages:

• Re-distribute sprites across your sheets is no problem
• Changes to a sprite's normal map are a local change
• It's easy to create optimized sheets for different resolutions & target devices

Using TexturePacker's new normal map packing

TexturePacker 3.7.0 has a new normal map packing mode. Depending on the file organization in your project it's just adding the normal maps and setting the check mark Normal maps/Pack with same layout:

Pressing Publish creates a normal map sheet in the same directory as your sprite sheet, using the same data format and the file name suffix _n.

TexturePacker's Normal maps/Auto-detect mode should in most cases do the work. You can override the auto-detection in cases where it does not work as expected - see Overriding auto-detection.

Project folder structure

There are 2 common layouts for the folder structure, TexturePacker handles both of them:

Sprites and normal maps in different folders

Sprites and normal maps both use the same name, but are separated by a folder. If you are working with sub folders you can either replicate the whole folder structure for the normal maps or keep them in the same tree using local normal map folders.

Sprites and normal maps the same folder using a suffix

The exact suffix does not matter - it's just important that you choose the same suffix for all normal maps.

Adding normal maps

Adding the normal maps is easy: Just drag & drop them into TexturePacker.

TexturePacker matches the normal maps and sprites based on the longest common file name part.

The easiest way is to simply keep everything under the same main folder add this as a smart folder. TexturePacker re-creates the sprite and normal map sheet as soon as one of the images changes.

Overriding auto-detection

Detecting normal maps is heuristics based. You can disable it in case it does not work with your normal maps.

Override settings are available after clicking on Normal maps/show advanced

Trim, extrude and padding

TexturePacker's settings for Trim mode, Extrude and Padding all work with the normal maps.