9
\$\begingroup\$

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

\$\endgroup\$
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\$
  • \$\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 '12 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\$ – MLProgrammer-CiM Mar 14 '12 at 14:44
  • \$\begingroup\$ I edited it for clarity now :) You are welcome. \$\endgroup\$ – MLProgrammer-CiM Mar 14 '12 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 '12 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\$ – MLProgrammer-CiM Aug 14 '12 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\$
  • \$\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 '13 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\$
  • \$\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\$ – Kaizer Sozay May 22 '18 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.