Guía de pixel art isométrico — Tiles, sprites y personajes

El pixel art isométrico se dibuja sobre una cuadrícula de rombos 2:1: cada tile es exactamente el doble de ancho que de alto, y la altura se dibuja como una serie vertical de píxeles en lugar de simularse con una cámara en perspectiva. 32×16 es el tamaño de tile más habitual, 64×32 para escenas más grandes y 16×8 para objetos pequeños y personajes. Una vez que aceptas la proporción 2:1, todas las demás decisiones —la huella de los sprites, los ciclos de caminata, las costuras y el orden de profundidad— se derivan de ella.

Esta página recorre la cuadrícula, los tiles, los sprites y los sets de personajes de cuatro y ocho direcciones en el orden en que realmente se construyen. Después cubre el paso que la mayoría de los tutoriales omite: convertir esa misma cuadrícula de rombos en un mundo 3D real y transitable en el navegador, donde la inclinación de la cámara está fijada para coincidir con el arte y los tiles se convierten en geometría. El 3D game builder de Neta Studio es la herramienta que usamos para ese último paso, y por eso vale la pena acertar exactamente con los detalles de proyección que encontrarás aquí.

Respuesta rápida: ¿Qué hace que el pixel art sea «isométrico»?

El pixel art isométrico es una proyección rotada, no una proyección en perspectiva. Los ejes X e Y del mundo corren en diagonal en la pantalla —hacia la derecha y hacia abajo uno, hacia la izquierda y hacia abajo el otro— y el eje vertical sube en línea recta en píxeles individuales. Nada converge, no hay punto de fuga, y la profundidad es una convención que mantienes a mano: más abajo en el lienzo significa más cerca, una serie de píxeles más alta significa más altura.

La proporción es de 2 a lo ancho por 1 hacia abajo en ambos ejes del suelo, lo que sitúa cada borde del suelo a unos 26,57° de la horizontal. Técnicamente se trata de una proyección dimétrica; el isométrico verdadero tiene el mismo escorzo en los tres ejes, a unos 35,264° sobre el horizonte, y produce un tile de suelo de aproximadamente 1,732:1. El nombre se quedó porque «isométrico» es la palabra que usa la gente, y casi todos los tilesets que encontrarás están dibujados a 2:1.

La cuadrícula 2:1

La proporción 2:1 existe porque se ajusta a los píxeles cuadrados. Un borde de 2 a lo ancho y 1 hacia abajo es una escalera limpia —dos píxeles a la derecha, uno hacia abajo, y se repite—, así que cada píxel del borde cae en un píxel entero cuando estampas el tile. Una proyección real de 30° tiene una proporción de aproximadamente 1,732 a 1: por cada 2 píxeles a lo ancho avanzas 1,155 hacia abajo. Eso no puede caer en una cuadrícula de píxeles, así que los bordes alternan entre tramos de uno y de dos píxeles y la línea tiembla. Puedes colocar esos píxeles a mano para un objeto estrella; no puedes hacerlo para un tileset que debe estampar miles de copias.

El error que la gente comete de verdad es girar un lienzo cuadrado 45° y llamar isométrico al resultado. Un cuadrado girado 45° sigue siendo un cuadrado: el rombo tiene el mismo ancho que alto, la cara superior y las caras laterales acaban con la misma silueta, y las filas de profundidad adyacentes dejan de separarse con claridad. Dibuja el rombo a 2:1 desde el primer píxel; nunca gires un sprite de 16×16 o 32×32 para hacer un tile.

Ten presente el paso de tile como un desplazamiento. A 32×16, mover un tile hacia el este es +32 en x y +16 en y en el espacio de pantalla; mover un tile hacia el norte es +32 en x y -16 en y. Ese único par de desplazamientos es lo que usas para la colocación, el movimiento de los sprites y el orden de profundidad.

Dibuja tu primer tile isométrico

Dibuja un solo tile antes de dibujar un tileset. El objetivo es un tile que puedas estampar sin retocarlo, lo que significa que cada píxel del borde se mantiene en el paso 2:1 y las tres caras visibles comparten una misma rampa de valores: la cara superior con el valor base, un lado un paso más oscuro y el otro dos pasos más oscuro.

Las dos caras laterales son lo que hace que se lea como isométrico. Si ambos lados usan el mismo valor, el cubo se aplana hasta convertirse en un hexágono y el ojo deja de percibir la altura. Elige una dirección de luz —la superior izquierda es la convención— y no la cambies nunca dentro de un proyecto. Así todos los tiles y todos los sprites coinciden en dónde está la luz.

Sprites isométricos y hojas de sprites

Un sprite de vista lateral tiene una huella rectangular y camina en horizontal. Un sprite isométrico tiene una huella de rombo, y sus pies quedan dentro de ese rombo. Todo lo relativo a la hoja se deriva de eso: el anclaje es el centro del rombo, o la esquina inferior del rombo si prefieres pensar en pies, y el sprite se dibuja en el mismo origen de tile que el tile de suelo sobre el que se apoya.

El movimiento en pantalla es diagonal. Mover un tile del mapa hacia el este es +32 píxeles a la derecha y +16 hacia abajo; un tile hacia el norte es +32 a la derecha y -16 hacia abajo. Así que un ciclo de caminata mirando al este no es un bucle horizontal: el cuerpo se desplaza a lo largo de la pendiente 2:1 mientras las piernas se alternan. Si los desplazamientos de cada fotograma se dibujan sobre una línea horizontal, el personaje patina por encima del tile. Compruébalo colocando cuatro copias en diagonal y confirmando que los pies siguen los centros de los tiles.

Organiza la hoja con filas para la dirección y columnas para el fotograma, en una celda uniforme. Una huella de 32×16 con un personaje de 32 píxeles de alto cabe en una celda de 32 de ancho por 48 de alto: 16 píxeles para el rombo y 32 encima para el cuerpo. Mantén el alfa binario, 0 o 255. Los píxeles de borde semitransparentes recogen lo que tengan detrás en cuanto la hoja se empaqueta o se escala, y aparece un halo claro alrededor de cada personaje sobre un tile oscuro.

Personajes isométricos (4/8 direcciones)

Cuatro direcciones es el estándar porque la cuadrícula del suelo tiene cuatro diagonales: sureste, suroeste, noreste y noroeste. Esas orientaciones cubren todo el movimiento a lo largo de los ejes del mapa. Ocho direcciones añade las orientaciones cardinales de pantalla —norte, sur, este y oeste—, que solo aparecen cuando el personaje camina en diagonal por la cuadrícula, a lo largo de ambos ejes a la vez. Eso duplica el arte, y las cuatro filas extra solo se ven mientras el jugador mantiene pulsadas dos teclas.

El motor necesita una búsqueda determinista. O bien la fila es igual al índice de dirección y la columna es igual al fotograma, o bien un índice plano de directionIndex * framesPerDirection + frame. Anota el orden en un archivo de texto junto a la hoja. El bug clásico es una hoja creada empezando por el este e importada empezando por el sur, de modo que una dirección mira hacia atrás y el informe llega como «la animación de caminata se ve mal».

Cantidad de fotogramas y sincronización

Un ciclo de caminata se lee a entre 8 y 12 fotogramas por segundo. Cuatro fotogramas a 8 fps son 125 ms por fotograma; seis fotogramas te permiten dibujar una pose de contacto y una pose de paso, y se mueve con más fluidez a lo largo de la diagonal 2:1 sin mucho trabajo extra. Mantén la misma cantidad de fotogramas en cada fila de dirección, a menos que tus metadatos guarden un recuento por dirección: una fila de seis fotogramas junto a filas de cuatro se reproduce a la velocidad equivocada en el momento en que el código da por supuesta una cuadrícula uniforme. El reposo son uno o dos fotogramas en un bucle lento. Los ataques y las interacciones van en una hoja aparte con el mismo tamaño de celda, para que el pivote nunca cambie.

Voltear es más barato y casi siempre incorrecto

Reflejar de este a oeste reduce a la mitad el dibujo. También refleja la luz. Si tu luz viene de la parte superior izquierda, un sprite volteado recibe luz desde la parte superior derecha, y los detalles asimétricos —un brazo con escudo, una vaina, la correa de una bolsa— acaban en el lado equivocado. Refleja solo cuando el personaje sea simétrico y el sombreado sea lo bastante plano como para que nadie lo note, y no reflejes nunca un sprite que lleve un brillo direccional fuerte.

Objetos, accesorios y altura

