Share
Das Spielen im Internet ist mit HTML5-Technologien wie Canvas, WebGL und WebAudio weit fortgeschritten. Es ist jetzt möglich, Grafiken und Sound mit hoher Wiedergabetreue im Browser zu erzeugen. Für ein echtes Spielerlebnis benötigen Sie jedoch Eingabegeräte für Spiele. Die Gamepad-API ist ein vorgeschlagener Standard des W3C und bietet eine konsistente API für alle Browser.
Mit der Gamepad-API können Benutzer Geräte wie einen Xbox Controller an einen Computer anschließen und für browserbasierte Erlebnisse verwenden! Unsere Hilfsklasse, PxGamepad, ordnet dann die Schaltflächen- und Achsindizes den bekannteren Namen zu, die auf dem Xbox-Controller beschriftet sind.
Wenn Sie ein Gamepad besitzen, schließen Sie es an Ihren Computer an, klicken Sie auf das Bild des Xbox-Controllers und drücken Sie eine Taste. Der Controller leuchtet auf, um jede Bewegung, die Sie ausführen, zu spiegeln!
Dieses Tutorial ist das dritte in einer Reihe von Flight Arcade-Versionen, die zeigen, was auf der Webplattform und im neuen Microsoft Edge-Browser und der EdgeHTML-Rendering-Engine möglich ist. Die ersten beiden Artikel zu WebGL und Web-API sowie interaktiven Code und Beispiele für diesen Artikel finden Sie auf flightarcade.com und hier auf Tuts+.
Die Gamepad-API wurde intelligent und flexibel konzipiert. Grundsätzlich bietet es Zugriff auf Tasten und Achsen. Die Schaltflächenwerte reichen von 0 zu 1 inklusive, während Achsen von reichen -1 zu 1 inklusive. Alle Werte werden auf diese Bereiche normalisiert, sodass Entwickler ein konsistentes Verhalten zwischen Geräten erwarten können.
Das Gamepad-Objekt enthält detaillierte Informationen zu Hersteller und Modell des angeschlossenen Gamepads. Nützlicher ist eine "Mapping" -Eigenschaft, die den allgemeinen Typ des Gamepads beschreibt. Das einzige unterstützte Mapping ist derzeit "Standard", was dem Controller-Layout entspricht, das von vielen beliebten Spielekonsolen wie der Xbox verwendet wird.
Die Standard-Controller-Zuordnung hat zwei Sticks, von denen jeder durch zwei Achsen (x und y) dargestellt wird. Es enthält auch ein D-Pad, vier Spielschaltflächen, obere Schaltflächen und Auslöser: alle als Schaltflächen in der Gamepad-API dargestellt.
Aktuelle Xbox-Controller melden den Status der Schaltflächen als entweder 0 (Normalzustand) oder 1 (gedrückt). Sie können sich jedoch vorstellen, dass zukünftige Steuerungen die auf jeden Tastendruck angewendete Kraft melden können.
Das Xbox D-Pad meldet auch diskrete Werte (0 oder 1), aber die Stöcke liefern kontinuierliche Werte über den gesamten Achsenbereich (-1 zu 1). Diese zusätzliche Präzision erleichtert das Fliegen des Flugzeugs in unseren Flight Arcade-Missionen.
Das von der Gamepad-API bereitgestellte Array von Schaltflächen und Achsen ist zukunftsorientiert und perfekt als einfache API geeignet. Wenn Sie jedoch ein Spiel schreiben, ist es schön, ein Standard-Gamepad wie den Xbox One-Controller auf höherer Ebene zu haben. Wir haben eine Hilfsklasse mit dem Namen PxGamepad erstellt, die die Schaltflächen- und Achsenindizes den bekannteren Namen entsprechend der Bezeichnung auf dem Xbox-Controller zuordnet.
Ich gehe durch einige interessante Teile der Bibliothek, aber der vollständige Quellcode (MIT License) ist auf GitHub verfügbar.
Die standardmäßige Gamepad-API bietet den Schaltflächenstatus als eine Reihe von Schaltflächen. Diese API ist wiederum auf Flexibilität ausgelegt und ermöglicht Controller mit verschiedenen Tastenwerten. Beim Schreiben eines Spiels ist es jedoch viel einfacher, Code zu schreiben und zu lesen, der die standardmäßig zugeordneten Schaltflächennamen verwendet.
Mit der HTML5-Gamepad-API beispielsweise wird hier der Code geprüft, um zu prüfen, ob der linke Auslöser aktuell gedrückt ist:
function isLeftTriggerPressed () var leftTrigger = gamepad.buttons [6]; if (! leftTrigger) return false; if (typeof (leftTrigger) === "Objekt") return leftTrigger.pressed; return (leftTrigger === 1,0);
Die PxGamepad-Klasse enthält eine Aktualisierungsmethode, mit der der Status für alle standardmäßig zugeordneten Schaltflächen und Achsen erfasst wird. So festzustellen, ob die linker Trigger gedrückt wird, ist so einfach wie der Zugriff auf eine boolesche Eigenschaft:
var isPressed = pxgamepad.buttons.leftTrigger;
Achsen in der Standard-Gamepad-API werden auch als Array von numerischen Werten bereitgestellt. Hier ist zum Beispiel der Code, um die normalisierten X- und Y-Werte für den linken Stick zu erhalten:
var leftStickX = gamepad.axes [0]; var leftStickY = gamepad.axes [1];
Das D-Pad ist ein Sonderfall, da es von der HTML5-Gamepad-API (Indizes) als ein Satz von vier Schaltflächen betrachtet wird 12, 13, 14, und fünfzehn). Es ist jedoch üblich, dass Entwickler das D-Pad auf die gleiche Weise wie einen der Sticks verwenden. PxGamepad bietet Schaltflächeninformationen für das D-Pad, synthetisiert aber auch Achseninformationen, als wäre das D-Pad ein Stock:
var dpadX = pxgamepad.dpad.x; var dpadY = pxgamepad.dpad.y;
Eine weitere Einschränkung der HTML5-Gamepad-API besteht darin, dass keine Ereignisse auf Schaltflächenebene bereitgestellt werden. Es ist üblich, dass ein Spieleentwickler ein einzelnes Ereignis für einen Tastendruck aktivieren möchte. In Flight Arcade sind die Tasten für Zündung und Bremse gute Beispiele. PxGamepad überwacht den Status der Tasten und ermöglicht es dem Anrufer, sich für Benachrichtigungen beim Loslassen der Tasten zu registrieren.
Accentsconagua
gamepad.on ('rightTrigger', function () console.log ('rechter Abzug ausgelöst!'););Hier ist die vollständige Liste der von PxGamepad unterstützten benannten Schaltflächen:
einbxylinks obenrechts obenlinker TriggerrightTriggerwählenStartLinke StangeRightStickdpadUpdpadDowndpadLeftdpadRightEs gibt zwei Methoden zum Abrufen des Gamepad-Objekts. Die Gamepad-API fügt dem genannten Navigator-Objekt eine Methode hinzu getGamepads (), Dies gibt ein Array aller verbundenen Gamepads zurück. Es gibt auch Neues Gamepadverbunden und Gamepaddisconnected Ereignisse, die ausgelöst werden, wenn ein neues Gamepad angeschlossen oder getrennt wurde. Zum Beispiel, wie der PxGamepad-Helfer das zuletzt verbundene Gamepad speichert:
// Beginnen Sie mit dem Abhören von Gamepad-Verbindungsereignissen. PxGamepad.prototype.start = function () this.reset (); this.listeners = 'gamepadconnected': jQuery.proxy (Funktion (e) var gamepad = e.originalEvent.gamepad; if (gamepad.mapping === 'standard') this.connectedGamepad = gamepad;, 'gamepaddisconnected': jQuery.proxy (Funktion (e) var gamepad = e.originalEvent.gamepad; if (this.connectedGamepad === Gamepad) this.connectedGamepad = null;); jQuery (window) .on (this.listeners); ;
Und hier ist der Helfer, mit dem das erste Standard-Gamepad abgerufen werden kann navigator.getGamepads () API:
// Helfer zum Abrufen des aktuell verbundenen Gamepads PxGamepad.prototype.getGamepad = function () // Standardmäßig zu verbundenem Gamepad var gp = this.connectedGamepad; if (! gp) // alle verfügbaren Gamepads abrufen var gamepads; if (navigator.getGamepads) gamepads = navigator.getGamepads (); else if (navigator.webkitGetGamepads) gamepads = navigator.webkitGetGamepads (); // Suche nach einem standardmäßig zugeordneten Gamepad if (gamepads) for (var i = 0, len = gamepads.length; i < len; i++) if (gamepads[i].mapping === 'standard') gp = gamepads[i]; break; return gp; ;
Die PxGamepad-Helper-Klasse wurde für das einfache Szenario entwickelt, in dem ein einzelner Benutzer ein Spiel mit einem standardmäßig zugeordneten Gamepad spielt. Die neuesten Browser wie Microsoft Edge unterstützen die W3C Gamepad-API vollständig. Ältere Versionen einiger anderer Browser unterstützten jedoch nur Teile der neuen Spezifikation. PxGamepad lauscht dem Gamepadverbunden Ereignisse und greift zurück, um bei Bedarf die Liste aller Gamepads abzufragen.
Während sich PxGamepad auf das einfache, häufigste Szenario konzentriert, kann die Gamepad-API mehrere Spieler mit jeweils einem eigenen Gamepad unterstützen. Eine mögliche Verbesserung für PxGamepad könnte darin bestehen, eine Klasse im Manager-Stil bereitzustellen, die die Verbindung mehrerer Gamepads verfolgt und sie mehreren Spielern in einem Spiel zuordnet. Möglicherweise können Benutzer auch die Tastenfunktionen auf ihren Gamepads neu zuordnen oder anpassen.
Wir freuen uns auch über das Potenzial der Gamepad-API für Nicht-Spielszenarien. Mit dem Aufkommen von WebGL sehen wir eine Vielzahl innovativer Anwendungen für 3D im Web. Das könnte bedeuten, den Berg zu erkunden. Everest-Region in 3D mit GlacierWorks oder Besichtigung der Assyrian Collection des British Museum dank CyArks Bemühungen, wichtige Stätten und Artefakte der Welt digital zu erhalten.
Während der Entwicklung von Flight Arcade verwendeten wir häufig Blender und andere 3D-Werkzeuge, um Modelle für Babylon.js zu verarbeiten. Einige Entwickler und Künstler verwenden ein Gerät, das als 3D-Maus bezeichnet wird, um 3D-Modelle zu manipulieren und zu navigieren. Diese Geräte verfolgen die Bewegung eines einzelnen Knopfes durch sechs Achsen! Sie machen es sehr einfach und schnell, Modelle zu bearbeiten. Neben dem Spielen werden sie in einer Vielzahl interessanter Anwendungen vom Engineering bis zur medizinischen Bildgebung eingesetzt. Beim Hinzufügen von Gamepad-Unterstützung zu Flight Arcade waren wir überrascht zu erfahren, dass die Gamepad-API unsere 3D SpaceMouse erkannt und Bewegungsdaten für alle sechs Achsen bereitgestellt hat!
Es ist spannend, sich alle Möglichkeiten vorzustellen, die die neue Gamepad-API bietet. Jetzt ist eine großartige Zeit, um mit der neuen Gamepad-API zu experimentieren und Ihrem nächsten Spiel oder Ihrer Anwendung eine präzise Kontrolle und viel Spaß hinzuzufügen!
Microsoft bietet viele kostenlose Lernmöglichkeiten zu vielen Open Source-JavaScript-Themen. Wir haben uns vorgenommen, mit Microsoft Edge viel mehr zu schaffen. Hier sind einige zu überprüfen:
Einige kostenlose Tools für den Einstieg: Visual Studio Code, Azure Trial und Cross-Browser-Testtools - alles verfügbar für Mac, Linux oder Windows.
Dieser Artikel ist Teil der Web-Dev-Tech-Serie von Microsoft. Wir freuen uns zu teilen Microsoft Edge und das Neue EdgeHTML-Rendering-Engine mit dir. Erhalten Sie kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac, iOS, Android oder Windows-Gerät. .
