The Power of Video Game HUDs

Osiem miesięcy przed ukończeniem The
Last of Us, Naughty Dog wreszcie zaczęło

prace nad interfejsem graficznym gry.

"Choć kilka części interfejsu
było naszkicowanych"

- wyjaśnia designerka
Alexandria Neonakis -

"nie mieliśmy całościowego
designu HUD-a, a wiele

rzeczy trzeba było jeszcze ustalić".

Moim zdaniem to dowód na to, że interfejs
użytkownika to jedna z najbardziej

niedocenionych części
procesu tworzenia gry.

Uciążliwa robota, którą kończy się
w ostatniej chwili.

Sądzę jednak, że nie wolno tego
nie doceniać, gdyż interfejs

może mieć ogromny wpływ na wygląd,
działanie oraz wrażenia z gry.

W tym odcinku Game Maker's Toolkit
pragnę zbadać, jak interfejs łączy się

z game designem, żeby sprawdzić, jak paski
zdrowia i staminy zmieniają to, jak gramy.

Interfejs obejmuje wiele różnych rzeczy.

Lobby online, ekrany
ekwipunku, drzewka dialogowe,

menu craftingu, ekrany sklepu itd.

W tym filmie chcę skupić się na
konkretnym typie interfejsu:

heads-up display, czyli HUD.

To są te rzeczy, które
widzisz w środku akcji.

Chyba pierwsze pytanie brzmi: po co
robić HUD oraz: jakie korzyści

daje on graczowi?

Aby odpowiedzieć na to pytanie, rozbiję
HUD na dwie różne części.

Nazwę je paskami i podglądami.

Paski są tym, co przeważnie
kojarzymy z HUD-em.

Pobierają one informacje normalnie
niewidoczne i przekazują je

graczowi.

Zdrowie postaci to przeważnie liczba
ukryta w kodzie gry, lecz pasek zdrowia

może ujawnić ją graczowi.

Zachowanie AI ciężej odczytać bez
stożków widzenia, zasięgów ruchu oraz

wskaźników ataku.

Z powodu ograniczeń kamery kluczowe
informacje mogą być schowane

poza ekranem, chyba że

są podświetlone za pomocą
wskaźników bądź minimapy.

Paski pomagają graczowi zrozumieć
obecny lub przyszły stan świata gry,

co pozwala im planować dalsze ruchy.

Oto przypadek uzależniającej
karcianki Slay the Spire.

Na wczesnym etapie produkcji wrogowie
w ogóle nie sygnalizowali swoich zamiarów.

Gracze nie wiedzieli, czy blokować,
czy atakować, więc grali

mniej więcej losowo.

Aby temu zaradzić, producent Mega Crit
dodał te wskaźniki, pokazujące co zamierza

wróg.

Teraz gracz może podejmować mądrzejsze
decyzje o tym, które karty zagrać,

a także obmyślać satysfakcjonujące,
synergiczne strategie.

To są paski.

Natomiast podglądy pokazują ci, co się
stanie po wciśnięciu danego przycisku

lub zrobieniu czegoś.

W najprostszej formie są to wyskakujące
ikonki przycisków dla akcji kontekstowych.

Wciśnij Y, by otworzyć drzwi, wciśnij X,
by wsiąść do auta, wciśnij E, by

wskoczyć do zbiorowego grobu.

Co.

Yyy...

Podgląd może też być łukiem
pokazującym trajektorię lotu

granatu.

Wskaźnikiem pokazującym, kiedy jesteś
w zasięgu punktu zaczepienia.

Celownikiem pokazującym,
w którego celujesz wroga.

Albo tą linią, ukazującą dokładnie, dokąd
pobiegnie twoja jednostka w XCOM.

Podglądy ostrzegają gracza przed
konsekwencjami tego, co mogą

zrobić, zanim to zrobią.

Dzięki temu gracze mogą wyliczać
rzeczy, a nie przyjmować je na wiarę.

Zwróćmy uwagę na Shovel Knight.

W trzeciej kampanii DLC, Specter Knight
może wykonać Dash Slash, dzięki czemu

przecina on niektóre przedmioty
i wyskakuje po przeciwnej stronie.

Początkowo Yacht Club Games oznaczało
tę interakcję prostą zmianą w postawie

postaci, lecz nie ukazywała ona jasno,
kiedy lub gdzie ten kontekstowy

wyczyn się zdarzy. Albo gdzie znajdzie
się Specter Knight po jego wykonaniu.

Koniec końców dodano prosty wskaźnik,
pokazujący się po zbliżeniu do obiektów.

Jasno pokazuje on, że zrobisz Dash
Slash, wciskając określony przycisk.

Od razu widać też, dokąd
polecisz po wciśnięciu go.

Ten znacznik był "naszą największą
zmianą w kierunku wyjaśnienia,

na czym polega Dash
Slash" - mówi developer.

Paski i podglądy to przydatne narzędzia
do przekazywania graczowi informacji

o obecnym stanie gry lub jej stanie
w niedalekiej przyszłości.

Dzięki temu można grać pewnie
i komfortowo, planując konkretne ruchy.

Jednakże gry śledzą setki
niewidocznych zmiennych,

a interfejs może pokazać
graczowi je wszystkie.

Można pokazywać podgląd każdej
czynności przed jej podjęciem.

Dlaczego więc gry nie podają nam
wszystkich tych informacji?

Pokazywanie tych informacji graczowi ma
swoje plusy, lecz ukrywanie niektórych

z nich również.

Patrząc na design UX (czyli szkieletu

interfejsu), można napotkać termin
"obciążenie poznawcze".

Określa on to, że ludzki mózg
może żonglować tylko kilkoma

informacjami w pamięci roboczej.

Im więcej śmieci wyświetla się na ekranie,
tym trudniejsza jest interpretacja gry.

Technologia śledząca ruch gałek ocznych
pokazuje, jak wiele elementów

musimy obserwować, by
pamiętać wszystkie te informacje.

Zatem ograniczanie interfejsu, np. poprzez
wywalanie rzeczy nieistotnych,

powtarzających się lub po prostu
upiększających ekran, może

zmniejszyć obciążenie poznawcze.

Nie chodzi tylko o pozbywanie się rzeczy.

Interfejs może czasem nawet pomóc
z obciążeniem poznawczym.

Gdybyś musiał pamiętać, ile
pocisków wystrzeliłeś, w całej

tej ekscytacji mógłbyś się
pomylić o jeden lub dwa.

W tym przypadku licznik amunicji
jest bardziej przydatny.

Chodzi o to, żeby stworzyć layout
na tyle mądry, żeby informacje

na ekranie były ważne i łatwe
do przetrawienia.

Można to osiągnąć dzięki
hierarchii wizualnej,

czyli mądrym wykorzystaniu
grubości czcionki, koloru, pozycji,

skali i animacji, aby niektóre
elementy wybijały się z tła.

Jeśli wszystko na ekranie krzyczy tak
samo intensywnie, nie wiadomo

na czym się skupić.

A jeśli nic się nie wybija, ważne
informacje mogą pozostać niezauważone.

Weźmy za przykład wskaźnik wkroczenia
na teren prywatny w Hitmanie.

Jest to bardzo przydatny alarm, lecz
w Hitmanie z 2016 możesz go

nawet nie zobaczyć. To zwykły napis
pod minimapą w rogu ekranu.

Poprawiono go w Hitmanie 2, gdzie
napis jest żółty i świeci na całej

mapie, by przykuć twoją uwagę.

W Hitmanie 3 jest jeszcze lepiej, gdyż tej
zmianie stanu towarzyszy dźwięk.

rzeczony dźwięk

Aby tworzyć lepszą hierarchię
wizualną, designer Zach Gage mówi

o trzech poziomach informacji wizualnych
od najważniejszego do najmniej ważnego.

Zach wyjaśnia je na przykładzie
swojej gry: SpellTower.

Pierwszym poziomem będą
główne elementy gry - litery,

dzięki którym tworzysz słowa.

Drugi poziom pokazuje kluczowe
zasady gameplayu, jak kolumny, przez

które możesz zakończyć grę
przedwcześnie oraz niebieskie litery,

które wyczyszczą całą linię.

Trzeci poziom ukazuje mniej ważne
rzeczy, jak małe kontekstowe zasady,

np. taką, że tych literek możesz użyć
wyłącznie w dłuższych słowach.

Developerzy mogą uszeregować informacje
według ważności, a potem opracować je tak,

żeby uwypuklić te najważniejsze.

A ponieważ gry są dynamiczne, informacje
mogą wędrować pomiędzy poziomami,

jeśli trzeba.

Zach wskazuje na Hearthstone jako
"nieustanną falę rzeczy wybijających się

na pierwszym poziomie, a potem
uciekających do drugiego bądź trzeciego".

Można zmniejszyć obciążenie
poznawcze, zadając pytanie:

czy wszystkie elementy interfejsu
muszą być na wierzchu cały czas?

W Castlevanii 1 z jakiegoś powodu
widać było pasek zdrowia bossa

w całym poziomie.

Obecnie pokazuje się on
jedynie po rozpoczęciu walki.

Tę zasadę można zastosować do
niemal każdego elementu interfejsu.

W Ghost of Tsushima widzisz swój pasek
zdrowia tylko, gdy wyciągasz miecz, bo

jest to ważne w walce, a nie
podczas eksploracji wyspy.

HUD jest też wywalany z innego, coraz
popularniejszego, powodu:

prezentacji.

Chęci stworzenia bardziej
filmowych i immersyjnych gier,

nie zaśmiecając ich cudnej

trójwymiarowej grafiki nudnymi
dwuwymiarowymi assetami.

Jednak kto myśli, że interfejs musi być
nudny, nigdy nie grał w Personę 5.

♫ Muzyka z Persony 5 ♫

Nie chodzi o zwykłe usunięcie HUD-a.

Nie powinno się tego robić kosztem
czytelności czy zrozumienia gry.

Chodzi o to, żeby zaprezentować te
informacje w mądry sposób.

Developerzy mogą chować informacje
i pokazywać je, gdy to konieczne.

Jednak innym rozwiązaniem jest
zrobienie diegetycznego HUD-a.

Czyli takiego, który fizycznie
istnieje w świecie gry.

Najsłynniejszym tego
przykładem jest Dead Space.

Aby zwiększyć immersję tego survival
horroru, Visceral Games usunęło

HUD-a i zamieściło te same
informacje wewnątrz świata gry.

Paski zdrowia i hipostazy Isaaca
są wbudowane w jego strój.

Licznik amunicji wyświetla
się na samej broni.

Nawet ekwipunek jest wystylizowany na
holograficzne projekcje w świecie.

Widać tego przykłady w innych grach.
W Metroid Prime HUD działa

tak samo jak w innych
strzelankach, lecz umiejscawiając

go na wizjerze Samus i dodając

realistyczne wstrząsy, zwiększa się
poczucie obecności i wczucia się

w postać.

Jednakże nie chodzi tylko
o styl i prezentację.

Diegetyczny HUD może mieć ciekawe
konsekwencje dla gameplayu.

W Alien: Isolation możesz trzymać
przed sobą ustrojstwo śledzące ruch.

Jest ono podobne do minimapy w np. Call
of Duty, ale ponieważ jest to fizyczne

narzędzie, musisz wybierać, czy chcesz
mieć dostęp do tych informacji, czy

trzymać broń.

Tylko jedno z dwojga.

Diegetyczny HUD nie musi
być tylko wyrenderowaniem

pasków zdrowia i liczników
amunicji w mądry sposób.

Rozwijając ten pomysł, możemy wykorzystać
elementy, o których przeważnie nie

pomyślelibyśmy w kontekście interfejsu
wyświetlającego informacje.

Nie potrzeba ci paska zdrowia w Wreckfest,
żeby zobaczyć stopień zezłomowania

twojego wozu - widać to na samym aucie.

Czy potrzebujesz wskaźnika,
żeby widzieć, że Linkowi jest

za gorąco lub za zimno
w Breath of the Wild?

Możemy dojść tym tropem do Super Mario
Bros., gdzie zdrowie Mario przedstawia

rozmiar jego sprite'a.

HUD-a można ukrywać z jeszcze innego
powodu: żeby celowo gra była mniej

czytelna.

Pierwsi ludzcy przeciwnicy w The Last of
Us Part II będą wykrzykiwać, co zamierzają

zrobić, co da ci jakieś pojęcie, co oni
planują, dzięki czemu możesz

się do tego dostosować.

Później jednak spotykasz innych wrogów,
porozumiewających się wyłącznie za pomocą

gwizdnięć.

gwizdanie
uderzenie strzały, krzyk Ellie

Gwizdnięcia te celowo zaprojektowano tak,
aby gracz nie mógł ich rozszyfrować.

Dla mnie ci przeciwnicy byli o wiele
bardziej przerażający i trudniejsi,

w dużej mierze z powodu
braku tych informacji.

Idąc dalej, ilość informacji, które
posiadamy, kompletnie zmienia nasze

zachowanie.

Producenci Reigns doszli do
tego wniosku podczas tworzenia

swojej inspirowanej Tinderem gry.

Początkowo gra pokazywała dokładne
liczby we wszystkich statystykach

oraz wpływ twoich wyborów na nie.

Jednak podczas testowania gracze skupiali
się głównie na optymalizowaniu tych liczb

i ignorowali większość tekstu.

Po zamianie liczb na paski, gracze
powrócili do czytania historii i działali

raczej na poziomie
emocjonalnym, nie analitycznym.

Moim zdaniem pokazuje to, że developerzy
nie muszą pozbywać się całego HUD-a,

lecz powinni co najmniej
rozważyć jego precyzję.

Chcesz, żeby zdrowie reprezentowała
liczba, pasek, czy czerwona plama

na środku ekranu?

To zależy od tego, co gracz zrobi z tymi
informacjami - czy ma on liczyć

dokładne różnice, czy po prostu
schować się za osłoną?

Co do elementów podglądowych
HUD-a... Im dalej spoglądamy

w przyszłość oraz im precyzyjniejsza jest
informacja, tym konkretniejsze

plany możemy poczynić.

Tak jak w Mark of the Ninja, które
pokazuje ci, co dokładnie

się stanie po rzuceniu
noża w tę lampę.

Ograniczając "przyszłościowość"
informacji lub zmniejszając jej precyzję,

zmuszamy gracza do nauki
działania mechanik gry.

Weźmy pod uwagę Peggle.

Domyślnie wskaźnik pokazuje,
dokąd poleci kulka... Aż w coś trafi.

Potem to ty sam musisz policzyć
trajektorię rykoszetu.

To część nauki.

Można uzyskać dalszy
podgląd, lecz jest to power-up,

co pokazuje tylko, jak wiele
może znaczyć ta informacja.

A wiedzieliście, że istnieje patent
na gameplay z Peggle?

Bo to chyba temat na osobny odcinek.

Ponieważ interfejs jest tak potężny,
może być on związany z poziomem

trudności oraz trybami pomocniczymi.

Gry wyścigowe często pokazują optymalną
linię pomocniczą na "łatwym", lecz na

"trudnym" musisz ją sobie wyobrazić.

Można wykorzystać interfejs, by zmienić
poziom trudności w menu lub

w trakcie przygody, tak jak
każdy inny element gameplayu.

Moim zdaniem pokazuje to, że interfejs
może mieć ogromny wpływ na grę.

Wykorzystany efektywnie, interfejs może
wspierać cele game designu.

A może da się też w drugą stronę?

Czy interfejs może wpływać na game design?

Jako ostatni przykład, spójrzmy na
taktyczną perełkę Into the Breach.

Gra pokazuje ci, co zamierzają przeciwnicy
na małej, klaustrofobicznej siatce.

Wynikiem jest pajęczyna strzałek oraz
ikon, dających ci kompletny obraz

planów armii wroga.

Jednakże developer Subset Games
odkrył, że aby ten system mógł

działać, pewni wrogowie

i bronie musiały być usunięte, gdyż
zbyt trudno było ukazać ich działanie.

Rzeczy typu broń z długim
łańcuchem przyczyn i skutków lub

wrogie ataki wpływające na duży teren.

Co-designer Justin Ma mówi: "co
do zasady za każdym razem

poświęcamy fajne pomysły
na rzecz przejrzystości".

Stało się to nie tylko w tej grze.

W Hearthstone możesz mieć tylko
7 kart w grze naraz dlatego,

że tyle się ich mieści na ekranie.

Niektóre umiejętności bohaterów
zmieniono, gdyż były zbyt złożone,

by ogarnął je interfejs.

Jeśli nie da się sprawić, żeby coś było
jasne dla gracza, może nie jest to dobra

mechanika i powinna zostać uproszczona.

Interfejs nie służy do naprawiania
mechanik gry i dlatego

ważne jest, by projektować

HUD-a razem z wszystkim innym, a nie
dorzucać go na samym końcu.

Tak jak wszystko inne w tworzeniu gry,
interfejsu nie można zrobić

w dowolny sposób albo dlatego, że
"tak jest w innych grach".

Tworząc go, trzeba mieć jasny
zamysł oraz intencje.

Dajcie znać w komentarzach, które gry
waszym zdaniem mają fajny interfejs.

Czas na polecankę gry indie!

Oto Room to Grow, gra logiczna o kaktusie
rosnącym po to, żeby przesuwać inne

roślinki do celu.

Szybko się komplikuje, gdy
popychasz ścianę, aby przesunąć

swoje kolczaste cielsko. A do tego
jest jeszcze więcej mechanik.

To przemyślana, urocza gierka
ze sprytnymi wyzwaniami na poziomie

metagry.

Jest dostępna na Steam.