SimLeón: bitácora

De niño jugué muchísimos videojuegos, y mis favoritos eran los de construir mundos: SimCity 2000, RollerCoaster Tycoon. Como millennial de los de en medio, ya cerca de la mediana edad, soy presa fácil de la nostalgia de esos juegos de finales de los noventa. Mirando la ciudad desde arriba no pude evitar imaginarla dibujada así. Entonces, la idea: hacer un mapa gigante de León, Guanajuato, en pixel art isométrico.

▶ Abrir el mapa ▶ Alta resolución (2.93 px/m)

Dos proyectos que ya lo hicieron con otras ciudades

La idea no es original y eso es lo bueno: hay mapa de ruta. London, Drawn dibujó 216 km² de Londres a partir de los modelos 3D de Google y un modelo de imágenes al que le pasaban una foto y un cuadro ya aprobado como referencia; en total unas 37 mil teselas y unas 17 libras en generación. Isometric NYC hizo Nueva York en pixel art puro, con un modelo fine-tuned, relleno enmascarado entre cuadrantes para que las costuras no se noten, y muchas horas de corrección a mano de agua y árboles. Los dos coinciden en una lección: el modelo de imagen no se puede supervisar a sí mismo, así que hay que construir el control de calidad alrededor.

SimLeón toma la cámara y la cuadrícula de Londres, el estilo de Nueva York, y agrega una cosa que ninguno tenía: un juez automático que compara cada cuadro contra la foto original antes de aceptarlo.

Una cámara ortográfica flotando sobre Google Earth

La materia prima son las Photorealistic 3D Tiles de Google Maps Platform: el mismo modelo 3D texturizado que se ve en Google Earth. León tiene cobertura completa. Se cargan en CesiumJS dentro de un Chromium sin cabeza, se apaga el globo, la atmósfera y la iluminación extra (las texturas ya vienen iluminadas) y se sustituye la cámara normal por una ortográfica: sin perspectiva, como en los juegos isométricos.

• Inclinación: 40° respecto al suelo. Londres usó 45°; con 40° se ve un poco más de fachada, que es donde vive el encanto de SimCity.
• Giro: 30° al oeste del norte. La retícula del Centro Histórico queda en diagonal, como los rombos de las manzanas del juego. La brújula del mapa lo indica.
• Escala: cada cuadro cubre 700 m de ancho y se renderiza a 2048 px: 2.93 px por metro, igual que Londres. Por la inclinación, un cuadro abarca 1 089 m de suelo en vertical.
• Altura: 4 km de distancia nominal, aunque en ortográfica la distancia no cambia el tamaño; solo importa el ancho del frustum.

Como la proyección es lineal y todos los cuadros comparten exactamente la misma dirección de cámara, los renders embonan al píxel sin costuras: basta desplazar el punto de mira 700 m a la derecha o 1 089 m hacia adelante en el suelo. La GPU brilla por su ausencia (SwiftShader, render por software), así que cada cuadro tardó entre 3 y 4 minutos cargando teselas y dibujando: 354 minutos en total para el piloto.

Render ortográfico · cuadro (−1, 1) · Catedral y Plaza Principal

El mismo cuadro después de Nano Banana Pro

Del piloto al corazón de la ciudad

Empezamos chico para poder expandir. El piloto fueron 15 cuadros (5 × 3) del Centro al Estadio: la Catedral y la Plaza Principal, la calle Madero, el Templo Expiatorio, el Arco de la Calzada, el Barrio Arriba y el Coecillo, la Zona Piel y la Central de Autobuses, el Estadio León, el Forum Cultural y el Poliforum. Con el pipeline probado, la segunda pasada agregó 62 cuadros más: hoy son 11 columnas por 10 filas, 110 cuadros y 83.9 km², de la Plaza Mayor y el Campestre al norte hasta San Miguel y el Blvd. Torres Landa al sur, de Chapalita y la Universidad De La Salle al poniente hasta las colonias más allá del Poliforum al oriente. Cada cuadro se identifica por su columna y fila (tecla Q en el mapa). Agregar el resto de la mancha urbana es agregar renglones a una lista JSON y dejar correr el pipeline otra noche.

Pedirle a una IA que trace, no que invente

Cada render pasa a un modelo de imagen con una instrucción larga que dice, en esencia: conviértelo en una captura de un juego isométrico de los noventa, pero calca exactamente lo que ves. Probamos dos modelos de Google. Nano Banana 2 (gemini-3.1-flash-image, unos 10 centavos por imagen) producía una ilustración plana bonita, pero no del todo pixel art, y con frecuencia inventaba cosas. Nano Banana Pro (gemini-3-pro-image, 13 centavos) entendió mucho mejor la geometría y el estilo, así que el piloto se hizo con él a 2048 px.

Nano Banana 2 · ilustración cel-shaded, no tan pixel

Nano Banana Pro · sprites con píxel visible y fidelidad alta

La instrucción

Este es el prompt completo que recibe cada cuadro. Casi todas las líneas nacieron de una falla concreta, que se cuenta abajo.

Turn this aerial photo into a screenshot from a 1990s isometric city-building video game (SimCity 2000, RollerCoaster Tycoon, Transport Tycoon). The result must look like hand-placed PIXEL ART sprites, NOT a photograph and NOT a painting.

STYLE (most important):
- DENSE, richly textured pixel art — NOT a flat vector illustration. Every rooftop shows texture (tiles, gravel, vents, water tanks), every facade has rows of tiny windows, every block is broken into many small individual houses with crisp dark 1-pixel outlines. Avoid large empty uniform colour fills.
- Big, clearly visible pixels: draw as if the image were 512x512 pixels and then enlarged with hard edges. Absolutely no photographic texture, no blur, no noise, no gradients, no anti-aliasing.
- Retro 16-bit palette of about 48 flat colours. Every surface is a flat colour fill with 2-3 tone cel shading. Light from the top-left, hard one-tone shadows to the bottom-right.
- Every building is a simple game sprite: flat rooftop (terracotta red, warm beige, off-white, grey concrete or pale blue-grey corrugated sheet), facades with a row of tiny dark pixel windows.
- Landmarks that really are in the photo (a church, a stadium, a tall tower) get extra care — e.g. a church keeps its exact domes and towers in ochre stone. But NEVER add a church, dome, tower or landmark that is not in the photo; most squares have none.
- Streets: flat mid-grey asphalt with a 1-pixel lighter centre line and tiny 3-pixel cars in bright colours. Sidewalks pale grey. Plazas: pale flagstone grid. Trees: round dark-green blobs with a lighter green top. Grass: flat saturated green — but ONLY where the photo shows grass; this is a semi-arid city, so bare dirt lots, dry riverbeds and gravel stay tan/brown, never green.
- Warm, sunny, saturated, cheerful colours like the original games.

LAYOUT (must be preserved exactly):
- This is a low-rise historic Mexican city centre: most buildings are 1-3 storeys. NEVER invent apartment towers, office blocks, parks, parking lots or plazas that are not in the photo. If a block in the photo is a jumble of small flat roofs, draw a jumble of small flat roofs. Building heights must match the photo exactly.
- Same camera angle and same scale as the photo. Every street, block, plaza, building footprint, building height and landmark stays exactly where it is in the photo. Do not add, remove, move, or enlarge anything.
- The image fills the whole frame edge to edge: no border, no margin, no vignette, no text, no labels, no UI, no sky, no horizon.

Lo que salió mal

El ancla que copiaba. Londres le pasa al modelo un cuadro ya aprobado como referencia de estilo. Lo intentamos y Nano Banana Pro hizo algo peor que ignorarlo: dibujó la Catedral y los edificios de la referencia encima de un barrio que no los tiene. Se eliminó la referencia; la coherencia entre cuadros se logra con el prompt y con una paleta compartida al final.

Foto del cuadro (−2, 1): Barrio Arriba, sin catedral

Con la referencia adjunta: apareció la Catedral del cuadro vecino

Los templos fantasma. El primer prompt mencionaba "iglesias en piedra ocre con cúpulas". Resultado: el modelo ponía una iglesia dorada en cada cuadro, hubiera o no. También convertía terrenos baldíos en parques verdes en una ciudad semiárida, y en una versión temprana levantó un conjunto habitacional naranja de ocho pisos en una manzana de casas de un piso. Cada una de esas fallas es hoy una línea del prompt ("NEVER add a church…", "bare dirt lots stay tan").

Torres inventadas (Nano Banana 2)

Cuadro (0, 1): el Malecón, sin templos

Dos templos que no existen

Los renders borrosos. En la expansión corrimos dos renderizadores en paralelo junto con las correcciones, en una máquina de dos núcleos sin GPU. Con la CPU saturada, 21 cuadros llegaron al tiempo límite con las teselas 3D a medio cargar: fotos borrosas que el pipeline mandó felizmente a dibujar. Nano Banana Pro alucinó una ciudad entera sobre cada mancha gris. Costó unos 4 dólares descubrirlo. Hoy el renderizador se niega a guardar un cuadro cuyas teselas no terminaron de cargar, y el generador mide la nitidez de cada foto antes de gastar un centavo en ella.

El juez

Ese alguien es otro modelo. Cada candidato se envía junto con la foto original a Gemini Flash con una sola pregunta: del 0 al 10, ¿qué tan fielmente conserva calles, manzanas, huellas y alturas? Ignora color y estilo; castiga fuerte lo inventado. Devuelve la nota y una lista de problemas. Se generan dos candidatos por cuadro; si el mejor no alcanza 6.5 se generan hasta dos más, y gana la nota más alta (con una similitud estructural SSIM como desempate). Costó centavos y atrapó las torres naranjas y varios templos fantasma sin que nadie los viera.

Arreglar una iglesia sin volver a dibujar la ciudad

Aun con el juez, un cuadro "aprobado" puede traer un templo que no existe o una iglesia real dibujada con la arquitectura equivocada: el Templo Expiatorio, blanco y neogótico, salió como una catedral barroca dorada con cúpulas. Volver a generar el cuadro entero es caro y arriesgado —el resto del cuadro, que estaba bien, cambiaría también—. La solución es corregir por regiones, con tres restricciones duras:

• Solo cambia la caja. Se marca un rectángulo sobre el error. El modelo recibe el dibujo actual, la foto del mismo recorte y una máscara; pero da igual lo que devuelva fuera de la máscara: el código pega de vuelta únicamente los píxeles de adentro. Todo lo demás queda idéntico, píxel por píxel.
• Referencia de la geometría real. Para edificios mal dibujados se renderiza un close-up del mismo modelo 3D de Google con la misma cámara pero un encuadre de 120–250 m: una vista nítida de las torres, cúpulas y colores verdaderos. Si hay fotos reales del edificio en data/refs/, también se adjuntan.
• El mismo juez, con la pregunta invertida. Cada candidato se evalúa solo dentro de la máscara: ¿ya coincide con la foto y quedó resuelto el problema reportado? Gana la mejor de dos.

Quién encuentra los errores

Dos caminos alimentan la misma cola de trabajo. El detector le pide a Gemini Flash que compare cada cuadro con su foto y devuelva cajas con lo que no cuadra —templo inventado, arquitectura equivocada, tamaño, pasto donde hay tierra, algo que falta— con severidad del 1 al 5. En la pasada sobre los 62 cuadros nuevos encontró 121 regiones: 46 pasto donde hay tierra o azoteas, 39 templo o edificio inventado, 21 edificio real mal dibujado, 13 falta algo que sí existe, 2 tamaño equivocado. Y en el mapa, la tecla R abre el modo Reportar: se dibuja un rectángulo, se elige el tipo de error, se escribe qué hay realmente ahí, y el reporte queda guardado junto al mapa para la siguiente pasada de corrección. Los reportes se ven como cajas amarillas; cuando se corrigen, cambian a verde.

En total, 75 correcciones en 44 cuadros por $20.10; quedan en la cola 50 regiones de severidad baja para una siguiente pasada. El costo de corregir una región es un tercio de rehacer el cuadro, y el riesgo de romper lo que estaba bien es cero.

256 colores, como mandaba la tarjeta VGA

Los cuadros salen del modelo con miles de colores y con ligeras variaciones de tono entre uno y otro. Para que el mosaico se sienta como un solo juego, se reduce todo a una paleta única de 256 colores calculada con k-means sobre una muestra de todos los cuadros, sin tramado (dithering). SimCity 2000 corría en 256 colores; aquí es a la vez guiño y pegamento. El mosaico se dibuja a 2048 px por cuadro (2.93 px/m) y el visor lo amplía con interpolación desactivada para que el píxel se vea píxel.

El mismo juego en todos los cuadros

Aun con el mismo prompt, Nano Banana Pro tiene dos "modos": a veces entrega pixel art denso —azoteas con textura, ventanitas, contornos duros— y a veces una ilustración vectorial plana y pálida. Puestos uno junto a otro, el salto en la costura se nota de inmediato. La solución tiene tres partes. Primero, una auditoría de estilo: el mismo juez califica dos recortes de cada cuadro del 0 al 10 según qué tan "pixel" se ven, sin mirar el contenido; los que sacan 5 o menos se regeneran. Segundo, esa nota entra en la selección de candidatos: un cuadro fiel pero plano ya no gana. Tercero, antes de cortar las teselas, cada cuadro se normaliza en color —su brillo y contraste por canal se acercan un 60% a la mediana de todo el mapa—, así las costuras dejan de ser saltos de tono. En esta pasada se regeneraron 131 cuadros por $45.02.

Puntos de interés con coordenadas reales

Los 35 pines del mapa vienen de la Places API de Google: nombre oficial, coordenadas y calificación. Para ponerlos sobre el dibujo se invierte la matemática de la cámara: latitud y longitud pasan a metros en el plano tangente, se giran 30°, se aplanan por el seno de 40° y se convierten a píxeles del mosaico. El error típico es de unos 20–40 m (la coordenada de Google suele ser la entrada del lugar, no su centro), suficiente para caer sobre el edificio correcto. Los textos de cada lugar los escribimos nosotros.

Lo que costó

Extrapolando: a unos $0.67 por cuadro generado más $0.18 de correcciones, la mancha urbana completa de León —unos 300 km², cerca de 400 cuadros— costaría alrededor de $342 USD en imágenes y unas 20 horas de render sin GPU. Es un fin de semana, no un presupuesto.

Expandir

• Más cuadros. La cuadrícula vive en grid.json; los scripts saltan lo que ya existe. Del piloto de 15 cuadros pasamos a 110; lo que falta es el resto de la mancha urbana hasta el periférico.
• Costuras de estilo. Hoy cada cuadro se genera solo. El siguiente paso es el truco de Isometric NYC: generar con un borde del vecino ya dibujado como contexto enmascarado, sin que el modelo lo copie como contenido.
• Corrección con la gente. El modo Reportar ya existe; falta correr la cola de reportes de forma periódica y mostrar el historial de cada cuadro.
• Más lugares. Fotos, historias de barrio y las tiendas de la Zona Piel.

▶ Abrir el mapa ▶ Alta resolución (2.93 px/m)