Comunicado del Mando. El mapa estelar es el corazón de X-Wars - y en los teléfonos había empezado a sentirse como arrastrar un cuadro pesado en vez de volar por el espacio. Hoy lanzo un nuevo renderizador predeterminado basado en WebGL (mediante PixiJS), que mantiene visibles la niebla y la ocupación al alejar la vista, y conservo el sistema anterior como interruptor de emergencia hasta que el nuevo haya demostrado su estabilidad en producción.
Por qué el mapa se sentía lento
Un mapa estelar vivo no es una sola imagen. Es una cámara en movimiento sobre un mundo en expansión: cuadrículas de casillas, bruma de exploración, tintes de ocupación de balizas, soles, sprites de planetas, marcadores de flotas, estelas de tránsito, anillos de escaneo y vistas previas de alcance. En un portátil, el enfoque anterior solía funcionar bien. En dispositivos Android y iOS de gama media daba tirones - especialmente con grandes áreas de ocupación o una extensa región explorada. Desplazar y pellizcar la pantalla tenía retraso. No es un problema de contenido. Es el coste del renderizador.
Cómo se almacena un universo enorme sin ahogar el navegador
El universo es grande a propósito. Los comandantes no descargan cada casilla como una fila de JSON. El servidor y el cliente cooperan mediante estructuras dispersas - solo aquello que has revelado, descubierto o necesitas para la vista actual.
La niebla de exploración como mapas de bits
La niebla de guerra no es una lista de todas las casillas oscuras. El espacio revelado se almacena en mapas de bits divididos en fragmentos - cuadrados de tamaño fijo del universo empaquetados en bits. Un fragmento de 64 por 64 casillas ocupa unos pocos cientos de bytes. El navegador recibe los fragmentos que tocan los límites de tu mapa, no una novela de coordenadas. Cuando una flota reconoce un área, establecemos bits y enviamos parches. Así es como la niebla sigue siendo barata de almacenar incluso después de meses de exploración.
La ocupación como áreas, no como casillas de papel pintado
El territorio de las balizas utiliza la distancia de Chebyshev - el máximo de los valores absolutos de dx y dy - por lo que un radio de cobertura es literalmente un cuadrado alineado con los ejes de la cuadrícula de casillas. Los niveles amplían ese cuadrado desde pequeñas zonas de patrulla hasta enormes áreas de reclamación (decenas de casillas por lado, hasta unas 100 para los módulos más pesados). El juego no necesita almacenar cada casilla ocupada como un documento independiente. La propiedad se reconstruye a partir de los centros y radios de las balizas activas, excluyendo de la reclamación las casillas ocupadas por cuerpos planetarios. Las superposiciones entre tus propias balizas conservan un único tinte uniforme, no una pila de capas cada vez más oscuras.
Qué envía realmente la API del mapa
La carga de un mapa es un tablero de marcadores, no un atlas de texturas del cosmos: sistemas que conoces, flotas que posees o detectas, balizas cuya cobertura se cruza con tu niebla o reconocimiento, restos de descomposición que has encontrado y límites lo bastante amplios como para contener esos puntos de referencia. Los fragmentos de exploración llegan junto a ellos. Después, el cliente decide qué dibujar para la cámara actual. Esa división - estado disperso del mundo durante la transmisión, píxeles densos solo para el área visible - es la única forma de que el mapa estelar de un MMO de navegador se mantenga fiel a gran escala.
El renderizador anterior - autopsia sincera
El mapa estelar anterior era un mundo DOM de React: una capa enorme que se movía mediante translate y scale de CSS, marcadores como botones e imágenes posicionados, y niebla y ocupación como rectángulos SVG. Fue la elección correcta para el primer lanzamiento alfa - interactivo, fácil de depurar y rápido de iterar. No envejeció bien cuando crecieron las áreas de ocupación y la niebla explorada.
- Escalar con CSS una capa del tamaño del mundo obliga al navegador a componer un árbol gigantesco de nodos en cada fotograma de desplazamiento.
- La ocupación dibujaba un rectángulo SVG por cada casilla ocupada dentro del área visible tras expandir áreas completas de Chebyshev en JavaScript - correcto y costoso.
- La niebla utilizaba rectángulos SVG combinados sobre el lienzo cargado - mejor que un nodo por casilla, pero seguía dependiendo demasiado de SVG a medida que crecía el espacio revelado.
- Los marcadores de planetas y flotas eran elementos DOM reales con filtros, anillos y zonas de interacción - adecuados por decenas, costosos por cientos bajo un elemento padre en transformación.
- Al alejar la vista se eliminaban por completo la niebla y la ocupación para que la vista general pudiera sobrevivir - lo que ocultaba la información que más necesitabas al examinar el teatro de operaciones.
El nuevo renderizador - WebGL con PixiJS
El mapa estelar ahora se dibuja en un lienzo del tamaño del área visible mediante PixiJS, que se comunica con WebGL (con una ruta alternativa segura cuando es necesaria). El mundo ya no es una lámina DOM de mil millones de píxeles. Es una matriz de cámara sobre llamadas de dibujo optimizadas para la GPU. Los paneles del HUD, los cuadros de diálogo y la interfaz de mando siguen en React - solo se ha trasladado la superficie viva del mapa.
Una cámara sin castigar a React
Mientras desplazas o pellizcas la pantalla, la transformación de la cámara actualiza inmediatamente el escenario de Pixi. React sigue recibiendo información sobre el foco y los límites de descarte con una cadencia más tranquila - pasos de foco cuantizados y finalización del gesto - para que no reconstruyamos el universo por cada píxel que recorre el dedo. Las flotas en movimiento y las estelas de tránsito viven en una capa dinámica que puede actualizarse sin volver a montar los soles y la niebla.
Capas que siguen siendo útiles al alejar la vista
El nivel de detalle sigue existiendo, pero cambia la representación - no la existencia de la niebla y la ocupación. Al acercarte ves cuadrículas de casillas, sprites de planetas y marcadores nítidos. Al alejarte ves cuadrículas más grandes, agrupaciones de soles y marcadores más sencillos - mientras que los cuadrados de ocupación y la bruma de la niebla permanecen para que la imagen estratégica no quede vacía.
- Fondo: cuadrícula, niebla, tintes de ocupación, contornos de alcance (enlace de baliza, detección de flota, alcance de movimiento, radar de escaneo).
- Cuerpos: soles, planetas, marcadores de balizas, marcadores de restos.
- Dinámico: marcadores de flotas, rutas de tránsito, vistas previas de planes de viaje, flechas de fusión.
Por qué las áreas de Chebyshev importan al dibujar
Como un área de Chebyshev es un cuadrado, la ocupación puede dibujarse como un solo cuadrilátero por baliza en vez de miles de rectángulos de casillas. La niebla sigue utilizando regiones reveladas combinadas, pero solo para lo que necesita el área visible. Esa es la diferencia entre empapelar una pared y estampar sellos.
Qué deberías notar como comandante
- Desplazamiento y pellizco más fluidos en teléfonos, especialmente sobre zonas ocupadas o muy exploradas.
- La niebla y la ocupación siguen siendo legibles al alejar la vista para planificar el próximo corredor.
- El alcance de detección de la flota seleccionada y las vistas previas de cobertura de las balizas se dibujan como cuadrados limpios en el mapa.
- Las mismas reglas de juego - se trata de un cambio de renderizador, no de un rediseño de la niebla, las balizas o las flotas.
Interruptor de emergencia y sinceridad alfa
Pixi es la opción predeterminada. Si algo sale mal en condiciones reales, puedo devolver la opción predeterminada activa al sistema DOM heredado sin una recompilación completa. Las pestañas del mapa que ya estén abiertas conservarán su renderizador actual hasta que las recargues. Mantengo el sistema anterior durante un breve periodo de prueba a propósito - aproximadamente una semana de juego real - y después pretendo eliminarlo cuando confíe en el nuevo cristal.
Si el mapa sigue dando tirones en un dispositivo concreto después de actualizar, avísame mediante Command Relay e indica el dispositivo, el navegador y aproximadamente qué zona estabas observando. El objetivo es sencillo: el mapa estelar debe volver a sentirse como el espacio - ligero bajo el dedo, repleto de información y preparado para las batallas que aún están por llegar. - Command