example life bars

Status bar – paski stanu w grach

Jakie są rodzaje pasków stanu?

UI w grach jest pełen pasków i innych elementów spełniających te same funkcje informacyjne co one. W tym artykule skupię się tylko na paskach życia, staminy oraz many. Porozmawiamy o tym jak najlepiej przedstawić ilość życia i staminy oraz jakie są ich ciekawe  zamienniki.

Paski życia – Life bars

Najpopularniejsze oraz najczęściej używane paski stanów w grach to paski życia (life bars). Pokazują graczowi jaki poziom życia posiada, kiedy je traci oraz ile go traci/zyskuje podczas różnych czynności w grze. W starszych grach funkcję pasków pełniły czerwone serduszka. Ilość serduszek odpowiadała ilości uderzeń lub strzałów jakie postać gracza może na siebie przyjąć. Przy kolejnych trafieniach serduszka stawały się w połowie lub całkowicie puste, albo po prostu znikały. Przedstawianie ilości życia gracza w ten sposób jest nadal dobrym rozwiązaniem w niektórych grach 2D. 

Przedstawienie użycia serduszek w grze Donkey Kong
Przykład gry używającej serduszek (Donkey Kong)

Nowe mechaniki i przyspieszenie rozgrywki wymusiło na twórcach gier stworzenie bardziej funkcjonalnego rozwiązania w postaci pasków. Były bardziej widoczne, gracz mógł wyczytać z nich siłę uderzeń przeciwnika i swoich własnych. Takie rozwiązanie stworzyło możliwość na wprowadzenie ciekawszych mechanik walki.

Najpopularniejszymi i najbardziej intuicyjnymi kolorami psaka życia są czerwony i zielony. Rozróżnienie kolorów jest ważne w kontekście przekazywania informacji. Intuicyjnie wiemy, że nasze życie jest w kolorze zielonym. Natomiast przeciwnika w czerwonym. Często także stosuje się zmianę koloru paska życia wraz z ubywającym zdrowiem bohatera – od zieleni (pełni zdrowia) do czerwieni (krytycznego poziomu zdrowia).

Poniżej przedstawiam paski życia oraz many jakie zastosowali twórcy League of Legends. Pasek życia w zielonym kolorze (w opcjach gry można ustawić także pomarańczowy kolor aby odróżniał się bardziej od gry, która jest bardzo zielona) oraz tuż pod nim, cieńszy niebieski pasek many. Podczas używania czarów shieldujących (chroniących) daną postać w pasku życia pojawia się dodatkowa biała część pokazująca jak dużą ochronę daje nam czar. 

Przykładowy life bar z gry League of Legends
Przykładowy life bar z gry League of Legends

Paski many – Mana bars

Drugim najczęściej używanym w grach paskiem informacyjnym jest pasek many. Dotyczy on zdolności rzucania czarów. Przedstawiany jest najczęściej w niebieskim kolorze, po to by odróżniał się od paska życia. Jest zazwyczaj mniejszy niż pasek życia i pełni niejako dodatkową funkcję informacyjną. Twórcy gier korzystają z tego rozwiązania kiedy chcą ograniczyć używanie jakiejś umiejętności przez bohatera. Ograniczenia używania umiejętności pozwala zbalansować lub utrudnić rozgrywkę by gra posiadała odpowiedni poziom trudności.

Przykładowy life bar przeciwnika z gry League of Legends
Przykładowy life bar przeciwnika z gry League of Legends

Paski staminy/wytrzymałości – Stamina bar

Paski staminy są różnie nazywane. Mogą to być endurence, strenght, resistance bars… Wszystkie odpowiadają za szeroko rozumianą wytrzymałość fizyczną postaci, którą postać traci podczas męczących czynności, takich jak bieganie lub walka. Prościej mówiąc jest to informacja jak szybko męczy się nasza postać. Te paski mają kolor zależny od koloru paska życia w grze. Jeżeli pasek życia jest zielony, pasek staminy będzie miał kolor pomarańczowy, żółty lub biały. Jeżeli pasek życia będzie czerwony, pasek staminy będzie mógł mieć nawet kolor zielony (jednak może to być nieco mylące dla gracza). 

Informacje odnośnie kolorów poszczególnych pasków to oczywiście tylko wskazówki wynikające z pewnego konwenansu w projektowaniu gier. Ich końcowy wygląd oraz funkcjonalności będą zależne od gameplayu oraz designu samej gry.

Przykładem gry z dobrze zaprojektowanym znacznikiem życia, a przy okazji wspaniale wyglądającym, jest Hollow Knight. GUI jest biały, utrzymany w pełni w kolorystyce gry a przy tym bardzo widoczny. Estetyczny i czytelny pasek życia jest dodatkowym elementem zachwycającej grafiki. Używane animacje w pasku życia są dodatkową atrakcją rozgrywki.

Screenshot z klimatycznej gry Hollow Knight
Screenshot z klimatycznej gry Hollow Knight

Zamienniki dla pasków stanów

Designerzy tworząc UI do swoich gier często stają na głowie by ich wersja pasków statusu była oryginalna. Przytoczę kilka przykładów z tych bardziej i mniej udanych wersji interfejsu informacyjnego.

