(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Joystick con Cocos2d y SneakyInput

iOS
Intermedio
30 minutos

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

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


// inicializamos el botón A
SneakyButtonSkinnedBase *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];

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

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==kGameAutorotationNone
return UIInterfaceOrientationMaskLandscape;
#elif GAME_AUTOROTATION==kGameAutorotationCCDirector
NSAssert(NO, @"RootviewController: kGameAutorotation isn't supported on iOS6");
return UIInterfaceOrientationMaskLandscape;
#elif GAME_AUTOROTATION == kGameAutorotationUIViewController
return 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.

Infórmate sin compromiso

Nombre (requerido)

Correo electrónico (requerido)

Teléfono (requerido)

Modalidad (requerido)

  1. Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
  2. Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
  3. Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
  4. Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies