Command'dan bildiri. Yıldız haritası X-Wars'ın kalbi - ancak telefonlarda uzayda uçmaktan çok ağır bir tabloyu sürüklemek gibi hissettirmeye başlamıştı. Bugün WebGL (PixiJS aracılığıyla) üzerine kurulu yeni bir varsayılan görüntüleyiciyi kullanıma sunuyorum. Uzaklaştırdığınızda sis ve işgal görünür kalıyor; yenisi canlı ortamda yeterince sınanana kadar eski yöntem de acil kapatma seçeneği olarak yerinde duruyor.
Harita neden yavaş hissettiriyordu
Yaşayan bir yıldız haritası tek bir resim değildir. Büyüyen bir dünyanın üzerinde hareket eden bir kameradır: karo ızgaraları, keşif sisi, işaret istasyonu işgal tonları, güneşler, gezegen görselleri, filo işaretleri, geçiş izleri, tarama halkaları ve erişilebilirlik önizlemeleri. Eski yaklaşım bir dizüstü bilgisayarda çoğu zaman sorunsuz görünüyordu. Orta sınıf Android ve iOS cihazlarda ise özellikle büyük işgal diskleri veya geniş keşfedilmiş bölgelerde takılıyordu. Kaydırma ve parmaklarla yakınlaştırma gecikmeli hissettiriyordu. Bu, içerikle ilgili bir şikâyet değil. Görüntüleyicinin çıkardığı bir fatura.
Devasa bir evren tarayıcıyı boğmadan nasıl saklanıyor
Evren bilerek büyük tasarlandı. Komutanlar her karoyu bir JSON satırı olarak indirmiyor. Sunucu ve istemci, seyrek veri yapıları üzerinde birlikte çalışıyor - yalnızca açığa çıkardığınız, keşfettiğiniz veya mevcut görünüm için ihtiyaç duyduğunuz şeyler aktarılıyor.
Bit eşlemler olarak keşif sisi
Savaş sisi, karanlık olan her karonun listesi değildir. Açığa çıkarılan uzay, parçalara ayrılmış bit eşlemlerde saklanır - evrenin sabit boyutlu kareleri bitler hâlinde paketlenir. 64'e 64 karoluk bir parça birkaç yüz bayta sığar. Tarayıcı, koordinatlardan oluşan bir romanı değil, harita sınırlarınıza temas eden parçaları alır. Bir filo disk şeklindeki bir alanda keşif yaptığında bitleri ayarlayıp yamalar göndeririz. Aylar süren keşiften sonra bile sis verilerinin düşük maliyetle saklanabilmesinin nedeni budur.
Duvar kâğıdı karoları değil, işgal diskleri
İşaret istasyonu bölgeleri Chebyshev mesafesini kullanır - mutlak dx ve dy değerlerinin en büyüğü - dolayısıyla bir kapsama yarıçapı, karo ızgarasında tam anlamıyla eksenlere hizalı bir karedir. Seviyeler bu kareyi küçük devriye alanlarından devasa hak iddia disklerine kadar genişletir (bir kenarı onlarca karo, en ağır modüllerde yaklaşık 100 karoya kadar). Oyunun işgal altındaki her karoyu ayrı bir belge olarak saklaması gerekmez. Mülkiyet, etkin işaret istasyonlarının merkezleri ve yarıçaplarından yeniden oluşturulur; gezegen gövdelerine ait karolar hak iddia alanından çıkarılır. Size ait işaret istasyonlarının çakışan bölgeleri, üst üste binmiş koyu katmanlar yerine tek ve düz bir renk tonu olarak kalır.
Harita API'si gerçekte ne gönderiyor
Bir harita yüklemesi, kozmosun doku atlası değil, bir ilan panosudur: bildiğiniz sistemler, sahip olduğunuz veya tespit ettiğiniz filolar, kapsama alanları sisinizle ya da keşif bölgenizle kesişen işaret istasyonları, bulduğunuz bozunma enkazları ve bu referans noktalarını kapsayacak genişlikte sınırlar. Keşif parçaları da bunlarla birlikte gelir. Ardından istemci, mevcut kamera için neyin çizileceğine karar verir. Bu ayrım - ağ üzerinden seyrek dünya durumu, yalnızca görünüm alanı için yoğun pikseller - bir tarayıcı MMO'sunun yıldız haritasının büyük ölçekte dürüst kalabilmesinin tek yoludur.
Eski görüntüleyici - dürüst bir değerlendirme
Önceki yıldız haritası bir React DOM dünyasıydı: CSS translate ve scale ile hareket ettirilen devasa bir katman, konumlandırılmış düğmeler ve görsellerden oluşan işaretler, SVG dikdörtgenleriyle çizilen sis ve işgal. Alfa için doğru ilk gemiydi - etkileşimliydi, hata ayıklaması kolaydı ve hızla geliştirmeye uygundu. Ancak işgal diskleri ve keşfedilmiş sis büyüdükçe iyi yaşlanmadı.
- Dünya boyutundaki bir katmanı CSS ile ölçeklemek, tarayıcıyı her kaydırma karesinde devasa bir düğüm ağacını birleştirmeye zorlar.
- İşgal, JavaScript içinde tam Chebyshev diskleri genişletildikten sonra görünüm alanındaki her işgal edilmiş karo için bir SVG dikdörtgeniyle çiziliyordu - doğruydu ve pahalıydı.
- Sis, yüklenen tuval üzerinde birleştirilmiş SVG dikdörtgenleri kullanıyordu - karo başına bir düğümden daha iyiydi, ancak açığa çıkarılan alan büyüdükçe hâlâ SVG ağırlıklıydı.
- Gezegen ve filo işaretleri; filtreleri, halkaları ve tıklama hedefleri olan gerçek DOM öğeleriydi - birkaç düzineyken sorun yoktu, dönüşüm uygulanan bir üst öğenin altında yüzlercesi pahalıya mal oluyordu.
- Makro görünüm ayakta kalabilsin diye uzaklaştırıldığında sis ve işgal tamamen kaldırılıyordu - bu da harekât alanını incelerken en çok ihtiyaç duyduğunuz istihbaratı gizliyordu.
Yeni görüntüleyici - PixiJS ile WebGL
Yıldız haritası artık PixiJS üzerinden görünüm alanı boyutundaki bir canvas'a çiziliyor. PixiJS, WebGL ile iletişim kuruyor ve gerektiğinde güvenli bir geri dönüş yolu kullanıyor. Dünya artık milyarlarca piksellik bir DOM sayfası değil. GPU dostu çizim çağrıları üzerinde çalışan bir kamera matrisi. HUD panelleri, iletişim kutuları ve komuta arayüzü React olarak kalıyor - yalnızca yaşayan harita yüzeyi taşındı.
React'i cezalandırmayan kamera
Kaydırırken veya parmaklarınızla yakınlaştırırken kamera dönüşümü Pixi sahnesini anında güncelliyor. React ise odak ve ayıklama sınırlarını daha sakin bir tempoda - nicemlenmiş odak adımlarında ve hareketin sonunda - öğrenmeye devam ediyor; böylece parmağın katettiği her pikselde evreni yeniden inşa etmiyoruz. Hareket eden filolar ve geçiş izleri, güneşleri ve sisi yeniden bağlamadan ilerleyebilen dinamik bir katmanda yer alıyor.
Uzaklaştırdığınızda da kullanışlı kalan katmanlar
Ayrıntı düzeyi hâlâ var, ancak sis ve işgalin var olup olmadığını değil, gösterim biçimini değiştiriyor. Yakınlaştırdığınızda karo ızgaralarını, gezegen görsellerini ve net işaretleri görüyorsunuz. Uzaklaştırdığınızda daha seyrek ızgaralar, güneş kümeleri ve daha basit işaretçiler görüyorsunuz - ancak işgal kareleri ve sis pusları görünür kalıyor, böylece stratejik tablo boşalmıyor.
- Arka plan: ızgara, sis, işgal tonları, menzil çerçeveleri (işaret istasyonu bağlantısı, filo tespiti, hareket erişilebilirliği, tarama radarı).
- Gök cisimleri: güneşler, gezegenler, işaret istasyonu göstergeleri, enkaz işaretleri.
- Dinamik: filo göstergeleri, geçiş rotaları, seyahat planı önizlemeleri, birleşme okları.
Chebyshev diskleri çizim için neden önemli
Bir Chebyshev diski kare olduğu için işgal, binlerce karo dikdörtgeni yerine işaret istasyonu başına tek bir dörtgen olarak çizilebilir. Sis hâlâ birleştirilmiş açık bölgeleri kullanır, ancak yalnızca görünüm alanının ihtiyaç duyduğu kısım için. Duvar kâğıdı döşemekle damga basmak arasındaki fark budur.
Bir komutan olarak neleri fark etmelisiniz
- Özellikle işgal edilmiş veya kapsamlı biçimde keşfedilmiş uzayda, telefonlarda daha akıcı kaydırma ve parmaklarla yakınlaştırma.
- Bir sonraki koridoru planlamak için uzaklaştırdığınızda sis ve işgal hâlâ okunabilir.
- Seçilen filonun tespit menzili ve işaret istasyonu kapsama önizlemeleri haritada temiz kareler olarak çizilir.
- Aynı oynanış kuralları - bu bir görüntüleyici değişikliği, sisin, işaret istasyonlarının veya filoların yeniden tasarımı değil.
Acil kapatma seçeneği ve alfaya yakışır dürüstlük
Pixi varsayılan seçenek. Canlı ortamda bir şeyler ters giderse tam bir yeniden derleme yapmadan varsayılanı eski DOM yöntemine geri çevirebilirim. Zaten açık olan harita sekmeleri, siz yeniden yükleyene kadar mevcut görüntüleyicilerini kullanmaya devam eder. Eski yöntemi kısa bir gözlem süresi boyunca bilerek tutuyorum - yaklaşık bir haftalık gerçek oynanış - ardından yeni cama güvendiğimde onu kaldırmayı planlıyorum.
Yeniledikten sonra harita belirli bir cihazda hâlâ takılıyorsa cihazı, tarayıcıyı ve kabaca baktığınız bölgeyi belirterek Command Relay üzerinden bana bildirin. Hedef basit: yıldız haritası yeniden uzay gibi hissettirmeli - parmağın altında hafif, istihbaratla dolu ve önümüzdeki çatışmalara hazır. - Command