Wie Sie die Gamepad-API in Web-Spielen verwenden.

Die Gamepad-API ist eine relativ neue Technologie, die es uns ermöglicht, über JavaScript auf den Zustand der verbundenen Gamepads zuzugreifen, was eine großartige Nachricht für HTML5-Gamedeveloper ist.

Viele Spielegenres, wie z.B. Renn- und Fighting-Spiele, verlassen sich für ein optimales Spieleerlebnis auf ein Gamepad und nicht auf Tastatur und Maus. Damit können diese Spiele nun auch im Web mit den gleichen Gamepads gespielt werden, die auch für Konsolen verwendet werden.

Keyboard Fallback.

Es gibt auch Anwendungen wie Joypad (iOS) und Ultimate Gamepad (Android), mit denen Sie ein Smartphone über eine „Receiver“-App mit dem Computer verbinden können. Receiver-Apps simulieren die Tastatureingabe im Gegensatz zu seinem Gamepad.

Welche Gamepads funktionieren?

Jedes Gamepad, das vom Betriebssystem entweder als Xinput- oder DirectInput-Gerät verstanden wird, funktioniert mit der Gamepad-API. Es ist möglich, andere Konsolen-Controller zum Laufen zu bringen, aber das würde entweder Hardwarekonverter oder zusätzliche Software erfordern.

Browser-Support.

Da diese API relativ neu und experimentiell ist, ist die Browserunterstützung begrenzt und die W3C-Dokumentation ist noch ein funktionierender Entwurf.

Dennoch liegt die Browser-Implementierung bei über 50%, was alle gängigen Browser einschließt. Die API hält sogar Einzug in die mobile Welt, wobei Chrome für Android der erste mobile Browser ist, der sie unterstützt.

Im Wii U-Browser von Nintendo ist das Wii U-Gamepad zugänglich. Leider hat Nintendo die Gamepad-API noch nicht implementiert, stattdessen hat das Gerät eine eigene Property im Fenster (window.wiiu.gamepad) und speichert seine Button-States als hexadezimale Werte, mit spezifischen Flags für jeden Button.

Feature-Kennung.

Mit diesem Ausschnitt können wir überprüfen, ob ein Browser die Gamepad-API unterstützt:

Lesen der Gamepad-States.

Die Gamepad-States sind zugänglich mit:

Derzeit wird in Chrome und Opera eine Gamepad-Liste mit bis zu vier Gamepad-Objekten ausgegeben.

Firefox hingegen gibt ein JavaScript-Array von Gamepads zurück, das theoretisch unendlich ist.

Polieren.

Wir können die Gamepad-States mit requestAnimationFrame abfragen. Je nachdem, wie viele Gamepads Sie unterstützen möchten, erhöht sich die Komplexität der Nutzung der Gamepad-States. Wenn Sie nur ein Gamepad unterstützen möchten, können Sie wie gewohnt nach dem ersten Gamepad in der Sammlung suchen:

Das bedeutet, dass es das erste angeschlossene Gamepad oder, wenn alle Gamepads bereits angeschlossen sind, das erste Gamepad mit gedrückter Taste erfasst.

Jedes Gamepad-Objekt sucht so etwas wie das:

Dies ist das Gamepad-Objekt eines Microsoft Xbox 360 Controllers für Windows.

Hinweis: Die ID ist nicht in allen Browsern einheitlich. Zum Beispiel ist es der 45e-28e-Wireless Controller in Mozilla Firefox, der sich von dem unterscheidet, was Google Chrome oben sieht.

Info

Axes.

Bei Gamepads, die über analoge Joysticks verfügen, enthält das Achsenarray Zahlen, die zwischen einem Minimum und einem Maximum für jede Achse liegen, normalerweise -1 und 1.

Anlegen einer Dead Zone.

Da der Analogstick zwischen -1 und 1 variiert, wenn der Stick nicht berührt wird und sich in der Mitte befindet, sollte der Wert theoretisch 0 sein, was jedoch nicht immer nei billigen Controllern oder Gamepads der Fall ist, die abgenutzt oder beschädigt sind oder „wackelige“ Daumenstäbe haben.

Eine „Dead Zone“ ist ein Schwellenwert, der verhindert, dass Werte unter einem bestimmten Betrag zur Steuerung des Spiels verwendet werden.

Die folgende Funktion wendet eine „Dead Zone“ an. Der Schwellenwert wird auch von jedem Wert oberhalb des Schwellenwertes abgezogen, so dass der Wert an dem Schwellenwert 0 und nicht beispielsweise plötzlich 0,25 beträgt.

Es kann folgendermaßen verwendet werden:

Dabei werden Werte zwischen -0,25 und +0,25 ignoriert und der Dezimalprozentsatz unter Berücksichtigung des vorgegebenen Schwellenwerts berechnet. Wenn Sie dies sowohl auf die x- als auch auf die y-Achse anwenden würden, würde dies zu einer Dead Zone führen.

