[How to] Bring a Sprite Animation from CocosStudio into Cocos2dx

cocos2d-x C++
1

Hi!

I’m very nw to Cocos2dx, Cocos Studio, and game delevopment in general, but have some background with c++. My goal was to create a sprite animation within Cocos Studio and use that within Cocos2dx. Since finding information on how to do that was quite hard I decided to write down my solution, hoping it will help others.

I use: Windows 7, Cocos Studio 2.3.2, Cocos2dx 3.8.1

  1. Use Cocos Studio to create an animation.
    (like this: http://www.sonarlearning.co.uk/coursepage.php?topic=game&course=cocos-studio&videoindex=6477#6477)

  2. Export it. Within Cocos Studio, click of “Project” -> “Publish and Package”.
    The settings should be fine by default. Just remember the publish directory.
    The default is:
    Publish Content = Resource and Project File
    Data Format = csb File

Click OK. Set “Publish Type” to “Publish Resource”. Click OK. Now within the publish directory there should be 3 new files. *.csb, *.plist, *.png For the sake of this explanation let’s say their names are animation.csb, warrior.plist, warrior.png, though only the name of the csb file is important.

  1. Copy the published files into your resource folder of your cocos2dx project. Let’s say, into MyCocosProject/Resources/MyAnimation.

  2. Within your Cocos2dx code we have to let Cocos know the location of the files. Just creating a node with “MyAnimation/animation.csb” is not enough, since it won’t find the .png and .plist files otherwise. Besides that, I use CSLoader to create the right node and the animation. Following are my header and source could that should be working at it is.

Header “Animation.h”

#ifndef __ANIMATION_H__
#define __ANIMATION_H__

#include "cocos2d.h"

class AnimationScene : public cocos2d::Layer
{
public:
    static cocos2d::Scene* createScene();

    virtual bool init();
    
    CREATE_FUNC(AnimationScene);
};

#endif // __ANIMATION_H__

Source “Animation.cpp”

#include "Animation.h"
#include "editor-support/cocostudio/CocoStudio.h"

USING_NS_CC;

Scene* AnimationScene::createScene()
{
    // 'scene' is an autorelease object
    auto scene = Scene::createWithPhysics();
    
    // 'layer' is an autorelease object
    auto layer = AnimationScene::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool AnimationScene::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

    // get screen info
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

    // adjust the search path
    FileUtils::getInstance()->addSearchPath("Animation");

    // create and place the node
    std::string filename = "animation.csb";
    Node* node = CSLoader::createNode(filename);
    node->setPosition(Point(
        origin.x + visibleSize.width / 2,
        origin.y + visibleSize.height / 2));

    // create the animation and add it to the node
    cocostudio::timeline::ActionTimeline* action = 
        CSLoader::createTimeline(filename);
    node->runAction(action);

    // start the animation (and enable loop)
    action->gotoFrameAndPlay(0, true);

    this->addChild(node);

    return true;
}

Of course, adjusting the search path could also be done in AppDelegate.

I hope this helps some people who are struggling as I was.

1 Like