Internship Small white:: Cocos2d-x 3.0 Development (vii) Processing Cocostudio export animation in the program

1. Overview

Using Cocostudio makes it easy to animate, and the next task is to use the animated animation in our program. In this article, I'm going to use a program to connect two animations together. There is a picture of the truth:

2. Making animations

To undertake the previous one, we will make an animation. The method of making animation with no difference before, not too familiar with the classmate can see: Cocos2d-x 3.0 Development (vi) use Cocostudio to create a skeletal animation. In the action list, right-click, add animation, and edit.

The end point of our newly created animation is coincident with the starting point of the animation in the previous article, so that the screen will not bounce when connected.

After making it, we'll export the animation.

3. Making UI

Since I can easily make the UI, I have made a UI that controls the animation playback. The production method was mentioned before. There's no difference. Use the UI editor to make the UI and export it.

4. Link to Project

Run the script to create our project, put the exported animation, the UI into the resource folder.

Then rewrite the Init method:

[CPP]View Plaincopyprint?

2. BOOL Helloworld::init ()
4. {
6. //////////////////////////////  
8. //1. Super init First
10. if (! Layer::init ())
12. {
14. return false;
16. }
20. Size visiblesize = director::getinstance ()->getvisiblesize ();
22. Point origin = Director::getinstance ()->getvisibleorigin ();
26. Auto UI = dynamic_cast<layout*> (ccuihelper->createwidgetfromjsonfile ("Controlui.exportjson"));
28. Ui->getchildbytag (ui_button_play1)->addtoucheventlistener (This, Toucheventselector (HelloWorld::  Touchcallback));
30. Ui->getchildbytag (Ui_button_play2)->addtoucheventlistener (This, Toucheventselector (HelloWorld::  Touchcallback));
32. Ui->getchildbytag (Ui_button_conn)->addtoucheventlistener (This, Toucheventselector (HelloWorld::  Touchcallback));
34. Ui->getchildbytag (Ui_button_disconn)->addtoucheventlistener (This, Toucheventselector (HelloWorld::  Touchcallback));
38. Auto Uilayer = Uilayer::create ();
40. Uilayer->addwidget (UI);
42. This->addchild (Uilayer);
46. return true;
48. }
52. void Helloworld::touchcallback (object* obj,toucheventtype type)
54. {
56. //will Play
58. }

5. Loading animations

The exported file for the animation is also a JSON. The load is encapsulated into a armature object. Armature is a subclass of Nodergba, so it can be addchild directly to the parent node. The method used in the Armaturemanager is loaded. It is a singleton that manages the armature in the entire scene. The animation we edited in the editor is animation, which is encapsulated in the armature. So this is a three-storey structure. Armaturemanager is the largest, then armature, and finally animation. We play the animation with the method in animation.

Having said the principle, let's take a look at the code. First, add the load armature in init.

[CPP]View Plaincopyprint?

1. Armaturedatamanager::getinstance ()->addarmaturefileinfo ("Myanimation.exportjson");
2. armature* armature = armature::create ("myanimation");
3. Armature->settag (am_myanimation);
5. Armature->setposition (Point (origin.x + VISIBLESIZE.WIDTH/2,
6. ORIGIN.Y + VISIBLESIZE.HEIGHT/2));
7. This->addchild (armature);

Then override the Touchcallback method to control the playback animation.

[CPP]View Plaincopyprint?

2. void Helloworld::touchcallback (object* obj,toucheventtype type)
4. {
6. Auto UIBT = dynamic_cast<uibutton*> (obj);
8. if (!UIBT)
10. {
12. return;
14. }
16. int tag = Uibt->gettag ();
18. Auto armature = (armature*) getchildbytag (am_myanimation);
20. switch (type)
22. {
24. Case toucheventtype::touch_event_ended:
26. if (tag = = ui_button_play1)
28. {
30. Armature->getanimation ()->play ("hit");
32. }
34. Else if (tag ==ui_button_play2)
36. {
38. Armature->getanimation ()->play ("Fall");
40. }
42. Else if (tag = = ui_button_conn)
44. {
46. //will Conn
48. }
50. Else if (tag = = ui_button_disconn)
52. {
54. //will Dis Conn
56. }
58. Break ;
60. Default:
62. Break ;
64. }
66. }

6. Handling Animated Events

In Animation There is the concept of animated events, each beginning and ending of an animation event. All we need to do is listen to the event and write a response function for it.

So next we refine the Touchcallback function and add a listener function.

[CPP]View Plaincopyprint?

2. //......
4. else if (tag = = Ui_button_conn)
6. {
8. Armature->getanimation ()->setmovementeventcallfunc (this,movementevent_selector (HelloWorld::  Movementcallback));
10. }
12. else if (tag = = Ui_button_disconn)
14. {
16. Armature->getanimation ()->setmovementeventcallfunc (this,nullptr);
18. }
20. //......
24. void Helloworld::movementcallback (armature * armature, Movementeventtype type, const char * name)
26. {
28. if (type = = complete)
30. {
32. if (strcmp (name,"Fall") = = 0)
34. {
36. armature* arm = (armature*) getchildbytag (am_myanimation);
38. Arm->getanimation ()->play ("hit");
40. }
42. }
44. }

Compile and run, you can see the animation is connected together.

7. Summary

load the animation by Armaturedatamanager the Singleton to associate it with the program. The listener of an animated event, which processes the behavior of the animation. Using these methods, we can flexibly use the animation created by Cocostudio.

Demo Download: http://download.csdn.net/detail/fansongy/6439225

This blog from the Asura road , reproduced please indicate the source, prohibited for commercial use: http://blog.csdn.net/fansongy/article/details/12955989

Internship Small white:: (EXT) Cocos2d-x 3.0 Development (vii) Processing Cocostudio export animation in the program