TileSet & TileMap

Una vez conseguido el pintado desde SRAM toca hacer un motor de tiles para generar gráficos de forma que se consuman el mínimo de recursos posibles.

TileSet:
Es una colección de imágenes del mismo tamaño con las que podemos formar otras imágenes más grandes. Podemos compararlo con una paleta de colores, lo veremos más claro con la definición del tilemap.

TileMap:
Es una rejilla que contiene los índices de las imágenes del tileset. Imaginemos un mapa de bits, el mapa de bits es una cuadrícula en la que cada casilla tiene un color (un pixel). Pues a grandes rasgos, un tilemap es igual que mapa de bits pero cada una de las casillas es una imagen en vez de un color.

Un enlace donde se explica mejor la teoría de los tiles: Tilemapping - Juegos basados en tiles

Esta vez he utilizado para las pruebas unos tiles de Sonic the Hedgehog. He actualizado el software que convierte imágenes en código para poder generar el código del tileset. Lo podéis encontrar en la página de descargas.

TileSet

El siguiente código muesta como indexar los tiles en el TileMap:

 
...
byte TileMap[18][26] = {
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0A, 0x0B, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10, 0x11, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x03, 0x00, 0x00, 0x0E, 0x0F, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x08, 0x09, 0x00, 0x00, 0x0E, 0x0F, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0E, 0x0F, 0x00, 0x00, 0x0E, 0x0F, 0x00, 0x00, 0x02, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0A, 0x0B, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0E, 0x0F, 0x02, 0x03, 0x0E, 0x0F, 0x00, 0x00, 0x08, 0x09, 0x0A, 0x0B, 0x00, 0x00, 0x00, 0x00, 0x10, 0x11, 0x00, 0x00, },
  {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0E, 0x0F, 0x08, 0x09, 0x0E, 0x0F, 0x00, 0x00, 0x0E, 0x0F, 0x10, 0x11, 0x0A, 0x0B, 0x00, 0x00, 0x0E, 0x0F, 0x00, 0x00, },
  {0x06, 0x07, 0x06, 0x07, 0x06, 0x07, 0x0E, 0x0F, 0x0E, 0x0F, 0x0E, 0x0F, 0x06, 0x07, 0x0E, 0x0F, 0x0E, 0x0F, 0x10, 0x11, 0x06, 0x07, 0x0E, 0x0F, 0x06, 0x07, },
  {0x0C, 0x0D, 0x0C, 0x0D, 0x0C, 0x0D, 0x0E, 0x0F, 0x0E, 0x0F, 0x0E, 0x0F, 0x0C, 0x0D, 0x0E, 0x0F, 0x0E, 0x0F, 0x0E, 0x0F, 0x0C, 0x0D, 0x0E, 0x0F, 0x0C, 0x0D, },
  {0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, 0x12, 0x13, },
  {0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, 0x18, 0x19, },
  {0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, },
  {0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, 0x1A, 0x1B, },
};
...
 

El resultado de la mezcla es el siguiente:

Resultado al indexar los tiles del TileSet en el TileMap

Y así se ve por pantalla:

Resultado en el monitor

En la página de descargas podéis encontrar el código del ejemplo, se llama Tiles.
En la próxima entrega: Sprites animados.

---

Tiles: VGMaps
Sonic: http://www.vgmaps.com/Atlas/MasterSystem/index.htm#SonicTheHedgehog