Isaque Criscuolo
Isaque Criscuolo
@isaque.criscuolo
3d y animación

¿Qué son el tileset y el tilemap en el desarrollo de videojuegos?

  • por Isaque Criscuolo @isaque.criscuolo

Comprende para qué se utilizan en el game design y disfruta de consejos para crear tus propias composiciones 2D y 3D

Lo que define un buen game design o diseño de juego es la capacidad de ofrecer a los jugadores retos que sean constantes pero no imposibles de superar, y que lleven a otros desafíos gradualmente más difíciles y complejos.

Todo ello, por supuesto, a un ritmo que mantiene la atención y el compromiso del jugador sin ser repetitivo.

El conjunto de elecciones en un videojuego también incluye la construcción del escenario, un elemento esencial para dar vida a un universo de personajes y ofrecer una experiencia completa a los jugadores.

Ejemplos de "tilesets" de videojuegos.
Ejemplos de "tilesets" de videojuegos.

En el desarrollo de juegos en 2D, especialmente los basados en el pixel art, se utiliza la técnica del tileset y del tilemap. Ambos ayudan a construir escenarios mediante un proceso sencillo, ágil y capaz de hacerle la vida más fácil a miles de game designers.

De hecho, esta es una de las técnicas más utilizadas hasta hoy, y es la piedra angular de grandes juegos como Super Mario Bros, Pacman, Zelda: Link's Awakening, Starcraft y Sim City 2000.

¿Qué es un tileset?

Un tileset o set de teselas es un conjunto de texturas reunidas en una misma imagen, una composición. Estas texturas forman las piezas gráficas que componen el escenario de un videojuego: suelos, paredes, escaleras, techos, etc.

Para crear este conjunto, utilizamos una cuadrícula compuesta por cuadrados del mismo tamaño. En este caso, 16x16px. Cada cuadrado de esta cuadrícula se llama tile o tesela, la parte más pequeña de la composición.

Ejemplo de "tileset" y cómo se transforma en un "tilemap".
Ejemplo de "tileset" y cómo se transforma en un "tilemap".

Esta colección de piezas (o texturas) debe organizarse de manera que se puedan distinguir objetos como una pared, un toldo, varias puertas, una parte de suelo y un par de colores lisos, por ejemplo. A partir de estos elementos se creará un escenario.

El tileset es muy importante para el desarrollo de un juego, porque es el archivo que servirá de referencia durante todo el proceso y ayudará a reducir el tiempo de desarrollo mediante la creación modular de los escenarios.

¿Qué es el tilemap?

El tilemap o mapa de teselas es el escenario, un mapa de cómo deben organizarse las teselas. Los llamamos mapas (y no escenarios) porque en el universo de los juegos es mucho más común utilizar la expresión “mapa”.

"Es importante entender que, con el mismo tileset, podemos crear un número infinito de mapas. Cuanto mejor esté diseñado el tileset, más posibilidades creativas tendremos”, afirma el director de arte Daniel Benítez (@dabntz).

Un mismo "tileset" puede servir de base para varios "tilemaps".
Un mismo "tileset" puede servir de base para varios "tilemaps".

Según el game artist Chu Yamasaki, los tilesets y los tilemaps se utilizan mucho en el desarrollo de juegos por varias razones, entre ellas:

  • Permiten crear rápidamente niveles con un número limitado de imágenes.

  • Permiten optimizar los archivos, ya que hacen que se carguen menos archivos individuales en la memoria durante el juego.

  • Facilitan la creación de un aspecto cohesivo y elegante, porque se necesitan menos activos.
Ejemplo de un "tileset" con piezas de Lego.
Ejemplo de un "tileset" con piezas de Lego.

Aplicaciones prácticas

Para Ariel Velloso, game developer o desarrollador de juegos y productor digital brasileño, un tileset es una forma habitual de facilitar el desarrollo de juegos en 2D, principalmente vistos desde arriba (top down view) o de forma lateral (side-scrollers, como los juegos de plataformas).

“Los tilesets también pueden utilizarse para construir entornos 3D. Puedes utilizar partes del tileset manualmente, recortándolas en softwares de imagen, o puedes utilizar un software como Crocotile o Sprytile, que agilizan la aplicación de tilesets en entornos 3D. Esta técnica es interesante si quieres hacer un prototipo rápido en 3D, o si quieres darle a tu proyecto una estética de ‘32 Bits’, como esos juegos de la primera época de la Playstation 1”, afirma Ariel.

Ejemplo 1

Proyecto 3D creado con "tileset" y "tilemap".
Proyecto 3D creado con "tileset" y "tilemap".
Animación de juegos en 3D creada a partir de "tilesets" y "pixel art".
Otro ejemplo de las posibilidades de creación de escenas en 3D.
Desde escenarios sencillos a otros más complejos, las posibilidades son infinitas con la técnica del "tileset".

Chu Yamasaki, game artist, también destaca otro ejemplo:

En este tileset de Bedtime Fright, todos los objetos del escenario de la primera versión del juego caben en este archivo de 128x128 píxeles.

"Tileset" del juego Bedtime Fright.
"Tileset" del juego Bedtime Fright.

Ejemplo del tileset aplicado:

Captura del juego Bedtime Fright con el "tileset" aplicado.
Captura del juego Bedtime Fright con el "tileset" aplicado.

Softwares útiles

Creación de tilesets

Pyxel Edit

Este software destaca por su sencillez y facilidad de uso, además de las herramientas para crear y animar tilesets. Además, el precio es asequible.

Aseprite

Se trata de uno de los mejores programas del mercado, utilizado por muchos profesionales. Su diseño es excelente y siempre está recibiendo actualizaciones. Aunque es más caro que Pyxel Edit, la inversión merece la pena, ya que ofrece más funciones con más sencillez.

Photoshop

Si ya tienes una licencia de Photoshop, puedes crear tus tilesets con él, ya que ofrece varias opciones avanzadas para crear diversos elementos de pixel art.

Creación de tilemaps

Tiled

Este programa está enfocado a la creación de tilemaps para videojuegos, por lo que ofrece una gran cantidad de opciones para crear mapas, desde los más sencillos hasta los más complejos. Además, es gratuito.

Pyxel Edit

Además de crear tilesets, Pyxel también sirve para crear tilemaps y es una de las mejores opciones de software disponibles. Su versatilidad compensa su precio.

Recursos adicionales

Si quieres crear un tileset, pero no sabes por dónde empezar, Ariel recomienda Itch.io. En él encontrarás conjuntos de tilesets ya preparados a un precio bajo. También tiene archivos gratuitos.

Ariel también aconseja dos tilesets gratuitos y de buena calidad que puedes descargar a cambio de abonar la cantidad que quieras para contribuir al trabajo de los desarrolladores. Haz clic aquí y aquí.

Ejemplo de "tileset" y "tilemap" para el juego Super Mario Bros 3.
Ejemplo de "tileset" y "tilemap" para el juego Super Mario Bros 3.

No olvides que puedes aprender de la mano de Daniel Benítez a construir tilesets en Pyxel Edit y crear escenarios para un juego 2D en el curso online Creación de escenarios de pixel art para videojuegos.

Versión en español de @laura_bernal_m

También te puede interesar:

- 5 programas gratuitos para iniciarse en la creación de videojuegos (sin saber programar)
- Among Us y los fundamentos del buen diseño de videojuegos
- ¿Qué es el blocking en animación y por qué es tan importante?
- Introducción a Unity para videojuegos 2D, por Juan Diego Vázquez Moreno
- Adobe Photoshop para concept art, por Nacho Yagüe

Cursos recomendados

Blender para principiantes. Un curso de 3D y Animación de Carlos Sifuentes Haro
Domestika Basics · 7 cursos

Blender para principiantes

Un curso de Carlos Sifuentes Haro

Aprende a dominar las herramientas básicas del software para crear contenidos audiovisuales 2D y 3D como un profesional

  • 71.119
  • 93% (1.1K)
REBAJAS
93% Dto.
Precio original $29.99USD
Comprar $1.99USD
Introducción a After Effects. Un curso de 3D y Animación de Carlos "Zenzuke" Albarrán
Domestika Basics · 5 cursos

Introducción a After Effects

Un curso de Carlos "Zenzuke" Albarrán

Aprende After Effects sin conocimientos previos y domina el mejor software de motion graphics y postproducción del mercado

  • 287.632
  • 97% (4.8K)
REBAJAS
93% Dto.
Precio original $29.99USD
Comprar $1.99USD
Diseño y modelado arquitectónico 3D con Revit. Un curso de 3D, Animación, Arquitectura y Espacios de Arturo Bustíos Casanova

Diseño y modelado arquitectónico 3D con Revit

Un curso de Arturo Bustíos Casanova

Modela paso a paso una vivienda de diseño ortogonal usando la metodología BIM (Building Information Modelling)

  • 45.164
  • 99% (1.3K)
REBAJAS
95% Dto.
Precio original $19.99USD
Comprar $0.99USD
0 comentarios