User Interface w świecie gier. Zasady projektowania i budowanie gier od podstaw

Czas pandemii okazał się dla wielu branż bardzo trudny. Gdy przychodzi kryzys, to najłatwiej jest oszczędzać na szeroko pojętych aspektach estetycznych. Bo w końcu na „kolorkach” to każdy się zna i nie trzeba wcale nikomu za to płacić. Ale tak to już jest, że jak ktoś biednieje, to inny się bogaci. Trend spadkowy nie objął branży growej, która, jak już pisaliśmy w numerze 6, zyskała na obostrzeniach i narodowych kwarantannach. Co za tym idzie, zajęcie się UI/UX w grach może się okazać dla wielu interesującą alternatywą zawodową.

Podstawową różnicą przy projektowaniu interfejsu użytkownika w grach jest to, że do zagrania nikogo nie trzeba zachęcać. Gracz korzysta z naszego designu, bo chce się dobrze bawić. On już znalazł, przemyślał i kupił nasz produkt. I nie zrobił tego tylko ze względu na to jak, wygląda main menu. Naszym celem nie jest więc zachęcenie do korzystania z niego. Ale spoczywa na nas inna odpowiedzialność. Nasza praca może mu uprzyjemnić i wzbogacić rozgrywkę lub bardzo ją utrudnić. Z tego powodu projektowanie interfejsu użytkownika ma swoje „plusy ujemne i plusy dodatnie”. Wynikająca z nich specyfika powoduje, że może się on bardzo różnić od tych, jakie spotykamy w innych produktach.

Zanim przejdę do bardziej szczegółowego omawiania tematu, zacznijmy od podstaw. Gry można podzielić ze względu na medium, jakiego używamy, aby zagłębić się w rozgrywkę. Szpilać (po śląsku grać) możemy na pecetach, konsolach i komórkach. Dodatkowo w ostatnich latach popularne są gry Virtual Reality (VR) i Augmented Reality (AR). Z jednej strony czerpią one z dokonań poprzedniczek, ale jednocześnie wprowadzają nową jakość do rozgrywki. Mamy więc bardzo różne urządzenia, z których każde rządzi się swoimi prawami. Rozmiar ekranu, wielkość mocy obliczeniowej czy specyfika korzystania ze sprzętu wymuszają na projektantach różne podejścia. Bo inaczej projektuje się ikonki wielkości pinezki, a inaczej te przeznaczone na duże ekrany.

Aspekt designu

Czynnikami wpływającymi na UI w grach jest czwarta ściana: wyimaginowana bariera pomiędzy graczem a światem gry oraz narracja, która kieruje rozgrywką. Narracja i czwarta ściana zawierają dwa pytania, które należy zadać każdemu komponentowi interfejsu użytkownika z gry: czy komponent istnieje w historii gry i czy komponent istnieje w przestrzeni gry? Odpowiedzi na te pytania wyłaniają nam 4 rodzaje UI: przestrzenny, meta, niediegetyczny i diegetyczny.

UI/UX przestrzenny

Czy komponent istnieje w historii gry? Nie. Czy komponent istnieje w przestrzeni gry? Tak. Komponenty interfejsu użytkownika znajdują się w przestrzeni gry, ale bohaterowie w grze nie są ich świadomi. Komponenty przestrzenne często działają jako pomoc wizualna, pomagając graczom wybierać obiekty lub wskazywać ważne punkty orientacyjne. W momencie, kiedy gracz nie jest pewien, na jaki obiekt trafił, etykietki pomagają rozwiać te wątpliwości. Dzięki temu gracz może całkowicie poświęcić się rozgrywce, a nie utknąć na poziomie rozpoznawania elementów. Przykłady: wspomniane wcześniej etykiety, podświetlane tory do poruszania się w grach wyścigowych i tym podobne.

UI/UX meta

Czy komponent istnieje w historii gry? Tak. Czy komponent istnieje w przestrzeni gry? Nie. Komponenty meta UI istnieją w historii gry, ale nie znajdują się w przestrzeni gry. Awatar gracza może, ale nie musi, znać meta komponenty. Przykłady: graficzne nakładki na ekran, używane do oznaczania uszkodzeń awatara gracza – zarysowania, pęknięcia, bryzgi krwi czy ograniczenie widoczności i tak dalej.

UIUX niediegetyczny

Czy komponent istnieje w historii gry? Nie. Czy komponent istnieje w przestrzeni gry? Nie. Tego typu komponenty interfejsu użytkownika znajdują się poza fabułą i przestrzenią gry. Żadna z postaci w grze, w tym awatar gracza, nie zdaje sobie sprawy z istnienia elementów. W dynamicznych grach elementy niediegetyczne mogą zakłócać poczucie zanurzenia gracza. Ale w grach wymagających strategii mogą zapewnić bardziej szczegółową ocenę zasobów i działań. Przykłady: mierniki statystyk – pokazują upływ czasu, stan obrażeń i innych zasobów, które są zużywane w czasie gry.

UIUX diegetyczny

Czy komponent istnieje w historii gry? Tak. Czy komponent istnieje w przestrzeni gry? Tak. Takie elementy obejmują zarówno historię, jak i przestrzeń gry. Bohaterowie z gry są świadomi ich istnienia. Mimo że są obecne w historii i przestrzeni gry, słabo zaprojektowane mogą rozpraszać i frustrować graczy. Sprawia to, że komponenty diegetyczne są trudne. Na przykład wskaźnik paliwa umieszczony na desce rozdzielczej samolotu będzie prawdopodobnie zbyt mały, aby gracze mogli go wyraźnie zobaczyć. A jednocześnie z przyczyn estetycznych i gameplay’owych nie może być ogromny. W niektórych grach podręczne elementy diegetyczne (takie, jak notatki) można również oglądać w widoku pełnoekranowym. W tym momencie zmieniają one swoją klasyfikację i stają się niediegetycznymi.

Przykłady: obiekty, które zawierają ważne wskazówki dla bohatera gry, widoczne uszkodzenia na pojazdach wynikające z uzyskanych obrażeń. Wpływają one np. na szybkość i sterowność.

Jak widzicie, typy są różnorodne i mogą różnie wpływać na samą rozgrywkę.

Aspekt estetyczny

Projekty mogą być bardzo ozdobne, jeżeli to pasuje do tematyki gry. Funkcjonalność może być opakowana w iście barokowe kształty. Zwłaszcza gry fantasy często posiadają UI bardzo ilustracyjny. Nie zapominajmy, że w tym szaleństwie musi być metoda. W wielu grach np. MMORPG (massively multiplayer online role-playing game), np. „World of Warcraft”, liczba informacji, które trzeba przyswoić, jest ogromna. Trzeba znaleźć w tym jakieś usystematyzowanie, aby w czasie rozgrywki gracz był w stanie zorientować się w sytuacji i odpowiednio na nią zareagować. Badania pokazują, że użytkownik jest w stanie pogodzić się z pewnymi niedogodnościami w korzystaniu z interfejsu tak długo, jak długo jest on po prostu ładny. Efekt użyteczności estetycznej odnosi się do postrzegania atrakcyjnych produktów jako bardziej użytecznych. Ludzie zwykle wierzą, że rzeczy, które wyglądają lepiej, będą działać lepiej – nawet, jeśli w rzeczywistości tak nie jest. Zostało to po raz pierwszy zbadane w dziedzinie interakcji człowiek-komputer w 1995 roku. Badacze Masaaki Kurosu i Kaori Kashimura z Hitachi Design Center przetestowali 26 wariantów interfejsu bankomatu, prosząc 252 uczestników badania o ocenę każdego projektu pod kątem łatwości użytkowania, a także estetyki. Domyślacie się, że wygrały ładne, acz nie do końca najbardziej zoptymalizowane projekty. Jednak tylko niewielkie błędy są w takim przypadku wybaczane. Dobrym przykładem jest drzewko umiejętności w „Skyrimie”. Jest ono wizualnie piękne i oryginalne – każda umiejętność wygląda jak konstelacja, ale rozeznanie się w mnogości elementów bywa mocno problematyczne. Aby „doklikać” się do mikstur lub zaklęć, gracz musi wstrzymać grę i spędzić znaczną ilość czasu, przerzucając ładne ikonki. Dla ułatwienia i przyspieszenia procesu umożliwiono dodawanie przedmiotów do listy ulubionych, która z czasem także rozrasta się do gargantuicznych rozmiarów, tym samym zmniejszając jej użyteczność.

