Tutorial 2: Aplicar dinamismo.

Bienvenidos sean todos.

En el presente tutorial tratare de explicar de la mejor forma xD

Este tutorial es la continuación del primero aqui

Comenzamos:

Podemos navegar por los proyectos en eclipse, comencemos con tuto1-android:

En la carpeta src, esta la clase AndroidLauncher, la cual observamos, el siguiente codigo:

package sv.chuckles.tuto1;

import android.os.Bundle;

import com.badlogic.gdx.backends.android.AndroidApplication;

import com.badlogic.gdx.backends.android.AndroidApplicationConfiguration;

import sv.chuckles.tuto1.Tuto1;

public class AndroidLauncher extends AndroidApplication {

@Override

protected void onCreate (Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();

initialize(new Tuto1(), config);

}

}

No hay nada inusual, podemos observar que la clase extiende de AndroidApplication , que es propia de LibGDX y controla las actividades. Otro punto importan es el método "initialize", el cual instancia la Clase Tuto1, que es nada mas que la clase principal del proyecto CORE. Si observan no se programa en Android, simplemente si instancia la programacion del CORE.

Un dato muy importante es la carpeta "assets", es donde LibGDX busca nuestras imagenes, sonidos, musica o archivos que utilicemos.

Es el turno tuto1-desktop: Al igual que en el proyecto de android, existe una clase principal llamada: "DesktopLauncher" y es su parte homologa, en ella se instancia la clase principal Tuto1, donde es la programacion principal de nuestro juego.

package sv.chuckles.tuto1.desktop;

import com.badlogic.gdx.backends.lwjgl.LwjglApplication;

import com.badlogic.gdx.backends.lwjgl.LwjglApplicationConfiguration;

import sv.chuckles.tuto1.Tuto1;

public class DesktopLauncher {

public static void main (String[] arg) {

LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();

new LwjglApplication(new Tuto1(), config);

}

}

NOTA: El objeto "config" tiene las configuraciones básicas, luego veremos algunas.

Por ultimo la mas importante, tuto1-core:

package sv.chuckles.tuto1;

import com.badlogic.gdx.ApplicationAdapter;

import com.badlogic.gdx.Gdx;

import com.badlogic.gdx.graphics.GL20;

import com.badlogic.gdx.graphics.Texture;

import com.badlogic.gdx.graphics.g2d.SpriteBatch;

public class Tuto1 extends ApplicationAdapter {

SpriteBatch batch;

Texture img;

@Override

public void create() {

batch = new SpriteBatch();

img = new Texture("badlogic.jpg");

}

@Override

public void render () {

Gdx.gl.glClearColor(1, 0, 0, 1);

Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

batch.begin();

batch.draw(img, 0, 0);

batch.end();

}

}

Aquí esta la esencia de todo.

Explicación:

1. La clase hereda de ApplicationAdapter, es un clase que nos proporciona LibGDX, donde esta definido el ciclo de vida de la aplicación.
2. SpriteBatch batch, este objeto se encarga de renderizar todos los componente graficos.
3. Texture img, bueno, no creo que necesite explicacion, es simplemente una textura/imagen.
4. create(), este metodo instancia el batch y la textura. Si somos observadores la textura recibe de parametro el nombre de la imagen, por defecto la imagen "badlogic.jpg" es buscada en la carpeta asset del proyecto de android.
5. render(), este método es el mas importante, ya que es el encargado de estar leyendo, escribiendo estados, pintando imágenes, letras, etc. Este método es ejecutado por un hilo, siempre esta corriendo.
6. Gdx.gl.glClearColor(1, 0, 0, 1);, esta linea es una de las dos de openGL que vamos a escribir. Se encarga de poner un color de fondo en forma de (R,G,B).
7. Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);, esta linea es la ultima que vamos a escribir en OpenGL lo juro. Esta instrucción le dice a LibGdx que rellene toda la pantalla del color de la instrucción anterior.
8. batch.begin();, inicia bloque de dibujar en pantalla.
9. batch.draw(img, 0, 0);, pinta la imagen "badlogic.jpg", en la posición (x=0,y=0). LibGdx utiliza el primer cuadrante del plano carteciano.
10.  batch.end();, finaliza bloque de pintado en pantalla.

Haremos un pequeño cambio, a la forma de pintar nuestra imagen, actualmente se hace por medio de Texture, la cambiaremos por Sprite. Las imágenes son estáticas mientras los sprite tiene dinamismo, poseen posición, color, rotación, etc.

En clase Sprite, su constructor recibe un parámetro una Texture, así que le pasaremos nuestra textura. Y la posicionaremos en la poscion x=200 e Y=100.

