Obsługa gamepada w przeglądarce

Ostatnio podpiąłem do mojego kompa pad przez USB. Do czego ta zabawka służy, niby każdy wie. Mimo to zamiast włączyć grę, zacząłem się zastanawiać, jak jeszcze można takie urządzenie wykorzystać. Rezultaty mnie zaskoczyły, dlatego chcę się nimi podzielić.

Szczegóły techniczne

// Jeśli nie piszesz aplikacji internetowych, pomiń ten fragment. Poniżej znajdziesz kilka ciekawszych rzeczy (obiecuję).

Specyfikacja W3C pozostaje szkicem, choć pierwsze wdrożenie prototypu API w publicznej przeglądarce da się określić na rok 2012. W telegraficznym skrócie, mamy do czynienia z dwoma detektorami zdarzeń i prostym interfejsem (obiektem) JavaScript.

Informacje o podłączonych urządzeniach pobrać można dzięki navigator.getGamepads(). Dostajemy obiekt w którym pod kolejnymi indeksami kryją się interfejsy padów.
Przykład odczytanych danych:

{
index: 0, // Identyfikator/slot
id: "EX10 GAMEPAD (Vendor: 0f0d Product: 0009)",
connected: true,
mapping: "",
axes: [
-0.7176470756530762,
0.5372549295425415,
0.003921627998352051,
// itd
],
buttons: [
{
pressed: false,
value: 0
},
{
pressed: true,
value: 1
},
// itd
],
timestamp: 51682
};

Wszystkie atrybuty są tylko do odczytu.

Póki co, monitorowane zdarzenia dostępne przez API to:
gamepadconnected i gamepaddisconnected.
window.addEventListener("gamepadconnected", function(event) {
console.log(event.gamepad);
});

Omawiam tu z grubsza tylko niezbędne minimum, dlatego do dalszej nauki polecam szczegółowy poradnik na developer.mozilla.org.

Kalibracja i mapowanie

Niestety nic nie jest tak proste, na jakie wygląda na pierwszy rzut oka. Oryginalne, nowe pady połączone przez Bluetooth nie powinny sprawiać problemu. Inne modele potrafią zaskoczyć różnymi konfiguracjami: od innej kolejności przycisków i osi, po d-pad zgłaszający się jako oś, zamiast zestawu przycisków. Twórcy specyfikacji też przewidzieli taką ewentualność. Dodanie ustawień sterowania w aplikacji jest co najmniej zalecane, nawet pomimo standaryzacji.

Precyzja gałek

Osie analogowe zwracają wartości od -1 do 1. Wartość dla położenia środkowego jest bliska, ale nie zawsze równa 0. Kontroler, którego aktualnie używam działa poprawnie przy progu ±0.01. Nie tylko z tego powodu w grach zwykle pojawia się opcja odcięcia (threshold / dead zone). Stick, który znajduje się na sprężynie, przy puszczeniu od krawędzi może odbić w drugą stronę.

Czas przetestować sprzęt

Mały proof-of-concept.

See the Pen Gamepad test by Tymoteusz Czech (@Tymek) on CodePen.

Do wizualizacji użyłem przekształcenia z kwadratu na koło:

Inne strony do sprawdzania pada

HTML5 Gamepad Tester – numeryczne wartości odczytywane z urządzania
Gamepad Viewer – wizualizacja urządzenia na ekranie (może wymagać dodatkowej konfiguracji)

Dodatkowy eksperyment

Na czas redagowania wpisu nie używam myszki, ani touchpada. Kursorem poruszam za pomocą gałek (stick’ów). Nie jest to może najprzyjemniejsze rozwiązanie, ale przy dobrej konfiguracji okazuje się co najmniej wykonalne.

Ustawienie tego w sensowny sposób zajęło chwilę. Przetestowałem kilka programów umożliwiających mapowanie kontrolera zanim trafiłem na antimicro.

Przemyślenia dotyczące interakcji

Interfejs użytkownika nie kończy się na tym, co zostaje wyświetlone na ekranie. Wikipedia bardzo trafnie definiuje UI, jako „przestrzeń, w której następuje interakcja człowieka z maszyną”. Do tej przestrzeni zaliczają się wszystkie interaktywne komponenty maszyny.

Wiele aplikacji internetowych mogło by wiele zyskać na wdrożeniu obsługi gamepada. Widać to było przy okazji sporej ilości eksperymentalnych stron korzystających z telefonu jako kontrolera. Choć klawiatura ma więcej przycisków, a myszka oferuje większą precyzję #pcmasterrace, trzymanie pada w rękach zawsze będzie o wiele wygodniejsze.

 

Materiał sponsorowany

przez wujka, który mi pada pożyczył.


Intencjonalne projektowanie

Wiele osób formując założenia projektu dodaje „innowacyjność”. Niestety kiedy przychodzi do projektowania strony internetowej, często są to równie piękne, co puste słowa. Stan faktyczny to neutralność i naśladowanie. U góry belka z logotypem po lewej i nawigacją po prawej. Poniżej wklej slider zawierający przypadkowe zdjęcia. Później dodaj blok tekstu, ewentualnie tryptyk z kolumn. Stopka, copyright, autor. O nas, galeria, kontakt z formularzem. Wszystko jak wyplute z automatycznego generatora. Bezmyślne kopiowanie zasłania prawdziwy potencjał.

Weryfikacja nawyków

Wiele błędów bierze się z przyzwyczajeń, które choć kiedyś miały swoje miejsce, z czasem przestają być użyteczne. Ciągle pojawiają się nowe możliwości, które zmuszają nas do zastanowienia nad utrwalonymi schematami.

Grafika na skróty

Jednym z najpoważniejszych błędów jest użycie „stockowych” fotografii. Nie mam nic przeciwko kupowaniu gotowych zdjęć celem uatrakcyjnienia strony, ale mało jest rzeczy które tak skutecznie rujnują wiarygodność marki jak obrazki, które już gdzieś się widziało.

Płaskie myślenie

Strona internetowa, to nie obrazek. Składa się na nią nie tylko tekst i oprawa graficzna, ale także sposób funkcjonowania. Wszystko od struktury nawigacji, przez ruch (animacje lub ich brak), po użyty język ma znaczenie.

Autoodtwarzanie

Dźwięk jest atrakcyjnym dodatkiem i kiedy to uzasadnione, powinno się go używać częściej. Dźwięk ma też bardzo konkretny wpływ na działanie użytkownika: odtwarzany bez ostrzeżenia prawdopodobnie spowoduje, że w panice opuści on stronę. Pamiętaj, że nie masz kontroli nad poziomem głośności, a stopniowe zwiększanie poziomu dźwięku może być jeszcze bardziej frustrujące. Żeby lepiej zrozumieć jak może poczuć się gość twojego serwisu, polecam poszukać John Cena Prank.

Trwa ładowan…

Nie znam praktycznego przypadku, w którym poprzedzenie strony głównej indykatorem wczytywania byłoby uzasadnione. Nawet przy dużej ilości interaktywnej treści można wyświetlić ten element na części ekranu i pokazać inne informacje (np. przy wczytywaniu modelu 3D).  Jeśli strona używa dźwięku i trzeba przed tym ostrzec użytkownika, o wiele lepszą opcją jest krótka animacja wyświetlająca przycisk odtwarzania. Ktoś ma inne sugestie? Czekam na komentarze i polecam wcześniejszy wpis o optymalizacji wczytywania stron internetowych.

Bez przesady

Schematy nie są złe. Pomagają nam szybciej i wygodniej dotrzeć do informacji. Zasady łam świadomie, bo inaczej wszystko co nieszablonowe stanie się bezużyteczne. Zamiast eksperymentować i szukać przełomowych technologii, lepiej skupić się na zasadności użycia typowych elementów.

Celowość

Mam nadzieję, że wyczerpująco opisałem problem. To jednak nie wszystko.

„Jeśli nie jesteś częścią rozwiązania, jesteś częścią problemu.”

Co w takim razie zmienić? W jaki sposób projektować intencjonalne, czyli innymi słowy przemyślane, celowe, zasadne strony i aplikacje? Wystarczy zacząć od podpowiedzi na kilka pytań.

  • Kim jest potencjalny użytkownik? – np. Co wie (o produkcie/firmie)?
  • Jakich informacji lub wrażeń szuka? – np. Numer telefonu? Data wydarzenia? Nowa muzyka?
  • Dlaczego (w jakim celu)? – np. Porównanie z konkurencją? Umówienie spotkania?
  • Gdzie (w którym miejscu) i w jaki sposób? – np. Na jakie miejsce zwróci uwagę? Stopka? Formularz? Z jakiego urządzenia korzysta?

Gęstość informacji

Jeśli potraktujemy przeczytanie, lub poświęcenie uwagi danemu elementowi jako wybór, warto zastanowić się ile danych strona internetowa lub aplikacja przekazuje użytkownikowi w konkretnym momencie. Kluczem jest efektywne wykorzystanie przestrzeni. W przypadku wersji mobilnej najważniejsza będzie nawigacja, za to przy dużej rozdzielczości monitorach nie należy zostawiać za dużo pustej przestrzeni, ale o tym innym razem.

Obowiązkowa lektura

Opracowując dzisiejszy tekst przygotowałem listę pojęć, na których temat warto uzupełnić swoją wiedzę. Część z nich już pewno znasz. Gwarantuję, że nawet podstawowe poznanie wypisanych terminów może radykalnie zmienić podejście do pracy.

  • Projektowanie kierowane wzrostem (Growth Driven Design)
  • Metodologia S.M.A.R.T.
  • Prawo Hicka (Hick’s law)
  • Zarządzanie wymaganiami
  • Metoda MoSCoW
  • Zasada Pareta