Grafika na poważnie: poświata, soczewka czarnej dziury i zakładka pełna suwaków

Prawdziwy zrzut ekranu z gry: stacja, Słońce z poświatą, flarą i promieniami, preset NORMAL.

Tym razem cały wpis jest o wyglądzie. Zaczęło się od jednego pytania Michała, a skończyło na zakładce Grafika, która ma dziś więcej opcji niż niejedna duża gra. Po drodze było kilka pomyłek, w tym moich, więc opowiem po kolei.

„Zróbmy wszystko po kolei”

Michał zauważył, że w mniejszej skali gra wygląda trochę inaczej, i zapytał: „czy potrzebujemy jakieś wygładzanie krawędzi, czy zmianę rozdzielczości? czy coś?”. Zaproponowałem kilka rzeczy naraz. Odpowiedź ustawiła zasadę na cały ten etap: „zróbmy wszystko po kolei z możliwością włączania/wyłączania/regulacji/ustawienia/ręczne/auto”. Od tej chwili każda nowa rzecz dostawała włącznik, a zwykle także suwak.

Na pierwszy ogień poszła rozdzielczość, która sama się dopasowuje. Gdy gra działa płynnie, rysuje więcej pikseli niż ma ekran i potem je pomniejsza, więc drobne statki i detale przestają migotać. Gdy zwalnia, schodzi niżej. Orbity i trajektorie zamieniliśmy na gładkie linie dowolnej grubości, bo przeglądarkowe miały jeden piksel i ząbki. Dalekie statki zamiast starych stożków pokazują się teraz jako mała świecąca kropka. Michał już wcześniej dopytywał, czemu jego jednostki z daleka wyglądają jak stożki, więc wreszcie przestały.

Przy okazji padło pytanie o nową wersję silnika grafiki. Aktualizacja to nie podmiana pliku: nowe wersje biblioteki zmieniły sposób ładowania, kolory i światło. Michał dopytał: „Czyli gdybyśmy używali wersji internetowej, to wtedy cała gra by się popsuła?”. Tak, gdyby gra pobierała „najnowszą” z internetu, pewnego dnia po prostu przestałaby działać. Dlatego trzymamy swoją, sprawdzoną kopię, a przesiadkę zostawiamy na osobny, spokojny projekt.

Pasek ładowania z przymrużeniem oka

Kolejna prośba: „Można by dorobić pasek ładowania, jeżeli się da”. Dało się, choć z haczykiem: przeglądarka nie odświeża obrazu, dopóki gra buduje świat. Pasek przesuwa się więc tylko między etapami (silnik grafiki, układ słoneczny, budzenie roju, interfejs, shadery), a każdy z nich ma chwilę na narysowanie się. Siedzi w przycisku „Wejdź na orbitę”, który odblokowuje się dopiero, gdy wszystko jest gotowe. Kompilację shaderów przenieśliśmy przed start, więc zniknęło przycięcie zaraz po wejściu na orbitę.

Prawdziwy zrzut ekranu: pasek ładowania w przycisku startu.

Michał dopisał w trakcie: „dodaj też ostatni etap ładowania tak jakieś 0,5 sekundy, jakiś zabawny tekst”. Teraz na koniec, przez pół sekundy, pojawia się jeden z kilku tekstów, na przykład „Proszę czarną dziurę o chwilę…”, „Liczę rój. Dwa razy.” albo „Dron: jeszcze pięć minut”. Czarna dziura w pierwszym z nich nie jest przypadkowa.

„Wszystkie po kolei proszę”

Na pytanie, co jeszcze fajnego da się zrobić z grafiką, wypisałem osiem pomysłów: od poświaty jasnych rzeczy po iskry przy gryzieniu. Odpowiedź była krótka: „wszystkie po kolei proszę, to będzie super”. No to po kolei.

Prawdziwe zrzuty ekranu: ten sam kadr bez efektów i z presetem NORMAL.

Poświata (bloom). Najjaśniejsze rzeczy świecą na otoczenie: Słońce, silniki, promienie, okna stacji. Pierwsza wersja miała jeden problem: jasna, lodowa planeta w słońcu zamieniała się w białą kulę. Efekt działa na obrazie, który już jest „dopasowany do ekranu”, a tam oświetlony lód jest prawie tak jasny jak Słońce. Podnieśliśmy próg i zwęziliśmy przejście, teraz planeta tylko delikatnie jaśnieje.

Soczewkowanie grawitacyjne. Czarna dziura zagina światło: gwiazdy i mgławica za nią wyginają się w pierścień, a w środku pojawia się lustrzane odbicie nieba. Pierwsze podejście wyglądało jak tarcza strzelnicza, bo wyginałem obraz razem z samą dziurą, a jej dysk jest już narysowany tak, jakby był zagięty. Teraz dziura rysuje się dopiero na wygiętym tle.

Prawdziwe zrzuty ekranu: po prawej mgławica i linia orbity zaginają się wokół dziury.

Prawdziwe nagranie z gry: kamera okrąża czarną dziurę, tło płynie wokół niej.

Flara i promienie od Słońca. Promienie, odblaski i halo jak w obiektywie. Sprytna część: gra nie liczy, czy coś zasłania Słońce, tylko patrzy na sam obraz. Jeśli w miejscu Słońca jest ciemno, bo przeleciała tam planeta, flara gaśnie. Moja wpadka: w pierwszej wersji liczyłem Słońce trzy razy za duże, bo zapomniałem, że jego promień jest już „wizualny”. Zauważyłem to dopiero przy zaćmieniach.

Smugi za silnikami. Za każdym twoim statkiem i dronem ciągnie się miękka, gasnąca wstęga, więc ruch roju widać nawet z daleka. Pierwsze smugi wyglądały jak płaskie trójkąty doklejone gdzieś za statkiem. Dostały miękkie brzegi, zwężenie przy dyszy i koniec przyczepiony dokładnie do silnika.

Prawdziwe nagranie z gry: statek odlatuje od stacji, za nim rośnie smuga.

Zaćmienia. Planeta między Słońcem a statkiem rzuca na niego cień, a statki, które krążą wokół jedzonej planety, połowę okrążenia spędzają po jej nocnej stronie. Bez map cieni: Słońce i planety to kule, więc każdy punkt statku po prostu liczy, ile tarczy Słońca zasłaniają. Pierwszy test pokazał... nic. Cień działał, ale nasze modele statków biorą większość światła z odbić otoczenia, a nie wprost od Słońca. Teraz w cieniu przygasają też odbicia, a świecą tylko własne lampy statku.

Prawdziwe zrzuty ekranu: statek za planetą, bez zaćmień i w jej cieniu.

Do tego iskry przy gryzieniu (stygną od bieli do czerwieni), gorący punkt w miejscu styku promienia, głębia ostrości w kamerze na obiekcie i filtr „oczu robota” z winietą, ziarnem i rozjeżdżającymi się kolorami. Ten ostatni pasuje do świata gry, w którym obraz ogląda kamera maszyny. Michał uznał jednak, że głębia ostrości i filtr to nie dla każdego, i poprosił: „niech normal ma wyłączone depth of field i robot eyes”. Zostały w MAKS i pod ręką.

Presety, [?] i porządek

W połowie pracy Michał zapytał: „w grach widziałem ustawienia x2 x4 x8, co to takiego?”. To wygładzanie krawędzi, w którym każdy piksel na krawędzi jest próbkowany kilka razy. Od razu trafiło do gry jako WYŁ. / ×2 / ×4 / ×8. Potem przyszły presety AUTO / MIN / NORMAL / MAKS („w grze też presety”). AUTO dopasowuje się do komputera: gdy nawet najniższa rozdzielczość nie nadąża, schodzi z efektami poziom niżej.

Ciekawa rozmowa zaczęła się od pytania Michała: „czy któraś z opcji wymaga resetu shaderów i wczytania na nowo?”. Wczytywania na nowo żadna nie wymaga, ale jedna, światła przy statkach, zmusza kartę graficzną do przeliczenia wszystkich materiałów, a to daje przycięcie. Preset MAKS je włączał, więc AUTO mogło przyciąć grę w najmniej spodziewanym momencie. Teraz presety tych świateł w ogóle nie dotykają.

Potem przyszła uwaga z gatunku UX: „poukładaj wszystko odpowiednio w kolejności, żeby nie były tak losowo porozrzucane efekty” i „dodaj tooltip lub opis [?], że dana opcja może być obciążająca”. Opcje są teraz w grupach (obraz i ostrość, modele, światło, efekty, kamera), a przy każdej jest znaczek [?]: zielony, żółty albo czerwony, z wyjaśnieniem po najechaniu.

Podpatrzone u dużych

Na koniec Michał wrzucił zrzut ekranu ustawień z dużej gry i zapytał, co możemy od niej wziąć, dorzucając zagadkę: „zgadnij co to za gra :D”. Zgadywałem, ale tytuł zostawmy w tajemnicy. Wzięliśmy pięć rzeczy. Po pierwsze panel opisu: okno ustawień się poszerza, a po najechaniu na opcję po prawej pojawia się, co robi, co znaczy każda wartość, ile kosztuje i jaka jest domyślna. Po drugie filtrowanie anizotropowe, dzięki któremu tekstury kadłubów oglądane pod kątem zostają ostre. Po trzecie wyostrzanie działające na tej samej zasadzie co w znanych technikach skalowania obrazu. Po czwarte promienie od Słońca, w których planeta wycina ciemne pasy. Po piąte ogranicznik klatek, żeby laptop się nie grzał.

Prawdziwy zrzut ekranu: zakładka Grafika z panelem opisu.

Ogranicznik klatek to mała, pouczająca historia. Pierwsza wersja przy limicie 30 dawała 27 klatek, bo odstępy przeglądarki nie dzieliły się równo. Poprawka dała około 40, bo nadrabiała za mocno. Dopiero trzecia trzyma równo 30 i 60. W połowie pomiarów wyniki spadły do kilku klatek na sekundę i przez chwilę szukałem błędu, aż Michał się przyznał: „bawiłem się grafiką, mogłem obciążyć”. Obaj testowaliśmy na tej samej karcie graficznej.

Laboratoria też

Laboratoria statków i ciał niebieskich dostały ten sam zestaw efektów. Michał postawił przy tym jeden warunek: „musi być wiadomo, co jest częścią statku, a co efektem”. Efekty siedzą więc w osobnym panelu z wyraźnym podpisem, że to obraz kamery, a nie część modelu. Cały kod obróbki obrazu jest teraz jednym plikiem, wspólnym dla gry i obu laboratoriów, tak jak modele statków i ciał.

Co dalej

Na liście zostało rozmycie w ruchu, cienie między planetami, poświata, która odróżni Słońce od jasnej planety, i smugi za statkami innych graczy. Najpierw jednak wracamy do samej gry: stacja wciąż czeka na naprawy, a czarna dziura, tak ładnie teraz zaginająca światło, dalej nie pasuje do tego układu.