martes, 8 de marzo de 2016

Tutorial 4: Ciclo de Vida en LibGdx.

Hola buenas.
En el presente tutorial veremos como se comporta el ciclo de vida en nuestros juegos basados en LibGdx y alguna funcionalidades de la maravillosa clase estática Gdx.

Ciclo básico de cualquier videojuego:
Start: Inicia el juego.
Events: Busca eventos, ya sean lectura de input(teclado,controles,toches,etc), de cálculos de movimientos(desplazamientos de posición), es todo lo que se puede encapsular.
Update: Es la actualización de todos los cálculos, estados del juego.
Draw: Es cuando el juego pinto todos los elementos graficos del juego.
Exit?: Bandera que pregunta si el juego termina o no. Si es "NO", vuelve al proceso de Events y continua al ciclo; Si es "SI", pasa a finalizar el ciclo.
Close: Cierre del juego.

Después de esta pequeña introducción, veremos como funciona en libgdx, cuando creamos nuestros proyectos, la clase principal extiende de ApplicationAdapter, la cual proporciona los siguientes métodos:
@Override
public void create () {
}

@Override
public void resize(int width, int height) {
}
@Override
public void render () {
}

@Override
public void pause() {
}

@Override
public void resume() {
}

@Override
public void dispose() {

}
Podemos observar que este ciclo de vida es extendido del ciclo de vida de los programas en Android.
El ciclo de vida se ejecuta así:
  1. create: método para instanciar nuestros objetos. 
  2. resize: actualiza nuestras resolución de pantalla.
  3. render: este método se ejecuta recurrentemente, y se encarga de hacer todo la lógica de nuestro juego, por ejemplo leer algún input, procesarlo, actualizar alguna posición de sprite, verificar colisiones, etc.
  4. pause: esta acción es llamada por libGdx cuando entra en segundo plano. LibGdx pone en pausa todos los elementos gráficos.
  5. resume: esta acción es llamada cuando la aplicación entra en primer plano.
  6. dispose: esta acción es llamada antes de cerrar la aplicación y es donde hay que liberar todos los recursos utilizados en nuestros juegos.
Construiremos un nuevo proyecto llamado tuto2:

Importamos desde eclipse:
Si hemos sido observadores, veremos que no incluí el proyecto de android, esto lo hice para facilitarme la importación del proyecto. Ustedes pueden incluir el sub proyecto.

En este tutorial veremos, como utilizar la amada clase estática Gdx, esta clase posee cualidades de manipulación de audio, archivos, gráficos, lecturas de input(teclado, mouse, acceletrometro, giroscopio, vibración, toques de pantalla) y configuraciones de nuestra aplicación.
Claro veremos las básicas, y en posteriores entregas las restantes.
Clase Tuto2:
public class Tuto2 extends ApplicationAdapter {

SpriteBatch batch;
Texture img;
Sound sonido;
Music musica;
@Override
public void create () {
batch = new SpriteBatch();
img = new Texture("badlogic.jpg");
Gdx.app.log("Tuto2", "Inicia el programa.");
sonido = Gdx.audio.newSound(Gdx.files.internal("explosion.wav"));
musica = Gdx.audio.newMusic(Gdx.files.internal("fight.wav"));
musica.setLooping(true);
musica.setVolume(0.2f);
musica.play();
}

@Override
public void render () {
Gdx.gl.glClearColor(1, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
if(Gdx.input.justTouched()){
sonido.play();
Gdx.app.log("Tuto2", "Touch(X,Y):("+Gdx.input.getX()+","+Gdx.input.getY()+")");
}
batch.begin();
batch.draw(img,//logo libgdx
Gdx.graphics.getWidth()/2-img.getWidth()/2,//posicion en X Centrada 
Gdx.graphics.getHeight()/2-img.getHeight()/2//posicion en Y Centrada
);
batch.end();
}
@Override
public void resize(int width, int height) {
Gdx.app.log("Tuto2", "Resolucion: "+Gdx.graphics.getWidth()+"x"+Gdx.graphics.getHeight());
}

@Override
public void pause() {
Gdx.app.log("Tuto2", "Entro en pausa.");
musica.pause();
}

@Override
public void resume() {
Gdx.app.log("Tuto2", "Entro en resumen.");
musica.play();
}

@Override
public void dispose() {
Gdx.app.log("Tuto2", "Entro en dispose.");
img.dispose();
batch.dispose();
musica.dispose();
sonido.dispose();
}
}

Explicación:
En las propiedades de la clase, declaramos Sound sonido, que cargaremos un sonido de explosión, declaramos también Music musica, que cargaremos una música de fondo.
Método create:
  1. Gdx.app.log("Tuto2", "Inicia el programa."): Se utiliza para colocar nuestros mensajes en consola/logcat, para ir trazando nuestros eventos en el juego. Primer parámetro es una etiqueta para identificar el mensaje, segundo parámetro es el menajes mismo.
  2. sonido = Gdx.audio.newSound(Gdx.files.internal("explosion.wav")): Esta instrucción es bien interesante, se observa como se crea un nuevo sonido con solo agregar: Gdx.audio.newSound, pero esta instrucción recibe un parámetro FileHandle, para esto utlizamos el Gdx.files.internal que gestiona todos los archivos que estén ubicados en nuestra carpeta "assets". Entonces esta linea de código esta yendo a buscar el archivo "explosion.wav" a la carpeta "assets" de nuestro proyecto y obtiene su referencia, la cual es pasada a newSound, que instancia nuestro sonido.
  3. musica = Gdx.audio.newMusic(Gdx.files.internal("fight.wav")): Es igual que la instancia del sonido, solo que es aplicado a una musica. El newSound solo funciona con sonidos de corta duracion, para lo demos esta newMusic. Solo pueden ser cargados los archivos WAV, MP3 Y OGG.
  4. musica.setLooping(true): indicamos que la música se vuelva a repetir una vez haya terminado. 
  5. musica.setVolume(0.2f): Ponemos el volumen a 20%.
  6. musica.play(): Le indicamos que comience a tocar la música.
Método render:
  1. if(Gdx.input.justTouched()): Otra vez nuestra amada clase xD, utilizando justTouched nos devuevl true si hemos presionado la pantalla o un click.
  2. sonido.play(): toca el sonido.
  3. Gdx.app.log("Tuto2", "Touch(X,Y):("+Gdx.input.getX()+","+Gdx.input.getY()+")"): Otro momento interesante, utilizamos la lectura de input, getX y getY obtenimos la posicion del puntero o cuando hemos presionado sobre la pantalla.
  4. Gdx.graphics.getWidth()/2-img.getWidth()/2, y Gdx.graphics.getHeight()/2-img.getHeight()/2: en metodo draw ya visto antes, le pasamos la ubicación donde pintara nuestra imagen. Para ello utilizo Gdx.graphics.getWidth() que nos devuelve el ancho de nuestra pantalla y Gdx.graphics.getHeight() que nos devuelve el alto de nuestra pantalla, entonces con un sencillo calculo, ponemos nuestra imagen centrada.
Método resize:
  1. Gdx.app.log("Tuto2", "Resolucion: +Gdx.graphics.getWidth()+"x"+Gdx.graphics.getHeight()): Solo pintamos en consola la nueva resolución cuando cambiamos el tamaño de nuestra pantalla.
Método pause:
  1. Gdx.app.log("Tuto2", "Entro en pausa."): informamos cuando entra en pausa nuestra aplicacion, ya sea quitando el foco o minimizando.
  2. musica.pause(): como entra en pausa la aplicación y la música sigue tocando, le indicamos que se ponga en pausa también. Puedes hacer la prueba comentariando esta linea y ejecutando.
Método resume:
  1. Gdx.app.log("Tuto2", "Entro en resumen."): informamos que entro en resumen.
  2. musica.play(): activamos la música otra vez.
Método dispose:
  1. Gdx.app.log("Tuto2", "Entro en dispose."): informamos que esta en dispose
  2. img.dispose(): liberamos la memoria de la textura.
  3. batch.dispose(): liberamos la memoria del SpriteBatch.
  4. musica.dispose(): liberamos la memoria del objeto Music.
  5. sonido.dispose(): liberamos la memoria del objeto Sound.
Ya podemos ejecutar y observar el comportamiento. Pinchando sobre la ventana y observando la consola.
Si agregaste el sub proyecto de android, debes de colocar los assets del repositorio en tu proyecto de andoid.

Considero que a estas alturas ya tiene mas claro como funciona libGdx
Quizá en el transcurso de la semana hago otro tutorial ya con mas sabor xD
Pienso que ya podemos ver como funcionan las colisiones.
Un Saludos
Sigueme en Twiter: https://twitter.com/libgdxESA

Si te gusta mi trabajo y quisieras ver mas y mas rápido, puedes donar $1.00 vía donación paypal:



No hay comentarios.:

Publicar un comentario