Joystick en cocos2d

Vamos a ver como se implementa un sencillo joystick en cocos2d … investigando un poco podemos encontrar que cocos2d ya trae una clase para hacer esta función, y aunque no lo han añadido de serie al paquete podemos encontrar las clases dentro del directorio /extras/, pues bien .. estas clases servirán para darnos una idea de lo que tenemos que hacer pero realmente se encuentra en un estado demasiado joven para ser útil en un juego, así que vamos a modificar unas cuantas cosas.


La primera carencia que veremos al usar las clases que trae cocos2d es que no sirven para manejar botones: únicamente implementa el uso de un stick normal y corriente .. y en la mayoría de los casos esto no será suficiente. No se si la idea de quien lo hizo era que usásemos botones normales para el juego, pero va a ser mucho mas fácil implementar realmente todo lo que necesitamos que un joystick haga:

Para los impacientes que no tengan ganas de leer os dejo aquí los sources de la clase, mas abajo hay 2 samples listos para descargar y probar:
 Joystick.h v1.1 (2.29 Kb)
 Joystick.m v1.1 (4.45 Kb)

Uno o dos joysticks

Para empezar debemos comprender la lógica de esta clase. Esta clase NO se va a encargar de dibujar nada en pantalla, sólo será una clase que gestione las áreas lógicas de pantalla donde estamos interactuando con los dedos, y nos guarde que parte del joystick estamos presionando. Esto quiere decir que por un lado debemos definir el joystick, con sus areas interactivas, y por otro lado tendremos que hacer el dibujado de los sprites (bueno .. nosotros no, lo hará el cocos2d)

De la misma forma no esperéis que esta clase lance ningún evento al pulsar un botón, solamente va a establecer el estado de todos los objetos y deberemos ser nosotros desde nuestro método Update donde hagamos las acciones que correspondan:

Inicialización y creación de nuestro primer Stick

Con esto estamos definiendo el área de la pantalla donde va a estar situado nuestro joystick, en este caso en las coordenadas (0,0) y tiene un tamaño de 120×120 pixels … Estamos definiendo con esto el cuadrado que lo contiene, la clase ya tomará automáticamente el centro de ese cuadrado, y a partir de ese centro nos dará las coordenadas donde pulsamos.

Además le damos un nombre a este objeto “Stick1” para poder acceder luego a sus datos, mediante esta filosofía podremos definir 2 Sticks, y nuestra clase joystick sabrá manejar los touchs de cada stick de forma independiente:

Pasando eventos del touch

El siguiente paso será configurar nuestro proyecto para recibir los eventos del touch (y además recibir también los multitouch, ya que nos interesa manejar 2 sticks a la vez). Por defecto cocos2d configura la vista de forma que no permita mas de un touch, asi que añadimos en nuestro método ‘init’ estas 2 línea para indicarle que el touch está activado y que ademas configurar la Vista OpenGL para que admita los multiTouch:

Y ahora nos tocará añadir los 3 eventos del Touch y dárselos a la clase del joystick para que internamente calcule si algún dedo se encuentra dentro de su area para asignar el movimiento:

A partir de este momento la clase Joystick ya almacena por si sola el estado y podemos consultar si se está pulsando alguna direccón, para ello contaremos con estos métodos:

  • -(CGPoint)getCurrentVelocity: Este método nos devolverá un CGPoint(con sus coordenadas X Y) indicandonos el punto donde estamos pulsando respecto del centro del Stick
  • -(CGPoint)getCurrentDegreeVelocity: Este método nos devolverá un CGPoint donde nos pondrá en el valor X el angulo (sobre la horizontal) y en la posición Y el modulo del vector dirección (osea, la distancia al centro del Stick)

Vamos a nuestro metodo init y añadimos esta línea:

Mediante esto le estamos diciendo al cocos2d que nos llame al metodo tick() cada vez que pueda (osea .. siempre). Esta es la forma que tiene cocos2d de crear un Timer. Según la documentación de cosos2d NO hay que usar NsTimers :

La explicación principal es que el timer de cocos2d llamará al método dándole un parámetro ccTime que nos indica el tiempo desde la vez anterior que nos llamó. Algo MUY importante ya que no podemos saber con que frecuencia nos va a llamar y de esta forma se nos soluciona el problema de que nuestro juego siempre va a funcionar a la misma velocidad independientemente de los frames que pueda dibujar por segundo.

Si se quiere también podemos decir que el sistema llame a nuestro método tick 10 veces por segundo de esta forma:

Podemos modificar ese intervalo a una frecuencia que consideremos necesaria. Tener en cuenta que por defecto cocos2d va a trabajar a 60 frames por segundo y realmente no vamos a necesitar que nuestra función Tick se ejecute tan rápido, y rebajarlo a 10 ó 20 veces por segundo será suficiente en la mayoria de los casos.

Ahora viene nuestra función Tick que lo único que hace es tomar el estado del joystick (la velocidad) y se la pasa a nuestro Player … con lo que ya nos podemos mover por la pantalla:

De la misma forma podemos consultar el estado del “Stick2” y mover su correspondiente player .. hasta llegar a este resultado:

Aqui podéis encontrar los sources de este ejemplo:
 MyJoytest1 – Manejando 2 Sticks (723.92 Kb)

Botones

A continuación pasamos a añadir botones … Está claro que lo difícil de todo esto era hacer que funcionase el stick que es quién tiene direcciones, para un botón solamente nos interesa saber si está pulsado o no .. por lo que el funcionamiento es idéntico que el stick

Para saber si algún botón está pulsado deberemos consultar el siguiente método en nuestro método tick:

  • -(bool)isDown: Este método nos devolverá un bool indicando si el botón está pulsado o no

Con este tendremos que será muy fácil desde nuestro método tick comprobar si un botón está pulsado:

Más botones

Finalmente vamos a ver que pasa con la configuración de los botones, para muchos juegos nos interesará configurar un comportamiento distinto a los botones, asi por ejemplo podemos querer un botón que se pueda pulsar y sepamos en todo momento si está pulsado … o por ejemplo para un botón que accionará el disparo de nuestra nave queremos que el botón tenga un factor de repetición … podemos configurar incluso que un botón haga una acción al pulsarlo y que para volver a activarlo sea necesario levantar el dedo y volver a pulsar

Todo eso será posible añadiendo un delay al click, que determinará cuantos segundos tarda ese boton en decirnos que esta presionado. .. Veamos un ejemplo para añadir 3 botones y definir para cada uno un comportamiento diferente:

Y aqui tenemos el resultado:

Podremos ver que el botón A tiene un comportamiento básico que nos indica si esta pulsado o no. El botón B lo pulsamos y nos dará un click cada medio segundo. Y el botón C lo pulsamos y nos da un click, y luego ya no dirá nada mas hasta que soltemos la pulsación y volvamos a pulsar.

Aqui podeis encontrar los sources de este ejemplo:
 MyJoytest2 – Manejando Botones (815.15 Kb)

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *