Tilemaps - Juego de Plataformas 2D (5)


En el capítulo de hoy les voy a enseñar sobre los Tilemaps, usados para simplificar el diseño de mapas en los niveles.
> El proyecto que puedes usar como guía se encuentra aquí.

Creando los nodos


Para empezar a usar tilemaps en nuestros niveles, sólo tenemos que añadir un nodo: "Tilemap" y asignarle un recurso ("Tile set") que guarde todos los tiles que usaremos para ese mapa.

Creando los Tileset

Como pueden ver arriba: hay un tilemap para las plataformas que se encuentran en "primer plano", osea en las que se sitúa el jugador. Además hay un mapa diferente que se encarga de controlar las plataformas que simulan estar detrás de todo y un mapa que se encarga de controlar todos los Sprites o tiles de decoración (arbustos, árboles, plantas).

Cada nodo de Tilemap necesita un recurso diferente que guarde las imágenes. Para crearlo sólo necesitamos una nueva escena:

En la nueva escena tenemos que añadir como nodo padre un "Node", y para distinguir cada tile tenemos que usar como nodo padre un Sprite y tener dentro el tipo de cuerpo físico que necesitamos. Generalmente se usa un StaticBody2D en los tiles, también recomiendo que el collision_shape sea un poco más grande que el Sprite en el eje X, que sobresalga un poco.

Para elegir la imagen en cada tile, tenemos que hacer clic en las propiedades del Sprite y activar la región:

Después, tenemos que editar la región de la textura para que tengamos un tile exacto:

Hacemos clic al modo de cuadricula:

Si el arte no es tuyo, vas a tener que adivinar el tamaño que tiene cada tile. En este caso, miden aproximadamente 32x32 px. Lo tenemos que asignar en los parámetros de los cuadrados:

Y ahora sólo tenemos que seleccionar el cuadro que queremos para ese Sprite, usando el mouse para crear ese cuadro se selección:

Guardar recurso Tilemap


Cuando tenemos nuestra escena con todos los Sprites, vamos a hacer clic en la pestaña de "Escena" que se encuentra en la parte superior del engine y buscamos la opción de "Convertir a...", ahí podemos convertir la escena en un Tileset.

Después tenemos que elegir un lugar para guardar el archivo. Para guardarlo con formato de Tileset tenemos que escribir el nombre y poner ".res" (nombre_tile.res)

Creando el nivel


Para asignar el Tileset, vamos a hacer clic en uno de los nodos Tilemap que creamos hace un rato. En el inspector vamos a tener lo siguiente:

En la propiedad "Tile set" vamos a asignar los Tiles.res que tengamos preparados para el nodo, en mi caso son las tierras superiores así que las voy a seleccionar en el lugar donde la tengo guardada. Como vimos arriba, cada tile tiene un tamaño de 32x32 pixeles, así que en la propiedad "Size" de la pestaña "Cell", vamos a poner un ancho y alto de 32 px, para tener el espacio más justo en las imágenes del mapa.

Ya lo que queda es que hagas el mapa que quieras. Asignamos las otras escenas de tiles en los nodos tilemap que tenemos creados y ya podemos diseñar nuestro mundo.




Hasta aquí el paseo por los Tilemap. Mañana un artículo que intentará ser más interesante :').

Desde el Nautilus, me despido

4 comentarios:

Con la tecnología de Blogger.