Pixel art isométrico

Qué es

Los juegos isométricos muestran el mundo desde arriba y de lado, a lo largo de una diagonal, sin perspectiva: las líneas paralelas siguen siendo paralelas y lo lejano no se ve más pequeño. Los suelos se convierten en rombos, y los muros se alejan con dos pendientes iguales.

En la proyección isométrica verdadera, esas pendientes están a 30° de la horizontal. El pixel art casi siempre usa en su lugar una pendiente un poco más plana, en la que cada línea avanza dos píxeles en horizontal y uno en vertical. Esa pendiente es de unos 26.6°, y se suele llamar isométrica 2:1 (en rigor, es una proyección dimétrica).

Por qué 2:1

En una cuadrícula de píxeles, una línea solo se ve limpia cuando sus escalones se repiten de forma regular. Una línea 2:1 es una escalera perfecta: dos píxeles, escalón, dos píxeles, escalón. Una línea de 30° no tiene un patrón tan simple y sale como tramos irregulares de uno y dos píxeles, lo que se ve dentado.

2:1 también simplifica los tiles. Un tile de suelo es un rombo el doble de ancho que de alto, por ejemplo 32×16 o 64×32, y los tiles encajan sin huecos.

Los ángulos de cámara

Si renderizas desde 3D, la cámara debe ser ortográfica (sin perspectiva), girada 45° alrededor del modelo para que mire a lo largo de una diagonal, e inclinada 30° hacia abajo. Con esa inclinación, un tile cuadrado del suelo se proyecta como un rombo exactamente el doble de ancho que de alto, así que los bordes del suelo caen sobre líneas 2:1 limpias. Una inclinación más pronunciada o más plana da otras proporciones que no se alinean tan bien.

Errores comunes

• Píxeles duplicados en las líneas. Una línea 2:1 debe tener exactamente dos píxeles por escalón. Las tiradas de tres, o los píxeles apilados en el escalón, hacen que los bordes se vean gruesos.
• Mezclar ángulos. Un edificio a 2:1 y otro con una pendiente más pronunciada rompen la cuadrícula.
• Olvidar la altura. Las aristas verticales se mantienen verticales. La altura en una cuadrícula 2:1 se mide en píxeles enteros; elige cuántos píxeles de alto tiene un metro y mantenlo.
• Cámaras en perspectiva. Renderizar en perspectiva hace converger las líneas, y los tiles dejan de encajar.

Cómo dibujarlo a mano

1. Dibuja un rombo de tile sobre líneas 2:1, por ejemplo de 32×16.
2. Construye los objetos como cajas sobre esa cuadrícula: cara superior en rombo y lados verticales.
3. Sombrea de forma distinta los dos lados visibles: uno iluminado, otro en sombra.
4. Mantén cada borde inclinado en la escalera 2:1.
5. Dibuja primero los personajes en las cuatro direcciones diagonales; añade las otras cuatro si hace falta.

Cómo lo hace Pixor

En Pixor cada lado es una cámara. La vista isométrica usa una configuración 2:1, y también puedes elegir vistas lateral, de tres cuartos o cenital, o ajustar cualquier inclinación. Los anillos de 4, 8 o 16 cámaras dan cada dirección. Con unos Píxeles/m fijos en las cámaras, los edificios, los accesorios y los personajes se renderizan en proporción sobre la misma cuadrícula.

Relacionado

• Tamaños de sprite: tiles y personajes
• Contornos
• Direcciones y el manual de escena