12/3/14

[Tutorial] Barras y NinePatch (libGDX)

Buenas gente!

En esta entrada vamos a ver como crear barras de vida, stamina, o cualquier otra variable de nuestro personaje que queramos mostrar. Todo con ayuda, como siempre, de libGDX.

Para hacer esto usaremos una nueva clase: NinePatch que explicaremos con un poco de detalle y nos ayudará a crear las imágenes que necesitamos.

Ninepatch


Para comenzar tendremos que crear nuestra Texture de la cual cogeremos la imagen para nuestra barra. No hace falta que sea una imagen con toda la longitud de la barra, tan solo nos basta con las esquinas, ahora veremos porqué:


Después creamos nuestro NinePatch de la siguiente forma:


Como primer parámetro se le debe pasar una TextureRegion. Puedes crearla aparte o hacer un new directamente como se muestra en la función anterior.

Tras esto se deben indicar 4 valores: left, right, top y bottom. Estos 4 valores indican los píxeles que no modificará en esas direcciones. Veámoslo gráficamente para entenderlo mejor. Imaginemos que hemos cogido la siguiente textura:





Nuestros valores left, right, top y bottom indicarán los píxeles de la siguiente forma:



Los píxeles que no se encuentran en zona roja serán los que no se editen y el resto se expandirán según el tamaño que le indiquemos al dibujar la barra de la siguiente forma:




De esta forma NinePatch se encarga automáticamente de dibujarnos correctamente la barra. Ahora tan solo nos queda dibujarlo:


Con la línea anterior dibujamos el Ninepatch pasándole un batch que se encargará de dibujarlo (puedes ver el uso del SpriteBatch aquí), una posición inicial (x,y) que será la esquina inferior izquierda de nuestro NinePatch desde donde se comenzará a dibujar, y un ancho y alto (width y heigth).


Creando una barra


Para hacer nuestra barra necesitaremos dos NinePatch: uno para el fondo de la barra y otro para la barra que irá bajando o subiendo según perdamos o ganemos vida, stamina o lo que queramos.

Crear una barra es realmente fácil con los dos NinePatch, simplemente los creamos como hemos visto antes, les damos su textura y los colocamos donde queramos.

Para cambiar el tamaño de nuestro indicador, cada vez que cambie nuestra vida tendremos que modificar el ancho de nuestra barra, de modo que al volver a renderizarse, se verá como va variando la barra:






Notas:


  • Recuerda que deberás llamar al método dispose() de la textura que has creado. El resto de elementos que hemos visto en esta entrada no lo necesita.
  • Puedes usar una misma textura para los dos NinePatch, cambiando el área del textureRegion para que coja un trozo de la imagen u otro según te convenga.
  • Puedes crear una clase barra que extienda de Actor y así podrás dibujarla directamente en el Stage, o meterla dentro de una tabla como vimos aquí. De esta forma te será mucho más fácil recolocarla donde te interese.
  • Los NinePatch suelen usarse también para botones, menús... Úsalo donde mejor te venga!
  • Puedes ver más funciones de los NinePatch aquí.

No hay comentarios:

Publicar un comentario