Import Spine Animation in Cocos2d-x (Part 4): Export layers from Adobe Photoshop

This is the 4th post of series "Import Spine Animation in Cocos2d-x". Before taking a look on this post, please refer to the first post to create a worm sprite: Part 1; Part 2, Part 3.

Before you import the circles to Spine to make animation, you need to extract each layer to single files so that we can easily to attach bones to circles. To do this, we have several ways in Photoshop but each version of Adobe Photoshop will have a difference way to export. Example: in Photoshop CS2, the way to export layers to files is using script. But in Photoshop CC 2015. that option is no longer available. Instead of that, Adobe replace by another functionality. Here are the steps to do that:

Step 1: Go to menu File -> Export -> Layers to Files...

Fig 1: Export layers to files.

Step 2: After the "Export Layers to Files" dialog displays, select the settings like screen shot below:

Fig 2: Setting to export images.

Note that:

• File Name Prefix: this is the prefix of the file names after export. Example: the file name s should  be "Worm-Colored-xxx-xx1.png", "Worm-Colored-xxx-xx2.png", ..., "Worm-Colored-xxx-xxN.png".
• File Type: select "PNG-24" as you need the transparent background for each images. Otherwise, the images after exported will have a square shape with background and it is not good if you show these images in game.
• Trim Layers: is used to remove the blank space for each image

Fig 3: Trim Layers will cut all blank space.

Step 3: Verify your output folder, the exported circles of Worm will be there and their sizes are trimmed to match with the images.

Fig 4: Result after exporting the Photoshop layers.

OK, now we are all set for the preparing materials. In the next port, we will import these images to spine and make it animate.

If you have any questions or concerns, please post your comments here, I will take a look and response ASAP.

Yumiki.