viernes, 22 de junio de 2012

Diseñando niveles para tus juegos libgdx : TiledMaps


A la hora de hacer un juego, siempre es importante el diseño de tus niveles y hacerlo todo en código es bastante difícil, actualmente hay muchas técnicas que ayudan a diseñar niveles como: el pixeliado que es una de las más viejas y solo trata de una imagen con puntos indicando el nivel, como la imagen de abajo en donde los puntos rojos representan los obstáculos o enemigos y el verde el inicio del jugador.

También existen otras como tiledMaps y los archivos svg que son para definir gráficos vectoriales, en esta ocasión explicare los tiled maps en otro momento le tocara el turno a los archivos svg que son muy buenos a la hora de usarlos en conjunto con boxd2, un editor de archivos svg Inkscape.

Un editor para archivos tilde es TiledQt 0.8.1 for Windows , como libgdx soporta estos tipos de archivos es muy fácil usarlos.

primero que nada tenemos que crear texturas o objetos como plantas para pintarlas con el programa tiled Qt, estas texturas las cree en un editor de imágenes común con un tamaño de 32x32 puede ser desde photoshop a paint para luego empaquetarlas con TexturePacker como en la imagen:  



En el input va la carpeta donde se tiene todas las texturas y en el output una carpeta vacía, después de presionar Pack se crea una imagen  con todas las demás y un archivo llamado "pack" todo esto en la carpeta que se selecciono como output.



Con la textura empaquetada ahora si abrimos tiled Qt y creamos un archivo nuevo, en el menú se selecciona "Mapa" y agregamos un nuevo conjunto de patrones y elegimos la imagen que nos genero TexturePacker. Después de esos pasos simplemente es seleccionar de la parte donde aparecen los patrones o texturas, y pintar en la plantilla.






Pinte pensando en un juego de estrategia  con vista área, simplemente guardamos el archivo tmx en el proyecto de nuestro juego.


En java solo cargamos el archivo con estas líneas: 


map = TiledLoader.createMap(Gdx.files.internal("data/test.tmx"));
atlas = new TileAtlas(map, Gdx.files.internal("data/"));




Y en nuestro bucle pintamos con esta línea:


tileMapRenderer.render(guiCam);


Con esas tres líneas el resultado es la implementación de los archivos tmx, gracias a que libgdx hace esto fácil , no me encontrado con otras librerías que soporten este formato aparte de libgdx, puede ser útil a la hora de crear juegos de estrategia o plataforma, los archivos tmx no solo son para pintar fondos o texturas con mas trabajo pueden usarse en conjunto con boxd2 para crear colisiones con las texturas y crear niveles vivos no solo pintados como los dejamos en esta ocasión, todo esto se logra parseando el archivo y creando un archivo de colisiones y posteriormente crear el objeto en box2d un buen tutorial sobre esto que les comento lo pueden leer aquí  --> dpk.

Les dejo el proyecto eclipse que hice para este ejercicio tiledMapsTest.