Cómo hacer un Joystick con Cocos2D y SneakyInput

Cómo implementar un joystick con SneakyInput

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

Creación de la clase MiJoystick

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;

Inicialización de los botones

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:

Creación de la cruceta

En este punto creamos la cruceta.

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

// posición del joystick

baseCruceta.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 joystick

baseCruceta.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];

Añadimos botones

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 pantalla

baseBotonA.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 B

SneakyButtonSkinnedBase *baseBotonB = [[[SneakyButtonSkinnedBase alloc] init] autorelease];

// posicionamos el botón

baseBotonB.position = ccp(430,50);

// Añadimos las imágenes

baseBotonB.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];

Importar la clase

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;
}

Función update para actualizar el movimiento

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 derecha

    if ( 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 A
    if ( joystick.botonA.active ) 
        {NSLog(@"Botón A");}

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

}

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

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

Vista Landscape

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.