Share
Gaming på nettet har kommet langt med HTML5-teknologier som Canvas, WebGL og WebAudio. Det er nå mulig å produsere grafikk og lyd i høy grad i nettleseren. Men for å gi en ekte spillopplevelse, trenger du inngangsenheter designet for spill. Gamepad API er en foreslått standard for W3C, og er designet for å gi en konsekvent API over nettlesere.
Gamepad API lar brukerne koble til enheter som en Xbox Controller til en datamaskin og bruke dem til nettleserbaserte opplevelser! Vår hjelperklasse, PxGamepad, kartlegger deretter knapp- og aksjeindeksene til de mer kjente navnene som merket på Xbox-kontrolleren.
Hvis du har en gamepad, prøv å koble den til datamaskinen, klikk på bildet av Xbox-kontrolleren nedenfor, og trykk på en knapp. Du ser kontrollampen lyser opp for å speile hver bevegelse du gjør!
Denne opplæringen er den tredje i en serie på Flight Arcade-bygget for å demonstrere hva som er mulig på nettplattformen og i den nye Microsoft Edge-nettleseren og EdgeHTML-gjengemotoren. Du finner de to første artiklene på WebGL og Web API, pluss interaktiv kode og eksempler for denne artikkelen, på flightarcade.com og her på Tuts+.
Gamepad API er intelligent designet med fleksibilitet i tankene. På grunnleggende nivå gir det tilgang til knapper og akser. Knappverdier spenner fra 0 til 1 Inkludert, mens akser spenner fra -1 til 1 inklusive. Alle verdier er normalisert til disse områdene, slik at utviklere kan forvente konsekvent oppførsel mellom enheter.
Gamepad-objektet gir detaljert informasjon om produsenten og modellen til den tilkoblede gamepad. Mer nyttig er en "kartlegging" -egenskap som beskriver den generelle typen gamepad. For øyeblikket er den eneste støttede kartleggingen "standard", som tilsvarer kontrolleroppsettet som brukes av mange populære spillkonsoller som Xbox.
Standardkontrolleren har to staver, hver av dem er representert av to akser (x og y). Den inneholder også en D-pad, fire spillknapper, toppknapper og utløsere: alle representert som knapper i Gamepad API.
Nåværende Xbox-kontroller rapporterer knappestatus som enten 0 (normal tilstand) eller 1 (Trykket). Imidlertid kan du forestille deg at fremtidige kontrollører kan rapportere hvor mye kraft som brukes på hver knappetrykk.
Xbox D-puten rapporterer også diskrete verdier (0 eller 1), men stavene gir kontinuerlige verdier over hele akselområdet (-1 til 1). Denne ekstra presisjonen gjør det mye enklere å fly flyet i våre Flight Arcade-oppdrag.
Utvalget av knapper og akser levert av Gamepad API er fremtidsrettet og perfekt som et lavt nivå API. Men når du skriver et spill, er det hyggelig å ha en høyere representasjon av en standard gamepad som Xbox One-kontrolleren. Vi opprettet en hjelpeklasse som heter PxGamepad som kartlegger knapp- og aksjeindeksene til de mer kjente navnene som er merket på Xbox-kontrolleren.
Jeg vil gå gjennom noen interessante brikker av biblioteket, men full kildekoden (MIT-lisensen) er tilgjengelig på GitHub.
Standard Gamepad API gir knappestatus som en rekke knapper. Igjen, er denne API utviklet for fleksibilitet, slik at kontrollere med ulike knappetall. Men når du skriver et spill, er det mye lettere å skrive og lese kode som bruker standardkartede knappnavn.
For eksempel, med HTML5 Gamepad API, her er koden for å sjekke om venstre utløseren for øyeblikket er presset:
funksjonen erLeftTriggerPressed () var leftTrigger = gamepad.buttons [6]; hvis (! leftTrigger) return false; hvis (typeof (leftTrigger) === "objekt") return leftTrigger.pressed; returnere (leftTrigger === 1.0);
PxGamepad-klassen inneholder en oppdateringsmetode som samler staten for alle standardknappene og -aksene. Så bestemmer om leftTrigger er trykket er like enkelt som å få tilgang til en boolsk eiendom:
var isPressed = pxgamepad.buttons.leftTrigger;
Akser i standard Gamepad API leveres også som en rekke numeriske verdier. For eksempel, her er koden for å få normaliserte x- og y-verdier for venstre pinne:
var leftStickX = gamepad.axes [0]; var leftStickY = gamepad.axes [1];
D-puten er et spesielt tilfelle, fordi det regnes som et sett med fire knapper av HTML5 Gamepad API (indekser 12, 1. 3, 14, og 15). Det er imidlertid vanlig for utviklere å la D-puten brukes på samme måte som en av pinnene. PxGamepad gir knappinformasjon for D-puten, men også syntetiserer akseinformasjon som om D-puten var en pinne:
var dpadX = pxgamepad.dpad.x; var dpadY = pxgamepad.dpad.y;
En annen begrensning av HTML5 Gamepad API er at det ikke gir hendelser på knappnivå. Det er vanlig at en spillutvikler ønsker å aktivere en enkelt hendelse for å trykke på en knapp. I Flight Arcade er tenn- og bremseknappene gode eksempler. PxGamepad ser på knappstatus og lar oppringere registrere seg for varslinger ved frigivelse av knappen.
Accentsconagua
gamepad.on ('rightTrigger', funksjon () console.log ('right trigger sparked!'););Her er en fullstendig liste over navngitte knapper som støttes av PxGamepad:
enbxyleftToprightTopleftTriggerrightTriggerå velgestartleftStickrightStickdpadUpdpadDowndpadLeftdpadRightDet er to metoder for å hente gamepad-objektet. Gamepad API legger til en metode for navigeringsobjektet som heter getGamepads (), som returnerer en rekke av alle tilkoblede gamepads. Det er også nytt gamepadconnected og gamepaddisconnected hendelser som avfyres når en ny gamepad har blitt koblet til eller frakoblet. For eksempel, her er hvordan PxGamepad hjelperen lagrer den sist tilkoblede gamepad:
// begynner å lytte til gamepad-tilkoblingshendelser PxGamepad.prototype.start = function () this.reset (); this.listeners = 'gamepadconnected': jQuery.proxy (funksjon (e) var gamepad = e.originalEvent.gamepad; hvis (gamepad.mapping === 'standard') this.connectedGamepad = gamepad;) 'gamepaddisconnected': jQuery.proxy (funksjon (e) var gamepad = e.originalEvent.gamepad; hvis (this.connectedGamepad === gamepad) this.connectedGamepad = null;; jQuery (vindu) .on (this.listeners); ;
Og her er hjelperen til å hente den første standard gamepad ved hjelp av navigator.getGamepads () API:
// hjelper for å hente den nåværende tilkoblede gamepad PxGamepad.prototype.getGamepad = function () // standard til tilkoblet gamepad var gp = this.connectedGamepad; hvis (! gp) // hente alle tilgjengelige gamepads var gamepads; hvis (navigator.getGamepads) gamepads = navigator.getGamepads (); annet hvis (navigator.webkitGetGamepads) gamepads = navigator.webkitGetGamepads (); // se etter en standard kartlagt gamepad hvis (gamepads) for (var i = 0, len = gamepads.length; i < len; i++) if (gamepads[i].mapping === 'standard') gp = gamepads[i]; break; return gp; ;
PxGamepad hjelperklasse er designet for det enkle scenariet der en enkelt bruker spiller et spill med en standard kartlagt gamepad. De nyeste nettleserne, som Microsoft Edge, støtter fullt ut W3C Gamepad API. Men eldre versjoner av noen andre nettlesere støttet bare deler av den nye spesifikasjonen. PxGamepad lytter til gamepadconnected hendelser og faller tilbake for å spørre om listen over alle spillene hvis nødvendig.
Mens PxGamepad er fokusert på det enkle, vanligste scenariet, er Gamepad API fullt ut i stand til å støtte flere spillere, hver med sin egen gamepad. En mulig forbedring for PxGamepad kan være å gi en leder-stil klasse som sporer tilkobling av flere gamepads og kartlegger dem til flere spillere i et spill. En annen kan være å la brukerne omforme eller tilpasse knappfunksjonene på deres gamepads.
Vi er også glade for Potensialet i Gamepad API for ikke-spill scenarier. Med veksten av WebGL ser vi en rekke innovative bruksområder for 3D på nettet. Det kan bety å utforske Mt. Everest-regionen i 3D med GlacierWorks, eller se Assyrian-samlingen av British Museum takket være CyArks innsats for å digitalbevare viktige verdenssider og gjenstander..
Under utviklingen av Flight Arcade brukte vi ofte Blender og andre 3D-verktøy til å behandle modeller for Babylon.js. Noen utviklere og artister bruker en enhet kalt en 3D-mus for å hjelpe til med å manipulere og navigere i 3D-modeller. Disse enhetene sporer bevegelse av en enkelt knapp gjennom seks akser! De gjør det veldig enkelt og raskt å manipulere modeller. Utover gaming, brukes de i en rekke interessante applikasjoner fra ingeniør til medisinsk bildebehandling. Mens du tilføyde gamepad-støtte til Flight Arcade, ble vi overrasket over å vite at Gamepad API oppdaget vårt 3D SpaceMouse og ga bevegelsesdata for alle seks aksene!
Det er spennende å forestille seg alle mulighetene som den nye Gamepad API tilbyr. Nå er det flott å eksperimentere med den nye Gamepad API og legge til presisjonskontroll og mye moro til ditt neste spill eller program!
Microsoft har en mengde gratis læring på mange open source JavaScript-emner, og vi har et oppdrag å skape mye mer med Microsoft Edge. Her er noen å sjekke ut:
Og noen gratis verktøy for å komme i gang: Visual Studio Code, Azure Trial og testverktøy for kryss-leser-alt tilgjengelig for Mac, Linux eller Windows.
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ .
