Juego Android / iOS: Dia 2 – Primeros pasos en libgdx

De nuevo seguimos con este tutorial sobre como crear un juego para Android / iOS usando Java y el framework libGDX

Todo juego debe tener 2 cosas, imagenes y sonidos asi que lo que vamos a hacer es conseguir estos assets y meterlos en nuestro proyecto

Imagenes para nuestro juego android

La forma mas facil de encontrar las imagenes es buscando en Google. Despues de un rato buscando por la red encontre unas imagenes en formato SVG de las fichas del Tetris

Estas imagenes, al ser escalables, podemos cambiar su tamaño sin perder calidad. Para esta tarea podemos usar el programa Inkscape que trabaja con este tipo de archivos. Como esto no es un tutorial de Inkscape asumire que tenemos las imagenes SVG exportadas a formato PNG que es el que usaremos

Una vez tengamos los archivos png vamos a usar la herramienta GDX Texture Packer para crear un Texture Atlas de los bloques. Es muy sencilla de usar pero si teneis dudas podeis mirar en la wiki para conocer todas las opciones que teneis

Este programa nos generara 1 archivo .atlas y uno o varios archivos .png. Estos archivos los usaremos mas adelante en nuestro codigo. El archivo .atlas es un «mapa» donde se le indica en que archivo png y en que posicion dentro de el estan cada una de las imagenes para luego poder usarlo con la libreria y renderizarlo en la pantalla

Musica para el juego

En Internet Audio Archive podeis encontrar musica para el Tetris buscando por el tag

Podeis usar cualquiera pero recordad que si quereis usarla en un juego que vais a distribuir la licencia deberia ser Creative Commons

Usando los assets en el juego

Empecemos a usar nuestros assets en el juego. Para ello, vamos a comenzar insertando la musica. En la carpeta assets del proyecto Android vamos a crear una carpeta llamada sounds y vamos a copiar aqui nuestra musica

Una vez copiado editaremos la clase TetrisGame quedando de la siguiente manera

package es.rubenjgarcia.tetris;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.audio.Music;
import com.badlogic.gdx.graphics.GL20;

public class TetrisGame extends ApplicationAdapter {
	
	private Music music;

	@Override
	public void create () {
		music = Gdx.audio.newMusic(Gdx.files.internal("sounds/tetris.mp3"));
		music.setLooping(true);
		music.play();
	}

	@Override
	public void render () {
		Gdx.gl.glClearColor(0, 0, 0, 1);
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
	}
	
	@Override
	public void dispose() {
		super.dispose();
		music.dispose();
	}
}

Creamos el objeto Music y le decimos que queremos que cuando acabe vuelva a empezar con el metodo setLooping pasando el valor true

Para liberar el fichero y no dejarlo abierto cuando cerremos la aplicacion se usa el metodo dispose

Si ejecutamos el programa mediante la clase DesktopLauncher podremos ver la pantalla en negro y la musica de fondo

Lo siguiente que haremos sera añadir las imagenes, para ello crearemos una carpeta en la carpeta assets del proyecto android llamada images y copiaremos los archivos .png y el archivo .atlas que generamos antes

En mi archivo .atlas he definido los nombres de las regiones como S,Z,J,L,I,O y T cada uno representando la forma de la pieza. Para dibujar en la pantalla una pieza de tipo S el codigo seria el siguiente

package es.rubenjgarcia.tetris;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.audio.Music;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureAtlas;

public class TetrisGame extends ApplicationAdapter {
	
	private Music music;
	private TextureAtlas blocks;
	private SpriteBatch batch;
	
	@Override
	public void create () {
		music = Gdx.audio.newMusic(Gdx.files.internal("sounds/tetris.mp3"));
		music.setLooping(true);
		music.play();
		
		blocks = new TextureAtlas(Gdx.files.internal("images/blocks.atlas"));
		batch = new SpriteBatch();
	}

	@Override
	public void render () {
		Gdx.gl.glClearColor(0, 0, 0, 1);
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		
		batch.begin();
		batch.draw(blocks.findRegion("S"), 0, 0);
		batch.end();
	}
	
	@Override
	public void dispose() {
		super.dispose();
		batch.dispose();
		music.dispose();
		blocks.dispose();
	}
}

Sencillo, no? Solo tenemos que buscar nuestra region con el metodo findRegion de la clase TextureAtlas y pasarla a nuestro SpriteBatch que sera el encargado de pintarla

Si queremos girarla podemos hacerlo cambiando el codigo del metodo render por el siguiente

@Override
public void render () {
	Gdx.gl.glClearColor(0, 0, 0, 1);
	Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		
	batch.begin();
	Sprite sSprite = new Sprite(blocks.findRegion("S"));
	sSprite.setRotation(90);
	sSprite.draw(batch);
	batch.end();
}

Usando la clase Sprite para generar nuestra imagen y el metodo setRotation pasandole el numero de grados podemos rotar nuestras piezas. En proximos tutoriales veremos todo esto con mas detalle

Como siempre teneis los archivos del proyecto en el repositorio github creado para el tutorial