Cocos2d CCMenuItem animation upon selection

Question

I have a CCMenu with 5 CCMenuItems. When the user touches a menu item, I want the menu item to move to the right 10 pixels, to distinguish it from the others. I tried making each menu item a global variable so I could say: if (item.isSelected) { [item runAction:blah]; } But this didn't do anything. This is my code so far:

CCLabelTTF *sin = [CCLabelTTF labelWithString:@"Single Player" dimensions:labelSize alignment:UITextAlignmentLeft fontName:font fontSize:20];
item1 = [CCMenuItemLabel itemWithLabel:sin target:self selector:@selector(goToSinglePlayer:)];

CCLabelTTF *spl = [CCLabelTTF labelWithString:@"Splitscreen" dimensions:labelSize alignment:UITextAlignmentLeft fontName:font fontSize:20];
item2 = [CCMenuItemLabel itemWithLabel:spl target:self selector:@selector(goToSplitscreen:)];

CCLabelTTF *ach = [CCLabelTTF labelWithString:@"Achievements" dimensions:labelSize alignment:UITextAlignmentLeft fontName:font fontSize:20];
item3 = [CCMenuItemLabel itemWithLabel:ach target:self selector:@selector(goToAchievements:)];

CCLabelTTF *str = [CCLabelTTF labelWithString:@"Store" dimensions:labelSize alignment:UITextAlignmentLeft fontName:font fontSize:20];
item4 = [CCMenuItemLabel itemWithLabel:str target:self selector:@selector(goToStore:)];

CCLabelTTF *set = [CCLabelTTF labelWithString:@"Settings" dimensions:labelSize alignment:UITextAlignmentLeft fontName:font fontSize:20];
item5 = [CCMenuItemLabel itemWithLabel:set target:self selector:@selector(goToSettings:)];

CCMenu * mainMenu = [CCMenu menuWithItems:item1, item2, item3, item4, item5, nil];

[mainMenu setColor:ccBLACK];
[mainMenu alignItemsVerticallyWithPadding:10];
mainMenu.position = ccp(90, 90);

[self addChild:mainMenu];

if (item1.isSelected) {
    [item1 runAction:[CCMoveTo actionWithDuration:1.0f position:ccp(120, 90)]];
}

My question is: how can I achieve the effect I mentioned earlier? I want the selected CCMenuItem to move out to the right 10 pixels when the user touches it but doesn't release, and then go back to its normal position when the touch leaves that menu item. Also, where should I put this animation code? In my init function? Thanks for the help

Answer 1

If you want to change the 'out of the box' behaviour of the CCMenuItemLabel object, you will need to sub-class that specific class of cocos2d. The methods you will need to override are

-(void) selected{
    // coco's default is to scale up by 10%
    // place your code to displace the label.
    self.position=ccp(self.position.x-10,self.position.y);
}

-(void) unselected{
   // coco's default is to bring back scale to originalScale.
   self.position=ccp(self.position.x+10,self.position.y);
}

The 'selected' method is called when the finger touches the label. The 'unselected' method is called when the finger is lifted or is dragged outside the label. I have just shown you a basic (very) approach to selected/unselected behaviour, experiment with it. There are timing issues involved. I would avoid the use of animations as a first attempt as this. Look at the code in CCMenuItemLabel class if you want an example with animation.

Answer 2

Check the following tow line of code:

    CCMenuItem *item31 = [CCMenuItemImage itemFromNormalImage:@"btn_on.png" selectedImage:@"btn_on_hover.png"];
    CCMenuItem *item32 = [CCMenuItemImage itemFromNormalImage:@"btn_off.png" selectedImage:@"btn_off_hover.png"];

• As in the above code you can adjust btn_on_hover.png such a way that it look like has offset of 10px to right side or where ever you want.
• You can Achieve your task by many ways as cocos2d is open source. check CCMenu.h class. you can modify class as per your requirement.

• for example you can do changes in following code fragment in CCMenu.h class.

      #pragma mark Menu - Touches
      #ifdef __IPHONE_OS_VERSION_MAX_ALLOWED
  

Let me know in case of any queries. Regards, Neil.