Tutorial - Joystick con Cocos2D y SneakyInput - Guía

Para la implementación de nuestro joystick vamos a necesitar la librería SnekayInput que nos facilitará bastante esta tarea. Deberemos descargar la librería SneakyInput desde github.

Crearemos un proyecto nuevo de tipo cocos2d como hemos realizado en el videojuego de Hungry Monster. Para este proyecto solamente vamos a utilizar las siguientes clases de SneakyInput:

• SneakyJoystick
• SneakyButton
• SneakyButtonSkinnedBase
• SneakyJoystickSkinnedBase

Deberemos añadir las clases al proyecto. Recuerda marcar la casilla “Copy items into destination group’s folder” y añadirlas al Target. Ahora crearemos una nueva clase que llamaremos “MiJoystick” que herede de CCLayer y nuestro MiJoystick.h deberá quedar así:

#import "CCLayer.h"#import "cocos2d.h"#import "SneakyJoystick.h"#import "SneakyButton.h"#import "SneakyButtonSkinnedBase.h"#import "SneakyJoystickSkinnedBase.h"

@interface MiJoystick : CCLayer{SneakyJoystick *cruceta;SneakyButton *botonA;SneakyButton *botonB;}

Añadimos los property:

@property (nonatomic, retain) SneakyJoystick *cruceta;@property (nonatomic, retain) SneakyButton *botonA;@property (nonatomic, retain) SneakyButton *botonB;

Y en nuestro MiJoystick.m añadimos los synthesize:

@implementation MiJoystick

@synthesize cruceta;@synthesize botonA;@synthesize botonB;

Crearemos nuestra función init donde inicializaremos nuestros botones.

• (id) init{if ( (self = [super init]) ){

}return self;}

Para añadir los botones del joystick necesitaremos los gráficos que queremos mostrar. En nuestro caso hemos creado 6 imágenes:

En este punto creamos la cruceta.

SneakyJoystickSkinnedBase *baseCruceta = [[[SneakyJoystickSkinnedBase alloc] init] autorelease];

// posición del joystickbaseCruceta.position = ccp(64,64);

// Añadimos las imágenes, será la imagen de fondo y el joystick que se mueve que estará por encima de nuestro joystickbaseCruceta.backgroundSprite = [CCSprite spriteWithFile:@"cruceta.png"];baseCruceta.thumbSprite = [CCSprite spriteWithFile:@"botonCruceta.png"];baseCruceta.joystick = [[SneakyJoystick alloc] initWithRect:CGRectMake(0,0,128,128)];cruceta = [baseCruceta.joystick retain];[self addChild:baseCruceta z:0];

Ahora añadiremos un par de botones a la derecha de nuestra pantalla.

// inicializamos el botón ASneakyButtonSkinnedBase *baseBotonA = [[[SneakyButtonSkinnedBase alloc] init] autorelease];

// posicionamos el botón el botón a la derecha de la pantallabaseBotonA.position = ccp(320,50);

// Añadimos las imagenes del botón.baseBotonA.defaultSprite = [CCSprite spriteWithFile:@"botonA.png"];baseBotonA.activatedSprite = [CCSprite spriteWithFile:@"botonA_presionado.png"];baseBotonA.pressSprite = [CCSprite spriteWithFile:@"botonA_presionado.png"];baseBotonA.button = [[SneakyButton alloc] initWithRect:CGRectMake(0, 0, 25, 25)];

botonA = [baseBotonA.button retain];

botonA.isToggleable = NO;[self addChild:baseBotonA z:0]

También añadimos un botón B:

// inicializamos el botón BSneakyButtonSkinnedBase *baseBotonB = [[[SneakyButtonSkinnedBase alloc] init] autorelease];

// posicionamos el botónbaseBotonB.position = ccp(430,50);

// Añadimos las imágenesbaseBotonB.defaultSprite = [CCSprite spriteWithFile:@"botonB.png"];baseBotonB.activatedSprite = [CCSprite spriteWithFile:@"botonB_presionado.png"];baseBotonB.pressSprite = [CCSprite spriteWithFile:@"botonB_presionado.png"];baseBotonB.button = [[SneakyButton alloc] initWithRect:CGRectMake(0,0,25,25)];

botonB = [baseBotonB.button retain];

botonB.isToggleable = NO;[self addChild:baseBotonB z:0];

Por último, deberemos importar nuestra clase para poder utilizarla en nuestro HelloWorldLayer

#import "cocos2d.h"#import "MiJoystick.h"

// HelloWorldLayer@interface HelloWorldLayer : CCLayer{MiJoystick *joystick;}

Y en la implementación:

• (id) init{if( (self=[super init])) {

joystick = [[MiJoystick alloc] init];[self addChild:joystick z:10];[self scheduleUpdate];}return self;}

Tendremos que añadir en nuestra función update, lo métodos necesarios para mover los objetos con nuestro joystick. Esta función está siempre actualizando por lo que detectará cuando hemos movido nuestro joystick o presionado un botón.

• (void)update:(ccTime)delta {

// Comprueba el movimiento hacia la izquierda o derechaif ( joystick.cruceta.velocity.x > 0 ) {NSLog(@"Mueves hacia la derecha: %f", joystick.cruceta.velocity.x);} else if ( joystick.cruceta.velocity.x < 0 ) { NSLog(@"Mueves hacia la izquierda %f", joystick.cruceta.velocity.x); } // Arriba o abajo if ( joystick.cruceta.velocity.y > 0 ) {NSLog(@"Mueves hacia arriba %f", joystick.cruceta.velocity.y);} else if ( joystick.cruceta.velocity.y < 0 ) {NSLog(@"Mueves hacia abajo %f", joystick.cruceta.velocity.y);}

// Botón Aif ( joystick.botonA.active ) {NSLog(@"Botón A");}

// Botón Bif ( joystick.botonB.active ) {NSLog(@"Botón B");}

}

Para liberar memoria, deberemos realizar un release de nuestro joystick.

• (void) dealloc{[joystick release];[super dealloc];}

Para ver el proyecto en Landscape de manera correcta tendrás que modificar este método del RootViewController

• (NSUInteger)supportedInterfaceOrientations{//Modify for supported orientations, put your masks here, trying to mimic behavior of shouldAutorotate..#if GAME_AUTOROTATION==kGameAutorotationNonereturn UIInterfaceOrientationMaskLandscape;#elif GAME_AUTOROTATION==kGameAutorotationCCDirectorNSAssert(NO, @"RootviewController: kGameAutorotation isn't supported on iOS6");return UIInterfaceOrientationMaskLandscape;#elif GAME_AUTOROTATION == kGameAutorotationUIViewControllerreturn UIInterfaceOrientationMaskLandscape | UIInterfaceOrientationLandscapeLeft;//for both landscape orientations return UIInterfaceOrientationLandscape#else#error Unknown value in GAME_AUTOROTATION

#endif // GAME_AUTOROTATION}

Si compilamos y ejecutamos la aplicación podremos comprobar que al presionar los botones y el joystick se mostrará por consola los movimientos que estamos realizando.