Hinweis: Achsen sind nicht immer analog. Einige Controller schalten zwischen den Werten um. Beispielsweise wechseln einige D-Pads für jede Achse zwischen einem Maximal-, Minimal- und Mittelwert, wie beispielsweise -1, 0 und 1.

Buttons.

Für das Tastenfeld ist fü jedes Element ein GamepadButton-Objekt vorgesehen. In den meisten Fällen korreliert die Value-Eigenschaft direkt mit der gepressten Eigenschaft. Beispielsweise wechselt der Wert zwischen 0 und 1, weil gedrückt zwischen falsch und wahr gewechselt wird.

Losgelassene Buttons.

Gedrückte Buttons.

Analoge Buttons.

Die meisten Gamepads der siebten Generation (wie der Xbox 360 Controller) haben analoge Tasten, wie z.B. den linken und rechten Auslöser. In diesem Fall liegt der Wert im Bereich von 0 und 1. Obwohl gedrückt funktioniert, wird die Verwendung für nicht-digitale Tasten nicht empfohlen, sondern es wird ein Schwellenwert für den Wert verwendet, der so einfach sein kann:

Hinweis: Da die Taste ebenfalls analog ist, muss auch hier möglicherweise eine Dead Zone angelegt werden.

Unterschiedliche Layouts.

Jede Steuerung ist unterschiedlich, was bedeutet, dass die Länge der Achsen und Tasten variiert; dies gilt auch für verschiedene Connection-Konverter und/oder Treiber. Gemäß der Spezifikation sollten Browser die Achsen und Tasten so nah wie möglich an das vorgeschlagene „Standard-Gamepad“ anpassen. Nicht alle Gamepads verfügen über alle diese Buttons; fehlende Buttons erscheinen im Objekt in einem nicht komprimierten oder im neutralen Zustand. Das Hinzufügen eines „Control Settings“-Bereichs zu ihrem Spiel wäre eine gute Idee, wenn Sie vorhaben, seltsame und wunderbare Gamepads zu unterstützen, welche Spielern die Freiheit geben, ihr Gamepad nach ihren Wünschen zu konfigurieren und den Benutzern mit verschiedenen Gamepads die Möglichkeit geben, ihre Kontrollen manuell ihrem Spiel zuzuordnen.

Microsoft Xbox 360 Controller für Windows.

Der Treiber, den wir für die Verbindung mit einem Mac verwenden, ist auf GitHub verfügbar.

NES Controller.

Hier ist das Layout eines originalen NES-Controllers mit einem 15-Pin-zu-USB-Konverter (das Layout kann vom Hersteller abweichen). Dieses spezielle Gerät verwendet Achsen für die Richtungseingabe und nicht Tasten.

SAITEK SP550 USB Stick und Pad.

Diese verfügt über 12 Tasten (14 auf dem Gerät, wobei die beiden Pad-Trigger die gleiche Funktionalität wie der Auslöser und die Daumentaste des Joysticks haben) und drei Achsen (die dritte Achse ist der Gasregler neben dem Joystick). Der Joystickteil der Steuerung kann abgenommen werden, so dass nur das Pad übrig bleibt. Dies führt dazu, dass der Controller getrennt und als anderer Controller wieder verbunden wird, was bedeutet, dass sich auch die Details über das zurückgegebene Gamepad-Objekt ändern: Die ID ändert sich von SP550 Stick & Pad Combo (Hersteller: 06a3 Produkt: 100a) zu SP550 Pad (Hersteller: 06a3 Produkt: 100b) und auch das Layout wird anders sein. Im Modus „Stick und Pad“ befindet sich das Richtungspad im Tastenfeld (vier Tasten), aber im Modus „Pad“ befindet sich das Richtungspad im Achsenfeld (zwei Achsen).

N64 Controller.

Dies ist unserer Lieblingscontroller, vor allem wegen der Nostalgie und nicht wegen der Ergonomie.

Nintendo WIIMOTE und NUNCHUCK.

Mit diesen Treibern war es möglich, die Wiimote und den Nunchuk mit der Gamepad-API zu verwenden. Unterschiedliche Treiber führen zu unterschiedlichen Layouts.

Events.

Die Gamepad-API verfügt über zwei Fensterereignisse, Gamepadconnected und Gamepaddisconnected, die beim Verbinden bzw. Trennen der Verbindung auslösen. Der Benutzer muss eine Taste auf dem angeschlossenen Gamepad drücken, damit ein mit dem Gamepad verbundenes Event erkannt wird. Das entsprechende Gamepad-Objekt ist auf beiden Ereignisobjekten ist mit e.gamepad vefügbar.

Connection Events.

State Change Events.

State Change Events haben es noch nicht in die Spezifikation geschafft und erfordern weitere Diskussionen. Firefox hat jedoch bereits drei State Change Events; Gamepadbuttondown, Gamepadbuttonup und Gamepadaxismove. Diese Event-Namen haben eine ähnliche Namenskonvention wie Tastatur- und Mausereignisse (andere Vorschläge sind gamepadchanged und gamepadaxischanged).

