Easy To Create Buttons with Cocos2D

October 8, 2009 Eric 25 comments

Those of you who use cocos2d a lot might understand why I created this class as some point. Hopefully it may save some of you those nasty 5 line blobs that you normally need to create a simple button. Usage is simple, just do:

[self addChild:[Button buttonWithText:@"back" atPosition:ccp(80, 50) target:self selector:@selector(back:)]];
[self addChild:[Button buttonWithImage:@"openFeint.png" atPosition:ccp(400, 50) target:self selector:@selector(openOpenFeint:)]];

You’ll need to create your own button.png and button_p.png (the second one is the image shown when you are touching the button). Also you’ll need to choose your own font. Here is the code…

//
//  Button.h
//  StickWars - Siege
//
//  Created by EricH on 8/3/09.
//
 
@interface Button : Menu {
}
+ (id)buttonWithText:(NSString*)text atPosition:(CGPoint)position target:(id)target selector:(SEL)selector;
+ (id)buttonWithImage:(NSString*)file atPosition:(CGPoint)position target:(id)target selector:(SEL)selector;
@end
 
@interface ButtonItem : MenuItem {
	Sprite *back;
	Sprite *backPressed;
}
+ (id)buttonWithText:(NSString*)text target:(id)target selector:(SEL)selector;
+ (id)buttonWithImage:(NSString*)file target:(id)target selector:(SEL)selector;
- (id)initWithText:(NSString*)text target:(id)target selector:(SEL)selector;
- (id)initWithImage:(NSString*)file target:(id)target selector:(SEL)selector;
@end

//
//  Button.m
//  StickWars - Siege
//
//  Created by EricH on 8/3/09.
//
 
#import "Button.h"
 
 
@implementation Button
+ (id)buttonWithText:(NSString*)text atPosition:(CGPoint)position target:(id)target selector:(SEL)selector {
	Menu *menu = [Menu menuWithItems:[ButtonItem buttonWithText:text target:target selector:selector], nil];
	menu.position = position;
	return menu;
}
 
+ (id)buttonWithImage:(NSString*)file atPosition:(CGPoint)position target:(id)target selector:(SEL)selector {
	Menu *menu = [Menu menuWithItems:[ButtonItem buttonWithImage:file target:target selector:selector], nil];
	menu.position = position;
	return menu;
}
@end
 
@implementation ButtonItem
+ (id)buttonWithText:(NSString*)text target:(id)target selector:(SEL)selector {
	return [[[self alloc] initWithText:text target:target selector:selector] autorelease];
}
 
+ (id)buttonWithImage:(NSString*)file target:(id)target selector:(SEL)selector {
	return [[[self alloc] initWithImage:file target:target selector:selector] autorelease];
}
 
- (id)initWithText:(NSString*)text target:(id)target selector:(SEL)selector {
	if(self = [super initWithTarget:target selector:selector]) {
		back = [[Sprite spriteWithFile:@"button.png"] retain];
		back.anchorPoint = ccp(0,0);
		backPressed = [[Sprite spriteWithFile:@"button_p.png"] retain];
		backPressed.anchorPoint = ccp(0,0);
		[self addChild:back];
 
		self.contentSize = back.contentSize;
 
		Label* textLabel = [Label labelWithString:text fontName:@"take_out_the_garbage" fontSize:22];
		textLabel.position = ccp(self.contentSize.width / 2, self.contentSize.height / 2);
		textLabel.anchorPoint = ccp(0.5, 0.3);
		[self addChild:textLabel z:1];
	}
	return self;
}
 
- (id)initWithImage:(NSString*)file target:(id)target selector:(SEL)selector {
	if(self = [super initWithTarget:target selector:selector]) {
 
		back = [[Sprite spriteWithFile:@"button.png"] retain];
		back.anchorPoint = ccp(0,0);
		backPressed = [[Sprite spriteWithFile:@"button_p.png"] retain];
		backPressed.anchorPoint = ccp(0,0);
		[self addChild:back];
 
		self.contentSize = back.contentSize;
 
		Sprite* image = [Sprite spriteWithFile:file];
		[self addChild:image z:1];
		image.position = ccp(self.contentSize.width / 2, self.contentSize.height / 2);
	}
	return self;
}
 
-(void) selected {
	[self removeChild:back cleanup:NO];
	[self addChild:backPressed];
	[super selected];
}
 
-(void) unselected {
	[self removeChild:backPressed cleanup:NO];
	[self addChild:back];
	[super unselected];
}
 
// this prevents double taps
- (void)activate {
	[super activate];
	[self setIsEnabled:NO];
	[self schedule:@selector(resetButton:) interval:0.5];
}
 
- (void)resetButton:(ccTime)dt {
	[self unschedule:@selector(resetButton:)];
	[self setIsEnabled:YES];
}
 
- (void)dealloc {
	[back release];
	[backPressed release];
	[super dealloc];
}
 
@end

Comments

Leave a comment Trackback

Written by Thom about 9 months ago. Reply