Para dibujar nuestro sprite, usaremos el método .draw del Sprite:

package sv.chuckles.tuto1;

import com.badlogic.gdx.ApplicationAdapter;

import com.badlogic.gdx.Gdx;

import com.badlogic.gdx.graphics.GL20;

import com.badlogic.gdx.graphics.Texture;

import com.badlogic.gdx.graphics.g2d.Sprite;

import com.badlogic.gdx.graphics.g2d.SpriteBatch;

public class Tuto1 extends ApplicationAdapter {

SpriteBatch batch;

Texture img;

Sprite sprite;

@Override

public void create () {

batch = new SpriteBatch();

img = new Texture("badlogic.jpg");

sprite = new Sprite(img);

sprite.setPosition(200, 100);

}

@Override

public void render () {

Gdx.gl.glClearColor(0.5f, 0.5f, 0.5f, 1);

Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

batch.begin();

sprite.draw(batch);

batch.end();

}

}

Ejecutemos este código:

Podemos hacer pruebas con diferentes métodos, agreguemos esta linea:

sprite.setScale(0.75f);

Después de la linea 20, este método escala nuestra imagen en 75%, corremos, observamos:

Agreguemos la siguiente linea: sprite.setRotation(45);

Después de la linea 21, este sentencia rota nuestra imagen en 45 grados:

Si nos hemos dado cuenta, todo estas configuraciones son el constructor, vamos hacer que rote indefinidamente. Para tal efecto programaremos en el método render:

public void render () {

float rotar = 5;

Gdx.gl.glClearColor(0.5f, 0.5f, 0.5f, 1);

Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

batch.begin();

rotar += sprite.getRotation();

if(rotar > 360) rotar = 5;

sprite.setRotation(rotar);

sprite.draw(batch);

batch.end();

}

Creamos una variable rotar con 5 grados, luego acumulamos el valor de rotar con el valor del sprite, después preguntamos si rotar supera los 360 grados, si es verdadero rotar tiene el valor inicial de 5 grados, al ejecutar el código, la imagen debe girar.

Para finalizar moveremos la imagen, leída del teclado, para el siguiente tutorial haremos mover la imagen con el giroscopio para el proyecto en Android.

LibGdx utiliza una clase estática llamada "Gdx", la cual nos proporciona mucha información, de la aplicación, inputs, archivos, audio, gráficos, etc. Esta clase nos proporciona un método llamado: isKeyPressed la cual busca si una tecla es presionada, así que agregaremos esta función en el método render, si presionamos la tecla izquierda le quitaremos 5 pixeles, y si presionamos la tecla derecha le sumaremos 5. De igual forma si presionamos la tecla arriba le sumamos 5 pixeles y por el contrario le restamos 5.

Nuestro código fuente quedaría así:

package sv.chuckles.tuto1;

import com.badlogic.gdx.ApplicationAdapter;

import com.badlogic.gdx.Gdx;

import com.badlogic.gdx.Input.Keys;

import com.badlogic.gdx.graphics.GL20;

import com.badlogic.gdx.graphics.Texture;

import com.badlogic.gdx.graphics.g2d.Sprite;

import com.badlogic.gdx.graphics.g2d.SpriteBatch;

public class Tuto1 extends ApplicationAdapter {

SpriteBatch batch;

Texture img;

Sprite sprite;

@Override

public void create () {

batch = new SpriteBatch();

img = new Texture("badlogic.jpg");

sprite = new Sprite(img);

sprite.setPosition(200, 100);

sprite.setScale(0.75f);

sprite.setRotation(45);

}

@Override

public void render () {

float rotar = 5;

Gdx.gl.glClearColor(0.5f, 0.5f, 0.5f, 1);

Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

batch.begin();

rotar += sprite.getRotation();

if(rotar > 360) rotar = 5;

if(Gdx.input.isKeyPressed(Keys.LEFT)){

sprite.setX(sprite.getX()-5);

}else if(Gdx.input.isKeyPressed(Keys.RIGHT)){

sprite.setX(sprite.getX()+5);

}

if(Gdx.input.isKeyPressed(Keys.UP)){

sprite.setY(sprite.getY()+5);

}else if(Gdx.input.isKeyPressed(Keys.DOWN)){

sprite.setY(sprite.getY()-5);

}

sprite.setRotation(rotar);

sprite.draw(batch);

batch.end();

}

}

Ya con todo lo visto, hemos aprendido muchos conceptos, en las posteriores entregas no serán tan técnicas xD

Para el próximo tutorial veremos como implementar el movimiento con giroscopio para el mismo ejemplo.

Un Saludo 

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: