Comunicado do Command. O mapa estelar é o coração de X-Wars - e, nos celulares, ele começava a parecer mais uma pintura pesada sendo arrastada do que um voo pelo espaço. Hoje estou lançando um novo renderizador padrão baseado em WebGL (via PixiJS), mantendo a névoa e a ocupação visíveis ao reduzir o zoom e deixando o método antigo como interruptor de emergência até que o novo tenha passado por um período de maturação em produção.
Por que o mapa parecia lento
Um mapa estelar vivo não é uma única imagem. É uma câmera em movimento sobre um mundo em expansão: grades de blocos, bruma de exploração, tonalidades de ocupação dos sinalizadores, sóis, sprites de planetas, marcadores de frotas, rastros de trânsito, anéis de varredura e prévias de alcance. Em um notebook, o método antigo muitas vezes parecia funcionar bem. Em dispositivos Android e iOS intermediários, ele engasgava - especialmente com grandes discos de ocupação ou uma extensa região explorada. Arrastar e usar o gesto de pinça parecia atrasado. Isso não é um problema de conteúdo. É o custo do renderizador.
Como um universo imenso é armazenado sem sobrecarregar o navegador
O universo é grande de propósito. Os comandantes não baixam cada bloco como uma linha de JSON. O servidor e o cliente cooperam usando estruturas esparsas - apenas o que você revelou, descobriu ou precisa para a visualização atual.
Névoa de exploração como mapas de bits
A névoa de guerra não é uma lista de todos os blocos escuros. O espaço revelado é armazenado em mapas de bits divididos em blocos - quadrados de tamanho fixo do universo compactados em bits. Um bloco de 64 por 64 células ocupa apenas algumas centenas de bytes. O navegador recebe os blocos que tocam os limites do seu mapa, não um romance de coordenadas. Quando uma frota faz o reconhecimento de um disco, definimos bits e enviamos atualizações parciais. É assim que a névoa continua barata de armazenar, mesmo após meses de exploração.
Ocupação como discos, não como blocos de papel de parede
O território dos sinalizadores usa a distância de Chebyshev - o máximo dos valores absolutos de dx e dy - portanto, um raio de cobertura é literalmente um quadrado alinhado aos eixos na grade de blocos. Os níveis ampliam esse quadrado, desde pequenas áreas de patrulha até enormes discos de reivindicação (com dezenas de blocos de lado, chegando a cerca de 100 nos módulos mais pesados). O jogo não precisa armazenar cada bloco ocupado como um documento próprio. A propriedade é reconstruída a partir dos centros e raios dos sinalizadores ativos, com os blocos dos corpos planetários recortados da reivindicação. As sobreposições entre seus próprios sinalizadores continuam sendo uma única tonalidade uniforme, não uma pilha de camadas cada vez mais escuras.
O que a API do mapa realmente envia
O carregamento de um mapa é um quadro de marcadores, não um atlas de texturas do cosmos: sistemas que você conhece, frotas que possui ou detecta, sinalizadores cuja cobertura cruza sua névoa ou reconhecimento, salvamento de destroços em decomposição que você encontrou e limites amplos o bastante para conter esses pontos de referência. Os blocos de exploração chegam junto. Então, o cliente decide o que desenhar para a câmera atual. Essa divisão - estado esparso do mundo sendo transmitido e pixels densos apenas na área visível - é a única maneira de um mapa estelar de MMO de navegador permanecer viável em grande escala.
O renderizador antigo - uma retrospectiva honesta
O mapa estelar anterior era um mundo React no DOM: uma camada enorme movida com translate e scale do CSS, marcadores como botões e imagens posicionados, névoa e ocupação como retângulos SVG. Aquela foi a escolha certa para a primeira versão alfa - interativa, fácil de depurar e rápida de iterar. Ela não envelheceu bem quando os discos de ocupação e a névoa explorada cresceram.
- Dimensionar com CSS uma camada do tamanho do mundo obriga o navegador a compor uma árvore gigantesca de nós a cada quadro de deslocamento.
- A ocupação desenhava um retângulo SVG por bloco ocupado dentro da área visível, após expandir discos completos de Chebyshev em JavaScript - correto e caro.
- A névoa usava retângulos SVG mesclados sobre a tela carregada - melhor do que um nó por bloco, mas ainda muito dependente de SVG à medida que a área revelada crescia.
- Os marcadores de planetas e frotas eram elementos DOM reais, com filtros, anéis e alvos de interação - aceitáveis às dezenas, caros às centenas sob um elemento-pai em transformação.
- Ao reduzir o zoom, a névoa e a ocupação antes desapareciam por completo para que a visão geral pudesse sobreviver - o que ocultava justamente as informações de que você mais precisava ao examinar o teatro de operações.
O novo renderizador - WebGL com PixiJS
Agora, o mapa estelar é desenhado em um canvas do tamanho da área visível por meio do PixiJS, que se comunica com o WebGL (com um método alternativo seguro quando necessário). O mundo deixou de ser uma folha DOM de bilhões de pixels. Agora ele é uma matriz de câmera sobre chamadas de desenho otimizadas para a GPU. Painéis da HUD, caixas de diálogo e controles de comando continuam em React - apenas a superfície viva do mapa foi movida.
Câmera sem castigar o React
Enquanto você arrasta ou usa o gesto de pinça, a transformação da câmera atualiza o palco Pixi imediatamente. O React ainda recebe informações sobre o foco e os limites de descarte em um ritmo mais tranquilo - etapas de foco quantizadas e fim do gesto - para não reconstruirmos o universo a cada pixel percorrido pelo dedo. Frotas em movimento e rastros de trânsito ficam em uma camada dinâmica que pode ser atualizada sem remontar sóis e névoa.
Camadas que continuam úteis ao reduzir o zoom
O nível de detalhe ainda existe, mas muda a representação - não a existência da névoa e da ocupação. Com o zoom aproximado, você vê grades de blocos, sprites de planetas e marcadores nítidos. Com o zoom afastado, vê grades mais amplas, aglomerados de sóis e marcadores mais simples - enquanto os quadrados de ocupação e a bruma da névoa permanecem, para que o panorama estratégico não fique vazio.
- Plano de fundo: grade, névoa, tonalidades de ocupação, contornos de alcance (conexão de sinalizadores, detecção de frotas, alcance de movimento, radar de varredura).
- Corpos: sóis, planetas, marcadores de sinalizadores, marcadores de salvamento.
- Dinâmico: marcadores de frotas, rotas de trânsito, prévias de planos de viagem, setas de fusão.
Por que os discos de Chebyshev importam para o desenho
Como um disco de Chebyshev é um quadrado, a ocupação pode ser desenhada como um único quadrilátero por sinalizador, em vez de milhares de retângulos de blocos. A névoa ainda usa regiões reveladas mescladas, mas apenas para o que a área visível precisa. Essa é a diferença entre aplicar papel de parede e usar carimbos.
O que você deve perceber como comandante
- Deslocamento e gesto de pinça mais fluidos nos celulares, especialmente sobre áreas ocupadas ou bastante exploradas.
- Névoa e ocupação ainda legíveis ao reduzir o zoom para planejar o próximo corredor.
- Alcance de detecção da frota selecionada e prévias de cobertura dos sinalizadores desenhados como quadrados nítidos no mapa.
- As mesmas regras de jogo - esta é uma mudança de renderizador, não uma reformulação da névoa, dos sinalizadores ou das frotas.
Interruptor de emergência e honestidade de alfa
Pixi é o padrão. Se algo der errado em uso real, posso reverter o padrão ativo para o método DOM legado sem uma reconstrução completa. As abas do mapa que já estiverem abertas manterão o renderizador atual até serem recarregadas. Estou mantendo o método antigo de propósito durante um breve período de maturação - cerca de uma semana de jogo real - e depois pretendo removê-lo assim que confiar na nova superfície.
Se o mapa ainda engasgar em um dispositivo específico após uma atualização, avise-me pelo Command Relay, informando o dispositivo, o navegador e aproximadamente a região que você estava observando. O objetivo é simples: o mapa estelar deve voltar a transmitir a sensação do espaço - leve sob o dedo, repleto de informações e pronto para as batalhas que ainda estão por vir. - Command