dev10

Dzisiejszy odcinek powinien nosić tytuł “jak UX i UI sp…dolono”.

Pominę to, że UX i UI są traktowane czasem razem, czasem osobno, czasem ktoś palnie, że to nie ma różnicy czy UX czy UI. Jest masa klechd i legend uprawianych przez co bardziej wyszczekanych ludzi. Bo UX. Bo UI. Tymczasem mówienie o tzw. user experience to ścieżka pt. psychologia. Nasze zachowania, behavioryzm. Czyli nie tylko coś co mamy w poświadomości, ale też czego konsekwentnie się uczymy. Uczymy się również gry. Jej świata, mechaniki jej kontroli.

Jedna z pierwszych reguł upraszczania UXa dla potrzeb UI i lokalizacji to IKONY. Symbole graficzne, które odwołując się do naszej podświadomości dają szybkie skojarzenia – czasem szybsze niż czytanie liter, a na pewno bardzo urozmaicają interfejs graficzny. Oczywiście są tacy, co się bronią przed ikonami i symbolami, natomiast to jest też kwestia zrozumienia prostej rzeczy w UI (już pomijając bzdurność i uciążliwość czytania opisów, skrótów klawiszowych i generalnego zaśmiecania HUDa i jego immersji tekstami) – nieprzewidywalność rozkładania się tekstów przy okazji lokalizacji. Czy to możliwe, że trafimy dzisiaj na Senior UI, który będzie się głupio upierał przy takich durnych tekstowych rozwiązaniach zamiast zrobić chociaż część interfejsu na ikonach? Wait… nie miałem opowiadać o starych projektach 🙂

Ikonki ikonkami – czasem trzeba pomóc graczowi i wyświetlić mu jakiś hint. Wtedy przyda się nam trochę ikonek reprezentujących kontrolery (klawiatura mysz gamepad).

To taki temat z wczoraj, bo stwierdziłem, że do customowego bindingu (przypisania klawiszy etc. do listy akcji w grze) lepiej i bardziej uniwersalnie (czyli znowu bez sufitu, w sumie jak pada hasło “uniwersalnie” to już można mówić, że to jest “roofless”, bez sufitu i od razu to nie jest TANIO) – właśnie do takiego “a ustaw sobie jak chcesz, byle byś nie narzekał” gracza to fajniej jest to zrobić fontem w UI a nie trylionem obrazków .png jako brushami. Dlaczego? Font waży mniej, refka do litery, nawet jeżeli to jest czterobajtowe oznaczenie kodowania w foncie to jest nic w stosunku do trzymania refki ścieżki do pliku 🙂 Plus – będzie ostre, co prawda jednokolorowe, ale kolorować wyświetlany font mogę bez problemów 🙂

Dlaczego takie wielkie halo wokół symboli? Bo Unreal Engine nie pozwala na używanie wektorowych grafik (jak np. pliki .svg). Są jakieś atrapy rozwiązań, ale są atrapami, bo konwertują te pliki .svg czy inne wektorowe do plików .png czyli… znowu wracamy do wersji pt. robimy interfejs na 4K w przeźroczystych bitmapach i pchamy to w HUDa i UI.

Własny font z symbolami waży mało – również potem w pamięci RAM, jednak patent z fontem ma swoje ograniczenia. Oczywiście ma sens, gdy chcemy mieć to skalowane wektorowo, czytelne i ostre jak brzytwa. W Hauntedzie właśnie tak zrobiliśmy z ikonami radial menu narzędzi (aczkolwiek w momencie, gdy to piszę na Steamowej stronie wiszą stare bardzo nieaktualne UI’e). Patent z fontem i symbolami jest stary jak moje doświadczenia z DTP, dokładnie tego samego patentu używałem do opakowań dla Masterfoods ponad 20 lat temu. Jeden font na symbole, zero samowolki z grzebaniem w wektorze, opakowania ode mnie latały po całej Europie i generalnie każdy bił pokłony nad patentem – bo był prosty i działał.

Czemu rozwiązanie z fontem nie jest tak popularne, albo o nim nie słyszeliście (jeżeli o nim nie słyszeliście)? Bo to dodatkowa robota dla kogoś od UI. Bo trzeba rozumieć kerningi, baseline i inne rzeczy. Bo nawet Senior UI potrafi wypluć nieużywalny font. Dochodzi do tego trochę upierdliwe aktualizowanie zmian i generalnie – dla ludzi od UI to jest taki temat trochę poza ich normalnymi, standardowymi pracami, więc niechęć i opór level hard. Plus – nastawcie się, że sami to będziecie poprawiać.

Gdzieś tam w Google na bardzo szybko znalazłem to:

https://opengameart.org/content/controller-input-icons

Czterech liter mi nie urwało, ale – do podstawowego mocku-upu na szybko by wystarczyło. Wystarczy skleić z tego font. Ale na tym samym serwerze można znaleźć nowa wersję ikon od Xelu, którego już miałem we wcześniejszej wersji:

https://opengameart.org/content/free-keyboard-and-controllers-prompts-pack

Więcej i trochę dla mnie ładniej to wyglądało. I już miałem klikać nowy font z tego jak wpadło mi coś do głowy, a potem znalazłem to w Google – zanim się będziecie doktoryzować z robienia własnego fontu, to musicie wiedzieć, że ktoś już to zrobił i podzielił się (chwała mu) za darmo:

https://esquiredevmark.itch.io/generic-gamepad-font

Czyli czasem da się zaoszczędzić trochę czasu pomimo, że było hasło “uniwersalne” rozwiązanie.