Advertisement
  1. Code
  2. Games

Eine Einführung in die HTML5 Gamepad API

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Mit zunehmender Beliebtheit von HTML-Spielen beginnen die Anbieter mit der Einführung einiger aufregender neuer APIs, um das Spielen sowohl für uns Entwickler als auch für unsere Endspieler ein wenig süßer zu machen. Eines davon ist das GamepadAPI, mit dem Sie Ihr gutes altes Konsolenspielpad an Ihren Computer anschließen und es für browserbasierte Spiele, Plug-and-Play-Stil verwenden können. Lass uns eintauchen!


Einführung: Was ist die Gamepad-API?

Kurz gesagt, mit der Gamepad-API können Sie mit Ihrem Browser über einen Videospielkonsolen-Controller, AKA, ein Gamepad, interagieren. Dies erfordert keinen speziellen Treiber oder Plugin, es ist so einfach wie Plug & Play!

Da ich selbst eher ein Konsolenspieler als ein Desktop-Spieler bin, bevorzuge ich die Interaktion mit Spielen über ein Gamepad. Mit dem Aufkommen von HTML- und JavaScript-basierten Spielen wird dies ein wirklich nützliches Werkzeug, um Spiele für Spiele leichter zugänglich zu machen Ihre Benutzer.

Die Gamepad-API ist nicht für die Veröffentlichung verfügbar, wir können sie jedoch mit Vorschauversionen von Firefox für uns selbst verwenden. Bevor wir also festsitzen, brauchen wir ein paar Dinge.


Was werden Sie brauchen?

Wie bereits erwähnt, ist die Gamepad-API noch nicht für die Veröffentlichung verfügbar. Sie müssen sich daher zunächst einen Nightly-Build von Firefox zulegen und sicherstellen, dass das Firebug-Add-On installiert ist (nur zu Debugging-Zwecken).

Außerdem können Sie ein Gamepad nicht vergessen! Ich werde für dieses Tutorial einen PlayStation 3-Controller verwenden, aber ein Xbox-Controller reicht völlig aus.

Sobald Sie Nightly installiert und Firebug hinzugefügt haben, können Sie loslegen!

(Hinweis: Neuere Versionen von Chromium unterstützen auch die Gamepad-API, dieses Tutorial wurde jedoch nicht gegen sie getestet.)


Schritt 1: Verbinden eines Gamepads mit Ihrem Browser

Beginnen wir mit einer einfachen HTML-Datei (index.html), die "gamepad.js" (eine leere JavaScript-Datei) enthält.

index.html

Die Verbindung eines Gamepads wird mit einem einfachen JavaScript-Ereignis-Listener erkannt. Das ausgelöste Ereignis heißt "MozGamepadConnected". Als erstes müssen wir dem Fenster einen Ereignis-Listener hinzufügen, um dieses Ereignis zu erkennen.

Ich füge auch eine Rückruffunktion hinzu, die die Details des Ereignisses in der Firebug-Konsole protokolliert. Dies sind die Informationen, die uns am meisten interessieren und die uns tatsächlich wissen lassen, dass wir ein Gamepad erfolgreich verbunden haben.

Führen Sie Ihre index.html in Nightly aus und öffnen Sie die Firebug-Konsole. Hier können Sie die Protokollierung des Ereignisses über unsere Rückruffunktion anzeigen.

Stellen Sie sicher, dass Ihr Controller ausgeschaltet und nicht drahtlos mit einer Spielekonsole verbunden ist. Schließen Sie es über USB an Ihren Computer an, schalten Sie den Controller ein und beobachten Sie das Ereignisprotokoll in der Konsole.

The logged event of connecting a gamepadThe logged event of connecting a gamepadThe logged event of connecting a gamepad

Großartig, wir haben ein Gamepad, das eine Verbindung zu einem Browser herstellt, keine zusätzlichen Plugins oder Treiber erforderlich!


Schritt 2: Trennen eines Gamepads

Es ist genauso wichtig zu wissen, ob ein Gamepad ebenfalls getrennt wurde. Schauen wir uns also das Ereignis "MozGamepadDisconnected" an.

Fügen Sie ähnlich wie in Schritt 1 einen Ereignis-Listener für ein Trennungsereignis und eine Rückruffunktion hinzu, um die Ereignisdetails zu protokollieren.

Wenn Ihr Gamepad noch verbunden ist, aktualisieren Sie Ihre Seite (bei der das verbundene Ereignis protokolliert wird) und trennen Sie das Gamepad, indem Sie es vom USB-Anschluss auswerfen. Sie sollten ein Ereignisprotokoll wie dieses erhalten.

The logged event of disconnecting a gamepadThe logged event of disconnecting a gamepadThe logged event of disconnecting a gamepad

