Przejdź do treści
2026-07-09 · Zespół Data Center Fan

Nowa izometryczna grafika bez straty wydajności

Jak nadaliśmy grze własny styl wizualny – budynki poziomów, rysowany sprzęt, oświetlenie statusów i efekty stawiania oraz awansu – jednocześnie obniżając koszt animacji, a nie go zwiększając.

Skalę widać po samym obiekcie.

Sceny regionalne i hiperskalowe wyrenderowane przez izometryczny system, który zna poziom obiektu.

Grafika obiektu regionalnego z Data Center Fan
Budynki, wieże i gęstość szaf zależne od poziomu.
Grafika obiektu hiperskalowego z Data Center Fan
Nocne oświetlenie, gęsto upakowane szafy i hiperskalowe rekwizyty.

Cel

Na początku każdy obiekt wyglądał mniej więcej tak samo: pokój z przemalowanymi ścianami. Kompleks hiperskalowy z poziomu 7 ledwo różnił się od garażu z poziomu 1. Chcieliśmy, żeby sam budynek wyraźnie rósł razem z graczem, a sprzęt wyglądał jak maszyny, a nie naklejki z emoji – i to bez poświęcania choćby jednej klatki wydajności.

Najpierw wydajność

Zanim cokolwiek dodaliśmy, najpierw obcięliśmy koszty. Timery JavaScriptu odpalane co klatkę zastąpiliśmy animacjami CSS składanymi na GPU, nieruchome sceny przestały się w ogóle przerysowywać, a dziesiątki osobnych zegarów animacji zebraliśmy w kilka wspólnych keyframe’ów. Tak zwolniony budżet mogliśmy wydać na to, co gracze naprawdę widzą.

Obiekt z charakterem

  • Budynki zależne od poziomu: na starcie brama garażowa, w środku biurowce ze szklaną fasadą, podświetlone ściany, klimatyzacja na dachu i wieże chłodnicze, a na samej górze antena satelitarna i światło ostrzegawcze.
  • Rysowany sprzęt: urządzenia zasilające, chłodzące i sieciowe mają teraz wektorowe ikony i sylwetki skalowane do pola zamiast emoji o stałym rozmiarze.
  • Status czytelny na pierwszy rzut oka: uśpione serwery pokazują delikatne „zZ”, psujące się dymią, a aktywny incydent sprawia, że światła na sali migoczą.
  • Dzień i noc: wyższe poziomy żyją o zachodzie słońca i nocą, a po zmroku okna świecą.

Efekciarstwo, ale z umiarem

Postawiony element ląduje teraz z lekkim odbiciem i chmurką kurzu. Awans na wyższy poziom przepuszcza przez scenę falę uderzeniową. Te efekty odpalają się raz i korzystają wyłącznie z transform i opacity, więc dają frajdę, nie ruszając budżetu wydajności w normalnej pracy.

Szybkie linki