Share
Jocurile de pe web au parcurs un drum lung cu tehnologii HTML5, cum ar fi Canvas, WebGL și WebAudio. Acum este posibil să se producă grafică și sunet de înaltă fidelitate în browser. Cu toate acestea, pentru a oferi o experiență reală de joc, aveți nevoie de dispozitive de intrare proiectate pentru jocuri. API-ul Gamepad este un standard propus de W3C și este conceput pentru a oferi un API consistent în toate browserele.
API-ul Gamepad permite utilizatorilor să conecteze dispozitive precum un controler Xbox pe un computer și să le utilizeze pentru experiențe bazate pe browser! Clasa noastră de ajutor, PxGamepad, apoi hărți indicii buton și axe la cele mai cunoscute nume, așa cum sunt etichetate pe controlerul Xbox.
Dacă aveți un gamepad, încercați să îl conectați la computer, faceți clic pe imaginea controlerului Xbox de mai jos și apăsați un buton. Veți vedea că controlerul se aprinde pentru a reflecta fiecare mișcare pe care o faceți!
Acest tutorial este cel de-al treilea dintr-o serie pe platforma Flight Arcade construită pentru a demonstra ce este posibil pe platforma web și în noul browser Microsoft Edge și în motorul de redare EdgeHTML. Puteți găsi primele două articole despre WebGL și API-ul Web, plus cod și exemple interactive pentru acest articol, la flightarcade.com și aici pe Tuts+.
Gamepad API este conceput inteligent cu flexibilitate în minte. La nivel de bază, acesta oferă acces la butoane și axe. Valorile butoanelor variază de la 0 la 1 inclusiv, în timp ce axele variază de la -1 la 1 inclusiv. Toate valorile sunt normalizate la aceste intervale, astfel încât dezvoltatorii pot aștepta un comportament consecvent între dispozitive.
Obiectul Gamepad furnizează informații detaliate despre producător și modelul gamepad-ului conectat. Mai util este o proprietate "mapare" care descrie tipul general de gamepad. În prezent, singura cartografiere acceptată este "standard", ceea ce corespunde aspectului controlerului folosit de multe console de jocuri populare, cum ar fi Xbox.
Maparea standard a controlerului are două bastoane, fiecare reprezentând două axe (x și y). Acesta include, de asemenea, un D-pad, patru butoane de joc, butoane de top și declanșatoare: toate reprezentate ca butoane în API-ul Gamepad.
Controlorii actuali ai contului Xbox raportează starea butonului fie 0 (stare normală) sau 1 (presat). Cu toate acestea, ați putea să vă imaginați că viitorii controlori ar putea raporta cantitatea de forță aplicată fiecărui buton apăsat.
Xbox D-pad raportează, de asemenea, valori discrete (0 sau 1), dar bastoanele oferă valori continue pe întreaga gamă de axe (-1 la 1). Această precizie suplimentară face mult mai ușor să zboare cu avionul în misiunile noastre de Flight Arcade.
Gama de butoane și axe furnizate de API-ul Gamepad este gândire înainte și perfectă ca API de nivel scăzut. Cu toate acestea, atunci când scrieți un joc, este bine să aveți o reprezentare la nivel mai înalt a unui gamepad standard, cum ar fi controlerul Xbox One. Am creat o clasă helper numită PxGamepad care cartografiază indiciile de butoane și axe pe cele mai cunoscute nume așa cum sunt etichetate pe controlerul Xbox.
Voi trece prin câteva piese interesante ale bibliotecii, dar codul sursă complet (licența MIT) este disponibil pe GitHub.
API-ul Gamepad standard oferă starea butonului ca o serie de butoane. Din nou, acest API este proiectat pentru flexibilitate, permițând controlorilor cu numeroase numere de butoane. Cu toate acestea, atunci când scrieți un joc, este mult mai ușor să scrieți și să citiți codul care utilizează numele butoanelor standard cartografiate.
De exemplu, cu API-ul Gamepad HTML5, aici este codul pentru a verifica dacă declanșatorul stânga este apăsat în prezent:
funcția esteLeftTriggerPressed () var leftTrigger = gamepad.buttons [6]; dacă (! leftTrigger) return false; dacă (typeof (leftTrigger) === "obiect") return leftTrigger.pressed; retur (leftTrigger === 1.0);
Clasa PxGamepad conține o metodă de actualizare care va aduna starea pentru toate butoanele și axele mapate standard. Deci, determinarea dacă leftTrigger este presat este la fel de simplu ca accesarea unei proprietăți booleene:
var isPressed = pxgamepad.buttons.leftTrigger;
Axele din API-ul Gamepad standard sunt de asemenea furnizate ca o serie de valori numerice. De exemplu, aici este codul pentru a obține valorile normalizate x și y pentru stick-ul stâng:
var leftStickX = gamepad.axes [0]; var leftStickY = gamepad.axes [1];
D-pad-ul este un caz special, deoarece este considerat a fi un set de patru butoane de API Gamepad HTML5 (indici 12, 13, 14, și 15). Cu toate acestea, este normal ca dezvoltatorii să permită ca D-pad-ul să fie utilizat în același mod ca și unul dintre stick-uri. PxGamepad oferă informații despre butoane pentru butonul D, dar, de asemenea, sintetizează informații despre axe ca și cum D-pad-ul ar fi un stick:
var dpadX = pxgamepad.dpad.x; var dpadY = pxgamepad.dpad.y;
O altă limitare a API-ului Gamepad HTML5 este că nu oferă evenimente la nivel de buton. Este obișnuit ca un dezvoltator de jocuri să dorească să activeze un singur eveniment pentru apăsarea unui buton. În Arcade de zbor, butoanele de aprindere și frână sunt exemple bune. PxGamepad urmărește starea butonului și permite apelanților să se înregistreze pentru notificări la eliberarea butonului.
Accentsconagua
gamepad.on ('rightTrigger', funcția () console.log ("declanșatorul din dreapta declanșat!"););Aici este lista completă a butoanelor numite susținute de PxGamepad:
AbXyStânga susrightTopleftTriggerrightTriggerSelectațistartleftStickrightStickdpadUpdpadDowndpadLeftdpadRightExistă două metode de preluare a obiectului gamepad. API-ul Gamepad adaugă o metodă obiectului navigator denumit getGamepads (), care returnează o gamă de gamepad-uri conectate. Există și noi gamepadconnected și gamepaddisconnected evenimente care sunt concediate ori de câte ori un nou gamepad a fost conectat sau deconectat. De exemplu, aici este modul în care suportul PxGamepad stochează ultimul jocpad conectat:
// începeți să ascultați evenimentele de conectare ale gamepadului PxGamepad.prototype.start = function () this.reset (); this.listeners = 'gamepadconnected': jQuery.proxy (funcția (e) var gamepad = e.originalEvent.gamepad; dacă (gamepad.mapping === 'standard') this.connectedGamepad = gamepad; 'gamepaddisconnected': jQuery.proxy (funcția (e) var gamepad = e.originalEvent.gamepad; dacă (this.connectedGamepad === gamepad) this.connectedGamepad = null;); jQuery (fereastră) .Pe (this.listeners); ;
Și aici este ajutătorul pentru a prelua primul gameplay standard folosind navigator.getGamepads () API:
// helper pentru a prelua gamepad-ul conectat curent PxGamepad.prototype.getGamepad = function () // implicit la gamepad-ul conectat var gp = this.connectedGamepad; dacă (! gp) // prelua toate gamepad-urile disponibile var gamepads; dacă (navigator.getGamepads) gamepads = navigator.getGamepads (); altfel dacă (navigator.webkitGetGamepads) gamepads = navigator.webkitGetGamepads (); // căutați un gamepad standardizat dacă (gamepads) pentru (var i = 0, len = gamepads.length; i < len; i++) if (gamepads[i].mapping === 'standard') gp = gamepads[i]; break; return gp; ;
Clasa helper PxGamepad este proiectată pentru scenariul simplu în care un singur utilizator joacă un joc cu un gamepad standard mapat. Cele mai recente browsere, cum ar fi Microsoft Edge, suportă pe deplin W3C Gamepad API. Cu toate acestea, versiunile mai vechi ale altor browsere au acceptat doar fragmente din specificațiile emergente. PxGamepad asculta pentru gamepadconnected și se întoarce la interogarea listei cu toate gamepad-urile, dacă este necesar.
În timp ce PxGamepad se concentrează pe scenariul simplu, cel mai comun, API-ul Gamepad este pe deplin capabil să suporte mai mulți jucători, fiecare cu propriul gamepad. O posibilă îmbunătățire pentru PxGamepad ar putea fi aceea de a oferi o clasă de stil manager care urmărește conectarea mai multor gamepad-uri și le cartografiază mai multor jucători într-un joc. Altul ar putea fi acela de a permite utilizatorilor să remapă sau să personalizeze funcțiile butoanelor pe gamepad-urile lor.
De asemenea, suntem încântați de potențialul API-ului Gamepad pentru scenarii non-game. Odată cu creșterea WebGL, vedem o varietate de utilizări inovatoare pentru 3D pe web. Aceasta ar putea însemna explorarea Mt. Regiunea Everest în 3D cu GlacierWorks sau vizionarea Colecției Asiriene a Muzeului Britanic grație eforturilor CyArk de a păstra digital situri și artefacte importante din lume.
În timpul dezvoltării Flight Arcade, am folosit frecvent Blender și alte instrumente 3D pentru a procesa modelele pentru Babylon.js. Unii dezvoltatori și artiști utilizează un dispozitiv numit mouse 3D pentru a ajuta la manipularea și navigarea pe modele 3D. Aceste dispozitive urmăresc mișcarea unui singur buton prin șase axe! Ele fac foarte ușor și rapid manipularea modelelor. Dincolo de jocuri, acestea sunt folosite într-o varietate de aplicații interesante de la inginerie la imagistică medicală. În timp ce adăugam suportul jocului la Flight Arcade, am fost surprinși să aflăm că API-ul Gamepad-ului nostru a detectat 3D SpaceMouse-ul nostru și a furnizat date de mișcare pentru toate cele șase axe!
Este interesant să vă imaginați toate posibilitățile oferite de noul API Gamepad. Acum este un moment excelent să experimentați noul API Gamepad și să adăugați un control de precizie și o mulțime de distracție pentru jocul sau aplicația următoare!
Microsoft are o grămadă de învățare gratuită pe multe subiecte JavaScript open source și suntem în misiunea de a crea mult mai mult cu Microsoft Edge. Iată câteva pentru a verifica:
Și câteva instrumente gratuite pentru a începe: Visual Studio Code, Azure Trial și instrumente de testare cross-browser - toate disponibile pentru Mac, Linux sau Windows.
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ .
