Share
Les jeux sur le Web ont parcouru un long chemin avec les technologies HTML5 telles que Canvas, WebGL et WebAudio. Il est maintenant possible de produire des graphiques et du son haute fidélité dans le navigateur. Cependant, pour offrir une véritable expérience de jeu, vous avez besoin de périphériques de saisie conçus pour les jeux. L'API Gamepad est une norme proposée par le W3C et est conçue pour fournir une API cohérente sur tous les navigateurs..
L'API Gamepad permet aux utilisateurs de connecter des périphériques tels qu'un contrôleur Xbox à un ordinateur et de les utiliser pour des expériences sur navigateur! Notre classe d'assistance, PxGamepad, mappe ensuite les index de bouton et d'axe sur les noms plus familiers, comme indiqué sur le contrôleur Xbox..
Si vous avez une manette de jeu, essayez de la brancher sur votre ordinateur, cliquez sur l'image du contrôleur Xbox ci-dessous, puis appuyez sur un bouton. Vous verrez le contrôleur s'allumer pour refléter chaque mouvement que vous faites.!
Ce tutoriel est le troisième d'une série sur Flight Arcade, conçu pour démontrer les possibilités de la plate-forme Web, du nouveau navigateur Microsoft Edge et du moteur de rendu EdgeHTML. Vous pouvez trouver les deux premiers articles sur WebGL et Web API, ainsi que du code interactif et des exemples pour cet article, sur flightarcade.com et ici sur Tuts+.
L'API Gamepad est intelligemment conçue avec flexibilité. Au niveau de base, il donne accès aux boutons et aux axes. Les valeurs des boutons vont de 0 à 1 inclusivement, tandis que les axes vont de -1 à 1 compris. Toutes les valeurs sont normalisées sur ces plages afin que les développeurs puissent s'attendre à un comportement cohérent entre les périphériques..
L'objet Gamepad fournit des informations détaillées sur le fabricant et le modèle du gamepad connecté. Plus utile est une propriété “mapping” qui décrit le type général de gamepad. Actuellement, le seul mappage pris en charge est «standard», ce qui correspond à la disposition du contrôleur utilisée par de nombreuses consoles de jeu populaires telles que la Xbox..
Le mappage de contrôleur standard comporte deux sticks, chacun d'eux étant représenté par deux axes (x et y). Il comprend également un pavé tactile, quatre boutons de jeu, des boutons supérieurs et des déclencheurs: tous représentés sous forme de boutons dans l'API Gamepad..
Les contrôleurs Xbox actuels signalent l’état du bouton comme suit: 0 (état normal) ou 1 (pressé). Cependant, vous pouvez imaginer que les futurs contrôleurs pourraient signaler la quantité de force appliquée à chaque pression sur un bouton..
La Xbox D-pad affiche également des valeurs discrètes (0 ou 1), mais les baguettes fournissent des valeurs continues sur toute la plage d’axes (-1 à 1). Cette précision supplémentaire facilite beaucoup le pilotage de l'avion dans nos missions Flight Arcade..
La gamme de boutons et d’axes fournis par l’API Gamepad est un outil avant-gardiste, parfait comme une API de bas niveau. Cependant, lors de l'écriture d'un jeu, il est agréable d'avoir une représentation de niveau supérieur d'un gamepad standard tel que le contrôleur Xbox One. Nous avons créé une classe d'assistance nommée PxGamepad qui mappe les index de bouton et d'axe sur les noms plus familiers, tels qu'indiqués sur le contrôleur Xbox..
Je vais parcourir quelques éléments intéressants de la bibliothèque, mais le code source complet (licence MIT) est disponible sur GitHub..
L'API standard du Gamepad fournit l'état des boutons sous la forme d'un tableau de boutons. Encore une fois, cette API est conçue pour la flexibilité, permettant aux contrôleurs avec différents nombres de boutons. Cependant, lors de l'écriture d'un jeu, il est beaucoup plus facile d'écrire et de lire du code utilisant les noms de boutons mappés standard..
Par exemple, avec l'API HTML5 Gamepad, voici le code pour vérifier si le déclencheur gauche est actuellement enfoncé:
fonction isLeftTriggerPressed () var leftTrigger = gamepad.buttons [6]; if (! leftTrigger) retourne faux; if (typeof (leftTrigger) === "objet") return leftTrigger.pressed; return (leftTrigger === 1.0);
La classe PxGamepad contient une méthode de mise à jour qui collecte l'état de tous les boutons et axes mappés standard. Donc, déterminer si le gâchette gauche est appuyé est aussi simple que d'accéder à une propriété booléenne:
var isPressed = pxgamepad.buttons.leftTrigger;
Les axes de l'API standard Gamepad sont également fournis sous forme de tableau de valeurs numériques. Par exemple, voici le code pour obtenir les valeurs x et y normalisées pour le stick gauche:
var leftStickX = gamepad.axes [0]; var leftStickY = gamepad.axes [1];
Le D-pad est un cas particulier, car il est considéré comme un ensemble de quatre boutons par l’API HTML5 Gamepad (index 12, 13, 14, et 15). Cependant, il est courant que les développeurs autorisent l’utilisation du D-pad de la même manière que l’un des sticks. PxGamepad fournit des informations sur les boutons du D-pad, mais synthétise également les informations relatives aux axes comme si le D-pad était un stick:
var dpadX = pxgamepad.dpad.x; var dpadY = pxgamepad.dpad.y;
Une autre limitation de l'API HTML5 Gamepad est qu'elle ne fournit pas d'événements au niveau des boutons. Il est courant qu'un développeur de jeu veuille activer un seul événement en appuyant sur un bouton. Dans Flight Arcade, les boutons d’allumage et de frein en sont de bons exemples. PxGamepad surveille l'état des boutons et permet aux appelants de s'inscrire pour recevoir des notifications sur le relâchement des boutons.
Accentsconagua
gamepad.on ('rightTrigger', function () console.log ('déclencheur droit déclenché!'););Voici la liste complète des boutons nommés supportés par PxGamepad:
unebXyen haut à gaucheen haut a droitegâchette gaucherightTriggersélectionnerdébutStick gaucheStick droitdpadUpdpadDowndpadLeftdpadRightIl existe deux méthodes pour récupérer l'objet de la manette de jeu. L'API Gamepad ajoute une méthode à l'objet de navigateur nommé getGamepads (), qui retourne un tableau de tous les gamepads connectés. Il y a aussi de nouveaux gamepadconnected et gamepaddisconnected les événements déclenchés chaque fois qu'une nouvelle manette de jeu a été connectée ou déconnectée. Par exemple, voici comment l’assistant PxGamepad stocke le dernier gamepad connecté:
// commence à écouter les événements de connexion du gamepad PxGamepad.prototype.start = function () this.reset (); this.listeners = 'gamepadconnected': jQuery.proxy (fonction (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 (window) .on (this.listeners); ;
Et voici l’assistant pour récupérer le premier gamepad standard en utilisant le navigator.getGamepads () API:
// assistant pour récupérer le gamepad actuellement connecté PxGamepad.prototype.getGamepad = function () // le gamepad connecté par défaut var gp = this.connectedGamepad; if (! gp) // récupère tous les gamepads disponibles var gamepads; if (navigator.getGamepads) gamepads = navigator.getGamepads (); else if (navigator.webkitGetGamepads) gamepads = navigator.webkitGetGamepads (); // cherche un gamepad standard mappé si (gamepads) pour (var i = 0, len = gamepads.length; i < len; i++) if (gamepads[i].mapping === 'standard') gp = gamepads[i]; break; return gp; ;
La classe d'assistance PxGamepad est conçue pour le scénario simple dans lequel un seul utilisateur joue à un jeu avec une manette de jeu mappée standard. Les derniers navigateurs, tels que Microsoft Edge, prennent entièrement en charge l’API Gamepad du W3C. Cependant, les anciennes versions de certains autres navigateurs ne prenaient en charge que les éléments de la spécification émergente. PxGamepad écoute pour le gamepadconnected événements et retombe à la recherche de la liste de toutes les manettes de jeu si nécessaire.
Alors que PxGamepad se concentre sur le scénario le plus courant et le plus courant, l’API Gamepad est tout à fait capable de prendre en charge plusieurs joueurs, chacun avec son propre gamepad. Une amélioration possible pour PxGamepad pourrait être de fournir une classe de type gestionnaire qui trace la connexion de plusieurs manettes de jeu et les mappe à plusieurs joueurs dans une partie. Une autre solution consiste à autoriser les utilisateurs à remapper ou à personnaliser les fonctions des boutons de leurs manettes de jeu..
Nous sommes également enthousiasmés par le potentiel de l’API Gamepad pour les scénarios autres que de jeux. Avec la montée en puissance de WebGL, nous observons diverses utilisations innovantes de la 3D sur le Web. Cela pourrait signifier explorer le mont. La région de l'Everest en 3D avec GlacierWorks ou la collection assyrienne du British Museum, grâce aux efforts de CyArk pour préserver numériquement d'importants sites et objets du monde.
Pendant le développement de Flight Arcade, nous avons fréquemment utilisé Blender et d'autres outils 3D pour traiter les modèles de Babylon.js. Certains développeurs et artistes utilisent un périphérique appelé souris 3D pour manipuler et naviguer dans les modèles 3D. Ces appareils suivent le mouvement d'un seul bouton sur six axes! Ils facilitent et accélèrent la manipulation des modèles. Au-delà des jeux, ils sont utilisés dans diverses applications intéressantes allant de l'ingénierie à l'imagerie médicale. Lors de l'ajout de la prise en charge de la manette de jeu à Flight Arcade, nous avons été surpris d'apprendre que l'API de la manette de jeu avait détecté notre SpaceMouse 3D et fourni des données de mouvement pour les six axes.!
C'est excitant d'imaginer toutes les possibilités offertes par la nouvelle API Gamepad. Le moment est venu d'expérimenter la nouvelle API Gamepad et d'ajouter un contrôle de précision et beaucoup de plaisir à votre prochain jeu ou application.!
Microsoft propose de nombreuses formations gratuites sur de nombreuses rubriques JavaScript open source et nous avons pour mission de créer davantage avec Microsoft Edge. En voici quelques unes à consulter:
Et quelques outils gratuits pour commencer: Code Visual Studio, Azure Trial et outils de test inter-navigateurs, tous disponibles pour Mac, Linux ou Windows..
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ .
