21/3/14

[Tutorial] Controlador táctil (TouchPad) (libGDX)

Buenas gente!

En esta entrada vamos a ver el método que voy a usar para que mi personaje se desplace por el mapa.

Aunque existen varios métodos como clickar en un punto de la pantalla y que se dirija hacia allí o en esa dirección, tener varios botones que indiquen las posibles direcciones en las que puede moverse, etc., yo voy a usar un TouchPad. Esta herramienta tan útil nos viene ya implementada en libGDX, por lo que su uso es muy sencillo y no hay que escribir apenas código para tenerlo en nuestro juego.

Creando un TouchPad


En mi caso crearé una clase (yo la he llamado Controller) que extienda de la clase TouchPad, para tenerlo todo más modularizado. Veamos las distintas funciones que tendrá esta clase:


##### El constructor #####

En esta función llamaremos al constructor de TouchPad indicándole:
  • El tamaño de la zona central en píxeles. Mientras pulsemos dentro de esta zona no pasará nada.
  • El estilo con el que se dibujará el TouchPad. Esto lo veremos en la siguiente función.

También le indicaremos la posición y el tamaño que tendrá nuestro TouchPad con la función setBounds(...).


##### getTouchPadStyle #####

Aquí crearemos un nuevo Skin touchpadSkin al que le añadiremos:
  • La textura que queramos que tenga de fondo nuestro TouchPad.
  • La textura del elemento que indicará donde estamos pulsando.

Ahora inicializaremos nuestra variable TouchpadStyle touchpadStyle al que le añadiremos los elementos de la Skin que hemos creado antes.

Por último, devolvemos el estilo de nuestro TouchPad, que lo usará en el constructor.


##### act #####

Ya que TouchPad hereda de la clase Actor que vimos en entradas anteriores, podemos sobreeescribir esa función para que, cuando se vaya a actualizar y si lo estás tocando, muevas al personaje.


Añadiendo nuestro TouchPad a la aplicación


Una vez que tenemos nuestro TouchPad con las acciones que queremos que haga, nos queda añadirlo a nuestra aplicación. Para ello primero debemos inicializarlo con el constructor que creamos antes. Luego, ya que es un actor, podremos añadirlo a nuestro Stage (ver más información sobre los Stages y Actores aquí). De esta forma el Stage se encargará de actualizarlo y dibujarlo:


Puedes darle una posición a tu TouchPad con la función:


Y con esto ya tendremos nuestro TouchPad listo y moviendo a nuestro jugador!

Cómo mover al personaje


Para mover a nuestro jugador nuestro TouchPad nos da varias funciones.

Podemos usar las funciones getKnobPercentX() y getKnobPercentY() para saber cuánto está avanzando en cada eje y sumarle esta cantidad a la posición de nuestro personaje. Estas funciones nos darán un valor entre 0 y 1, siendo 0 el valor más cercano al centro y 1 el borde del TouchPad.

Otras funciones son getKnobX() y getKnobY(), que nos devuelven la diferencia en píxeles entre el centro del TouchPad y donde estamos señalando en cada eje.

Puedes ver todas las funciones de esta clase aquí.

Y aquí os muestro capturas de mi aplicación, con el TouchPad abajo a la izquierda. El personaje al que yo manejo es el marrón:



Notas:

  • No te olvides de hacer un dispose() de la Skin.
  • Este TouchPad puede servir tanto para mover a un personaje como para mover la cámara, aumentar el volumen de la música, etc.
  • Para un mayor realismo, puedes calcular el ángulo hacia donde se está moviendo tu personaje y rotarlo hacia ese punto.


Referencias:


1 comentario:

  1. Hola, paso namás a agradecerte por tan buen material que subiste a este blog, y en español, espero tengas exito en futuros juegos! cyao

    ResponderEliminar