Nowy kokpit dowódcy: cały interfejs gry w nowej skórze

Prawdziwy zrzut ekranu z gry, bez retuszu.

W poprzednim wpisie nowy wygląd dostał ekran startowy. Tym razem cała reszta: interfejs, który widzisz przez całą grę, zbudowaliśmy od nowa w tym samym stylu — z górnym paskiem, menu, listą floty, dziennikiem zdarzeń, minimapą i kilkoma rzeczami, których wcześniej po prostu nie było. To największa zmiana wyglądu gry od jej początku.

Zaczęło się tak samo jak przy ekranie startowym: od makiety. Najpierw powstał jeden samodzielny plik HTML, który tylko udawał grę (zamiast sceny 3D miał zwykły obrazek), a dopiero kiedy układ był gotowy, zaczęliśmy go przenosić do prawdziwego kodu. To podejście znów się sprawdziło — o wyglądzie łatwiej decydować, kiedy nie trzeba jednocześnie pilnować, żeby wszystko działało.

Przed i po

Dla porównania — tak wyglądała gra jeszcze kilka wersji temu:

Stary interfejs (wersja 2.1.4) — też prawdziwy zrzut ekranu. Nick drugiego gracza obecnego wtedy online zamaskowaliśmy.

Stary układ był minimalistyczny: kilka paneli w rogach i trzy przyciski, a reszta ukryta w okienkach. Nowy stawia na to, żeby wszystko ważne było widać od razu. Najbardziej baliśmy się, że przy takiej przeprowadzce coś zginie po drodze — więc zanim ruszyliśmy cokolwiek, spisaliśmy każdą istniejącą funkcję (łącznie z tymi mniej oczywistymi, jak przełącznik kamery czy narzędzia deweloperskie) i każdej przypisaliśmy nowe miejsce. Na koniec automatyczny test przeklikał je wszystkie po kolei, w obu językach i przy czterech różnych rozmiarach okna.

Cały układ dopasowuje się do okna przeglądarki: lewa kolumna trzyma się lewej krawędzi, prawa prawej, a to, co pośrodku — widok 3D, lista floty i dziennik — rozciąga się na szerszym albo wyższym ekranie. Technicznie to jedna „deska” zaprojektowana w rozmiarze 1536×1024 i skalowana do okna, tylko że każdy element wie, do której krawędzi jest przyklejony.

Co jest gdzie

Górny pasek pokazuje punkty ewolucji, liczbę jednostek, pochłonięte planety i graczy online, a z prawej cykl gry i zegar. Przyciski pauzy i przewijania czasu są na razie tylko ozdobą — w grze wieloosobowej trudno zatrzymać czas wszystkim naraz. Menu po lewej otwiera okna: flotę, typy ciał niebieskich, badania (drzewko ulepszeń), wywiad (kto jest online) i ustawienia. Budowa i dyplomacja czekają na swoją kolej.

Lista floty jest teraz zawsze na widoku: każdy statek z tym, co akurat robi („w drodze → Planeta lodowa”), plus dron z paskiem paliwa. Kliknięcie statku zaznacza go i włącza widok z jego kokpitu. Pod listą jest wybrana jednostka — z żywą miniaturą 3D, statystykami i przyciskiem CAM do kamery statku. Ten panel nie czeka, aż ktoś mu powie, co pokazać: w każdej klatce sprawdza, co jest zaznaczone, ale przebudowuje się tylko wtedy, gdy to się zmieni. Dzięki temu reaguje natychmiast, niezależnie od tego, czy statek wybrano kliknięciem w scenie, ramką, czy z listy. Gdy zaznaczysz drona, pojawiają się tam jego przyciski START, STOP i SKRYPT, więc programowanie jest zawsze pod ręką.

Po prawej stronie są informacje o planecie (albo o twojej stacji, jeśli to ją zaznaczysz) z obracającą się miniaturą oraz dziennik zdarzeń. Ten ostatni był zaskakująco prosty do podpięcia: wszystkie komunikaty w grze od początku przechodziły przez jedną funkcję, więc wystarczyło zmienić, dokąd ona je wysyła — żadne inne miejsce w kodzie nawet nie zauważyło różnicy.

Pod nim jest minimapa, celowo schematyczna. Prawdziwe orbity różnią się rozmiarem prawie dziesięciokrotnie, więc w skali wewnętrzne planety zlałyby się w jedną kropkę przy Słońcu. Zamiast tego każda orbita ma równy odstęp, a każde ciało leży na swojej orbicie pod prawdziwym kątem — widać, kto jest po której stronie Słońca, i łatwo w coś trafić myszą (astronomowie, wybaczcie). Kliknięcie planety na minimapie idzie dokładnie tą samą ścieżką w kodzie co kliknięcie w widoku 3D: z zaznaczonymi statkami to rozkaz lotu, bez nich — zaznaczenie. Da się ją też przybliżać i przesuwać.

