logoImagina
iconCurso
Te recomendamos nuestro curso de Objective-C
Descubre el curso de Objective-C
Ir al curso

Cómo hacer un Joystick con Cocos2D y SneakyInput

iconImage
Escrito por Equipo de Imagina
Actualizado el 22-07-2024
Duración: 20 min

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í:

1#import "CCLayer.h" 2#import "cocos2d.h" 3#import "SneakyJoystick.h" 4#import "SneakyButton.h" 5#import "SneakyButtonSkinnedBase.h" 6#import "SneakyJoystickSkinnedBase.h" 7 8@interface MiJoystick : CCLayer{ 9 SneakyJoystick *cruceta; 10 SneakyButton *botonA; 11 SneakyButton *botonB; 12}

Añadimos los property:

1@property (nonatomic, retain) SneakyJoystick *cruceta; 2@property (nonatomic, retain) SneakyButton *botonA; 3@property (nonatomic, retain) SneakyButton *botonB;`

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

1@implementation MiJoystick 2 3@synthesize cruceta; 4@synthesize botonA; 5@synthesize botonB;

Inicialización de los botones

Crearemos nuestra función init donde inicializaremos nuestros botones.

1(id) init{ 2 if ( (self = [super init]) ){} 3 return self; 4}

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.

1SneakyJoystickSkinnedBase *baseCruceta = [[[SneakyJoystickSkinnedBase alloc] init] autorelease]; 2 3// posición del joystick 4 5baseCruceta.position = ccp(64,64); 6 7// Añadimos las imágenes, será la imagen de fondo y el joystick que se mueve que estará por encima de nuestro joystick 8 9baseCruceta.backgroundSprite = [CCSprite spriteWithFile:@"cruceta.png"]; 10baseCruceta.thumbSprite = [CCSprite spriteWithFile:@"botonCruceta.png"]; 11baseCruceta.joystick = [[SneakyJoystick alloc] initWithRect:CGRectMake(0,0,128,128)]; 12cruceta = [baseCruceta.joystick retain];[self addChild:baseCruceta z:0];
Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *

Añadimos botones

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

1// inicializamos el botón 2 3ASneakyButtonSkinnedBase *baseBotonA = [[[SneakyButtonSkinnedBase alloc] init] autorelease]; 4 5// posicionamos el botón el botón a la derecha de la pantalla 6 7baseBotonA.position = ccp(320,50); 8 9// Añadimos las imagenes del botón 10 11baseBotonA.defaultSprite = [CCSprite spriteWithFile:@"botonA.png"]; 12baseBotonA.activatedSprite = [CCSprite spriteWithFile:@"botonA_presionado.png"]; 13baseBotonA.pressSprite = [CCSprite spriteWithFile:@"botonA_presionado.png"]; 14baseBotonA.button = [[SneakyButton alloc] initWithRect:CGRectMake(0, 0, 25, 25)]; 15 16botonA = [baseBotonA.button retain]; 17 18botonA.isToggleable = NO; 19[self addChild:baseBotonA z:0]

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

1// inicializamos el botón B 2 3SneakyButtonSkinnedBase *baseBotonB = [[[SneakyButtonSkinnedBase alloc] init] autorelease]; 4 5// posicionamos el botón 6 7baseBotonB.position = ccp(430,50); 8 9// Añadimos las imágenes 10 11baseBotonB.defaultSprite = [CCSprite spriteWithFile:@"botonB.png"]; 12baseBotonB.activatedSprite = [CCSprite spriteWithFile:@"botonB_presionado.png"]; 13baseBotonB.pressSprite = [CCSprite spriteWithFile:@"botonB_presionado.png"]; 14baseBotonB.button = [[SneakyButton alloc] initWithRect:CGRectMake(0,0,25,25)]; 15 16botonB = [baseBotonB.button retain]; 17 18botonB.isToggleable = NO; 19[self addChild:baseBotonB z:0];

Importar la clase

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

1#import "cocos2d.h"#import "MiJoystick.h" 2 3// HelloWorldLayer@interface HelloWorldLayer : CCLayer{MiJoystick *joystick;}

Y en la implementación:

1(id) init{if( (self=[super init])) { 2 joystick = [[MiJoystick alloc] init]; 3 [self addChild:joystick z:10]; 4 [self scheduleUpdate];}return self; 5}

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.

1(void)update:(ccTime)delta { 2 3 // Comprueba el movimiento hacia la izquierda o derecha 4 5 if ( joystick.cruceta.velocity.x > 0 ) 6 {NSLog(@"Mueves hacia la derecha: %f", joystick.cruceta.velocity.x);} 7 8 else if ( joystick.cruceta.velocity.x < 0 ) 9 { NSLog(@"Mueves hacia la izquierda %f", joystick.cruceta.velocity.x); } 10 11 // Arriba o abajo 12 13 if ( joystick.cruceta.velocity.y > 0 ) 14 {NSLog(@"Mueves hacia arriba %f", joystick.cruceta.velocity.y);} 15 else if ( joystick.cruceta.velocity.y < 0 ) 16 {NSLog(@"Mueves hacia abajo %f", joystick.cruceta.velocity.y);} 17 18 // Botón A 19 if ( joystick.botonA.active ) 20 {NSLog(@"Botón A");} 21 22 // Botón B 23 if ( joystick.botonB.active ) 24 {NSLog(@"Botón B");} 25 26}

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

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

Vista Landscape

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

1(NSUInteger)supportedInterfaceOrientations{ 2 //Modify for supported orientations, put your masks here, trying to mimic behavior of shouldAutorotate.. 3 4 #if GAME_AUTOROTATION==kGameAutorotationNonereturn UIInterfaceOrientationMaskLandscape; 5 6 #elif GAME_AUTOROTATION==kGameAutorotationCCDirectorNSAssert(NO, @"RootviewController: kGameAutorotation isn't supported on iOS6"); 7 8 return UIInterfaceOrientationMaskLandscape; 9 10 #elif GAME_AUTOROTATION == kGameAutorotationUIViewControllerreturn UIInterfaceOrientationMaskLandscape | UIInterfaceOrientationLandscapeLeft; //for both landscape orientations return UIInterfaceOrientationLandscape#else 11 12 #error Unknown value in GAME_AUTOROTATION 13 14 #endif // GAME_AUTOROTATION 15}

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.

Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *
Tutoriales relacionados
¡Descubre el nuevo canal de YouTube de Imagina Formación!
Consulta nuestro nuevo canal de YouTube para aprender sobre las últimas tecnologías. ¡Conviértete en un experto en desarrollo con nuestros vídeos!
Tabla de contenido
Cómo implementar un joystick con SneakyInput
Creación de la clase MiJoystick
Inicialización de los botones
Creación de la cruceta
Añadimos botones
Importar la clase
Función update para actualizar el movimiento
Vista Landscape
Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *