Share
Il gioco sul Web ha fatto molta strada con le tecnologie HTML5 come Canvas, WebGL e WebAudio. Ora è possibile produrre grafica e audio ad alta fedeltà all'interno del browser. Tuttavia, per fornire una vera esperienza di gioco, sono necessari dispositivi di input progettati per i giochi. L'API Gamepad è uno standard proposto del W3C ed è progettata per fornire un'API coerente tra i vari browser.
L'API Gamepad consente agli utenti di collegare dispositivi come un controller Xbox a un computer e utilizzarli per esperienze basate su browser! La nostra classe helper, PxGamepad, quindi mappa gli indici di pulsanti e assi ai nomi più familiari come indicato sul controller Xbox.
Se disponi di un gamepad, prova a collegarlo al computer, fai clic sull'immagine del controller Xbox in basso e premi un pulsante. Vedrai che il controller si illumina per riflettere ogni movimento che fai!
Questo tutorial è il terzo di una serie su Flight Arcade, creato per dimostrare ciò che è possibile sulla piattaforma web e nel nuovo motore di rendering Edge Edge e EdgeHTML. Puoi trovare i primi due articoli su WebGL e Web API, oltre a codice interattivo ed esempi per questo articolo, su flightarcade.com e qui su Tuts+.
L'API Gamepad è progettata in modo intelligente con la flessibilità in mente. A un livello base, fornisce l'accesso a pulsanti e assi. I valori dei pulsanti variano da 0 a 1 incluso, mentre gli assi vanno da -1 a 1 compreso. Tutti i valori sono normalizzati a questi intervalli in modo che gli sviluppatori possano aspettarsi un comportamento coerente tra i dispositivi.
L'oggetto Gamepad fornisce informazioni dettagliate sul produttore e sul modello del gamepad collegato. Più utile è una proprietà "mapping" che descrive il tipo generale di gamepad. Attualmente l'unica mappatura supportata è "standard", che corrisponde al layout del controller utilizzato da molte console di gioco popolari come Xbox.
La mappatura del controller standard ha due stick, ognuno dei quali è rappresentato da due assi (xey). Include anche un D-pad, quattro pulsanti di gioco, pulsanti in alto e trigger: tutti rappresentati come pulsanti nell'API del gamepad.
Gli attuali controller Xbox hanno lo stato dei pulsanti come entrambi 0 (stato normale) o 1 (Premuto). Tuttavia, si potrebbe immaginare che i futuri controllori potrebbero segnalare la quantità di forza applicata a ogni pressione del pulsante.
Anche il D-pad Xbox riporta valori discreti (0 o 1), ma gli stick forniscono valori continui su tutto il range dell'asse (-1 a 1). Questa precisione aggiuntiva rende molto più semplice far volare l'aereo nelle nostre missioni Arcade di volo.
L'array di pulsanti e assi forniti dall'API Gamepad è lungimirante e perfetto come API di basso livello. Tuttavia, quando si scrive un gioco, è bello avere una rappresentazione di livello superiore di un gamepad standard come il controller Xbox One. Abbiamo creato una classe helper denominata PxGamepad che associa gli indici di pulsanti e assi ai nomi più familiari come etichettati sul controller Xbox.
Passerò attraverso alcuni pezzi interessanti della biblioteca, ma il codice sorgente completo (licenza MIT) è disponibile su GitHub.
L'API standard di Gamepad fornisce lo stato del pulsante come una serie di pulsanti. Ancora una volta, questa API è progettata per la flessibilità, consentendo ai controllori con vari conteggi di pulsanti. Tuttavia, quando si scrive un gioco, è molto più facile scrivere e leggere il codice che utilizza i nomi dei pulsanti mappati standard.
Ad esempio, con l'API Gamepad HTML5, ecco il codice per verificare se il trigger sinistro è attualmente premuto:
function isLeftTriggerPressed () var leftTrigger = gamepad.buttons [6]; if (! leftTrigger) return false; if (typeof (leftTrigger) === "object") return leftTrigger.pressed; return (leftTrigger === 1.0);
La classe PxGamepad contiene un metodo di aggiornamento che raccoglierà lo stato per tutti i pulsanti e gli assi mappati standard. Quindi determinare se il leftTrigger viene premuto è semplice come accedere a una proprietà booleana:
var isPressed = pxgamepad.buttons.leftTrigger;
Gli assi nell'API gamepad standard sono anche forniti come una matrice di valori numerici. Ad esempio, ecco il codice per ottenere i valori x e y normalizzati per la levetta sinistra:
var leftStickX = gamepad.axes [0]; var leftStickY = gamepad.axes [1];
Il D-pad è un caso speciale, perché è considerato un insieme di quattro pulsanti dell'API HTML5 Gamepad (indici 12, 13, 14, e 15). Tuttavia, è comune per gli sviluppatori consentire l'uso del D-pad allo stesso modo di uno dei bastoni. PxGamepad fornisce informazioni sui pulsanti per il D-pad, ma sintetizza anche le informazioni sugli assi come se il D-pad fosse un bastone:
var dpadX = pxgamepad.dpad.x; var dpadY = pxgamepad.dpad.y;
Un'altra limitazione dell'API gamepad HTML5 è che non fornisce eventi a livello di pulsante. È normale che uno sviluppatore di giochi desideri attivare un singolo evento per la pressione di un pulsante. In Flight Arcade, i pulsanti di accensione e freno sono buoni esempi. PxGamepad controlla lo stato del pulsante e consente ai chiamanti di registrarsi per le notifiche sul rilascio dei pulsanti.
Accentsconagua
gamepad.on ('rightTrigger', function () console.log ('right trigger fired!'););Ecco l'elenco completo dei pulsanti con nome supportati da PxGamepad:
unBXyleftToprightTopleftTriggerrightTriggerselezionareinizioleftStickrightStickdpadUpdpadDowndpadLeftdpadRightEsistono due metodi per recuperare l'oggetto gamepad. L'API Gamepad aggiunge un metodo all'oggetto Navigator denominato getGamepads (), che restituisce una matrice di tutti i gamepad collegati. Ci sono anche nuovi gamepadconnected e gamepaddisconnected eventi che vengono generati ogni volta che un nuovo gamepad è stato collegato o disconnesso. Ad esempio, ecco come l'helper PxGamepad memorizza l'ultimo gamepad connesso:
// inizia ad ascoltare gli eventi di connessione del gamepad 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 (function (e) var gamepad = e.originalEvent.gamepad; if (this.connectedGamepad === gamepad) this.connectedGamepad = null;; jQuery (finestra) .ON (this.listeners); ;
Ed ecco l'aiutante per recuperare il primo gamepad standard usando il navigator.getGamepads () API:
// helper per recuperare il gamepad attualmente connesso PxGamepad.prototype.getGamepad = function () // default per gamepad connesso var gp = this.connectedGamepad; if (! gp) // recupera tutti i gamepad disponibili var gamepads; if (navigator.getGamepads) gamepads = navigator.getGamepads (); else if (navigator.webkitGetGamepads) gamepads = navigator.webkitGetGamepads (); // cerca un gamepad mappato standard if (gamepads) per (var i = 0, len = gamepads.length; i < len; i++) if (gamepads[i].mapping === 'standard') gp = gamepads[i]; break; return gp; ;
La classe helper PxGamepad è progettata per lo scenario semplice in cui un singolo utente sta giocando con un gamepad mappato standard. Gli ultimi browser, come Microsoft Edge, supportano completamente l'API del gamepad W3C. Tuttavia, le versioni precedenti di alcuni altri browser supportavano solo parti delle specifiche emergenti. PxGamepad ascolta il gamepadconnected eventi e ricade alle query per l'elenco di tutti i gamepad, se necessario.
Mentre PxGamepad è focalizzato sullo scenario semplice e più comune, l'API Gamepad è in grado di supportare più giocatori, ognuno con il proprio gamepad. Un possibile miglioramento di PxGamepad potrebbe essere quello di fornire una classe in stile manager che tiene traccia della connessione di più gamepad e li mappa su più giocatori in un gioco. Un altro potrebbe essere quello di consentire agli utenti di rimappare o personalizzare le funzioni dei pulsanti sui loro gamepad.
Siamo inoltre entusiasti del potenziale dell'API Gamepad per scenari non di gioco. Con l'avvento di WebGL, stiamo assistendo a una varietà di usi innovativi per il 3D sul web. Ciò potrebbe significare esplorare il Monte. La regione dell'Everest in 3D con GlacierWorks o la collezione Assyrian del British Museum grazie agli sforzi di CyArk per preservare digitalmente importanti siti e manufatti del mondo.
Durante lo sviluppo di Flight Arcade, abbiamo utilizzato frequentemente Blender e altri strumenti 3D per elaborare modelli per Babylon.js. Alcuni sviluppatori e artisti usano un dispositivo chiamato mouse 3D per aiutare a manipolare e navigare modelli 3D. Questi dispositivi tracciano il movimento di una singola manopola attraverso sei assi! Rendono molto facile e veloce manipolare i modelli. Oltre ai giochi, vengono utilizzati in una varietà di applicazioni interessanti dall'ingegneria alla diagnostica per immagini. Aggiungendo il supporto gamepad a Flight Arcade, siamo rimasti sorpresi nell'apprendere che l'API Gamepad ha rilevato il nostro SpaceMouse 3D e fornito i dati di movimento per tutti e sei gli assi!
È emozionante immaginare tutte le possibilità offerte dalla nuova API di Gamepad. Ora è un ottimo momento per sperimentare con la nuova API Gamepad e aggiungere controllo di precisione e molto divertimento al tuo prossimo gioco o applicazione!
Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge. Ecco alcuni da verificare:
E alcuni strumenti gratuiti per iniziare: Visual Studio Code, Azure Trial e strumenti di test cross-browser, tutti disponibili per Mac, Linux o Windows.
Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ .
