Dev Blog - UI

Piątek, Kwiecień 2, 2021

Dev Blog - User Interface

Od samego początku pracy nad Ravendawn kierowaliśmy się wizją wprowadzenia świeżości i innowacji w świat gier z rzutem izometrycznym. Naszym zdaniem jest to gatunek, w którym na ogół brakuje innowacji od lat. Projektując interfejs użytkownika (UI) kierowaliśmy się właśnie tą filozofią. Chcieliśmy stworzyć coś unikatowego i współczesnego, zamiast opierać się na klasycznych i przestarzałych rozwiązaniach. W Ravendawn cały ekran jest oddany w ręce gracza. Zrezygnowaliśmy z nieporęcznego UI złożonego z elementów rozsianych po całym ekranie, które jedynie zagracają ekran i psują imersję z gry.  

Projektując nasze UI dokładnie przyglądaliśmy się grą takim jak New World i Ghost of Tsushima, to właśnie one dostarczały wartościowych inspiracji przy pracy nad naszym UI. Spędziliśmy trochę czasu analizując i studiując te dwa współczesne przykłady. Chcieliśmy zrozumieć, dlaczego są zaprojektowane właśnie w taki sposób jaki są, a co najważniejsze, w jaki sposób możemy wykorzystać fundamenty stojące za tymi systemami w pracy nad grą taką jak Ravendawn.

Naszym głównym zmartwieniem było to jak moglibyśmy użyć takiego typu UI w izometrycznej grze PVP bez narażania rozgrywki, gdzie gracze mogą atakować innych graczy w dowolnym momencie w niebezpiecznych lokacjach. Doprowadziło nas to do zaprojektowania UI z 40% przejrzystością, dzięki temu gracz na bieżąco może śledzić to, co dzieje się w grze podczas korzystania z intefejsu. Dodatkowo, zamiast wypełniać przestrzeń ekranu elementami UI, zdecydowaliśmy się zostawić większość paneli w prostym, przejrzystym stanie, tak aby gracz mógł zobaczyć jak najwięcej podczas korzystania z interjesu, gdy jest to konieczne.

Poniżej przykład jednego z częściej używanych UI, Drzewka Umiejętności i interfesju Archetypów.  

Menu górne, nazywane również paskiem nawigacyjnym, podzielone jest na kilka podstawowych sekcji: Postać, Profesje, Pakty Handlowe, Ravencards, Mapę świata, Społeczności, Różne oraz Ustawienia. Każda kategoria posiada własne podmenu z treściami związanymi z wybraną sekcją.

Poniżej prezentujemy interfejs ekwipunku. Podczas gdy w innych grach z tego gatunku, UI ekwipunku jest często używane i warto mieć je na ekranie przez cały czas, w Ravendawn to nie będzie konieczne.

 

Podczas gdy wiele porównywalnych gier korzysta ze spritów o rozdzielczości 16x16 > 32x32, my zamiast tego używamy w pełni ilustrowanych obrazów o rozdzielczości 64x64. Dzięki temu możemy pozwolić sobie na znacznie lepszą jakość obrazów, a także dodać więcej szczegółów i głębi co czyni każdy przedmiot bardziej unikatowym.

Tak wyglądają przedmioty w ekwipunku:

 

A tak wygląda UI Profesji:

Okrąg wokół ikony umiejętności wypełnia się wraz z postępem poziomu każdej profesji.

Chcielibyśmy zaznaczyć, że zaprezentowany Wam interfejs i zawarte w nim rozwiązania cały czas są w fazie testów i wymagają dalszego rozwoju i ulepszeń. Prawdopodobnie nie jest to jego finalna wersja i pewne rzeczy ulegną zmianie np. rozmieszczenie ikon, przestrzeń pomiędzy tekstami itd. Nie mogliśmy się jednak doczekać, aby podzielić się z Wami nowoczesnym designem, nad którym pracujemy!