Import Spine Animation in Cocos2d-x (Part 9): Import Animation to Cocos2d-x game.

Before taking a look on this post, please refer to the first post to create a worm sprite: Part 1; Part 2, Part 3, Part 4, Part 5. Part 6, Part 7, Part 8.

This is the final part of series "Import Spine Animation in Cocos2d-x". I will use the materials which we made from previous post to import to Cocos2d-x and make it animate. I am going to use Visual Studio 2015 to code and build game. I created a project "YumikiTutorial" from Cocos console. To open the VS 2015 cocos2d-x solution in relative path "..\YumikiTutorial\proj.win32" and open "YumikiTutorial.sln". After opening this, VS will display the projects like this:

Fig 1. Whole Cocos2d-x project in Visual Studio 2015.

Open the AppDelegate.cpp, find and comment the code lines like screen shot below:

Fig 2. Comment all unnecessary code lines.

Add this code line to bottom of the code lines which you commented above:

glview-setFrameSize(800, 600);

Fig 3. Set screen size of game to 800 x 600.

Open "HelloWorldScene.cpp", insert these codes in the end of "HelloWorld::init()" method:

spine::SkeletonAnimation* player = spine::SkeletonAnimation::createWithFile("skeleton.json", "skeleton.atlas");
player->setScale(0.5f);
player->setSkin("default");
player->addAnimation(0, "animation", true);
player->setPosition(Vec2(visibleSize.width + origin.x, visibleSize.height / 2 + origin.y));
this->addChild(player, 2);
MoveTo* moveTo = MoveTo::create(20, Vec2(0 + origin.x, player->getPositionY()));
player->runAction(moveTo);

Fig 4. Add those codes in the end of init method.

That's it. You can see that in code, we will create a sprite object which is defined by the position of image and declared in json and atlas. Now you build and run the game, you can see that the worm will move from right to left with animation:

Fig 5. The worm sprite is moving with animation.

There are many interesting things need to explore in Spine and Cocos2d-x. And I hope this topic can help you to understand the basic and base on this to have some advance research and share your knowledge to everyone.

If you are interested in my posts, please like and follow to have my further posts' notification. Thank you!

Yumiki.

Import Spine Animation in Cocos2d-x (Part 8): Export Spine to JSON and Atlas files.

Before taking a look on this post, please refer to the first post to create a worm sprite: Part 1; Part 2, Part 3, Part 4, Part 5. Part 6, Part 7.

Now, I am going to export the Animated Worm to the JSON and Atlas files.

Step 1: Select "Export..." option in Spine menu...

Fig 1. Select "Export..." in Spine menu.

Step 2: Select the options like screen shot below, make sure that you tick "Create atlas" option.

Fig 2. Settings in "Export" dialog.

 Step 3: Click on "Export" and it will export the Worm object to output. If you export it successfully, it will display these messages in the bottom-left corner.

• "JSON export complete".
• "Paking complete".

Fig 3. Messages to inform you the result.

In the output, you will see there are 3 files:

• skeleton.atlas
• skeleton.json
• skeleton.png

They were named "skeleton" because in Hierarchy panel, the images all are put into "skeleton" parent node. And also note that the animation which we made willbe named as "animation", you can change it to any name you want.

Figs 4. Highlights are the name which you can change to another one.

We almost complete this "Import Spine Animation in Cocos2d-x" topic. In the last part, I will continue to add the JSON and Atlas to Cocos2d-x. To be published soon!

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

Yumiki.

Import Spine Animation in Cocos2d-x (Part 7): Animate with Spine (cont. 2).

Before taking a look on this post, please refer to the first post to create a worm sprite: Part 1; Part 2, Part 3, Part 4, Part 5. Part 6.

In the previous post. I did create the bones and attached them to the body parts of the Worm. Then setting the key-frame for frame 0. I continue making animation for other frames in this post.

Step 1: Move the blue triangle pointer to frame 15, make sure that you select the option "Auto Key".

Fig 1. Move to frame 15 and select "Auto Key".

Step 2: Select the top node of the "body1" bone.

Fig 2. Select node of "body1" bone,

Step 3: Transform it to another position by dragging and moving it. Perform the similar step for other body bones. Here is the result:

Fig 3. Result after transform the bones to other position.

Step 4: Look at the keys in "Transform" panel. Make sure they keys are turned to Red.

Fig 4. Keys must be turned to Red to track the state of transforming of bones.

Step 5: Select frame 0 and select "Pose" option in "Tool" panel and press "Ctrl + C" to copy all keys in frame 0.

Fig 5. Select frame 0 and select "Pose".

Step 6: Move to frame 30 and press "Ctrl + V" to paste the frame 0's keys to frame 30.

Fig 6. Move to key 30 and paste the keys of frame 0 to frame 30.

Step 7: Select the "Repeat" button and press "Play" button to check the animation.

Fig 7. Play animation in Repeat mode.

Step 8: Here is the result:

Fig 8: The worm is moving now :).

I did make the worm's animation with some simple steps. In the next post, we will export the worm to files and import to Cocos2d-x, then write some code lines to make it move on game screen.

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

Yumiki.

Import Spine Animation in Cocos2d-x (Part 6): Animate with Spine (cont. 1)

This is the 6th 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, Part 4, Part 5.

In this part 6, I continue showing you to create the animation in Spine 2D Animation. After this post, I believe that you will understand how to create bones, rename them and set the key-frame for them. Here we go!

Step 1: In the "Tool" at the bottom, select "Create" option to create bones.

Fig 1. Select "Create" option.

Step 2: Move the mouse pointer to the position of the head like screen shot below and then click to create the root bone (the blue cross).

Fig 2. Move pointer to create root bone.

Step 3: Then drag the pointer from right side to left to create the head bone.

Fig 3. Drag mouse to left side to create head bone.

Step 4: Make the same for the body parts.

Fig 4. Drag to right to make the bones for the other parts.

Step 5: Rename the bone in Hierarchy panel like screen shot below:

Fig 5. Rename bones.

Step 6: Drag each image in "root" node to appropriate bone

Fig 6. Drag images to the bones.

If you go to this step, it means you are all set to create animation,

Step 7: Click on the "SETUP" to toggle to Animation mode.

Fig 7. Click "SETUP" to switch to Animation mode.

Step 8: Select "Pose" option in "Tools" panel at the bottom of screen. This "Pose" option will help you to select all bones in Working Area.

Fig 8. Select "Pose" option.

Step 9: Select all bones in Working Area by dragging the mouse pointer to select all.

Fig 9. Select all bones.

Step 10: Select the "Key" buttons to Red to record the state of bones.

Fig 10. Select the keys to record the state of all bones.

Now, you will see in the "Dopesheet", there is a red round point in the key-frame 0. In the next post, I will continue make the bones move to create animation.

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

Yumiki.

Import Spine Animation in Cocos2d-x (Part 5): Animate with Spine

This is the 5th 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, Part 4.

In this part 5, I am going to show you to create the animation in Spine 2D Animation.

Step 1: First of all, I create a new project by clicking on the "Spine" logo in the top-left corner. Select "New Project" on the menu.

Fig 1: Create new project in Spine.

Step 2: Then in the right panel, select "Image" node in "Hierarchy" and then click on "Browse" button. Finally, select the folder which contains the worm images which we exported from each layer in Part 4.

Fig 2: Click Browse on Image node.

Step 3: All worm parts will be loaded in Images folder node.

Fig 3: All images are loaded to Image folder.

Step 4: Use mouse Drag and drop all images to Editor area.

Fig 4: All parts of Worm are dragged and dropped to Working area.

Before we continue making it animate, I think it is better to introduce a little bit the Spine GUI.

Fig 5: Introduce Spine GUI.

Here are the basic you need to know before working with Spine:

1. Menu - Including Create new Menu, export to output.
2. Setup - Is use to switch between Image Editor mode and Animation mode.
3. Working Area - Here you can move, resize, rotate, set order and make animation for images.
4. root node - The objects in this node will reflect the corresponding images in Working Area. Some times, you have too much images and it is hard to select object in Working Area, you can select in root node instead.
5. Draw Order - To order the image. You can see worm in screen shot does not correct about the body parts. I need to correct it later.
6. Images folder - Contains the images which will use to drag and drop to working area.
7. Animations - To manage the action of character such as Running, Jumping, Walking, Fighting etc.
8. Rotate, Translate and Scale - are used to modify the images to the correct places.

The other things, I think it would be better if you can find out by your self :).

The final step in part 5: Drag each image up or down in Draw Order to make the worm has the proper body.

Fig 6: Order the parts of Worm's Body.

I think part 5 is quite long now and if continue, you may lost concentration for some information. So we will continue adding bone in the next tutorial.

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

Yumiki.

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.

Import Spine Animation in Cocos2d-x (Part 3): Color images in Adobe Photoshop

This is the third 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

In the previous post, I did import the circles to the appropriate layers. And in this post, I continue coloring image for each layers step by step.

Step 1: Select layer "Head", and invisible the other layers.

Fig 1: Invisible all layers: Body 1 to Body 4.

Step 2: Select "Magic Wand Tool".

Fig 2: Select "Magic Wand Tool".

Step 3: Click on the big circle area to make selection.

Fig 3: Select "Head" circle.

Step 4: Select "Paint Bucket Tool" to color.

Fig 4: Select "Paint Bucket Tool".

Step 5: Click on "Color Picker" and select green color to paint.

Fig 5: Pick Green color to fill to circle.

Step 6: Click into selection area , it will paint the green color to circle.

Fig 6: Result after filling color to selection.

Step 7: Repeat step 5 with lighter green color. Then select "Brush Tool".

Fig 7: Select "Brush Tool".

Step 8: Select the setting of Brush like the screen shot below.

Fig 8: Change size and hardness of Brush.

Step 9: Then paint that lighter color on the top-right of circle. Here is the result:

Fig 9: Paint the light shadow to circle.

Step 10: Repeat step 7, 8 and 9 with darker green. And we have a head of worm with green and light/dark shadow.

Fig 10: Paint the dark shadow to circle.

Now, you did know how to color the image with shadow, then use the same steps above to color the eye and other circles. Here we have the final result:

Fig 11: Final result.

In the next post, we will continue to exporting these circles to png files to prepare for animation.

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

Yumiki.

Import Spine Animation in Cocos2d-x (Part 2): Import images in Adobe Photoshop

This is the second 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

In this post, I will import the circle which I created in first post to Adobe Photoshop. I am using Photoshop CC 2015. Of course, you can use the older or newer version of Photoshop to import the circles as the steps will be the same, not much changes among those versions regarding the UI.

Step 1: In Illustrator, select menu "File" -> "Export...", in "Save as type" dropdown, select "Photoshop (*.PSD)".

Step 2: In the next dialog, leave the default settings and click "OK".

Step 3: Open that exported file in Photoshop. Rename "Layer 1" to Head. Then Create more 4 layers, each layer will contains a circle. Name the circles' name to: Body1, Body2, Body3, Body4.

Step 4: Use "Lasso Tool" to select the second circle.

Step 5: Drag mouse to select around the second circle.

Step 6: Make sure that you are selecting the layer "Head", press Ctrl+X to cut it. Then select layer "Body1" and paste it. Now, the second circle are in layer "Body1". Do the same steps with the other circles. Here are the results after moving the circles to the proper layers:

In the next post, I will color these images to make the worm look better.

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

Yumiki.