Share
Spel på webben har kommit långt med HTML5-tekniker som Canvas, WebGL och WebAudio. Det är nu möjligt att producera högfidelis grafik och ljud i webbläsaren. Men för att ge en sann spelupplevelse behöver du inmatningsenheter utformade för spel. Gamepad API är en föreslagen standard för W3C, och är utformad för att tillhandahålla ett konsekvent API över webbläsare.
Gamepad API tillåter användare att ansluta enheter som en Xbox Controller till en dator och använda dem för webbläsarbaserade upplevelser! Vår hjälparklass, PxGamepad, kartlägger sedan knapp- och axelindex till de mer kända namnen som märkts på Xbox-kontrollenheten.
Om du har en gamepad, försök att ansluta den till din dator, klicka på bilden på Xbox-kontrollen nedan och tryck på en knapp. Du ser kontrollampan lyser upp för att spegla varje rörelse du gör!
Denna handledning är den tredje i en serie på Flight Arcade-byggd för att visa vad som är möjligt på webbplattformen och i den nya Microsoft Edge-webbläsaren och EdgeHTML-återgivningsmotorn. Du hittar de två första artiklarna på WebGL och Web API, plus interaktiv kod och exempel på den här artikeln, på flightarcade.com och här på Tuts+.
Gamepad API är intelligent utformad med flexibilitet i åtanke. På en grundläggande nivå ger den tillgång till knappar och axlar. Knappvärden varierar från 0 till 1 inklusive, medan axlarna sträcker sig från -1 till 1 inclusive. Alla värden normaliseras till dessa intervall så att utvecklare kan förvänta sig konsekvent beteende mellan enheter.
Gamepad-objektet ger detaljerad information om tillverkaren och modellen för den anslutna spelporten. Mer användbar är en "mapping" egenskap som beskriver den allmänna typen av gamepad. För närvarande är den enda stödda mappningen "standard", vilket motsvarar den kontrollerlayout som används av många populära spelkonsoler som Xbox.
Standardkartläggningen har två pinnar, som var och en representeras av två axlar (x och y). Den innehåller också en D-pad, fyra spelknappar, toppknappar och triggers: alla representerade som knappar i Gamepad API.
Nuvarande Xbox-controllers rapporterar knappstatus som antingen 0 (normalt tillstånd) eller 1 (nedtryckt). Du kan dock tänka dig att framtida kontrollanter kan rapportera hur stor kraft som appliceras på varje knapptryckning.
Xbox D-dynan rapporterar också diskreta värden (0 eller 1), men stavarna ger kontinuerliga värden över hela axelområdet (-1 till 1). Denna extra precision gör det mycket lättare att flyga flygplanet i våra Flight Arcade-uppdrag.
Mängden knappar och axlar som tillhandahålls av Gamepad API är framåtriktat och perfekt som ett API på låg nivå. Men när du skriver ett spel är det trevligt att få en högre nivå representation av en standard gamepad som Xbox One-kontrollen. Vi skapade en hjälpklass med namnet PxGamepad som kartlägger knapp- och axelindex till de mer kända namnen som märkts på Xbox-kontrollern.
Jag går igenom några intressanta delar av biblioteket, men fullständig källkod (MIT-licens) finns tillgänglig på GitHub.
Standardprogrammet Gamepad ger knappstatus som en rad knappar. Återigen är detta API utformat för flexibilitet, vilket gör det möjligt för regulatorer med olika knappräknare. Men när du skriver ett spel är det mycket lättare att skriva och läsa kod som använder standardmappade knappnamn.
Till exempel, med HTML5 Gamepad API, här är koden för att kontrollera om den vänstra utlösaren för närvarande trycks in:
funktion isLeftTriggerPressed () var leftTrigger = gamepad.buttons [6]; om (! leftTrigger) return false; om (typeof (leftTrigger) === "objekt") returnera leftTrigger.pressed; returnera (leftTrigger === 1,0);
Klassen PxGamepad innehåller en uppdateringsmetod som samlar tillståndet för alla standardknappar och axlar. Så bestämmer om leftTrigger pressas är lika enkelt som att få tillgång till en boolesisk egenskap:
var isPressed = pxgamepad.buttons.leftTrigger;
Axlar i standard Gamepad API tillhandahålls också som en uppsättning numeriska värden. Till exempel, här är koden för att få normaliserade x- och y-värden för den vänstra pinnen:
var leftStickX = gamepad.axes [0]; var leftStickY = gamepad.axes [1];
D-dynan är ett speciellt fall eftersom det anses vara en uppsättning med fyra knappar av HTML5 Gamepad API (index 12, 13, 14, och 15). Det är emellertid vanligt att utvecklarna tillåter att D-dynan används på samma sätt som en av pinnarna. PxGamepad ger knappinformation för D-dynan, men syntetiserar också axelinformation som om D-dynan var en pinne:
var dpadX = pxgamepad.dpad.x; var dpadY = pxgamepad.dpad.y;
En annan begränsning av HTML5 Gamepad API är att det inte ger händelser på knappnivå. Det är vanligt att en spelutvecklare vill aktivera en enda händelse för en knapptryckning. I Flight Arcade är tändnings- och bromsknapparna bra exempel. PxGamepad tittar på knappstatus och låter uppringare registrera sig för meddelanden om knappfrigöring.
Accentsconagua
gamepad.on ('rightTrigger', funktion () console.log ('right trigger firmad!'););Här är en fullständig lista över namngivna knappar som stöds av PxGamepad:
enbxyleftToprightTopleftTriggerrightTriggerVäljStartvänster spakrightStickdpadUpdpadDowndpadLeftdpadRightDet finns två metoder för att hämta gamepadobjektet. Gamepad API lägger till en metod för navigeringsobjektet som heter getGamepads (), som returnerar en uppsättning av alla anslutna gamepads. Det finns också nya gamepadconnected och gamepaddisconnected händelser som avfyras när en ny gamepad har kopplats eller kopplats från. Till exempel, här är hur PxGamepad-hjälpen lagrar den senast anslutna gamepad:
// börja lyssna på gamepadanslutningshändelser PxGamepad.prototype.start = function () this.reset (); this.listeners = 'gamepadconnected': jQuery.proxy (funktion (e) var gamepad = e.originalEvent.gamepad; om (gamepad.mapping === 'standard') this.connectedGamepad = gamepad;) 'gamepaddisconnected': jQuery.proxy (funktion (e) var gamepad = e.originalEvent.gamepad; om (this.connectedGamepad === gamepad) this.connectedGamepad = null;; jQuery (fönster) .ON (this.listeners); ;
Och här är hjälpen att hämta den första standard gamepad med hjälp av navigator.getGamepads () API:
// hjälpen för att hämta den nuvarande anslutna gamepad PxGamepad.prototype.getGamepad = function () // standard till ansluten gamepad var gp = this.connectedGamepad; om (! gp) // hämta alla tillgängliga spelpunkter var gamepads; om (navigator.getGamepads) gamepads = navigator.getGamepads (); annars om (navigator.webkitGetGamepads) gamepads = navigator.webkitGetGamepads (); // leta efter en standard mappad gamepad om (gamepads) for (var i = 0, len = gamepads.length; i < len; i++) if (gamepads[i].mapping === 'standard') gp = gamepads[i]; break; return gp; ;
PxGamepad-hjälparklassen är utformad för det enkla scenariot där en enskild användare spelar ett spel med en standard mappad gamepad. De senaste webbläsarna, som Microsoft Edge, stöder helt W3C Gamepad API. Äldre versioner av vissa andra webbläsare stödde dock bara bitar av den nya specifikationen. PxGamepad lyssnar på gamepadconnected händelser och faller tillbaka för att fråga efter listan över alla gamepads om det behövs.
Medan PxGamepad är inriktat på det enkla, vanligaste scenariot, kan Gamepad API fullt ut stödja flera spelare, var och en med sin egen gamepad. En möjlig förbättring för PxGamepad kan vara att tillhandahålla en klass i managerstil som spårar anslutning av flera gamepads och kartlägger dem till flera spelare i ett spel. En annan kan vara att tillåta användare att omforma eller anpassa knappfunktionerna på deras gamepads.
Vi är också glada över potentialen i Gamepad API för scenarier utan spel. Med uppkomsten av WebGL ser vi en rad innovativa användningsområden för 3D på webben. Det kan innebära att utforska Mt. Everest-regionen i 3D med GlacierWorks, eller tittar på den brittiska museets assyriska samling tack vare CyArks ansträngningar att digitalt bevara viktiga världssidor och artefakter.
Under utvecklingen av Flight Arcade använde vi ofta Blender och andra 3D-verktyg för att bearbeta modeller för Babylon.js. Vissa utvecklare och artister använder en enhet som kallas en 3D-mus för att hjälpa till att manipulera och navigera i 3D-modeller. Dessa enheter spårar rörelsen av en enkel knopp genom sex axlar! De gör det väldigt enkelt och snabbt att manipulera modeller. Utöver spel används de i en mängd olika intressanta applikationer från teknik till medicinsk bildbehandling. Samtidigt som vi lägger till gamepad-stöd till Flight Arcade blev vi förvånad över att veta att Gamepad API upptäckte vår 3D SpaceMouse och tillhandahöll rörelsedata för alla sex axlarna!
Det är spännande att föreställa sig alla möjligheter som det nya Gamepad API erbjuder. Nu är det en bra tid att experimentera med det nya Gamepad API och lägga till precisionskontroll och mycket roligt till ditt nästa spel eller program!
Microsoft har en massa gratis lärande på många JavaScript-ämnen med öppen källkod, och vi har ett uppdrag att skapa mycket mer med Microsoft Edge. Här är några att kolla in:
Och några gratis verktyg för att komma igång: Visual Studio Code, Azure Trial och testverktyg för cross-browser - alla tillgängliga för Mac, Linux eller Windows.
Den här artikeln är en del av web dev-tekniken från Microsoft. Vi är glada att dela Microsoft Edge och den nya EdgeHTML-återgivningsmotor med dig. Få gratis virtuella maskiner eller testa fjärran på din Mac, iOS, Android eller Windows-enheten @ .
