Tiles, tilesets y tilemaps en pixel art

Un tile es un sprite pequeño, como una pieza de rompecabezas. Un tileset es un grupo de tiles que juntos muestran un objeto, como una banqueta con una rejilla. Un tilemap es la escena completa hecha con tilesets. Dibuja abajo mi tileset de 9 partes, un paso a la vez.

Este sprite es ancho. Es más fácil dibujarlo en una computadora o con el teléfono de lado.

Paso 1

Colores para este paso
Herramientas
Guía

Mostrar el paso terminado

Tile, tileset, tilemap

Diapositiva de Roman: un solo tile, un tileset de nueve tiles con una rejilla y un tilemap hecho con él
  • Tile: un sprite pequeño, una pieza del rompecabezas. Aquí cada tile mide 16 por 16 píxeles.
  • Tileset: un conjunto de tiles que muestra un objeto entero o una parte: la rejilla, un trozo de banqueta, un trozo de calle.
  • Tilemap: la composición más grande hecha con tilesets: el suelo, el terreno, el nivel entero.

Por qué los necesitamos

¿Te imaginas dibujar a mano cada tile de un nivel? Los tiles aceleran y automatizan el trabajo. Dibujas una obra pequeña y la reutilizas en todas partes. Y cuando cambias un tile del set, el cambio aparece en cada lugar donde se usa, sin tocar cada copia a mano.

Un tileset, muchos tilemaps

Un tilemap: una banqueta ancha con una rejilla junto al borde
Una banqueta con una rejilla
Una variación del tilemap: los mismos tiles acomodados como una zanja de calle entre dos banquetas
Los mismos 9 tiles, otra calle

Los dos mapas usan exactamente los nueve tiles que acabas de dibujar. En Aseprite: pega el tileset en un lienzo que encaje con la cuadrícula, haz clic derecho en la capa y elige Convert to Tilemap. Así pintas con tiles enteros. En el modo manual, editar un tile cambia todas sus copias. En el modo automático, editar un tile ya colocado crea uno nuevo y deja los demás como están.

Haz tiles que encajen

Los tiles tienen que encajar exactamente en la cuadrícula, en tamaño y en acomodo, o el editor no puede cortarlos. Y los bordes tienen que coincidir: los píxeles del borde derecho de un tile siguen en el borde izquierdo del siguiente. Pon cuatro copias lado a lado y busca una costura. Si ves una, arregla esos píxeles del borde. Luego prueba tu propio set: cambia el color de las piedras, agrega una segunda rejilla o rehazlo con los ladrillos de la lección del muro de ladrillos.