2/3/14

[Tutorial] Estructuración de pantallas y creación de estas (libGDX)

Buenas gente!

En esta entrada y una vez que tenemos una base mínima para comenzar a programar veremos que nos proporciona libGDX para facilitarnos la creación de las diferentes pantallas que tendrá nuestra aplicación.

Estructuración de pantallas:


Normalmente se suele tener una clase abstracta que contiene los valores y variables que por defecto tendrán todas nuestras pantallas y, luego, una clase por cada pantalla que queramos, extendiendo de la anterior.

Las aplicaciones suelen empezar con una pantalla “splash” donde, durante unos pocos segundos se muestra una imagen, bien de la empresa que lo creo o bien alguna imagen del juego, etc. Esta imagen se desvanece sola y da paso al típico menú inicial donde, mediante botones nos dirigimos a las distintas pantallas.


Creación de pantallas:


LibGDX ofrece una clase que nos facilita el trabajo con pantallas:


Se trata de una clase abstracta que implementa la interface ApplicationListener, que usamos en la clase principal de nuestra app, y además delega sus eventos en clases que implementan la interface Screen, lo que nos permite tener varias clases (que serán nuestras pantallas) y utilizar una u otra según nos venga mejor.

Tendremos una "pantalla base" que heredará de la clase Screen y de la cual heredarán el resto de pantallas y se encargará de realizar operaciones comunes a ellas, como inicializar algunos datos, o borrar toda la pantalla antes de empezar a dibujar las imágenes de cada pantalla.

Veamos ahora las funciones más importantes que deberá tener nuestra clase:

#### El constructor ####


En el constructor guardaremos en una variable el objeto de nuestra clase principal para poder acceder rápidamente a datos de ella.

Crearemos nuestra variable de tipo Stage con un tamaño de 0x0, valor que cambiará al hacer el resize().

Asignaremos a nuestro Stage los eventos de entrada de la aplicación (teclado, ratón, etc.)

#### Resize ####

Redimensionamos el tamaño de lo que nos muestra nuestro stage con la función setViewport, adaptándolo a las nuevas medidas


#### Render ####

Borramos todas las imágenes que hay en pantalla y le damos un color de fondo. Ya dentro del render de cada pantalla se dibujarán las imágenes de cada una (llamando antes a esta función de render con super.render())

#### DrawStage ####


Actualizará todos los actores de nuestro stage y los dibujará.

#### Dispose ####


Se ejecutará al terminar la aplicación. Debemos colocar aquí todas aquellas variables que java no borre por defecto, como las de tipo SpriteBatch, Texture, Stage, etc.


Visualización de pantallas:


En un primer lugar tenemos que indicarle a nuestro juego cual será la primera pantalla que se mostrará. Para ello colocamos el siguiente código en el constructor de nuestra clase principal:


Donde NameScreen será la clase de la pantalla que queramos visualizar en un primer lugar.

Podremos cambiar de pantalla con la siguiente línea de código:


Esta línea de código la podemos llamar al pulsar un botón, al pasar cierto tiempo, o al ocurrir ciertos hechos (como que mueras en un juego y tengas que volver a la pantalla de inicio, por ejemplo).

Una pantalla algo especial: Pantalla “Splash”:


La pantalla splash es aquella que se muestra al inicio de la aplicación durante unos segundos para luego desvanecerse y dar paso al menú principal.

El código de esta pantalla se encuentra prácticamente todo en su función show():

  • Inicialización de la imagen que vamos a mostrar:

  • Hacer la imagen transparente en un principio para hacerla aparecer después:

  • Añadir el efecto de aparición y desaparición de la imagen, con sus tiempos de retardo:

  • Y por último añadir la imagen a nuestro stage para que la muestre en la pantalla:

No olvides en la función dispose borrar la textura que hemos creado antes.


Notas:

  • Todo esto solo será necesario si tenemos más de una pantalla.
  • Si utilizas una clase AbstractScreen de la que heredan el resto de tus pantallas, coloca en ella todo el código y variables que se repiten en las pantallas, como el Stage, tu clase principal, etc.



Referencias:

No hay comentarios:

Publicar un comentario