Na dole jest pasek rozkazów z zakładkami taktyki, ruchu, budowy i akcji specjalnych — na razie tylko wygląda. Takich przycisków z dopiskiem „Wkrótce” jest w tej wersji więcej i traktujemy je jak listę zadań, którą widać od razu po wejściu do gry. Przełącznik kamery (baza / układ), narzędzia deweloperskie i kamera statku przeniosły się do rogów widoku 3D.

Pod maską

Scena 3D rysuje się teraz tylko w środkowej ramce. Nie ma do tego osobnego okna grafiki — to wciąż jedno płótno na cały ekran, tylko karta graficzna dostaje polecenie, żeby malowała wyłącznie w tym prostokącie. Tak samo powstają miniatury w panelach i widok z kokpitu: to osobne ujęcia tej samej sceny, dorysowane w ich okienkach w tej samej klatce. Trzeba było przy tym przeliczyć, gdzie trafia kliknięcie myszy — współrzędne liczą się teraz względem ramki, a nie całego ekranu.

Z miniaturami była też jedna pouczająca zagadka: pierwsze wersje wychodziły niemal czarne. Założyliśmy, że to oświetlenie, i dodaliśmy małe „światło studyjne” przy kamerze miniatury. Nie pomogło. Prawdziwy winowajca był gdzie indziej: miniatury rysują się pod panelami, a panele miały ciemne, prawie nieprzezroczyste tło. Trochę jak kupowanie mocniejszej żarówki, kiedy ktoś zapomniał zdjąć okulary przeciwsłoneczne. Tło zdjęliśmy (i tak pod spodem jest czerń), a światło studyjne zostało — włącza się tylko na czas rysowania miniatury, więc planety nie pokazują w niej swojej ciemnej strony.

Strona ładuje się też szybciej. Style były wcześniej dociągane łańcuszkiem — przeglądarka poznawała kolejne pliki dopiero po pobraniu poprzedniego — a biblioteki grafiki i sieci wstrzymywały pobieranie reszty kodu, dopóki same nie dotarły. Teraz wszystko rusza równolegle od pierwszej chwili. Kod interfejsu jest też rozbity porządnie: jeden plik na panel, zarówno w skryptach, jak i w stylach, co bardzo ułatwi dokładanie kolejnych rzeczy.

A na koniec drobiazg z gatunku „język polski kontra piksele”: nagłówek „WYBRANA JEDNOSTKA” okazał się za długi i wszedł pod przycisk zamykania — po angielsku wszystko mieściło się od początku. Teraz jest po prostu „JEDNOSTKA”, krótko i po wojskowemu, a nowe panele sprawdzamy odtąd w obu językach.

Na ekranie startowym

Ekran startowy dostał dwa drobiazgi: licznik graczy online w górnym pasku (licznik wszystkich zarejestrowanych graczy właśnie dojrzewa i ruszy wkrótce) oraz przycisk [?] z informacją o autorach i kontakcie.

Co dalej

Przed nami trzy duże tematy. Pierwszy to ustawienia graficzne — zakładka już jest, na razie nieaktywna:

Prawdziwy zrzut ekranu z gry — suwaki są na razie nieaktywne.

Drugi to nowe statki. Powstaje dla nich osobne laboratorium: statki budowane w całości z kodu — z pancerzem, silnikami, światłami pozycyjnymi — i z własnym licznikiem wydajności, który pokazuje, ile kosztuje ich narysowanie. Tu te dwa suwaki z ustawień już działają, bo w laboratorium najłatwiej sprawdzić, jak jakość grafiki przekłada się na płynność. Kiedy przeniesiemy statki do gry, przyjdzie z nimi też regulacja grafiki.

Zrzut z laboratorium statków — to jeszcze nie jest element gry, ale ma nim zostać.

Trzeci to nowe ciała niebieskie, w bliźniaczym laboratorium: planety z kontynentami, oceanami, górami, czapami lodowymi i chmurami, generowane w całości proceduralnie — bez jednej tekstury, wszystko liczone na bieżąco przez kartę graficzną — i sterowane suwakami. Stare narzędzia do edycji planet i statków usunęliśmy właśnie na ich rzecz.

Zrzut z laboratorium ciał niebieskich — również jeszcze nie w grze.

Zagraj: michalstankiewicz4-cell.github.io/Space