6/3/14

[Tutorial] Skins, botones y tablas (libGDX)

Buenas gente! 

En esta entrada veremos como añadir botones a nuestra aplicación y como colocarlos donde queramos. Antes de ello veremos como cargar una “Skin” para darle un formato a nuestros botones.

Cargando un Skin


Una clase muy potente que nos aporta la librería scene2D es la clase Skin, que nos permite personalizar la apariencia de cualquier actor, cambiando su imagen y la letra del texto.

En este post veremos como cargar un Skin ya creado. Más adelante dedicaremos un post únicamente a la creación de un Skin ya que puede ser bastante extenso. Por ahora usaremos uno por defecto.

Un Skin se compone de varios ficheros. En nuestro caso tenemos dos para el tipo de letra (default.png y default.fnt), dos para definir el atlas con los recursos gráficos que representarán los actores (uiskin.png y uiskin.atlas), y un fichero Json para definir los estilos que le aplicaremos a cada uno (uiskin.json).

Todos estos ficheros deben estar, como siempre, en nuestra carpeta assets de nuestro proyecto name-android.

Una vez tenemos los ficheros, ya podemos crear nuestro Skin en el código con la línea:



A partir de aquí podemos tener una función getSkin() que devuelva este Skin para pasárselo a los actores que queramos.

Creación de un botón


Primero debemos declararlo. Nuestros botones serán de la clase TextButton:


Después lo inicializamos, para ellos hacemos un new:


Tras esto ya tendremos nuestro botón. Ahora deberemos añadirle un Listener para que al clickar sobre él realice la acción que queramos, como cambiar a una nueva pantalla, recuperar vida a un montruo, cualquier cosa:


Puedes ver más información y funciones de los botones aquí.

Con esto ya tendremos nuestro botón listo para ser usado. Ahora debemos de ponerlo en la función de dibujado. Para ello, como todo, tenemos muchas formas. La más directa sería hacerle un draw() indicando la posición exacta donde queremos que nos lo dibuje. Pero esto puede dar problemas con dispositivos de distinto tamaño, en redimensiones, etc. Un método muy cómodo es usar una Table.

Usando una Table


Para crear nuestra tabla ponemos el siguiente código donde queramos crearla:


Con estas líneas hemos creado una tabla usando la Skin que teníamos de antes. Con table.setFillParent( true ); le indicamos a la tabla que ocupe el mismo espacio que el padre (en nuestro caso, será el Stage) y, por último, añadimos la tabla a nuestro stage para que la dibuje.

Ahora vamos a añadir nuestros botones con la línea:


Ademas de simplemente añadir el botón, podemos indicarle el espacio que queramos que tenga a los lados de separación entre los otros actores de la tabla, el tamaño, etc. por ejemplo:


Aquí añadimos un botón llamado startGameButton con un tamaño del 40% del ancho de la pantalla y un 20% del alto. También le decimos que tenga una separación por debajo del 5% de alto y a la derecha del 10% de ancho. Podemos personalizarlo como queramos.

Puedes ver todas las funciones posibles aquí.

Cada vez que quieras añadir una nueva fila de botones (o actores) debes poner la línea:


Con esto ya tendríamos nuestros botones bien colocados en cualquier resolución de pantalla de una forma fácil y limpia.

Notas:

  • Los actores se meterán en orden en la tabla, en una misma fila hasta que crees otra.
  • Los actores no se sobrepondrán unos a otros en ninguna circunstancia. Si quieres poner algún actor sobre otro tendrás que hacer otra tabla, crearte una clase aparte con estos dos actores, o cualquier otra cosa.
  • Puedes crear celdas vacías en tu tabla para colocar a tu gusto los actores.
  • No es necesario hacer dispose() ni de la tabla ni de los botones de texto.

Referencias:


No hay comentarios:

Publicar un comentario