Spine atlas repack

 

This tutorial explains how to get rid of whitespace around Spine atlas elements and repack them more tightly.

Sprites preparation

For this character

sprites were exported as png, without whitespace being trimmed out, like this:

flag.png
shild.png

to make sure that future changes in design won’t cause extra adjustments in Spine, and all elements will be at their place by default.

Spine export settings

After Spine animation is done. Data should be exported as following:

  Format: JSON     *Note: JSON data can be converted to binary using Spine after repack.     http://esotericsoftware.com/forum/Command-line-tool-convert-import-json-export-binary-6472     Create atlas: ON

Format: JSON

*Note: JSON data can be converted to binary using Spine after repack.

http://esotericsoftware.com/forum/Command-line-tool-convert-import-json-export-binary-6472

Create atlas: ON

Atlas settings:

  Strip whitespace X - off,  Strip whitespace Y - off   Since this animation contains Mesh elements it's necessary to turn off whitespace stripping   Max width, height - any   Can be any size. To illustrate multi-page repack functionality 2000x2000 were selected for this example.   Premultiply alpha - o ff  For better Bilinear filtering SpriteUV extends pixel color in transparent areas around border. To make this work as intended Premultiply alpha has be turned off.

Strip whitespace X - off,  Strip whitespace Y - off

Since this animation contains Mesh elements it's necessary to turn off whitespace stripping

Max width, height - any

Can be any size. To illustrate multi-page repack functionality 2000x2000 were selected for this example.

Premultiply alpha - off

For better Bilinear filtering SpriteUV extends pixel color in transparent areas around border. To make this work as intended Premultiply alpha has be turned off.

SpriteUV

Import the exported JSON file either by dragging it to the window or clicking to open the file browser.

Export settings.

To set an export paths for the repacked atlas, on the left hand side select Atlas List > Export Atlas option. In Output Path, select a folder to save repacked atlas.

spriteUV_inspector_01.png

Next, Mesh Export Group > Mesh Export options. For Spine animation only Name and Output path is important.

Spine Item settings

  Path .json  - path to Spine json file   Path .atlas -  path to Spine atlas file. If Atlas filename is the same as json and they are in the same folder, than SpriteUV will find it automatically.

Path .json - path to Spine json file

Path .atlas - path to Spine atlas file. If Atlas filename is the same as json and they are in the same folder, than SpriteUV will find it automatically.

  *Note: all paths can be relative to .suv file instead of being absolute to current system.

*Note: all paths can be relative to .suv file instead of being absolute to current system.

  Reload all pages from file  -  by pressing this button, all pages from Spine Atlas file will be assigned to Spine pages list.

Reload all pages from file -  by pressing this button, all pages from Spine Atlas file will be assigned to Spine pages list.

  Atlas  - Reference to SpriteUV atlas export settings located in Atlas List.

Atlas - Reference to SpriteUV atlas export settings located in Atlas List.

  Spine pages  - Path list for Spine atlas pages, which will be packed into selected SpriteUV atlas

Spine pages - Path list for Spine atlas pages, which will be packed into selected SpriteUV atlas

  Export Group  - Reference to SpriteUV export group settings located in Mesh Export Group

Export Group - Reference to SpriteUV export group settings located in Mesh Export Group

Preview window

 Preview window divided by page.

Preview window divided by page.

 Spine atlas region name is displayed at left top corner of each region bounding box

Spine atlas region name is displayed at left top corner of each region bounding box

 Mesh generated by SpriteUV is indicated as yellow and cyan wireframe. Imported mesh from Spine file, as blue wireframe

Mesh generated by SpriteUV is indicated as yellow and cyan wireframe. Imported mesh from Spine file, as blue wireframe

Spine atlas region settings

  Mesh type: Tight  - Change Region to auto generated mesh.

Mesh type: Tight - Change Region to auto generated mesh.

  Mesh type: REGION STRIP  - Keep as Region but whitespace around will be removed

Mesh type: REGION STRIP - Keep as Region but whitespace around will be removed

  Mesh type: BOUNDING BOX  - Change Region to bounding box mesh.

Mesh type: BOUNDING BOX - Change Region to bounding box mesh.

  Mesh type: REGION FULL  - Keep Region as is.

Mesh type: REGION FULL - Keep Region as is.

  Island alpha threshold  -  Contour islands with average alpha below the value will be removed. Useful when image has almost invisible pixels around sprite border   UV scale  - If original sprites bigger than needed they can be resized before packing into atlas.

Island alpha threshold -  Contour islands with average alpha below the value will be removed. Useful when image has almost invisible pixels around sprite border

UV scale - If original sprites bigger than needed they can be resized before packing into atlas.

Region override settings

In some situations some Spine atlas regions has to be treated differently to achieve better result.

 To add custom Spine region settings press green “+” button.

To add custom Spine region settings press green “+” button.

 Then select specific region by name

Then select specific region by name

 As an example this “longSword” sprite splitted in 3 pieces and each piece will be packed separately. Extremely useful on awkwardly shaped sprites.

As an example this “longSword” sprite splitted in 3 pieces and each piece will be packed separately. Extremely useful on awkwardly shaped sprites.

Atlas building

When all settings are done, click “Build” button

A new Atlas texture and Spine files will be created at specified locations

 Final atlas

Final atlas

Keep in mind that you need to copy all Spine pages, which were not included in SpriteUV project manually into export folder.

To repack pages separately you can pack the same Spine json multiple times for each page.