Hello,
I’ve tried your class and my app breaks at if(self = [super initWithTarget:target selector:selector]) in initWithImage.
I stepped though and it seems that my target has something wrong.
I add the buttonitem in a class which derived from Layer. Do I have to add sth special to this class?
Thanks
Thom
- Written by Eric about 9 months ago. Reply
  
  Look at Button.h, these lines in particular:
  
  @interface Button : Menu {
  @interface ButtonItem : MenuItem {
  
  You need to subclass the Menu and MenuItem classes, not Layer.
  - Written by Thom about 9 months ago. Reply
    
    Yeah I know that but the button you had them to a layer no? when you do self addchild
- Written by Eric about 9 months ago. Reply
  
  Oh, I see what you mean now. All you do is add the Button class to your class which derived from layer, and make sure you implement the callback method in that class.
  
  So for example, the first line of code:
  [self addChild:[Button buttonWithText:@"back" atPosition:ccp(80, 50) target:self selector:@selector(back:)]];
  
  put that in your gameLayer, and make sure to have a method in that layer
  
  - (void)back:(id)sender {
  
  }
  - Written by Thom about 9 months ago. Reply
    
    Oh Brillant it’s working now
    Thanks a lot for the help
Written by Avery about 9 months ago. Reply

This seems like a very helpful class, but I can’t seem to get it to work. I believe that I am having the same problem, the person above had. Unfortanetely, I am still a little hairy on what exactly to do based on what you told him. Should I just extract the specific functionality code and add it to my existing layer class and implementation?

Thanks for this page.
- Written by Eric about 9 months ago. Reply
  
  Look at the comments at the top of each ‘block’ of code…just create a Button.h and Button.m file, drop all the code in them from the correct box above, and then import Button.h in your own existing layer and use the top two lines in your layer to add a button.
Written by Matt Rix about 9 months ago. Reply

Hey, I’m a little late to this, but just out of curiosity: why wouldn’t you just switch the texture of one sprite between the button and button_p textures, instead of actually making a different Sprite for each state?

I made a similar button class a little while ago, but I thought that it’d be more efficient to just swap the texture, but now I’m not sure which is faster? any idea?
- Written by Eric about 9 months ago. Reply
  
  I don’t know which would be faster (probably just switching the textures) but I really doubt it makes any big performance difference. I use this code only in menus, where I’m not really concerned about it much. And one more sprite wont make it that much worse.
Written by xuzhao about 9 months ago. Reply

Hey,I just import your code to my cocos2d project,after compile, I have 17 warning and 7 error,I dont know why? I ‘m not use that button instance now.
- Written by Eric about 9 months ago. Reply
  
  You have the change the name of your font and button images. As far as warnings and errors, you shouldn’t get those if you import correctly. What are the errors?
Written by xuzhao about 9 months ago. Reply

Thank you for your reply! Now I compiled success.

But when I run it, I got a error and break.
the error is:
_CFGetHostUUIDString: unable to determine UUID for host. Error: 35

I dont know why?
- Written by Eric about 9 months ago. Reply
  
  I doubt that bug is coming from the code listed above. I’m not sure what is causing is though.
Written by Tushar about 9 months ago. Reply

I am able to see the button on the layer when I start the application…But there is no effect after I click on it…What I understand and correct me if I am wrong …is that the onSelect function should get called…but when I put a break point here it is not coming to this function. I am a newbie at COCOS2D so please help me!!
- Written by Eric about 9 months ago. Reply
  
  You need to use two different images, button.png and button_p.png. The second image is the one that shows up when you are pressing the button. If you set the two images to the same file, you won’t get the click animation.
Written by Karl about 9 months ago. Reply

OmgZ ur code doesn’t woooork! Show me how now! I demand an answer!!!

Ok, all joking aside, you do need to import the cocos headers for this to work, so if you’re having troubles compiling, try adding this to the top of button.h:

#import “cocos2d.h”

Cheers for some nifty code!
Written by Cory about 7 months ago. Reply

John,
Thanks so much for the class. Something like this should really be included in cocos2d already. It only took a moment to make it compatible with cocos2d 0.9 (hint: add CC before all the class names).

All the best,
Cory
Written by Cory about 7 months ago. Reply

I created a quick addition so that I can have a button that toggles between two images. In my case this is a play/pause button.

http://gist.github.com/273888

(note: uses cocos2d 0.9 namespace, so CCMenuItem instead of MenuItem, you’ll have to change it back if you’re using 0.8 or earlier)
Written by hilanderjeff about 6 months ago. Reply

Hi,

It is working. I changed [self addChild:image z:1] to [self addChild:image z:0]. The z value was set to 0.

Good Job!
Written by Stu about 5 months ago. Reply

John, Thanks for the button class. I do have a question however. If you have say 4 or 5 buttons and use the same selector method, how would I determine which button was pressed?
- Written by Eric about 5 months ago. Reply
  
  I’m sure there is a better, clever way to do this, but in my code I just make a different private method for each button.
Written by Manu about 4 months ago. Reply

I’m using it with a newer version of cocos2d and had to change all the class names prepending the ‘CC’. for example:

Sprite -> CCSprite
etc.

Thanks!
Manuel
Written by Ben about 3 months ago. Reply

Hi,

I have implemented your code with no errors or warnings when i build it. However, when I run it on my phone i get the following error

“EXEC_BAD_ACCESS” which is apparently a memory error – trying to access something that does not exist.

Any ideas how I can fix it?

Thanks,
Ben
- Written by Ben about 3 months ago. Reply
  
  I have solved that issue but i now get the “SIGABRT” error.
  
  Any ideas???
  - Written by Eric about 3 months ago. Reply
    
    Both of these errors are very common and basic errors that you will experience while working with Objective C. You can find plenty of information about the error in the first few google results for it.
    
    Based on the fact that you just copied the code and tried to run it…you are probably missing button.png and button_p.png.

M	T	W	T	F	S	S
« Jul				Dec »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

JohnnyWorks

Easy To Create Buttons with Cocos2D

Comments

Leave a Comment

Pages

Categories

Meta