viernes, 10 de octubre de 2014

Tiled + Box2D Parte 1

En esta parte del tutorial vamos a utilizar Tiled para crear mapas.

¿Que es Tiled?

Tiled es un editor que permite el uso de "tiles" para crear facilmente mapas. Tambien se pueden agregar mas cosas como las posiciones de los enemigos, las posiciones de monedas, items del juego, etc. La siguiente imagen muestra un juego echo con Tiled.



¿Como funciona Tiled?

La creacion de mapas con Tiled es muy sencilla.
  • Se selecciona el tamaño del mapa
  • Se agregan las imagenes (tilesets) al mapa
  • Se colocan los tilesets en el mapa
  • Se agregan objetos al mapa
  • Se guarda el mapa como un archivo tmx
  • Se importa el archivo tmx al juego


Crea tu primer mapa

En esta parte del tutorial utilizaremos el tileset creados por Kenney. Se puede descargar directamente aqui el tileset que utilizaremos a lo largo de este tutorial.

Configuración

Despues de abrir Tiled vamos a File > New... para crear un nuevo mapa. Aparecera la siguiente ventana donde tenemos que configurar algunas opciones:


Orientation: Existen dos opciones que son isometric y orthogonal. Para este tutorial seleccionaremos Orthogonal. En cuanto a la vista isometrica se puede decir que es una forma de representar un objeto ee 3D en 2D.

Layer Format: Es el tipo de codificacion y compresion del mapa, en este tutorial se utilizara Base64(uncompressed) ya que la documentacion de LibGdx dice que si queremos que el mapa sea soportado en GWT debe tener este formato.

Tile size: Es el tamaño que tiene queda tile del tileset, en este caso cada tile es de 70x70 pixeles.

Map size: Es el tamaño de tiles que tendra nuestro mapa de ancho y de alto, en este caso 15 tiles de ancho y 15 tiles de alto.

Ahora es necesario agregar el tileset. Vamos a Map > New TileSet... Aparece la siguiente ventana:


Name: Nombre del tileset.

Image: Es la ruta donde esta el tileSet. En este tutorial hay que seleccionar el que descargamos anteriormente.

Use transparent color: Esta opcion hace que el color de la transparencia se muestre del color que seleccionamos. No se seleccionara esta opcion.

Tile width y Tile height: Es el ancho y la altura de cada tile, en este caso son de 70x70 pixeles.

Las demas opciones las dejaremos con valor de 0 pixeles ya que no son necesarias para este tutorial.

Al dar clic en OK Tiled se vera asi:


Agregar tiles

El siguiente paso es agregar los tiles al mapa, para esto es necesario ir a parte inferior derecha y seleccionar un tile. Se pueden seleccionar uno o muchos tiles al mismo tiempo en este caso solo seleccionare el tile del piso. Despues nos vamos al area gris donde podemos estampar los tiles en la cuadricula.


Si quisieras borrar algun tile en la parte superior se encuentra la opcion para borrar. Tambien es posible rotar e invertir los tiles presionando las teclas X y Z.

Despues de agregar algunos tiles, se tiene el siguiente mapa:


Agregar tiles en primer plano

En Tiled es posible agregar tiles que se sobrepongan sobre otros tiles para esto es necesario crear una nueva capa. Se selecciona la opcion Layer > Add Tile Layer.
Ahora se tiene una nueva capa llamada Tile Layer 2. Con la capa Tile Layer 2 seleccionamos una roca y la colocamos sobre algun tile del Tile Layer 1.


Despues de agregar algunos tiles en las diferentes capas tenemos un mapa como el siguiente:


Con esto terminamos la primera parte de este tutorial, en la parte 2 vamos a ver como agregar objetos y propiedades a estos para despues utilizalos en Libgdx y crear cuerpos de Box2D.