GamePad API: En Omfattende Guide til Håndtering av Spelkontroll-input

GamePad API-et gir en standardisert måte å få tilgang til spillkontrollere direkte fra nettlesere. Dette åpner for spennende muligheter for å skape engasjerende og interaktive nettbaserte spill og applikasjoner. Denne omfattende guiden vil lede deg gjennom alt du trenger å vite for å utnytte GamePad API-et effektivt, fra grunnleggende oppsett til avanserte teknikker.

Hva er GamePad API-et?

GamePad API-et er et JavaScript-API som lar nettapplikasjoner oppdage og respondere på input fra spillkontrollere (gamepads, joysticker, osv.). Det gjør det mulig for utviklere å bygge spill og interaktive opplevelser som kan styres med standard spillkontroll-input, som knapper, akser (analoge stikker) og triggere.

Før GamePad API-et var håndtering av spillkontroll-input i nettlesere en fragmentert og upålitelig opplevelse, som ofte krevde nettleserspesifikke plugins eller komplekse løsninger. GamePad API-et gir en konsistent løsning på tvers av nettlesere, noe som forenkler prosessen med å integrere støtte for spillkontrollere i nettapplikasjoner.

Nettleserkompatibilitet

GamePad API-et er bredt støttet i moderne nettlesere, inkludert:

• Chrome (desktop og mobil)
• Firefox (desktop og mobil)
• Safari (desktop og mobil, med noen begrensninger)
• Edge
• Opera

Selv om nettleserstøtten generelt er god, kan det være små forskjeller i implementering og funksjonstilgjengelighet på tvers av ulike nettlesere. Det er alltid lurt å teste applikasjonen din i flere nettlesere for å sikre konsistent oppførsel.

Kom i gang med GamePad API-et

Her er en trinnvis guide for å komme i gang med GamePad API-et:

1. Oppdage tilkobling av spillkontroller

Metoden navigator.getGamepads() returnerer en matrise med Gamepad-objekter, som representerer de tilkoblede spillkontrollerne. Nettleseren vil utløse gamepadconnected- og gamepaddisconnected-hendelser når spillkontrollere kobles til eller fra. Du kan lytte etter disse hendelsene for å oppdatere applikasjonens tilstand.

            window.addEventListener("gamepadconnected", function(e) {
  console.log("Spillkontroll koblet til ved indeks %d: %s. %d knapper, %d akser.",
    e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length);
  gamepadHandler(e, true);
});

window.addEventListener("gamepaddisconnected", function(e) {
  console.log("Spillkontroll koblet fra ved indeks %d: %s",
    e.gamepad.index, e.gamepad.id);
  gamepadHandler(e, false);
});

function gamepadHandler(event, connecting) {
  var gamepad = event.gamepad;
  if (connecting) {
    gamepads[gamepad.index] = gamepad;
  } else {
    delete gamepads[gamepad.index];
  }
}

var gamepads = {};

            

              
                Copy
              
            
          

Dette kodeutdraget setter opp hendelseslyttere for gamepadconnected- og gamepaddisconnected-hendelser. Funksjonen gamepadHandler oppdaterer et gamepads-objekt for å holde styr på tilkoblede spillkontrollere.

2. Polling for tilstanden til spillkontrolleren

GamePad API-et er primært hendelsesdrevet, men for kontinuerlig input (som bevegelse av analoge stikker), må du polle tilstanden til spillkontrolleren i en requestAnimationFrame-løkke. Dette innebærer å kalle navigator.getGamepads() gjentatte ganger og undersøke egenskapene buttons og axes til Gamepad-objektene.

            function update() {
  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
  for (var i = 0; i < gamepads.length; i++) {
    var gp = gamepads[i];
    if (gp) {
      // Behandle spillkontroll-input her
      for (var j = 0; j < gp.buttons.length; j++) {
        if (gp.buttons[j].pressed) {
          console.log("Knapp " + j + " trykket");
        }
      }
      for (var j = 0; j < gp.axes.length; j++) {
        console.log("Akse " + j + ": " + gp.axes[j]);
      }
    }
  }
  requestAnimationFrame(update);
}

requestAnimationFrame(update);

            

              
                Copy
              
            
          

Dette kodeutdraget oppdaterer kontinuerlig tilstanden til spillkontrolleren ved hjelp av requestAnimationFrame. Det itererer gjennom de tilkoblede spillkontrollerne og sjekker tilstanden til knappene og aksene deres.

3. Forstå Egenskapene til en Gamepad

Hvert Gamepad-objekt har følgende nøkkelegenskaper:

• id: En streng som identifiserer spillkontrolleren (f.eks. "Xbox Controller (XInput STANDARD GAMEPAD)").
• index: Indeksen til spillkontrolleren i navigator.getGamepads()-matrisen.
• connected: En boolsk verdi som indikerer om spillkontrolleren er tilkoblet.
• buttons: En matrise med GamepadButton-objekter, som representerer knappene på spillkontrolleren.
• axes: En matrise med tall, som representerer aksene på spillkontrolleren (analoge stikker og triggere).
• mapping: En streng som indikerer knappekartleggingen til spillkontrolleren (enten "standard" eller "").

4. Jobbe med knapper på spillkontrolleren

Hvert GamepadButton-objekt har følgende egenskaper:

• pressed: En boolsk verdi som indikerer om knappen er trykket ned.
• value: Et tall mellom 0 og 1 som representerer trykket som påføres knappen (for trykkfølsomme knapper som triggere).

Du kan få tilgang til tilstanden til en knapp ved hjelp av dens indeks i buttons-matrisen. For eksempel vil gamepad.buttons[0].pressed returnere true hvis den første knappen er trykket ned.

5. Jobbe med akser på spillkontrolleren

Matrisen axes inneholder tall som representerer verdiene til spillkontrollerens analoge stikker og triggere. Verdiene varierer vanligvis fra -1 til 1, der -1 representerer posisjonen helt til venstre/øverst og 1 representerer posisjonen helt til høyre/nederst.

Du kan få tilgang til verdien av en akse ved hjelp av dens indeks i axes-matrisen. For eksempel vil gamepad.axes[0] returnere den horisontale posisjonen til venstre analoge stikke.

Standard knappekartlegging for spillkontroller

GamePad API-et definerer en "standard" knappekartlegging som gir en konsistent måte å få tilgang til vanlige knapper og akser på spillkontrollere, uavhengig av den spesifikke modellen. Denne kartleggingen identifiseres ved at egenskapen mapping er satt til "standard".

Standard knappekartlegging inkluderer følgende knapper:

• Knapp 0: A (vanligvis knappen nederst til høyre)
• Knapp 1: B (vanligvis knappen til høyre)
• Knapp 2: X (vanligvis knappen til venstre)
• Knapp 3: Y (vanligvis knappen øverst)
• Knapp 4: Venstre skulderknapp (LB)
• Knapp 5: Høyre skulderknapp (RB)
• Knapp 6: Venstre trigger (LT)
• Knapp 7: Høyre trigger (RT)
• Knapp 8: Select (eller Back)
• Knapp 9: Start
• Knapp 10: Venstre stikke-knapp (LS)
• Knapp 11: Høyre stikke-knapp (RS)
• Knapp 12: D-pad Opp
• Knapp 13: D-pad Ned
• Knapp 14: D-pad Venstre
• Knapp 15: D-pad Høyre
• Knapp 16: Guide (eller Home)

Standard knappekartlegging inkluderer følgende akser:

• Akse 0: Venstre stikke, horisontal akse (-1 = venstre, 1 = høyre)
• Akse 1: Venstre stikke, vertikal akse (-1 = opp, 1 = ned)
• Akse 2: Høyre stikke, horisontal akse (-1 = venstre, 1 = høyre)
• Akse 3: Høyre stikke, vertikal akse (-1 = opp, 1 = ned)