La caja de arte de un accesorio es más alta que su huella. Un árbol con una huella de 1×1 (32×16) y 40 píxeles de copa por encima necesita una celda de 32 de ancho y unos 56 de alto: 16 para el rombo y 40 para lo que se eleva por encima. Decide ese tamaño de celda una sola vez y mantén todos los accesorios dentro del mismo módulo, o el importador necesitará un desplazamiento por sprite para cada uno.

Los accesorios de varios tiles se dibujan sobre un rombo más grande. Un edificio de 2×2 cubre cuatro tiles, así que su huella en el suelo es un rombo de 64×32, aunque el arte se eleve 48 o 64 píxeles por encima. Mantén el origen en el centro de la huella —para un accesorio de 2×2, ese es el punto donde se encuentran los cuatro tiles—, no en el centro de la caja delimitadora del sprite. Centrar en la caja delimitadora desplaza la base medio tile, y el edificio parece flotar sobre una esquina de su propio solar.

El orden de profundidad en un renderizador isométrico 2D es el algoritmo del pintor: ordena por tileX + tileY y luego rompe los empates con una prioridad por objeto. Los accesorios altos lo rompen. Una torre de seis tiles de alto situada en la fila 2 se dibuja por encima de una pared de la fila 5 que debería ocultarla. Hay dos soluciones: dividir los accesorios altos en una base y una sección superior, y ordenar cada una por las filas que realmente cubre, o dar a cada sprite una máscara de ocupación por tile para que el renderizador sepa con qué filas se solapa.

Tilesets que no se repiten

En un set isométrico hay dos costuras, y cada una necesita una solución distinta. La costura de valor es donde una cara lateral se une a la cara superior del tile que tiene debajo: si la base de la pared es más clara que la parte superior del suelo, aparece una línea clara a lo largo de cada pared del mapa. La costura de patrón es donde se repite una serie de tiles de suelo idénticos: el paso 2:1 es lo bastante regular como para que el ojo fije el ritmo tras unos tres tiles.

Las variantes de borde ocultan el patrón. El set útil mínimo es de nueve: un tile central, cuatro tiles con una transición en un solo borde y cuatro con transiciones en dos bordes adyacentes. Dibuja la transición como una banda suave y rota de dos a cuatro píxeles en lugar de una línea recta, o habrás movido la costura en vez de eliminarla. Aleatoriza la colocación con un hash de la coordenada del tile en lugar de un generador de números aleatorios progresivo, para que el mismo mundo se regenere de forma idéntica cada vez: eso importa cuando el mundo se reconstruye a partir de una descripción escrita.

El grafo de adyacencia es el mismo que el de los tilesets ortogonales: cuatro vecinos por borde y cuatro vecinos en diagonal por tile. Por eso el set de blob de 47 tiles se traslada sin cambios desde el trabajo ortogonal: solo cambia el arte. No actives los casos solo en diagonal a menos que los hayas dibujado, o tendrás artefactos en las esquinas o un hueco de un píxel donde dos tiles de suelo no coincidan.

• Set de blob de 47 tilesCubre todas las combinaciones de cuatro y ocho vecinos, incluidos los casos solo en diagonal que un set de nueve tiles deja fuera. La misma cantidad de tiles que un set de blob ortogonal; solo cambia el arte.
• Set de nueve tilesCentral, cuatro tiles de un solo borde y cuatro tiles de esquina. Barato de dibujar, cubre la mayoría de las transiciones de suelo y solo falla en los casos solo en diagonal si tus reglas de colocación prohíben generarlos.
• Variantes espejadasVoltear un tile de suelo en horizontal es variación gratis cuando el tile no tiene ninguna pista de luz. No reflejes nunca una pared ni un accesorio iluminado: la dirección de la luz se invierte con él y el tile deja de coincidir con sus vecinos.

Del iso 2D a un mundo iso 3D jugable

Un rombo 2:1 es lo que se obtiene con una cámara ortográfica con giro de 45° e inclinación de 30°. A 30°, la reducción vertical es exactamente sin(30°) = 0,5, así que un tile de suelo cuadrado se proyecta como un rombo el doble de ancho que de alto: la misma proporción que los píxeles que dibujaste. La inclinación isométrica verdadera de 35,264° da 1,732:1 y no coincidirá con un tileset 2:1. Por eso un tile de 32×16 encaja limpiamente en una unidad de mundo de 1×1, y todo el set 2D puede usarse como texturas sobre quads planos o extruirse en cajas sin volver a dibujar nada.

Dos cosas se rompen cuando la cámara se mueve. Primero, la órbita libre: con un giro de 37°, los bordes de los tiles caen entre píxeles y todo el mapa centellea. Fija la inclinación a 30°, ajusta el giro en incrementos de 90° y, si animas una rotación, vuelve a encajar antes de que se asiente. Segundo, la iluminación: el arte lleva una luz superior izquierda ya integrada. Si la luz principal permanece fija en el espacio del mundo y la cámara gira 90°, el sombreado del arte ya no concuerda con la escena. Vincula la luz principal a la cámara, o integra el sombreado en la textura y mantén la luz relativa a la pantalla.

Si quieres conservar el aspecto pixelado en WebGL, renderiza a una resolución interna baja y escala con filtrado al vecino más cercano, y ajusta la posición de la cámara a píxeles enteros de pantalla. De lo contrario, los centros de texel caen entre fragmentos y el arte se arrastra mientras el personaje camina, lo que se interpreta como un fallo de textura aunque el arte esté bien.

El 3D game builder de Neta Studio toma una descripción escrita y construye un mundo real de Three.js en el navegador con una cámara ortográfica a la inclinación fija: transitable, sin cadena de herramientas local. Mini World es la versión a pequeña escala de eso y la forma más rápida de comprobar si un tileset y un set de personajes se leen correctamente antes de comprometerte con un mapa grande. The Cyclops' Island es un mundo de ejemplo terminado por el que puedes caminar para ver la proyección en funcionamiento. Para los personajes, Agent Sprite Forge produce hojas de sprites con el tamaño de celda que elijas, que es lo que mantiene el pivote coherente entre direcciones.

Software de pixel art isométrico

Todo lo de esta página puede hacerse con un editor de mapas de bits y una cuadrícula. Lo que aportan las herramientas dedicadas es la conciencia de tiles: un modo de mapa de tiles que muestra el tile que estás dibujando junto a sus vecinos, de modo que ves la costura mientras pintas y no después de estamparlo doscientas veces.

Elige según lo que tengas que producir, no según listas de funciones. Los tiles necesitan una cuadrícula, una vista previa de tile y una paleta estable. Los personajes necesitan piel de cebolla, celdas uniformes y una exportación de hoja que incluya un pivote. Los mapas necesitan una herramienta que guarde coordenadas de tiles, porque un PNG no es un mapa.

• AsepriteEditor de mapas de bits con modo de mapa de tiles, cuadrícula de tiles, piel de cebolla y exportación de hoja con JSON que incluye etiquetas de fotogramas y pivote. La vista previa de tiles es la razón por la que se usa para tilesets: puedes ver la costura mientras la pintas.
• LibreSpriteEditor de código abierto de la misma base de código. El flujo de trabajo con tiles es en gran medida el mismo; cuenta con menos funciones de las últimas versiones.
• Krita y PhotoshopEditores de mapas de bits de uso general. Las guías de cuadrícula y la simetría te dan un rombo, pero ninguno tiene un modo de mapa de tiles, así que estampas a mano. El filtro de desplazamiento —mover el lienzo la mitad del tamaño del tile y mirar el centro— sigue siendo la forma más rápida de encontrar una costura de valor.
• TiledUn editor de mapas, no una herramienta de arte. Guarda coordenadas de tiles, admite orientación isométrica con un tamaño de tile 2:1 y exporta los datos de las capas. Dibuja en una herramienta y coloca en otra.
• El 3D game builder de Neta StudioBasado en navegador. Una descripción escrita se convierte en un mundo isométrico jugable en Three.js, así que te saltas por completo la cadena de herramientas local y el paso de importación, y compruebas si el arte se lee con la inclinación de cámara correcta.
• Agent Sprite ForgeGenera hojas de sprites para personajes, que suele ser la parte más larga de un set isométrico. Fija el tamaño de celda y la cantidad de direcciones antes de generar; una hoja creada con otro tamaño de celda no encajará con tus tiles.

Camina por el mundo al que pertenece

Un sprite es un personaje sin ningún sitio donde estar. El último paso es el que no ofrece nadie más: toma la hoja que acabas de crear y ponla en un mundo por el que alguien pueda caminar —una pequeña isla, un planeta, una esquina lluviosa de una calle. Todos los mundos de este sitio se crearon a partir de una descripción escrita y se publicaron como una página que puedes jugar.

FAQ