Gráficos ASCII: cómo dibujamos una ciudad entera con caracteres

Un dibujo son dos líneas de texto

Cada dibujo del juego es una lista de pares de líneas de la misma anchura. La primera línea es el dibujo en sí, los caracteres que verías en un editor de texto. La segunda es un mapa de color: una letra por carácter, que apunta a una entrada de la paleta del dibujo con un color para el glifo y otro para su fondo. Un espacio en el mapa de color significa transparente; un espacio en el texto bajo un color significa fondo relleno.

Ese es todo el formato. Un pozo con su tejadillo y su cuerda, un granero, la puerta de una muralla: cada uno se teclea así, y una prueba comprueba que cada dibujo tenga la anchura y la altura correctas antes de que pueda entrar en el juego.

Una cuadrícula de 16 por 8

Una casilla del mapa mide 16 caracteres de ancho y 8 de alto, una proporción 2:1 que encaja con una vista 3/4. Un edificio que ocupa w×h casillas mide exactamente 16·w caracteres de ancho. Sus 8·h filas inferiores son su base, apoyada en sus casillas; lo que queda por encima, como un tejado, una bandera o el humo, sobresale sobre la casilla de detrás. Ese voladizo es lo que da profundidad a una calle: los tejados de una fila tapan en parte el camino de detrás, igual que en los city builders isométricos clásicos. Por qué la cuadrícula creció hasta este tamaño se cuenta en de 10×5 a 16×8.

Del texto a la luz

Los caracteres se dibujan en un lienzo con WebGL2. Cada glifo que aparece en pantalla va a un atlas de texturas, y cada fotograma se dibuja desde ese atlas en una sola pasada. El shader añade lo que el texto simple no puede tener: textura de superficie, volumen, luz y las sombras que edificios y caminantes proyectan sobre el camino. Donde falta WebGL2, un renderizador Canvas simple dibuja la misma ciudad de forma más sencilla.

En el estilo denso, cada carácter se divide en marcas más finas, así que hasta el detalle pequeño tiene textura
El suelo, los caminos y el agua se dibujan una vez en una capa en caché; solo se redibuja lo que se mueve
De noche brillan las ventanas, los faroles y los fuegos, y los faroles se encienden en ola al anochecer
Al alejar la cámara, un letrero se funde en una mancha de oro sobre laca; al acercarla, su carácter se ve nítido

Caracteres chinos de verdad en los letreros

En los letreros el texto se vuelve literal. Veintiocho tipos de edificio llevan caracteres chinos reales en las formas completas que se usaban bajo los Qin y los Han, en oro sobre laca: 市 sobre el mercado, 倉 sobre el granero, 井 en el pozo, 廟 en el templo, 鹽鐵 en la Oficina de la Sal y el Hierro, 未央 sobre el Palacio Weiyang. Salen de una fuente pequeña con solo los caracteres que el juego necesita, unos 14 KB.

¿Por qué no un simple filtro?

Convertir un render 3D en ASCII es un truco muy conocido, y da un efecto llamativo. Pero los caracteres elegidos por brillo son ruido; los caracteres elegidos por una persona son dibujo. Una hilera de tejas se lee como tejas porque alguien la tecleó como tejas. Mantener los dibujos como texto también significa que la ciudad siempre puede mostrarse como texto: mantén pulsada la tecla º para ver los Símbolos, o guarda una vista como archivo .txt.

Y sigue siendo ligero

El texto es compacto. Los dibujos son pequeños, la fuente es pequeña, y los gráficos bajos recurren a los dibujos más toscos de 10×5 y prescinden de la noche y los efectos, lo que mantiene el juego jugable en portátiles antiguos. Puedes ver el renderizado en movimiento en los vídeos, y el género del que viene en juegos como Pharaoh y Caesar III.

Glyph Dynasty llegará a Steam para Windows, macOS y Linux. Mira los vídeos, sigue la historia del desarrollo o abre el kit de prensa.