Cocos2D Buttons Tutorial for iOS: How To Create Buttons in Cocos2D: Simple, Radio, and Toggle

Radio Buttons

A third common type of button that you might need in your iPhone projects are radio buttons. I found I needed some radio buttons for a game I was working on, but didn’t see an implementation for radio buttons in the Cocos2D source, so wrote an implementation of my own. While I was writing this article I came across two other guys who wrote implementations for radio button support in Cocos2D as well – so it looks like this will find its way into the Cocos2D source soon.

But it’s not in there yet, so in the meantime feel free to use the implementation I wrote or the ones I referenced above. For the purpose of this Cocos2D buttons tutorial, let’s implement radio buttons using the implementation I wrote. First, download CCRadioMenu.h and CCRadioMenu.m and drag them to the Classes directory of your project (making sure “Copy items into destination group’s folder (if needed)” is checked). Then add the following import to the top of HelloWorldScene.m:

#import "CCRadioMenu.h"

And the following to your init method after you add the toggle menu to the scene:

CCMenuItem *menuItem1 = [CCMenuItemImage itemFromNormalImage:@"Button1.png" 
  selectedImage:@"Button1Sel.png" target:self selector:@selector(button1Tapped:)];
CCMenuItem *menuItem2 = [CCMenuItemImage itemFromNormalImage:@"Button2.png" 
  selectedImage:@"Button2Sel.png" target:self selector:@selector(button2Tapped:)];
CCMenuItem *menuItem3 = [CCMenuItemImage itemFromNormalImage:@"Button3.png" 
  selectedImage:@"Button3Sel.png" target:self selector:@selector(button3Tapped:)];
CCRadioMenu *radioMenu = 
  [CCRadioMenu menuWithItems:menuItem1, menuItem2, menuItem3, nil];
radioMenu.position = ccp(120, 180);
[radioMenu alignItemsHorizontally];
radioMenu.selectedItem = menuItem1;
[menuItem1 selected];
[self addChild:radioMenu];

We create the CCMenuItemImages like usual, but instead of adding them to a CCMenu we add them to the new CCRadioMenu class. This class makes sure only one is selected at a time. We also set the first item to be selected by default at start.

The other new thing here is we call alignItemsHorizontally on the menu to take advantage of the neat auto-layout capability in Cocos2D. Note that the items will be laid out with respect to the center of the menu. Therefore, we can no longer center the menu at position (0, 0) – we have to move the center up and to the right a bit where we want the items to display.

One last thing to add – the callback methods as usual:

- (void)button1Tapped:(id)sender {
  [_label setString:@"Last button: 1"];
}

- (void)button2Tapped:(id)sender {
  [_label setString:@"Last button: 2"];
}

- (void)button3Tapped:(id)sender {
  [_label setString:@"Last button: 3"];
}

Once you compile and run this you should see something like the following:

Behind The Scenes

If you look at how the menu system is implemented, you will note that menu items are CCNodes, but a Menu is a CCLayer. According to the Cocos2D best practices, you shouldn’t create a big hierarchy of layers, and should keep the count as low as you can.

So this means you probably should combine as many menu items into a single menu layer as you can. Also since a Menu derives from CCLayer you can’t make it run actions such as MoveTo, etc. I only mention this because I tried to move a whole menu of items when I was first starting and was wondering why it didn’t work :] Update: Eric from the comments below pointed out that CCLayer derives from CCNode, so you can run actions on it if you need to. Something else must have been going on when I was playing with it earlier, thanks Eric! :]

And That’s A Wrap!

Here’s a project with all of the code from the above tutorial.

Hope this was of use, and if you have any other cool tips about Buttons in Cocos2D please let me know!