Det er viktig å merke seg at ikke alle spillkontrollere støtter standardkartleggingen. Spillkontrollere som ikke støtter standardkartleggingen vil ha en tom streng for mapping-egenskapen, og du må bruke id-egenskapen for å identifisere spillkontrolleren og kartlegge knappene og aksene deretter.

Håndtering av ikke-standard spillkontrollere

Når du arbeider med ikke-standard spillkontrollere, må du identifisere spillkontrolleren basert på dens id-egenskap og lage en tilpasset kartlegging for knappene og aksene. Dette kan være en utfordrende oppgave, da det finnes mange forskjellige modeller av spillkontrollere, hver med sitt unike oppsett for knapper og akser.

Her er noen strategier for håndtering av ikke-standard spillkontrollere:

• Database for spillkontrollere: Lag en database med id-strenger for spillkontrollere og deres tilsvarende knapp- og aksekartlegginger. Dette lar deg automatisk kartlegge knapper og akser for kjente spillkontrollere.
• Brukerkonfigurasjon: La brukere konfigurere knapp- og aksekartleggingene for sine spillkontrollere. Dette gir fleksibilitet for brukere med uvanlige spillkontrollere.
• Heuristisk kartlegging: Bruk heuristikk for å gjette knapp- og aksekartleggingene basert på antall knapper og akser og deres typiske bruksmønstre.

Å implementere støtte for et bredt spekter av spillkontrollere kan være et betydelig arbeid. Vurder å fokusere på å støtte de mest populære modellene først og gradvis legge til støtte for flere spillkontrollere etter behov.

Avanserte Teknikker

1. Dødsoner

Analoge stikker har ofte en "dødsone" rundt senterposisjonen der den rapporterte verdien ikke er null selv når stikken ikke berøres. Dette kan forårsake uønsket bevegelse eller risting i spillet ditt. For å løse dette kan du implementere en dødsone ved å sette akseverdien til null hvis den faller innenfor et visst område rundt null.

            function applyDeadZone(value, threshold) {
  var percentage = (Math.abs(value) - threshold) / (1 - threshold);
  if (percentage < 0) {
    percentage = 0;
  }
  return percentage * (value > 0 ? 1 : -1);
}

var axisValue = gamepad.axes[0];
var deadZoneThreshold = 0.1;
var adjustedAxisValue = applyDeadZone(axisValue, deadZoneThreshold);

            

              
                Copy
              
            
          

Dette kodeutdraget anvender en dødsone på akseverdien. Hvis absoluttverdien av aksen er mindre enn deadZoneThreshold, vil den justerte verdien bli null. Ellers vil den justerte verdien bli skalert til området 0-1, mens fortegnet til den opprinnelige verdien bevares.

2. Eksponentiell utjevning

Input fra analoge stikker kan noen ganger være støyete, noe som forårsaker rykkete eller uforutsigbar bevegelse. For å jevne ut inputen kan du bruke eksponentiell utjevning. Dette innebærer å ta gjennomsnittet av den nåværende inputverdien og den forrige utjevnede verdien, og gi mer vekt til den forrige verdien.

            var smoothedAxisValue = 0;
var smoothingFactor = 0.1;

function smoothAxisValue(axisValue) {
  smoothedAxisValue = smoothingFactor * axisValue + (1 - smoothingFactor) * smoothedAxisValue;
  return smoothedAxisValue;
}

var axisValue = gamepad.axes[0];
var smoothedValue = smoothAxisValue(axisValue);

            

              
                Copy
              
            
          

Dette kodeutdraget anvender eksponentiell utjevning på akseverdien. smoothingFactor bestemmer vekten som gis til den nåværende verdien. En mindre utjevningsfaktor vil resultere i jevnere, men mer forsinket input.

3. Knapp-debounce

Knapper kan noen ganger utløse flere hendelser når de trykkes eller slippes på grunn av mekanisk sprett. Dette kan forårsake utilsiktet oppførsel i spillet ditt. For å løse dette kan du implementere knapp-debounce. Dette innebærer å ignorere knapphendelser som skjer innenfor en kort tidsperiode etter en tidligere hendelse.

            var buttonStates = {};
var debounceDelay = 100; // millisekunder

function handleButtonPress(buttonIndex) {
  if (!buttonStates[buttonIndex] || Date.now() - buttonStates[buttonIndex].lastPress > debounceDelay) {
    console.log("Knapp " + buttonIndex + " trykket (debounced)");
    buttonStates[buttonIndex] = { lastPress: Date.now() };
    // Utfør handling her
  }
}

for (var j = 0; j < gp.buttons.length; j++) {
  if (gp.buttons[j].pressed) {
    handleButtonPress(j);
  }
}

            

              
                Copy
              
            
          

Dette kodeutdraget implementerer knapp-debounce. Det holder styr på sist gang hver knapp ble trykket. Hvis en knapp trykkes igjen innenfor debounceDelay, blir hendelsen ignorert.

Tilgjengelighetshensyn

Når du utvikler spill med støtte for spillkontrollere, er det viktig å ta hensyn til tilgjengelighet for spillere med funksjonsnedsettelser. Her er noen tips for å gjøre spillet ditt mer tilgjengelig:

• Konfigurerbare kontroller: La spillere tilpasse knapp- og aksekartleggingene for å passe deres individuelle behov.
• Alternative inputmetoder: Tilby alternative inputmetoder, som tastatur og mus, for spillere som ikke kan bruke en spillkontroller.
• Tydelig visuell tilbakemelding: Gi tydelig visuell tilbakemelding for alle handlinger, slik at spillere enkelt kan forstå hva som skjer i spillet.
• Justerbar vanskelighetsgrad: Tilby justerbare vanskelighetsgrader for å imøtekomme spillere med ulike ferdighetsnivåer.

Ved å følge disse retningslinjene kan du skape spill som er underholdende og tilgjengelige for et bredere spekter av spillere.

GamePad API og virtuell virkelighet

GamePad API-et er også relevant i konteksten av WebVR (Virtual Reality på nettet). VR-kontrollere, som ofte brukes sammen med VR-headset, blir ofte eksponert gjennom GamePad API-et. Dette lar utviklere bygge VR-opplevelser som bruker disse kontrollerne for interaksjon.

Når man utvikler VR-applikasjoner, kan Gamepad-objektet ha tilleggsegenskaper knyttet til sin positur (posisjon og orientering) i 3D-rom. Disse egenskapene får man tilgang til via pose-egenskapen, som returnerer et GamePadPose-objekt. GamePadPose-objektet gir informasjon om kontrollerens posisjon, orientering (som en kvaternion), lineær hastighet og vinkelhastighet.

Å bruke GamePad API-et med WebVR gjør det mulig for utviklere å skape engasjerende og interaktive VR-opplevelser som responderer på brukerens bevegelser og interaksjoner med VR-kontrollerne.

Eksempel: Enkel tester for spillkontroller

Her er et enkelt eksempel på en tester for spillkontroller som viser tilstanden til de tilkoblede spillkontrollerne:

            <!DOCTYPE html>
<html>
<head>
  <title>Spillkontroll-tester</title>
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Spillkontroll-tester</h1>
  <div id="gamepads"></div>

  <script>
    var gamepadsDiv = document.getElementById("gamepads");
    var gamepads = {};

    function updateGamepads() {
      var gamepadList = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);

      gamepadsDiv.innerHTML = "";

      for (var i = 0; i < gamepadList.length; i++) {
        var gamepad = gamepadList[i];
        if (gamepad) {
          var gamepadDiv = document.createElement("div");
          gamepadDiv.innerHTML = "<h2>Spillkontroll " + i + ": " + gamepad.id + "</h2>";

          var buttonsDiv = document.createElement("div");
          buttonsDiv.innerHTML = "<h3>Knapper</h3>";
          for (var j = 0; j < gamepad.buttons.length; j++) {
            var button = gamepad.buttons[j];
            var buttonDiv = document.createElement("div");
            buttonDiv.innerHTML = "Knapp " + j + ": Trykket = " + button.pressed + ", Verdi = " + button.value;
            buttonsDiv.appendChild(buttonDiv);
          }
          gamepadDiv.appendChild(buttonsDiv);

          var axesDiv = document.createElement("div");
          axesDiv.innerHTML = "<h3>Akser</h3>";
          for (var j = 0; j < gamepad.axes.length; j++) {
            var axisValue = gamepad.axes[j];
            var axisDiv = document.createElement("div");
            axisDiv.innerHTML = "Akse " + j + ": " + axisValue;
            axesDiv.appendChild(axisDiv);
          }
          gamepadDiv.appendChild(axesDiv);

          gamepadsDiv.appendChild(gamepadDiv);
        }
      }
    }

    function update() {
      updateGamepads();
      requestAnimationFrame(update);
    }

    window.addEventListener("gamepadconnected", function(e) {
      console.log("Spillkontroll koblet til ved indeks %d: %s. %d knapper, %d akser.",
        e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length);
      gamepads[e.gamepad.index] = e.gamepad;
    });

    window.addEventListener("gamepaddisconnected", function(e) {
      console.log("Spillkontroll koblet fra ved indeks %d: %s",
        e.gamepad.index, e.gamepad.id);
      delete gamepads[e.gamepad.index];
    });

    requestAnimationFrame(update);
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Dette eksempelet lager en enkel nettside som viser informasjon om de tilkoblede spillkontrollerne, inkludert deres ID, knappestatus og akseverdier. Du kan bruke dette eksempelet som et utgangspunkt for å teste og feilsøke dine egne GamePad API-applikasjoner.

Beste praksis

• Poll for tilstanden til spillkontrolleren: Bruk requestAnimationFrame til å polle tilstanden til spillkontrolleren regelmessig for å sikre jevn og responsiv input.
• Håndter frakoblinger: Lytt etter gamepaddisconnected-hendelsen og håndter frakoblinger av spillkontrollere på en elegant måte for å unngå feil.
• Bruk standardkartlegging: Bruk standardkartleggingen for spillkontrollere når det er mulig for å gi en konsistent opplevelse på tvers av forskjellige spillkontrollere.
• Tilby konfigurasjonsalternativer: La brukere konfigurere knapp- og aksekartleggingene for å passe deres individuelle behov.
• Test på flere nettlesere: Test applikasjonen din på flere nettlesere for å sikre konsistent oppførsel.
• Vurder tilgjengelighet: Design spillet ditt med tilgjengelighet i tankene for å imøtekomme spillere med funksjonsnedsettelser.

Konklusjon

GamePad API-et gir en kraftig og standardisert måte å få tilgang til spillkontrollere fra nettlesere. Ved å mestre GamePad API-et kan du skape engasjerende og interaktive nettbaserte spill og applikasjoner som responderer på brukerinput fra en rekke spillkontrollere.

Denne guiden har gitt en omfattende oversikt over GamePad API-et, og dekker alt fra grunnleggende oppsett til avanserte teknikker. Ved å følge tipsene og beste praksis som er skissert i denne guiden, kan du effektivt integrere støtte for spillkontrollere i dine nettapplikasjoner og skape engasjerende opplevelser for brukerne dine.

Husk å teste applikasjonen din grundig på forskjellige nettlesere og spillkontrollere for å sikre konsistent oppførsel. Vurder tilgjengelighet for spillere med funksjonsnedsettelser, og tilby konfigurasjonsalternativer slik at brukere kan tilpasse kontrollene etter eget ønske. Med litt innsats kan du skape spill som er underholdende og tilgjengelige for et bredt spekter av spillere.

Videre ressurser

• MDN Web Docs: Gamepad API
• W3C Gamepad-spesifikasjon
• Gamepad Test: Online spillkontroll-tester