Hinweis: Derzeit funktionieren diese Events nur in Firefox.

Hinweis: Dieses Event funktioniert derzeit nur in Firefox Nightly.

Verwendung der API in einem Spiel.

Wie auch immer Sie ihr Spiel rendern, können Sie den Zustand des Gamepads in jeder Spielschleife abrufen und auf eine kontrollierbare Einheit anwenden. Nachfolgend finden Sie eine sehr einfache Demo, bei der der Wert der Achsen [0] auf die Eigenschaft CSS left angewendet wird.

Natürlich wäre ein komplexes Spiel sehr anspruchsvoll, so dass dieser Ansatz wahrscheinlich nicht die beste Idee ist. Stattdessen können Sie WebGL oder Canvas verwenden oder eine Rendering-Bibliothek wie z.B. Three.js oder Babylon.js. Wenn sich das Element nicht bewegt, dann wird ihr Controller wahrscheinlich anders abgebildet. Das bedeutet, dass die Achsen [0] nicht den Joystick oder die analoge Taste repräsentieren, die einfach nicht zugeordnet sind. Versuchen Sie, die Achsen [0] auf ein anderes Element in der Anordnung zu ändern. HTML5 Gamepad Tester hat eine visuelle Auflistung ihrer verbundenen Gamepads und deren Eigenschaften.

Control Settings und Mapping-Probleme.

Mapping-Differenzen können mit einem Dienstprogramm „Control Settings“ behoben werden.

Wie die Control Settings der Demo funktionieren.

In der Demo klickt der Nutzer auf eine Input Box, die sich auf sein Gamepad und das Control bezieht, das er ändern oder neu zuordnen möchte. Der Zustand des Gamepads wird gespeichert und ständig mit dem aktuellen Zustand des Gamepads verglichen, bis eine Achse oder Taste mehr als 0,5 des gespeicherten Zustands geändert hat. Zu diesem Zeitpunkt werden wir wissen, welche Eingaben für diese Spielaktion verwenden möchte (z.B. links, rechts, spring“) und wie dieser Sie verwenden möchte, um diese Spielhandlung darzustellen. Der Grund, warum wir das sagen, ist, dass die Aktionen „links“ und „rechts“ höchstwahrscheinlich auf derselben Achse liegen werden, aber der Nutzen wird den Joystick auf eine etwas andere Weise benutzen, um eine andere Aktion darzustellen (z.B. den Joystick nach links für links und nach rechts für rechts bewegen). Dies kann herausgefunden werden, indem man den gespeicherten Zustand des geänderten Buttons (aber gerundet, so dass dieser -1, 0 oder 1 ist) verwendet, um den minimalen Zustand der Spielaktion darzustellen und den neuen Zustand als sein Maximum verwendet. Die Zustände werden für die Schwellenwerte der Buttons halbiert, das Ergebnis ist -0,5, 0 oder 0,5.

Wie man ein Keyboard-Fallback erstellt.

Die Fensterereignisse onkeydown und onkeyup machen es einfach, einen Keyboard Fallback bereitzustellen. Wir könnten den Code hinzufügen, damit der Spieler etwas in diesen Ereignissen tut, aber weil wir jede Schleife des Gamepads verwenden, um den Spieler dann zu veranlassen, etwas zu tun, macht es auch hier Sinn. Es bedeutet auch weniger doppelten Code.

Eine Möglichkeit, dies zu tun, ist, indem wir eine Key Collection haben, um die aktuellen Keys herunterzuladen, die von onkeydown bzw. onkeyup aktualisiert wird.

Wir können dann einfache Überprüfungen in der Spielrunde durchführen, um den Spieler in Aktion zu setzen.

Fazit.

Wie bei allen experimentellen Technologien sind die Ergebnisse mit der Gamepad-API instabil. Indem Sie es jedoch nutzen (und Feedback geben), gestalten Sie die Zukunft der Technologie.

Dies stellt eine große Chance für die Spielindustrie dar. Viele Spiele nutzen bereits Frontend-Technologien wie NW.js, um native Apps zu erstellen; die Kopplung mit der Gamepad-API wird für Spiele mit einem nahezu nativen Erlebnis sorgen. Dies ist jedoch nur ein Element einer schnell wachsenden Gaming-Plattform. Web-Technologien sind heute in der Lage, viele der Funktionen, die wir in nativen Spielen sehen, zu nutzen, darunter Audiomanipulation (über die Web Audio API), Eingabe von Mausbewegungen ohne Bildschirmbeschränkungen (über die Pointer Lock API), Touch-Gesten (über die Touch Event APIs) und vieles mehr.

Ich hoffe, dass die Gamepad-API in Zukunft auf Dinge wie Rumpeln, interne Lautsprecher, Mikrofon und andere Eingänge zugreifen kann.

Vielen Dank für ihren Besuch.