CCMenuItem con Imagen, Texto y tamaño dinámico

Hoy toca ser un poco productivos.

En esta ocasión, he decidido crear una clase para crear botones de menú de tamaño dinámico, que a su vez pueden tener un texto en su interior, con la fuente que se quiera. 

Seguramente no abreis entendido nada de lo que he dicho anteriormente, así que mostraré un video para que veais como funciona.

[yframe url='http://www.youtube.com/watch?v=eX_LKX71hpM&feature=mfu_in_order&list=UL']

Como desarrollador de iphone / ipad en algún momento necesitaras crear botones de menú. Para realizar estos botones, lo que se suele hacer es crear botones con photoshop/gimp de diferentes tamaños/colores. Este proceso (además de ser un engorro), nos acarrea ciertos problemas, ya que si disponemos de muchos botones, podemos quedarnos fácilmente sin memoria, o consumir mucha mas de la necesaria.

Para estos casos, he creado la clase JACDynamicButton que a su vez, utiliza una modificación de la clase Scale9Spriteobtenida del foro de cocos2d

Para este proceso es necesario que tengamos una o varias imagenes de tamaño 64x64 (se podría modificar, pero yo he optado por este tamaño, ya que es múltiplo de 2 y corresponde a una textura válida para iOS) como las siguientes.



A simple vista, puede parecer que es la misma imagen, pero no lo son, una tiene aura y servirá para saber cuando está pulsado el botón.

Mediante estas dos imagenes, podremos crear botones como los siguientes.



Por ejemplo, para realizar estos botones, solo ha sido necesario este fragmento de código.


JACDynamicButton* button1 = [JACDynamicButton itemWithText:@"Hello" font:@"Arial" fontSize:30 minSize:CGSizeMake(100,100) normalImage:@"boton_verde.png" selectedImage:@"boton_verde_sel.png" target:self selector:@selector(doMenu:)];
JACDynamicButton* button2 = [JACDynamicButton itemWithText:@"Hello Large" font:@"Arial" fontSize:30 minSize:CGSizeMake(200,50) normalImage:@"boton_verde.png" selectedImage:@"boton_verde_sel.png" target:self selector:@selector(doMenu:)];


Como podeis observar, se utiliza una fuente Arial con tamaño 30, esto se podría cambiar y se pide el tamaño mínimo del botón (que usualmente será el tamaño del mismo, a menos que la fuente nos obligue a hacer el botón mas grande) 

Y este es el código utilizado.


//
// JACDynamicButton.h
// JACDynamicButton
//
// Created by Jose Antonio Andújar Clavell on 09/02/11.
// Alias "jandujar"
//
// More snippets on http://www.jandujar.com
//
// License http://creativecommons.org/licenses/by/3.0/

#import "cocos2d.h"

@interface JACDynamicButton : CCMenuItemSprite {

}

+(id) itemWithText: (NSString*)text font:(NSString*)f fontSize:(int)fs minSize:(CGSize)ms normalImage:(NSString*)ni selectedImage:(NSString*)si target:(id) t selector:(SEL) s;

@end



//
// JACDynamicButton.m
// JACDynamicButton
//
// Created by Jose Antonio Andújar Clavell on 09/02/11.
// Alias "jandujar"
//
// More snippets on http://www.jandujar.com
//
// License http://creativecommons.org/licenses/by/3.0/

#import "JACDynamicButton.h"
#import "Scale9Sprite.h"

@implementation JACDynamicButton

+(id) itemWithText: (NSString*)text font:(NSString*)f fontSize:(int)fs minSize:(CGSize)ms normalImage:(NSString*)ni selectedImage:(NSString*)si target:(id) t selector:(SEL) s
{
//Create the label
CCLabelTTF *label = [CCLabelTTF labelWithString:text fontName:f fontSize:fs];

//Calculate the Dynamic Button size
int minWidth = label.contentSize.width>ms.width?label.contentSize.width:ms.width;
int minHeight = label.contentSize.height>ms.height?label.contentSize.height:ms.height;

CGSize size=CGSizeMake(minWidth+30,minHeight+24);

[label setPosition:CGPointMake(size.width*0.5, size.height*0.5)];

//Sprite normal
Scale9Sprite *normalSprite = [[[Scale9Sprite alloc] initWithFile:ni centreRegion:CGRectMake(20, 20, 24, 24)] autorelease];
[normalSprite setContentSize:size];

//Sprite selected
Scale9Sprite *selectedSprite = nil;
if(si){
selectedSprite = [[[Scale9Sprite alloc] initWithFile:si centreRegion:CGRectMake(20, 20, 24, 24)] autorelease];
[selectedSprite setContentSize:size];
}

//Create the CCMenuItemSprite
CCMenuItemSprite* returnItem;
returnItem = [self itemFromNormalSprite:normalSprite selectedSprite:selectedSprite target:t selector:s];


[returnItem addChild:label];

NSLog(@"Size = %f %f", returnItem.contentSize.width,returnItem.contentSize.height);

return returnItem;
}


@end

 Por último, comentaros que teneis a vuestra disposición el código fuente de este ejemplo, así como el fichero PSD para que podais modificar el color del botón a vuestro antojo.