Innym przykładem jest wspomniana wcześniej gra „World of Warcraft” – wielu użytkowników ma problem z bazowym interfejsem. Tutaj na pomoc przychodzą mody, czyli przeróbki wykonane przez fanów tytułu czy zlecone przez producenta. Gra pozwala dostosować interfejs pod własne wymagania i wielu graczy jest skłonnych poświęcić na to mnóstwo czasu, by móc cieszyć się rozgrywką. Jest to znaczne udogodnienie, dzięki czemu nie ma potrzeby rezygnowania z pokazywania istotnych informacji, i zrzucenie ciężaru designu na graczy, którzy najlepiej będą wiedzieli, z czego faktycznie korzystają podczas rozgrywki.

Są oczywiście gry, które posiadają sztampowe rozwiązania tego „problemu”. Nie musi to wynikać z lenistwa, braku funduszy lub słabego przemyślenia sprawy przez game deweloperów. Nie musi być tak, że po zrobieniu całej gry nagle przypominają sobie o tym, że jeszcze przecież jakoś np. main menu musi zostać dodane (i zrobione po linii najmniejszego oporu). Może to wynikać z tego, że twórcy stawiają na klasyczne, pewne i sprawdzone rozwiązania. Gry są kierowane do określonych grup odbiorczych i bardzo często odwołują się do gier, do których chcą być porównywane. To tak zwana reklama poprzez wywoływanie u odbiorców określonych i dobrych skojarzeń. Jeżeli jakaś gra się dobrze sprzedała, wiele innych gier próbuje podświadomie kojarzyć się z nią. Na szczęście dla tego artykułu, nie wszyscy idą utartą ścieżką. Przybliżę teraz parę gier, które starały się stworzyć coś albo nowego, albo chociaż bardzo interesującego w strefie interfejsu.

Często ciekawe rozwiązania UI znajdują się w horrorach. Jedną z nich jest „Eternal Darkness”. Z powodu traumatycznych przeżyć postać powoli traci punkty „zdrowia psychicznego”. Kiedy nasze zdrowie wystarczająco podupadnie, umysł zaczyna płatać nam figle. Jednym z nich jest to, że zapis stanu gry znika. Co wywołuje nagły atak serca u gracza. Na szczęście to tylko złudzenie.

Innym przykładem jest przebijanie czwartej ściany, czyli pokazywanie, że gra albo jej bohaterowie są samoświadomi. W „Chaos on Deponia” w czasie rozgrywki musimy porozmawiać z enpecem (NPC to postać, w którą nie możemy się wcielić i „żyje” własnym życiem dla dobra rozgrywki) w głośnym barze. Ale z powodu hałasu nie udaje się nam to. I (spoiler alert) musimy wejść do ustawień gry i tam ściszyć muzykę tła, aby być w stanie się porozumieć. Jak dla mnie po prostu genialne.

W innych grach, takich jak „Dead Space”, nie możemy uciec od problemów zabójczego statku kosmicznego do bezpiecznego pause menu. Wszystkie informacje są pokazywane pod postacią hologramu pojawiającego się na ekranie. Przez to są całkowicie wkomponowane w rozgrywkę. Ta immersja nie raz i nie dwa ugryzła paru w tyłek. Umówmy się, w prawdziwym życiu żaden potwór nie będzie cierpliwie czekał, aż przestaniemy postować nasze story na Instagramie, tylko od razu wyrwie rękę z rozpraszającym nas telefonem.

Projekt main menu w „What remains of Edith Finch” powoduje, że jeszcze mocniej się związujemy z bohaterami tej niesamowitej opowieści. Gra opowiada o Edith, która powraca do domu rodzinnego. W nim odkrywamy kawałek po kawałku historię jej wyjątkowej rodziny. Za każdym razem, gdy dowiemy się o jej nowym członku, na kartach dziennika zaprezentowanego w main menu pojawia się jego rysunkowa miniatura. W ten sposób drzewo genealogiczne powoli się zapełnia, a my jeszcze bardziej wczuwamy się w historię tej familii.

Jednym z UI, które mocno zapadają w pamięć, jest to pojawiające się w „Assassin’s Creed II”. Informacje są uporządkowane pod postacią fragmentów unoszącego się w świetlistej i sterylnej przestrzeni zsyntetyzowanego modelu DNA. Im więcej gramy, tym bardziej nasz łańcuch się zapełnia. Kontrast pomiędzy abstrakcyjnym UI a akcją gry, która przeważnie dzieje się w XV-wiecznych Włoszech, jest potężny. Jednak jest to przemyślany i nawiązujący do fabuły zabieg. Lekko falujące kształty w stonowanych kolorach, przetykane mocnym czerwonym akcentem, sprawiają, że chcemy zanurzyć się w grze.

Aspekt „nowości”

Z UI/UX w grach na PC, konsole czy komórki mamy na co dzień więcej do czynienia. Zwłaszcza, jeżeli zaliczamy się w poczet graczy. Dlatego są to bardziej opisane i opatrzone tematy. Od paru lat na rynku gier pojawiają się produkcje VR i AR. Projektując do nich, musimy nie tylko mieć z tyłu głowy wszystkie „stare” zasady, ale i pamiętać o nowych.

Virtual Reality

I znowu musimy sobie odpowiedzieć na pytania o to, czy w grze mamy rozbudowane środowisko, czy też nie; czy mamy rozbudowany interfejs, czy też nie. Jeżeli mamy bogate środowisko gry i zero interfejsu – mamy do czynienia z symulatorami, takimi jak jazda na kolejce górskiej czy chodzenie po linie nad przepaścią. W tym momencie UI sprowadza się do main menu i pause menu. Po przeciwległej stronie nie mamy zbyt dużo gier. W końcu przy zerowym środowisku byłoby o to trudno. Ale za to systemy obsługi gogli zaliczają się do tej kategorii, np. Samsung’s Gear VR. Jedną z różnic przy projektowaniu interfejsu dla VR jest możliwość obrotu. Pełna szerokość projekcji to 360 stopni w poziomie i 180 stopni w pionie. Możemy użyć tego do zdefiniowania rozmiaru piksela płótna: 3600 × 1800. Jest to duży obszar, jednak wypracowano rozwiązanie używające tylko fragmentu tej przestrzeni. Jest to prostokąt, umieszczony dokładnie w środku równokątnego obrazu, i ma rozmiar 1200 × 600 pikseli. I z tym już jest łatwiej pracować. Kolejnym problemem jest stosunkowo niska rozdzielczość ekranu (mniejsza niż połowa rozdzielczości użytego telefonu). Dlatego należy pamiętać, że malutkie literki i ściany tekstu nie są najlepszym pomysłem. Dodatkowo nie możemy za bardzo „szaleć” z ostrymi kolorami i mocnymi efektami przejścia. Pamiętajcie, gracz jest mocno zanurzony w świecie gry. Musimy dbać o to, aby przez nasze działania nie zrobiło mu się niedobrze.

Augmented Reality

Projektowanie UI/UX dla gier AR (rozszerzonej rzeczywistości) rządzi się prawami tej technologi, gdzie łączymy świat rzeczywisty z tym, który generujemy komputerowo. Stosujemy nakładkę na rzeczywisty obraz z generowanymi w czasie rzeczywistym elementami. Jednym z popularniejszych przykładów z popkultury jest zbroja Iron Mana, która wyświetlała mu wszystkie informacje przed jego oczami. W takim rozwiązaniu zależy nam na efekcie immersji, który nie powinien być zaburzany przez projekt interfejsu. Z tego powodu „tradycyjne” rozwiązania nie do końca się w tym przypadku sprawdzają. UI nie jest „na stałe” umiejscowiony w kontrolowanym przez nas otoczeniu, a interakcja użytkowników nie sprowadza się do zwykłego przesuwania palcem po ekranie. Jest parę rozwiązań, jakie pojawiają się w tym konkretnym przypadku. Pierwszy, najprostszy: wszystkie elementy są zablokowane na ekranie i działają tylko dlatego, że użytkownik dobrze ustawił kamerę. Drugi: interfejs odnosi się do otoczenia i odpowiednio reaguje. Trzeci: interfejs użytkownika jest dołączony do konkretnego obiektu lub wyzwalacza w przestrzeni świata rzeczywistego. Mogą być one interaktywne lub tylko wyzwalać się poprzez nasze zeskanowanie odpowiedniego znacznika. Na pewno UI w tym przypadku powinien przewidywać różne oświetlenie czy nieoczekiwane elementy, które mogą zakłócić interakcję, być bardzo prosty czy wykorzystywać całą powierzchnię ekranu. No i przede wszystkim powinien korzystać garściami z możliwości, jakie daje ta technologia. Już niedługo będziemy mogli używać soczewek kontaktowych AR. Stworzenie interfejsu, który dosłownie znajduje się w oku użytkownika, będzie wielkim wyzwaniem.

Jak widzicie, temat UI w grach jest bardzo szeroki – tak, jak różnorodne jest samo medium. Dotknęłam zaledwie powierzchni i mam nadzieję, że po przeczytaniu tego artykułu zechcecie sami dać głębokiego nura w tę fascynującą głębię.