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ł.