Jetzt wissen wir, wann ein Gamepad verbunden und getrennt wurde. Es ist wahrscheinlich eine gute Idee, den Status innerhalb einer Variablen aufzuzeichnen und sich darauf vorzubereiten, Schaltflächenereignisse zu erkennen!


Schritt 3: Erkennen von Tastendrücken

Durch erneutes Drücken der Taste wird ein Ereignis-Listener und eine Rückruffunktion mit zwei Ereignissen verwendet: "MozGamepadButtonDown" und "MozGamepadButtonUp".

Ich würde vorschlagen, das gesamte Ereignis über den Knopfdruck selbst zu protokollieren, um zu sehen, was los ist, aber die wichtigste Information, die wir von diesem Ereignis erhalten müssen, ist evt.button. Dies ist die numerische ID der Taste, die gedrückt wurde.

Die Rückruffunktion benötigt diesmal einen zweiten Parameter, einen booleschen Wert, um zu testen, ob die Taste gedrückt oder losgelassen wurde. Dies stellen wir selbst in den Rückruffunktionen der Ereignis-Listener ein.

Dies sollte nun die IDs der Tasten ausgeben, die gedrückt werden und ob sie gedrückt oder losgelassen wurden (wahr für Taste runter, falsch für Taste rauf).

The logged button id's

Als Nächstes erstellen wir ein Array mit allen PlayStation 3-Schaltflächen. Die Indizes des Arrays werden den auf diesem Gamepad verwendeten IDs zugeordnet, wobei die Werte der Name der Schaltfläche sind.

Wenn Sie einen anderen Controller verwenden, nehmen Sie sich Zeit, um herauszufinden, welcher Index zu welcher Schaltfläche gehört, und speichern Sie diese Informationen in einem ähnlichen Array.

Wenn wir jetzt die Funktion buttonPressed() geringfügig ändern, können wir leicht erkennen, welche Taste auf dem Controller gedrückt wurde.

Probieren Sie es aus! Durch Drücken der Tasten auf Ihrem Controller sollte nun der Name der gedrückten Tasten protokolliert werden. Dies ist viel einfacher zu verstehen als "Taste 5" (in meinem Fall auf dem Steuerkreuz).


Schritt 4: Erkennen von Achsenereignissen

Das Erkennen von Achsenereignissen verfolgt im Wesentlichen mithilfe des Ereignisses "MozGamepadAxisMove", wo sich die linken und rechten Analogsticks auf dem Gamepad befinden.

Fügen Sie die neue Ereignishandler- und Rückruffunktion hinzu.

Das bekommen wir - verwirrend, oder?

The logged button id'sThe logged button id'sThe logged button id's

Es gibt nur ein Ereignis, das von beiden analogen Sticks ausgelöst wird. Jedes Ereignis gibt uns eine von vier möglichen Achsen und einen Wert zwischen -1,0 und +1,0. Achse 0 und 1 gehören zum linken Analogstick und Achse 2 und 3 gehören zum rechten.

The logged button id'sThe logged button id'sThe logged button id's

Im obigen Diagramm sehen Sie, dass die Achsen 0 und 2 der x-Achse und 1 und 3 der y-Achse entsprechen. Indem Sie sowohl die x- als auch die y-Achse für jeden einzelnen Analogstick verwenden, können Sie herausfinden, in welche Richtung der Analogstick zeigt!

Auf verschiedenen Gamepads haben Sie möglicherweise andere Achsen. Beispielsweise sind die Schulterauslöser auf einem Xbox-Controller ebenfalls analog.


Schritt 5: In die Praxis umsetzen

Das deckt alle Ereignisse ab, die wir derzeit von einem Gamepad aus übernehmen können. Lassen Sie uns also das Gelernte in die Praxis umsetzen.

Jetzt möchte ich nicht zu sehr auf die Spieleentwicklung eingehen, da wir uns auf das konzentrieren, was wir verwenden, um Spiele selbst zu steuern. Eines der wichtigsten Dinge, die zu beachten sind, ist das Umschalten von Steuerungsschemata. Da nicht jeder ein Gamepad zur Hand hat, müssen wir sicherstellen, dass sowohl die Tastatur als auch das Gamepad gesteuert werden.


Schritt 6: Einrichten Ihrer Leinwand

Um eine kleine Demo zum Laufen zu bringen, erstellen Sie ein canvas-Element in Ihrer HTML-Datei mit der ID "game" und setzen Sie die Breite auf 600 und die Höhe auf 540. Wie Sie vielleicht wissen, wird das Canvas-Element häufig zum Rendern von HTML-Spielen verwendet auf.

Sie sollten auch die Bilder "ship.png" und "space.jpg" aus dem Quelldownload in Ihren Arbeitsordner kopieren, da diese auf die Leinwand gerendert werden. Alternativ finden Sie einige eigene Grafiken, mit denen Sie spielen können!


Schritt 7: Erstellen der Spielschleife

Nachdem sich das canvas-Element in unserem DOM befindet, möchten wir eine Spielschleife erstellen, um unser Spiel zu rendern.

Ich verwende eine shim für "requestAnimationFrame" von Paul Irish, die die Basis für unsere Schleife bildet. Als nächstes erhalten wir den 2D-Kontext der canvas, auf dem wir zwei neue Bildobjekte zeichnen und erstellen, eines für den Hintergrund und eines für unser Raumschiff.

Als nächstes das Spielerobjekt. Es hat x- und y-Koordinaten, die verfolgen, wo es auf der Leinwand erscheinen soll. vier Richtungszustände (oben, unten, links und rechts), damit wir wissen, in welche Richtung sich das Schiff bewegt; eine render() -Funktion, die zuerst updatePosition() aufruft und dann das Bild des Schiffs basierend auf den x- und y-Koordinaten auf die Leinwand zeichnet, und schließlich die updatePosition() -Funktion selbst, die testet, um festzustellen, in welche Richtung das Schiff eingestellt ist zu bewegen und aktualisiert seine Position entsprechend.

Danach haben wir unsere "renderGame" -Funktion, die zuerst das Raumhintergrundbild auf die canvas zeichnet und dann unser Raumschiff darüber zeichnet.

Und schließlich unsere Schleife. Diese Funktion ruft sich jedes Mal auf, wenn unsere Funktion "renderGame" aufgerufen wird.

Ihre Leinwand sollte jetzt einen schönen raumähnlichen Hintergrund haben, in dessen Mitte sich ein Raumschiff befindet - nicht allzu aufregend, ich weiß. Fügen wir also einige Steuerelemente hinzu!


Schritt 8: Schließen Sie die Schiffssteuerung an

In unserem Spielercode haben wir die vier Tasten benannt, mit denen wir unser Schiff steuern möchten. Diese stimmen mit den Namen der Schaltflächen im Array ps3Buttons[] überein. Alles, was wir tun müssen, ist, unsere Funktion buttonPressed() geringfügig zu ändern, und wir werden umziehen.

Wenn nun eine Gamepad-Taste gedrückt oder losgelassen wird, wird ihr Status innerhalb des Spielerobjekts festgelegt. Wenn also die "Auf" -Taste gedrückt wird, wird player.up = true/false gesetzt.

Gehen Sie zurück zu Ihrer Demo und Sie sollten in der Lage sein, Ihr Schiff zu bewegen!


Schritt 9: Hinzufügen eines Tastatur-Fallbacks

Da nicht jeder, der Ihr Spiel spielt, ein Gamepad hat, möchten Sie ihm wahrscheinlich trotzdem erlauben, das Spiel mit einer Tastatur zu spielen.

Erstellen Sie zunächst ein neues Array keys[] und ordnen Sie die keyCode-Eigenschaften der Pfeiltasten der Tastatur den entsprechenden Schaltflächen auf dem Gamepad zu. Auf diese Weise können wir die vom Gamepad verwendete Funktion buttonPressed() wiederverwenden.

Jetzt brauchen wir einen "onkeyup" - und "onkeydown" -Ereignis-Listener für die Pfeiltasten. Wenn eine Taste gedrückt oder losgelassen wird, stellen wir sicher, dass kein Gamepad verwendet wird. Dann verhindern wir, dass die Pfeiltaste ihre übliche Aufgabe erfüllt (in diesem Fall das Browserfenster nach oben oder unten scrollen), und rufen dann dieselbe Funktion von buttonPressed() auf, die das Gamepad aufruft.

Zu diesem Zweck wird ein gefälschtes Ereignisobjekt übergeben, wobei der "keyCode" des Schlüssels einem Element im Array keys[] zugeordnet ist, das wiederum die entsprechende Gamepad-Schaltflächen-ID übergibt.

Auf diese Weise können Sie jetzt die Pfeiltasten verwenden, um das Schiff zu steuern, wenn ein Gamepad nicht angeschlossen ist, während das Gamepad weiterhin die Kontrolle übernimmt, wenn es vorhanden ist.


Abschluss

Daher haben wir die Grundlagen zum Anschließen eines Gamepads an Ihren Computer behandelt, gelernt, wie Sie sich in die Ereignisse einbinden, die das Gamepad auslöst, und diese dann in der Praxis anwenden können. Nicht zu vergessen die entscheidende Fallback-Unterstützung für die Tastatur!

Eine schnelle Herausforderung für diejenigen unter Ihnen, die einen anderen Controller als einen PS3 Dual Shock verwenden: Passen Sie die Tastenbelegung an den angeschlossenen Controller an.

Vielen Dank, dass Sie sich die Zeit genommen haben, sich mit der Gamepad-API vertraut zu machen. Wenn Sie Fragen haben, hinterlassen Sie diese bitte in den Kommentaren.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.