Dead Space to gra, którą wielu designerów uważa za wzór innowacyjności w przedstawianiu informacji graczom. Interfejs nie wyciąga gracza z akcji, dzięki czemu gra staje się jeszcze bardziej immersyjna. Jednym przykładem z ciekawych rozwiązań twórców jest umieszczenie na plecach bohatera wskaźnika życia w postaci “kręgosłupa” w jego mechanicznej zbroi. Gdy tylko bohater traci zdrowie ilość neonowo niebieskiego płynu w kręgosłupie zmniejsza się. 

Pasek życia bohatera pokazany na egzoszkielecie (Deadspace)
Pasek życia bohatera pokazany na egzoszkielecie (Deadspace)

Wartym uwagi paskiem stanu jest także szal głównego bohatera gry Journey. Gra posiada bardzo minimalistyczny interfejs. Jedną z informacji odnoszących się do naszego bohatera jest pasek staminy, którego funkcję pełni błyszczący szal, który skraca się i wydłuża w zależności od tego czego doświadcza nasz bohater podczas rozgrywki. Takie rozwiązanie dodaje grze estetyki oraz zwiększa poczucie immersji. Nie musimy odrywać się od pięknego i uroczego świata gry by wiedzieć co się dzieje z naszym bohaterem. 

Screenshot z gry Journey (zwróćcie szczególną uwagę na szal bohatera )
Screenshot z gry Journey (zwróćcie szczególną uwagę na szal bohatera )

Screenshot z gry Journey (zwróćcie szczególną uwagę na szal bohatera )

Co lepsze – paski czy serduszka?

Podczas przygotowań do mojej pierwszej pracy w gamedevie, przypadkiem trafiłam na ciekawy spór dotyczący wad i zalet różnych przedstawień informacji o zdrowiu bohatera.

W skrócie przedstawię tabelę zbierającą wady i zalety poszczególnych rozwiązań:

SerduszkaPasek życia
Łatwość zrozumienia funkcji dużawysoka (jednak silnie zależna od sposobu przedstawienia)
Łatwość w oszacowaniu ilości obrażeń jakie możemy przyjąćduża (subitizing)niska
Poczucie progresułatwiej pokazać progres zwiększając liczbę serduszekpasek życia raczej nie zmienia swojej długości podczas gry, zmienia się tylko jego wartość
Ilość miejsca w UIzajmują dużo miejscasą kompaktowe
Kontrola/balans przyjmowanych obrażeń niskawysoka
Kiedy stosować?wtedy kiedy bohater może otrzymać małą liczbę obrażeń (Donkey Kong).kiedy mamy do czynienia z grą, w której ważny jest długi progres (Diablo). 
Tabela przedstawiająca zestawienie wad i zalet pasków życia oraz serduszek

Ciekawym rozwiązaniem jest połączenie funkcji serduszek z paskami życia. Takie rozwiązanie użyli twórcy Assassin’s Creed 2. Wraz z progresem gry zwiększa się ilość obrażeń jakie możemy przyjmować. Ilustruje to zwiększająca się ilość kwadracików w pasku. Poziom obrażeń zwiększa się ze względu na lepsze uzbrojenie jakie posiadamy (zwiększamy armor). Kiedy zbroja jest uszkodzona kwadraciki zmniejszają się i zmieniają kolor na czerwony. Tego uszkodzenia nie możemy wyleczyć zwykłym medykamentem – musimy udać się do kowala, który naprawi naszą zbroję. To rozwiązanie łączy ze sobą zalety pasków życia oraz serduszek – łatwiej zobaczyć ile dane uderzenie zabiera ci życia, widzisz dokładnie progres gry, masz kontrolę nad poziomem zdrowia. 

Z góry uprzedzam czytelników, że  Assassin’s Creed jest moją ulubioną serią, więc często będę korzystać z odniesień do niej 🙂 

Jak stworzyć własny life bar?

Jeżeli jesteś początkującym designerem polecam ci ten filmik do nauki tworzenia UI w Unity: https://www.youtube.com/watch?v=BLfNP4Sc_iA&t=823s&ab_channel=Brackeys

Tutaj link do stworzenia life bar’u w Unreal Engine: https://www.youtube.com/watch?v=qzcqmVcV9IQ

Infografika do pobrania:

Tutaj znajdują się linki do niektórych z obrazków użytych w artykule:

Donkey Kong: https://www.nintendo.com/en_CA/games/detail/donkey-kong-country-tropical-freeze-switch/

shot z raptorami (LOL): https://mobalytics.gg/blog/absolute-beginners-guide-to-league-of-legends/

shot z Janną (LOL): https://leagueoflegends.fandom.com/wiki/Shield?file=Shield_screenshot.png

Deadspace: https://www.giantbomb.com/images/1300-3249316

Journey: https://zgranarodzina.edu.pl/2014/08/03/koniecznie-zagrajcie-journey-czyli-podroz/

Hollow Knight: https://www.nexusmods.com/hollowknight/mods/6

Skomentuj

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Przewiń do góry