Nowa skóra: ekran startowy w złocie i koniec z migotaniem przy starcie
Prawdziwy zrzut ekranu z gry, bez retuszu.
Tym razem mniej fizyki, więcej wyglądu. Ekran startowy — pierwsza rzecz, jaką widzi każdy gracz — dostał zupełnie nową skórę: segmentowany pasek u góry, panel z kolorowymi bokami, złote przyciski z fakturą i wąskie, "kokpitowe" fonty. To dopiero początek: ten sam styl ma docelowo objąć cały interfejs gry.
Najpierw makieta, potem gra
Nowy wygląd nie powstał od razu w grze. Najpierw była osobna makieta — jeden samodzielny plik HTML, który otwiera się prosto z dysku, bez serwera i bez gry. Dopiero kiedy wyglądała tak, jak chcieliśmy, przenieśliśmy ją do właściwego kodu. Tak robimy z każdym nowym elementem wizualnym (stacja i dron też tak zaczynały): prototyp z boku, a potem uczciwa integracja.
Dla porównania — tak wyglądał ekran startowy jeszcze kilka wersji temu:
Stary ekran startowy (wersja 2.0.10) — też prawdziwy zrzut ekranu.
Działał, ale tekst leżał prosto na scenie 3D, więc przez opis prześwitywały stacja i statki, a w rogach widać było panele z gry. Nowy panel ma własne, ciemne tło, a interfejs gry chowa się, dopóki nie wejdziesz na orbitę.
Z czego to jest zrobione
Kolorowe elementy — przyciski, boki panelu, pasek — to jeden wspólny "materiał" w kilku kolorach: złotym, kilku odcieniach niebieskiego, liliowym i czerwonym. Każdy ma delikatne podświetlenie u góry, cień u dołu i nałożone ziarno, które sprawia, że wyglądają bardziej jak lakierowany metal niż płaskie prostokąty. To ziarno to mały kafelek szumu wygenerowany algorytmem — pionowe smugi plus plamy plus drobny pył — nakładany na każdy kolor w trybie "soft light".
W ustawieniach zwykłe pola wyboru zamieniły się w przełączniki, a zakładki mają ten sam złoto-niebieski styl co reszta:
Prawdziwy zrzut ekranu z gry.
Cały ekran jest zaprojektowany na stałą "deskę kreślarską" 1536×1024 pikseli i skalowany do okna przeglądarki — dzięki temu wszystko zachowuje proporcje na każdym monitorze. Wyjątkiem jest górny pasek: jego lewa część trzyma się lewej krawędzi, prawa prawej, a dwa długie paski pośrodku rozciągają się, żeby na szerokim monitorze nie zostawały puste boki.
Przy przenoszeniu trafiła się jedna zabawna wpadka: wszystkie kolorowe przyciski wyszły… przezroczyste. Winna okazała się kolejność ważności reguł w CSS — nasza reguła "wyczyść domyślny wygląd przycisków" była odrobinę silniejsza niż ta, która nadawała im kolor, i po cichu zerowała tło. Jedna drobna zmiana i materiał wrócił.
Koniec z migotaniem przy starcie
Po wdrożeniu przyszło zgłoszenie: "po otwarciu strony niektóre rzeczy ładują się z opóźnieniem — czcionka, tłumaczenie". Zmierzyliśmy to dokładnie i obraz był jasny: przez pierwsze półtorej sekundy ekran pokazywał zastępczą czcionkę, angielski tekst (nawet jeśli wybrałeś polski) i płaskie przyciski bez faktury, a potem wszystko nagle "przeskakiwało" na właściwe.
Winowajcą była budowa sceny 3D. Uruchomienie grafiki i przygotowanie shaderów na moment całkowicie zajmuje przeglądarkę — w tym czasie nie może niczego odświeżyć na ekranie. A przeglądarka zaczyna pobierać czcionkę dopiero wtedy, kiedy zobaczy tekst, który jej używa, czyli… po tym zatorze. Tłumaczenie i faktura też były ustawiane dopiero po starcie sceny.
Poprawka to w zasadzie zmiana kolejności: najpierw ekran startowy (teksty, język, przyciski), potem jedna narysowana klatka, a dopiero potem ciężka budowa sceny. Czcionki trzymamy teraz we własnym repozytorium zamiast pobierać z zewnętrznego serwisu i każemy przeglądarce ściągać je od razu, na samym początku. Jeśli masz zapisany polski, panel czeka ułamek sekundy ukryty, zamiast mignąć po angielsku. Efekt: przetłumaczony tekst pojawia się po około 0,3 sekundy zamiast 1,5, a czcionki są gotowe, zanim na ekranie pojawi się cokolwiek. Scena 3D dochodzi w tle chwilę później — ale teraz za już gotowym ekranem, a nie zamiast niego.
Porządki pod spodem
Na koniec rozbiliśmy nowy interfejs na porządne, osobne pliki: wspólny "zestaw" stylów, osobno ekran startowy, osobno okno ustawień, osobno obsługa klawisza Escape. Przy okazji wyszedł mały błąd, który sami wprowadziliśmy kilka wersji wcześniej: gra ma listę plików, które przycisk "Odśwież" po aktualizacji wymusza pobrać na nowo — i jeden z nowych plików na nią nie trafił. Już jest, razem ze wszystkimi nowymi.
Co dalej
Ekran startowy to pierwszy krok. Makieta całego interfejsu w trakcie gry — telemetria, lista graczy, panele drona, stacji i planet — jest już gotowa w tym samym stylu i czeka na przeniesienie. Z tego wpisu zostaje nam gotowy zestaw klocków, na którym da się ją postawić.
Komentarze
Prześlij komentarz