9
\$\begingroup\$

I'm new to Cocos2d-x and looking for a good way/tutorial on how to play animations in Cocos2d-x.

\$\endgroup\$
1

4 Answers 4

9
\$\begingroup\$

Sprite animation is pretty simple. You just create a CCAnimation node, add the images to loop, then create an action using CCAnimate::actionWithDuration(float, CCAnimation, bool) and make the sprite run it.

Example:

CCAnimation * anim = CCAnimation::animation();
// There are other several ways of storing + adding frames, 
// this is the most basic using one image per frame.
anim->addFrameWithFileName("bear1.png");
anim->addFrameWithFileName("bear2.png");
anim->addFrameWithFileName("bear3.png");
anim->addFrameWithFileName("bear4.png");
anim->addFrameWithFileName("bear5.png");
anim->addFrameWithFileName("bear6.png");
anim->addFrameWithFileName("bear7.png");
anim->addFrameWithFileName("bear8.png");

CCAnimate *theAnim = CCAnimate::actionWithDuration(1.8f,anim,true); 
// Duration, animation action and bool to return to frame 1 after finishing.

CCSprite *bear = CCSprite::spriteWithFile("bear1.png");
addChild(bear,0); //Don't forget to add any sprite you use as a child to the CCLayer!
bear->runAction(theAnim);   
\$\endgroup\$
6
  • \$\begingroup\$ Thanks but what is HelloWorld::getPlayer() ? I'm getting a crash on iPhone simulator on adding runAction(laanim); to my code. \$\endgroup\$
    – 2600th
    Mar 14, 2012 at 14:40
  • \$\begingroup\$ You can use a sprite or any other node you want, I have a method that returns a static sprite called _player that I have previously initialized. \$\endgroup\$ Mar 14, 2012 at 14:44
  • \$\begingroup\$ I edited it for clarity now :) You are welcome. \$\endgroup\$ Mar 14, 2012 at 14:48
  • \$\begingroup\$ CCAnimate *theAnim = CCAnimate::actionWithDuration(1.8f,anim,true); doesn't work with the current version of cocos2d-x. What has to be changed? \$\endgroup\$
    – Ben
    Aug 8, 2012 at 18:57
  • \$\begingroup\$ Probably, they revamped a lot of stuff lately. Dunno what now, just check their documentation and maybe you need one parameter more/less. \$\endgroup\$ Aug 14, 2012 at 15:58
5
\$\begingroup\$

In new version of CoCos2dx (2.1.1) you can use (it's working)

CCSpriteFrameCache* cache = CCSpriteFrameCache::sharedSpriteFrameCache();
cache->addSpriteFramesWithFile("numbers.plist","numbers.png");

CCSprite* sprite = CCSprite::createWithSpriteFrame(CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName("slice2_0_0.png"));
sprite->setPosition(ccp(GameScene::windowSize.width/2,GameScene::windowSize.height/3));

CCSpriteBatchNode* spriteBatchNode = CCSpriteBatchNode::create("numbers.png");
spriteBatchNode->addChild(sprite);
addChild(spriteBatchNode);

CCArray* animFrames = CCArray::createWithCapacity(10);

char str[100] = {0};
for(int i = 0; i < 10; ++i)
{
    sprintf(str, "slice2_0_%d.png", i);
    CCSpriteFrame* frame = cache->spriteFrameByName( str );
    animFrames->addObject(frame);
}
CCAnimation* animation = CCAnimation::createWithSpriteFrames(animFrames,1.f);
sprite->runAction(CCAnimate::create(animation) );
\$\endgroup\$
1
  • \$\begingroup\$ There's an edit to this question in the edit review queue which renames spriteWithSpriteFrame to createWithSpriteFrame. I don't know enough Cocos2D to tell if it is an improvement. Would the edit improve this answer? \$\endgroup\$
    – Anko
    Mar 15, 2013 at 13:01
2
\$\begingroup\$

If you don't want to use a .plist file and want to continue with the Ef Es's answer with the current version of cocos2d-x, just change some lines as below:

    CCSprite * sprite  = CCSprite::create("bear1.png"); // NEW - create a sprite here
    CCAnimation * anim = CCAnimation::animation();
    // There are other several ways of storing + adding frames, 
    // this is the most basic using one image per frame.
    anim->addSpriteFrameWithFileName("bear1.png");
    anim->addSpriteFrameWithFileName("bear2.png");
    anim->addSpriteFrameWithFileName("bear3.png");
    anim->addSpriteFrameWithFileName("bear4.png");
    anim->addSpriteFrameWithFileName("bear5.png");
    anim->addSpriteFrameWithFileName("bear6.png");
    anim->addSpriteFrameWithFileName("bear7.png");
    anim->addSpriteFrameWithFileName("bear8.png");

    anim->setLoops(-1); // for infinit loop animation
    anim->setDelayPerUnit(0.1f); //Duration per frame
    //CCAnimate *theAnim = CCAnimate::actionWithDuration(1.8f,anim,true); // this wont work in newer version..

    sprite->runAction(CCAnimate::create(anim) );
    sprite->setPosition(ccp(200,200)); //set position of sprite in some visible area

    this->addChild(sprite, 1); // cross check the Z index = 1 with your code

I think this can be the solution for Ben's question also.

\$\endgroup\$
0
\$\begingroup\$

For cocos2dx-v3, you'll need something like this:

auto cache = SpriteFrameCache::getInstance();
Vector<SpriteFrame*> frames = Vector<SpriteFrame*>();

frames.pushBack(cache->getSpriteFrameByName("open.png"));
frames.pushBack(cache->getSpriteFrameByName("closed.png"));
frames.pushBack(cache->getSpriteFrameByName("closed.png"));
cocos2d::Animation* anim = cocos2d::Animation::createWithSpriteFrames(frames, 0.1f, 1);

cocos2d::Animate* anim_action = cocos2d::Animate::create(anim);
//sprite is already added to scene elsewhere and ready to go
this->sprite->runAction(RepeatForever::create(anim_action));

Wasn't able to get any other way going. You're also able to re-add the same frames over and over again to introduce a pause, but I'm sure there's another way of doing that too.

\$\endgroup\$
1
  • \$\begingroup\$ Can you tell me how you would run the same animation, but with the sprites flipped horizontally ? I've been struggling with this for a while now, and setFlippedX(true) doesn't seem to do it... \$\endgroup\$ May 22, 2018 at 10:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .