Dépêche de Command. La carte stellaire est au cœur de X-Wars - et sur les téléphones, elle avait commencé à donner l'impression de traîner un lourd tableau plutôt que de voler dans l'espace. Aujourd'hui, je déploie un nouveau moteur de rendu par défaut fondé sur WebGL (via PixiJS), qui garde le brouillard et l'occupation visibles lorsque vous dézoomez, tout en conservant l'ancienne solution comme interrupteur de secours jusqu'à ce que la nouvelle ait fait ses preuves en production.
Pourquoi la carte semblait lente
Une carte stellaire vivante n'est pas une simple image. C'est une caméra en mouvement au-dessus d'un monde en expansion : grilles de tuiles, brume d'exploration, teintes d'occupation des balises, soleils, sprites de planètes, repères de flottes, traînées de transit, anneaux de détection et aperçus des zones accessibles. Sur un ordinateur portable, l'ancienne approche semblait souvent convenir. Sur les appareils Android et iOS de milieu de gamme, elle saccadait - surtout en présence de vastes zones d'occupation ou d'une grande région explorée. Les déplacements et les gestes de pincement semblaient réagir en retard. Ce n'était pas un problème de contenu. C'était le prix imposé par le moteur de rendu.
Comment stocker un immense univers sans submerger le navigateur
L'univers est immense par choix. Les commandants ne téléchargent pas chaque tuile sous la forme d'une ligne de JSON. Le serveur et le client coopèrent grâce à des structures clairsemées - uniquement ce que vous avez révélé, découvert ou ce qui est nécessaire à la vue actuelle.
Le brouillard d'exploration sous forme de bitmaps
Le brouillard de guerre n'est pas une liste de toutes les tuiles obscures. L'espace révélé est stocké dans des bitmaps découpés en blocs - des carrés de taille fixe de l'univers, compactés en bits. Un bloc de 64 tuiles sur 64 tient dans quelques centaines d'octets. Le navigateur reçoit les blocs qui touchent les limites de votre carte, pas un roman de coordonnées. Lorsqu'une flotte effectue une reconnaissance dans une zone, nous activons les bits correspondants et envoyons les modifications. C'est ainsi que le stockage du brouillard reste léger, même après des mois d'exploration.
L'occupation sous forme de zones, pas de tuiles de papier peint
Le territoire des balises utilise la distance de Chebyshev - le maximum des valeurs absolues de dx et dy - si bien qu'un rayon de couverture forme littéralement un carré aligné sur les axes de la grille. Les différents paliers agrandissent ce carré, depuis de petites zones de patrouille jusqu'à d'immenses zones de revendication territoriale - plusieurs dizaines de tuiles de côté, et jusqu'à environ 100 pour les modules les plus puissants. Le jeu n'a pas besoin de stocker chaque tuile occupée séparément. Le territoire est reconstitué à partir du centre et du rayon des balises actives, en excluant de la revendication les tuiles occupées par les corps planétaires. Les chevauchements entre vos propres balises conservent une teinte uniforme au lieu d'empiler des couches toujours plus sombres.
Ce que l'API de la carte envoie réellement
Le chargement d'une carte ressemble à un tableau où sont épinglées des informations, pas à un atlas de textures du cosmos : les systèmes que vous connaissez, les flottes que vous possédez ou détectez, les balises dont la couverture croise votre brouillard ou vos zones de reconnaissance, les débris issus de la désintégration que vous avez trouvés, ainsi que des limites suffisamment larges pour contenir ces points d'ancrage. Les blocs d'exploration arrivent en parallèle. Le client décide ensuite ce qu'il doit afficher pour la caméra actuelle. Cette séparation - un état clairsemé du monde lors du transfert, des pixels denses uniquement dans la zone visible - est la seule manière pour la carte stellaire d'un MMO sur navigateur de rester viable à grande échelle.
L'ancien moteur de rendu - bilan sans détour
L'ancienne carte stellaire reposait sur un monde React dans le DOM : une immense couche déplacée à l'aide des fonctions de translation et de mise à l'échelle de CSS, des repères sous forme de boutons et d'images positionnés, ainsi que le brouillard et l'occupation sous forme de rectangles SVG. C'était le bon premier choix pour l'alpha - interactif, facile à diagnostiquer et rapide à faire évoluer. Mais cette solution a mal vieilli à mesure que les zones d'occupation et le brouillard exploré se sont étendus.
- Mettre à l'échelle avec CSS une couche de la taille du monde oblige le navigateur à recomposer une immense arborescence d'éléments à chaque image pendant un déplacement.
- L'occupation dessinait un rectangle SVG par tuile occupée dans la zone visible après avoir développé en JavaScript l'intégralité des zones de Chebyshev - une méthode correcte, mais coûteuse.
- Le brouillard utilisait des rectangles SVG fusionnés sur la zone chargée - mieux qu'un élément par tuile, mais toujours très dépendant de SVG à mesure que l'espace révélé s'étendait.
- Les repères de planètes et de flottes étaient de véritables éléments du DOM avec des filtres, des anneaux et des zones interactives - acceptable par dizaines, coûteux par centaines sous un élément parent en transformation.
- Lors d'un dézoom, le brouillard et l'occupation disparaissaient entièrement afin que la vue d'ensemble reste utilisable - ce qui masquait précisément les renseignements dont vous aviez le plus besoin pour observer le théâtre des opérations.
Le nouveau moteur de rendu - WebGL avec PixiJS
La carte stellaire est désormais dessinée dans un canvas de la taille de la zone visible par l'intermédiaire de PixiJS, qui communique avec WebGL et dispose d'une solution de repli sûre si nécessaire. Le monde n'est plus une feuille du DOM comptant des milliards de pixels. C'est une matrice de caméra appliquée à des opérations de dessin adaptées au GPU. Les panneaux du HUD, les boîtes de dialogue et l'interface de commande restent dans React - seule la surface vivante de la carte a été déplacée.
Une caméra qui ne pénalise pas React
Lorsque vous déplacez la carte ou utilisez un geste de pincement, la transformation de la caméra actualise immédiatement la scène Pixi. React reçoit toujours les informations de point central et de limites d'affichage, mais à un rythme plus mesuré - par étapes quantifiées et à la fin du geste - afin de ne pas reconstruire l'univers pour chaque pixel parcouru par votre doigt. Les flottes en mouvement et les traînées de transit résident dans une couche dynamique qui peut s'actualiser sans recréer les soleils et le brouillard.
Des couches qui restent utiles lorsque vous dézoomez
Le niveau de détail existe toujours, mais il modifie la représentation - pas la présence du brouillard et de l'occupation. Lorsque vous zoomez, vous obtenez les grilles de tuiles, les sprites des planètes et des repères nets. Lorsque vous dézoomez, vous voyez des grilles plus larges, des groupes de soleils et des marqueurs plus simples - tandis que les carrés d'occupation et la brume du brouillard restent visibles pour que la situation stratégique ne disparaisse pas.
- Arrière-plan : grille, brouillard, teintes d'occupation, contours des portées - liaison des balises, détection des flottes, déplacements possibles et radar de balayage.
- Corps : soleils, planètes, marqueurs de balises, repères de débris.
- Éléments dynamiques : marqueurs de flottes, trajectoires de transit, aperçus des plans de voyage, flèches de fusion.
Pourquoi les zones de Chebyshev comptent pour le rendu
Comme une zone de Chebyshev est un carré, l'occupation peut être dessinée sous la forme d'un seul quadrilatère par balise au lieu de milliers de rectangles représentant des tuiles. Le brouillard utilise toujours des régions révélées fusionnées, mais uniquement pour ce dont la zone visible a besoin. C'est toute la différence entre poser du papier peint et apposer quelques tampons.
Ce que vous devriez remarquer en tant que commandant
- Des déplacements et des gestes de pincement plus fluides sur les téléphones, surtout au-dessus des espaces occupés ou largement explorés.
- Un brouillard et une occupation toujours lisibles lorsque vous dézoomez pour planifier le prochain corridor.
- La portée de détection de la flotte sélectionnée et les aperçus de couverture des balises dessinés sous forme de carrés nets sur la carte.
- Les mêmes règles de jeu - il s'agit d'un changement de moteur de rendu, pas d'une refonte du brouillard, des balises ou des flottes.
Interrupteur de secours et transparence sur l'alpha
Pixi est désormais utilisé par défaut. Si un problème survient en conditions réelles, je peux rétablir en direct l'ancienne solution fondée sur le DOM sans reconstruction complète. Les onglets de carte déjà ouverts conservent leur moteur de rendu actuel jusqu'à leur rechargement. Je garde volontairement l'ancienne solution pendant une courte période d'observation - environ une semaine de jeu réel - puis je compte la supprimer lorsque j'aurai pleinement confiance dans la nouvelle surface de rendu.
Si la carte saccade encore sur un appareil précis après une actualisation, dites-le-moi via Command Relay en indiquant l'appareil, le navigateur et approximativement la zone que vous observiez. L'objectif est simple : la carte stellaire doit à nouveau donner la sensation de l'espace - légère sous le doigt, riche en renseignements et prête pour les combats à venir. - Command