Share
Gamen op het web heeft een lange weg afgelegd met HTML5-technologieën zoals Canvas, WebGL en WebAudio. Het is nu mogelijk om high-fidelity afbeeldingen en geluid binnen de browser te produceren. Om echter een echte game-ervaring te bieden, hebt u invoerapparaten nodig die zijn ontworpen voor gaming. De Gamepad-API is een voorgestelde standaard van de W3C en is ontworpen om een consistente API in verschillende browsers te bieden.
Met de Gamepad-API kunnen gebruikers apparaten zoals een Xbox-controller op een computer aansluiten en gebruiken voor browsergebaseerde ervaringen! Onze helperklasse, PxGamepad, wijst vervolgens de knop- en asindexen toe aan de bekendere namen zoals gelabeld op de Xbox-controller.
Als je een gamepad hebt, probeer hem dan op je computer aan te sluiten, klik op de onderstaande afbeelding van de Xbox-controller en druk op een knop. Je ziet de controller oplichten om elke beweging die je maakt te spiegelen!
Deze tutorial is de derde in een serie over Flight Arcade-gebouwd om te laten zien wat er mogelijk is op het webplatform en in de nieuwe Microsoft Edge-browser en EdgeHTML-renderingengine. U vindt de eerste twee artikelen over WebGL en Web API, plus interactieve code en voorbeelden voor dit artikel, op flightarcade.com en hier op Tuts+.
De Gamepad-API is intelligent ontworpen met flexibiliteit in gedachten. Op een basisniveau biedt het toegang tot knoppen en assen. Knopwaarden variëren van 0 naar 1 inclusief, terwijl assen variëren van -1 naar 1 inclusive. Alle waarden zijn genormaliseerd naar deze bereiken, zodat ontwikkelaars consistent gedrag tussen apparaten kunnen verwachten.
Het Gamepad-object biedt gedetailleerde informatie over de fabrikant en het model van de aangesloten gamepad. Handiger is een "mapping" -eigenschap die het algemene type gamepad beschrijft. Momenteel is de enige ondersteunde toewijzing "standaard", wat overeenkomt met de indeling van de controller die door veel populaire spelconsoles zoals de Xbox wordt gebruikt.
De standaardcontrollertoewijzing heeft twee sticks, die elk worden weergegeven door twee assen (x en y). Het bevat ook een D-pad, vier gameknoppen, bovenste knoppen en triggers: alle weergegeven als knoppen in de Gamepad-API.
Huidige Xbox-controllers melden de status van de knop als een van beide 0 (normale toestand) of 1 (Ingedrukt). U kunt zich echter voorstellen dat toekomstige controllers de hoeveelheid kracht die op elke druk op de knop wordt toegepast, kunnen melden.
De Xbox D-pad rapporteert ook discrete waarden (0 of 1), maar de sticks bieden continue waarden over het hele asbereik (-1 naar 1). Deze extra precisie maakt het veel eenvoudiger om met het vliegtuig te vliegen in onze Flight Arcade-missies.
De reeks knoppen en assen van de Gamepad-API is vooruitstrevend denken en perfect als een low-level API. Bij het schrijven van een game is het echter leuk om een hogere weergave van een standaard gamepad zoals de Xbox One-controller te hebben. We hebben een helperklasse gemaakt met de naam PxGamepad die de knop- en asindexen toewijst aan de meer bekende namen die zijn gelabeld op de Xbox-controller.
Ik zal een paar interessante stukken van de bibliotheek doornemen, maar de volledige broncode (MIT-licentie) is beschikbaar op GitHub.
De standaard Gamepad-API biedt de knopstatus als een reeks knoppen. Nogmaals, deze API is ontworpen voor flexibiliteit, waardoor controllers met verschillende knopentellingen mogelijk zijn. Bij het schrijven van een game is het echter veel eenvoudiger om code te schrijven en lezen die de standaard toegewezen knopnamen gebruikt.
Met de HTML5 Gamepad-API is hier bijvoorbeeld de code om te controleren of de linker trigger momenteel wordt ingedrukt:
function isLeftTriggerPressed () var leftTrigger = gamepad.buttons [6]; if (! leftTrigger) return false; if (typeof (leftTrigger) === "object") keer terug leftTrigger.pressed; return (leftTrigger === 1.0);
De PxGamepad-klasse bevat een updatemethode die de status verzamelt voor alle standaard toegewezen knoppen en assen. Dus bepalen of het linker trekker is ingedrukt is net zo eenvoudig als het openen van een Booleaanse eigenschap:
var isPressed = pxgamepad.buttons.leftTrigger;
Assen in de standaard Gamepad-API worden ook aangeboden als een array van numerieke waarden. Hier is bijvoorbeeld de code om de genormaliseerde x- en y-waarden voor de linkerstick te krijgen:
var leftStickX = gamepad.axes [0]; var leftStickY = gamepad.axes [1];
De D-pad is een speciaal geval, omdat het wordt beschouwd als een set van vier knoppen door de HTML5 Gamepad-API (indices 12, 13, 14, en 15). Het is echter gebruikelijk dat ontwikkelaars toestaan dat de D-pad op dezelfde manier wordt gebruikt als een van de sticks. PxGamepad biedt informatie over knoppen voor de D-pad, maar synthetiseert ook asinformatie alsof de D-pad een stok was:
var dpadX = pxgamepad.dpad.x; var dpadY = pxgamepad.dpad.y;
Een andere beperking van de HTML5 Gamepad-API is dat deze geen gebeurtenissen op knopniveau biedt. Het is normaal dat een game-ontwikkelaar een enkele gebeurtenis wil activeren voor een druk op de knop. In Flight Arcade zijn de ontstekings- en remknoppen goede voorbeelden. PxGamepad bewaakt de knopstatus en stelt bellers in staat zich te registreren voor meldingen bij het vrijgeven van knoppen.
Accentsconagua
gamepad.on ('rightTrigger', function () console.log ('right trigger fired!'););Hier is de volledige lijst met benoemde knoppen die door PxGamepad wordt ondersteund:
eenbXYlinksbovenrechtsbovenlinker trekkerrightTriggerkiezenbeginlinker stokrechter stokdpadUpdpadDowndpadLeftdpadRightEr zijn twee methoden om het gamepad-object op te halen. De Gamepad-API voegt een methode toe aan het genoemde navigatorobject getGamepads (), die een array van alle verbonden gamepads retourneert. Er zijn ook nieuwe gamepadconnected en gamepaddisconnected gebeurtenissen die worden geactiveerd wanneer een nieuwe gamepad is aangesloten of losgekoppeld. Hier is bijvoorbeeld hoe de PxGamepad-helper de laatst verbonden gamepad opslaat:
// begin te luisteren naar gamepad-verbindingsgebeurtenissen PxGamepad.prototype.start = function () this.reset (); this.listeners = 'gamepadconnected': jQuery.proxy (function (e) var gamepad = e.originalEvent.gamepad; if (gamepad.mapping === 'standard') this.connectedGamepad = gamepad;), 'gamepaddisconnected': jQuery.proxy (functie (e) var gamepad = e.originalEvent.gamepad; if (this.connectedGamepad === gamepad) this.connectedGamepad = null;); jQuery (venster) .Op (this.listeners); ;
En hier is de helper om de eerste standaard gamepad op te halen met behulp van de navigator.getGamepads () API:
// helper om de momenteel verbonden gamepad op te halen PxGamepad.prototype.getGamepad = function () // standaard naar verbonden gamepad var gp = this.connectedGamepad; if (! gp) // haal alle beschikbare gamepads op var gamepads; if (navigator.getGamepads) gamepads = navigator.getGamepads (); else if (navigator.webkitGetGamepads) gamepads = navigator.webkitGetGamepads (); // zoek naar een standaard toegewezen gamepad als (gamepads) for (var i = 0, len = gamepads.length; i < len; i++) if (gamepads[i].mapping === 'standard') gp = gamepads[i]; break; return gp; ;
De PxGamepad-helperklasse is ontworpen voor het eenvoudige scenario waarbij een enkele gebruiker een spel speelt met een standaard toegewezen gamepad. De nieuwste browsers, zoals Microsoft Edge, ondersteunen de W3C Gamepad API volledig. Oudere versies van sommige andere browsers ondersteunden echter alleen stukken van de nieuwe specificatie. PxGamepad luistert naar de gamepadconnected gebeurtenissen en valt terug naar het zoeken naar de lijst met alle gamepads indien nodig.
Hoewel PxGamepad gericht is op het eenvoudige, meest voorkomende scenario, is de Gamepad-API volledig in staat om meerdere spelers te ondersteunen, elk met een eigen gamepad. Een mogelijke verbetering voor PxGamepad is om een manager-achtige klasse te bieden die de verbinding van meerdere gamepads bijhoudt en deze in een game aan meerdere spelers toewijst. Een andere mogelijkheid is om gebruikers toe te staan de knopfuncties op hun gamepads opnieuw toe te wijzen of aan te passen.
We zijn ook enthousiast over het potentieel van de Gamepad-API voor niet-spelscenario's. Met de opkomst van WebGL zien we een verscheidenheid aan innovatieve toepassingen voor 3D op internet. Dat kan betekenen dat je de Mt. Everest-regio in 3D met GlacierWorks, of bekijk de Assyrische collectie van het British Museum dankzij de inspanningen van CyArk om belangrijke wereldsites en artefacten digitaal te bewaren.
Tijdens de ontwikkeling van Flight Arcade hebben we vaak Blender en andere 3D-tools gebruikt om modellen voor Babylon.js te verwerken. Sommige ontwikkelaars en artiesten gebruiken een apparaat dat een 3D-muis wordt genoemd om 3D-modellen te manipuleren en te navigeren. Deze apparaten volgen de beweging van een enkele knop door zes assen! Ze maken het heel gemakkelijk en snel om modellen te manipuleren. Naast gaming worden ze gebruikt in een verscheidenheid aan interessante toepassingen, van engineering tot medische beeldvorming. Bij het toevoegen van gamepad-ondersteuning aan Flight Arcade, waren we verrast om te horen dat de API van Gamepad onze 3D SpaceMouse detecteerde en bewegingsgegevens voor alle zes assen leverde!
Het is opwindend om je alle mogelijkheden voor te stellen die de nieuwe Gamepad-API biedt. Dit is een goed moment om te experimenteren met de nieuwe Gamepad-API en precisieregeling en veel plezier toe te voegen aan je volgende spel of applicatie!
Microsoft heeft veel gratis leren over veel open source JavaScript-onderwerpen en we zijn op een missie om nog veel meer met Microsoft Edge te maken. Hier zijn enkele om te bekijken:
En enkele gratis tools om aan de slag te gaan: Visual Studio Code, Azure Trial en testtools voor meerdere browsers, allemaal beschikbaar voor Mac, Linux of Windows.
Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ .
