Implement an animated button in cocos2d

Question

I want to clone the button animation effects found in Candy Crush Saga. And also I want to know how to make such a fluid and beautiful animations. Is this possible with Cocos2d-iPhone?

This is a link of the courage of Candy Crush:

http://www.youtube.com/watch?v=KAMUWIqYN24

Is this done using image sequences?

Answer 1

It is possible. Just run the animation on the buttons of a regular sprite.

GTAnimSprite *frame_normal = [GTAnimSprite spriteWithFile:@"play_button_normal.png"]; GTAnimSprite *frame_sel = [GTAnimSprite spriteWithFile:@"play_button_selected.png"]; frame_sel.color = ccc3(128,128,128); CCMenuItemSprite *plyBtn = [CCMenuItemSprite itemWithNormalSprite:frame_normal selectedSprite:frame_sel target:self selector:@selector(playBtnPress:) ]; plyBtn.position = ccp(size.width*0.77f, size.height*0.1f); CCMenu *menu2 = [CCMenu menuWithItems:plyBtn, nil]; menu2.position = ccp(0.0f,0.0f); [self addChild:menu2 z:2 ]; 

// Here is the class file: GTAnimSprite.h

 #import <Foundation/Foundation.h> #import "cocos2d.h" @interface GTAnimSprite : CCSprite { bool bouncing; float counter; } @end 

// Here is the class file: GTAnimSprite.mm

 #import "GTAnimSprite.h" @implementation GTAnimSprite -(void)onEnter { [super onEnter]; counter = 0.0f; bouncing = true; [self scheduleUpdate]; } -(void)update:(ccTime)dt { if (bouncing) { counter += dt; self.scaleX = ( (sin(counter*10) + 1)/2.0 * 0.1 + 1); self.scaleY = ( (cos(counter*10) + 1)/2.0 * 0.1 + 1); if (counter > M_PI*10){ counter = 0; } } } -(void)onExit { [self unscheduleUpdate]; [super onExit]; } @end 

HERE A SOURCE FOR USING XCODE: https://www.box.com/s/52i4xyznetyyc329evcu

Answer 2

Here is how I do it using CCActions

First I define CCAction:

  id scaleHorDown = [CCScaleTo actionWithDuration:duration * 5/30.f scaleX:0.75f scaleY:1.0f]; id scaleHorBouncing = [CCEaseBounceIn actionWithAction:scaleHorDown]; id scaleVerDown = [CCScaleTo actionWithDuration:duration * 5/30.f scaleX:1.0f scaleY:0.65f]; id scaleVerBouncing = [CCEaseBounceInOut actionWithAction:scaleVerDown]; id shrink = [CCSequence actions:scaleHorBouncing,scaleVerBouncing, nil]; id swell = [CCScaleTo actionWithDuration: duration * 15/30.f scale:1.10f]; id swellEase = [CCEaseElasticOut actionWithAction:swell]; id resetScale = [CCScaleTo actionWithDuration:duration * 5/30.f scale:1.0f]; id resetScaleBouncing = [CCEaseInOut actionWithAction:resetScale]; id buttonAction = [CCSequence actions: shrink, swellEase, resetScaleBouncing, nil]; 

Then I start the animation on the desired sprites when CCMenuItem is initialized

 CCMenuItem aMenuItem = [CCMenuItemSprite itemFromNormalSprite:buttonNormalSprite selectedSprite:buttonSelectedSprite block:^(id sender) { //play animation highlighting button [buttonSelectedSprite runAction:buttonAction]]; }}]; 

In my case, I only run the animation when I click the button.