Saludos de nuevo, vamos a empezar con la parte interesante de la creación de juegos, la lógica del juego, para ello vamos a crear 2 modos para que al explicar resulte más sencillo.
Vamos a crear un modo Debug en el que dibujaremos en pantalla las formas geometricas, las moveremos, como si de un personaje, mob, pared, o cualquier objeto se tratara, y el modo normal, donde pintaremos las texturas con sus imágenes originales y veremos el juego tal y como debería ser.
ShapeRenderer
El ShapeRenderer es un objeto que se encarga de dibujar formas geometricas, es capaz de dibujar circulos, conos, lineas, puntos, rectangulos,triangulos, etc. Aunque nosotros para juegos 2D nos centraremos en su uso para circulos y rectangulos.
Para "dibujar" una forma geométrica, deberemos crear el objeto como atributo en nuestra classe y instanciarlo en el método create, no tiene ningún tipo de parámetro y su constructor es únicamente
new ShapeRenderer();
Para dibujar una forma debemos ir al metodo render y escribir algo parecido a ésto.
//En Forma podeéis escojer varias, rectangulo, circulo, rectangulo relleno (FilledRectangle), punto, linea,etc etc.
shaperenderer.begin(ShapeType."Forma");
shaperenderer.setColor(1,1,1,0); // Para el color podeis usar una constante Color.BLACK,etc o
// o diferentes métodos para instanciar color, como el RGBA que estoy usando,
// setColor.(Red,Green,Blue,Alpha);
shaperenderer."Metodo de la forma"; // Hay varios métodos depende de la forma del método //begin, si ponemos por ejemplo ShapeType.Circle, deberemos llamar al método shaperenderer.circle, //y darle los parámetros que necesite, en caso del circulo, coordenadas X e Y y el radio del mismo.
shaperenderer.end();
Aqui teneís la documentación de ShapeRenderer y la documentación para los colores.
http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html
http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Color.html
Rectangulos
Toda lógica en un juego o casi toda está formada por rectángulos, si creamos un juego de plataformas, tu personaje será un rectangulo y si dispara, disparará rectángulos, cuando éstos colisionen contra otro "Mob", "Bicho", enemigo o rectangulo pasará algo, ganarás puntos, perderás una vida o simplemente se acabará el juego, eso depende del programa. Lo mismo puede suceder en un RPG, un juego de arcade, un juego Board etc...
Se puede crear un rectángulo fácilmente desde libgdx, bastará con crearlo como atributo, y instanciarlo, tiene varios contructores:
new Rectangle(); // Si creamos un rectángulo sin parámetros debemos darselos a continuación, ya que //se crea con los parámetros a 0. (rect.x, rect.y, rect.width y rect.height)
new Rectangle(float x, float y, float width, float height); // Esto ya crea el rectángulo parametrizado.
new Rectangle(Rectangle rect); // Crea un rectángulo con otro rectángulo de referencia.
Un ejemplo rápido de rectángulo:
rec= new Rectangle();
rec.height = 64;
rec.width = 64;
rec.x = 400;
rec.y = 400;
http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/math/Rectangle.html
Entradas: táctil, accelerómetro y teclado.
No voy a explicar todo el paquete "Gdx.input" sólo deciros que es el encargado de gestionar los datos de entrada, no obstante comentaré 3 métodos básicos para empezar a mover cosas.
Gdx.input.isTouched() - Devuelve True si se ésta pulsando la pantalla.
Gdx.input.getX() y Gdx.input.getY() , nos devuelve la coordenada X e Y de donde pulsemos.
Gdx.input.getAccelerometerX()
Gdx.input.getAccelerometerY()
Gdx.input.getAccelerometerZ()
Éstos tres métodos devuelven de -10 a 10 los valores de los ejes del accelerometro.
http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/Input.Keys.html
Gdx.input.isKeyPressed(Input.Keys.H); //Letra H del teclado.
Gdx.input.isKeyPressed(Input.Keys.ENTER); //Letra Enter del teclado.
Colisiones
A lo sencillo, las colisiones se dan cuando un rectángulo se toca con otro, simplemente deberemos usar el método del objeto Rectangle llamado , rectangulo1.overlaps(rectangulo2) , nos devolverá true en caso de que colisionen los dos rectángulos.
Tutorial Práctico: El pez y la Gamba.
Paso 1: Descargar Assets ( podeís usar lo que queraís, el pez y la gamba o simples rectángulos sin cargarle imagenes, o cualquier textura que queraís.)
Paso 2. Añadir a la classe el ShapeRenderer, 2 rectángulos ( yo los he llamado recP, y recG, rectángulo Pez y rectángulo Gamba respectivamente).Añadir un valor booleano para activar él modo debug, para alternar si queremos o no ver los rectángulos dibujados.
Paso 3. Instanciar y crear los 2 rectángulos.
Paso 4. Utilizar el Gdx.input para igualar las coordenadas del táctil a las coordenadas del rectángulo del pez arreglando el problema de que no se mueva por las esquinas, sino que el pulso del dedo lleve el centro del pez a el centro del dedo (mas o menos).
Paso 5 (opcional) Evitar que el pez desaparezca por los bordes de la pantalla.
Paso 6. Mover la gamba (Rectangulo) de un lado al otro de la pantalla.
Paso 7. Dibujar las 2 texturas en la ubicación de los dos rectángulos que toque.
Paso 8, Crear la colisión y en caso de que toquen, llevar al pez a su posición inicial.
Aqui os dejo las dos classes como me quedan:
package com.Firedark.libgdxspain;
import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;
import com.badlogic.gdx.math.Rectangle;
public class LibgdxSpain implements ApplicationListener {
private OrthographicCamera camera;
private SpriteBatch batch;
private AssetsManager assets;
//Crear atributos Paso 2
private ShapeRenderer shrend;
private Rectangle recP,recG;
private boolean debug;
private float h,w;
@Override
public void create() {
assets = new AssetsManager();
assets.cargarAssets();
//Instanciar ShapeRenderer Paso 3
shrend = new ShapeRenderer();
//Instanciar Rectangulo Pez Paso 3
recP= new Rectangle();
recP.height = 64;
recP.width = 64;
recP.x = 400;
recP.y = 400;
//Instanciar Rectangulo Gamba Paso 3, fijaos que la envio fuera de la pantalla al empezar.
recG = new Rectangle(800,0,60,60);
//Podemos alternar entre true y false para ver o no los rectangulos.
debug = true;
w = 800;
h = 480;
camera = new OrthographicCamera();
camera.setToOrtho(false,w,h);
batch = new SpriteBatch();
assets.musica.setLooping(true);
assets.musica.play();
}
@Override
public void dispose() {
batch.dispose();
shrend.dispose();
assets.disposeAssets();
}
@Override
public void render() {
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
//Paso 4
//Si tocamos la pantalla.
if(Gdx.input.isTouched()){
//las coordenadas del pez son iguales a la coordenada del "dedo" menos la mitad de lo que mida el rectangulo del pez.
//asi lo centramos. Lo hacemos en X e Y.
recP.x = Gdx.input.getX() - (recP.height/2);
recP.y = h - Gdx.input.getY() - (recP.width/2);
}
//Paso 5
// Si el Pez toca el borde izquierdo, se queda en el borde izquierdo.
if(recP.x < 0){
recP.x = 0;
}
//Si el pez toca el borde derecho , "w" es lo largo de la pantalla,
//Fijaos que añado a la X del rectangulo lo que mide el rectangulo
//Para no meter todo el pez en el borde, pensar que la coordenada X del rectangulo
//es la esquina inferior.
if(recP.x + recP.width > w){
recP.x = w - recP.width;
}
//Lo mismo en el eje Y.
if(recP.y < 0){
recP.y = 0;
}
if(recP.y + recP.height > h){
recP.y = h - recP.height;
}
//Paso 6
//Movimiento de la Gamba, el bucle render es ciclico, así que aprobecharemos para ir
//restandole -0.5 a su coordenada x contantemente.
recG.x = recG.x - 0.5f;
//Si llega al -60 de la pantalla, es decir se esconde en ella, vuelve a empezar.
if(recG.x < -60){
recG.x = 800f;
}
//Paso 8
// Si Pez choca contra Gamba, el Pez vuelve a 400 x 400, aqui podriamos hacer lo que quisieramos
//GameOver, Perder vidas, etc etc
if(recP.overlaps(recG)){
recP.x = 400;
recP.y = 400;
}
batch.begin();
batch.draw(assets.background,0,0);
//Paso 7
//Después del Background, dibujamos Pez y Gamba en las posiciones de los 2 rectangulos
//esto ya hará que pez y gamba sigan a los rectangulos pertinentes, y se moverán.
batch.draw(assets.pez,recP.x,recP.y);
batch.draw(assets.gamba,recG.x,recG.y);
batch.end();
//Si activamos el Debug, dibujaremos los 2 rectangulos, pez azul, y gamba rojo.
if(debug){
//Azul
shrend.begin(ShapeType.Line);
shrend.setColor(Color.BLUE);
shrend.rect(recP.x, recP.y, recP.width, recP.height);
shrend.end();
//Rojo
shrend.begin(ShapeType.Line);
shrend.setColor(Color.RED);
shrend.rect(recG.x, recG.y, recG.width, recG.height);
shrend.end();
}
}
@Override
public void resize(int width, int height) {
}
@Override
public void pause() {
}
@Override
public void resume() {
}
}También he tocado la classe AssetsManager para añadir las 2 nuevas Imágenes:
package com.Firedark.libgdxspain;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.audio.Music;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
public class AssetsManager {
public Texture Tbackground,pez,gamba;
public TextureRegion background;
public Music musica;
public void cargarAssets(){
Tbackground = new Texture(Gdx.files.internal("data/Images/oceanbackground.jpg"));
pez = new Texture(Gdx.files.internal("data/Images/pez.png"));
gamba = new Texture(Gdx.files.internal("data/Images/gamba.png"));
background = new TextureRegion(Tbackground,0,0,800,480);
musica = Gdx.audio.newMusic(Gdx.files.internal("data/Music/musica.wav"));
}
public void disposeAssets(){
Tbackground.dispose();
musica.dispose();
pez.dispose();
gamba.dispose();
}
} Bueno, ésto ha sido todo ésta semana, espero que haya sido productivo, se agradecen comentarios, dudas, +1 de Google y todo eso. Espero que empezeís a pensar en vuestra lógica del juego y nos vemos la próxima semana con el tema de las pantallas de juego y algun detallito más. ¡Gracias!
