Share
Alors que la popularité des jeux HTML commence à gagner progressivement en popularité, les fournisseurs commencent à introduire de nouvelles API excitantes pour rendre les jeux un peu plus agréables à la fois pour les développeurs et pour les joueurs finaux. L’une d’elles est la GamepadAPI, qui vous permet de connecter votre bon vieux gamepad de console à votre ordinateur et de l’utiliser pour les jeux sur navigateur, style plug and play. Plongeons dedans!
En bref, l'API Gamepad vous permet d'interagir avec votre navigateur à l'aide d'un contrôleur de console de jeu vidéo, AKA un gamepad. Cela ne nécessite pas de pilote ou plugin spécial pour fonctionner, c'est aussi simple que plug and play!
Étant un joueur sur console plutôt que sur un ordinateur de bureau, je préfère de loin interagir avec les jeux en utilisant une manette de jeu. Avec la montée en puissance des jeux basés sur HTML et JavaScript, cet outil deviendra un outil très utile pour rendre les jeux plus facilement accessibles aux utilisateurs. vos utilisateurs.
L’API Gamepad n’est pas facilement disponible pour la publication, mais nous pouvons commencer à l’utiliser pour nous-mêmes avec les versions preview de Firefox. Donc, avant de rester coincé, il nous faut quelques petites choses.
Comme je l'ai mentionné, l'API Gamepad n'est pas disponible pour le moment, vous devez donc vous procurer une version Nightly de Firefox et vous assurer que le module complémentaire Firebug est installé (à des fins de débogage uniquement)..
En outre, vous ne pouvez pas oublier un gamepad! Je vais utiliser un contrôleur PlayStation 3 pour ce didacticiel, mais un contrôleur Xbox fera l'affaire..
Une fois que vous avez installé Nightly et ajouté sur Firebug, vous êtes prêt à commencer.!
(NB. Les versions récentes de Chromium prennent également en charge les API Gamepad, mais ce didacticiel n'a pas été testé sur ces dernières.)
Commençons par un fichier HTML de base (index.html), en recherchant "gamepad.js" (un fichier JavaScript vierge)..
index.html
Introduction à l'API Gamepad API Gamepad
La connexion d'un gamepad est détectée avec un simple écouteur d'événements JavaScript, l'événement déclenché s'appelle "MozGamepadConnected". Donc, la première chose à faire est d’ajouter un écouteur d’événement à la fenêtre pour détecter cet événement..
J'ajoute également une fonction de rappel qui enregistrera les détails de l'événement sur la console de Firebug. Ce sont les informations qui nous intéressent le plus et ce qui nous permettra réellement de savoir que nous avons connecté une manette de jeu avec succès..
Accentsconagua
fonction gamepadConnected (evt) console.log (evt); window.addEventListener ('MozGamepadConnected', gamepadConnected); Exécutez votre index.html dans Nightly et ouvrez la console de Firebug. Ici, vous pourrez voir la journalisation de l'événement à partir de notre fonction de rappel..
Assurez-vous que votre contrôleur est éteint et n'est pas connecté sans fil à une console de jeux. Connectez-le à votre ordinateur via USB et mettez le contrôleur sous tension en regardant le journal des événements dans la console..
Génial, nous avons une manette de jeu connectée à un navigateur, aucun plugin ni pilote supplémentaire requis!
Il est tout aussi important de savoir si une manette de jeu a également été déconnectée, regardons donc l'événement "MozGamepadDisconnected"..
De la même manière qu'à la première étape, ajoutez un écouteur d'événement pour un événement de déconnexion et une fonction de rappel pour consigner les détails de l'événement..
fonction gamepadDisconnected (evt) console.log (evt); window.addEventListener ('MozGamepadDisconnected', gamepadDisconnected); Si votre manette de jeu est toujours connectée, actualisez votre page (sur laquelle l'événement connecté sera consigné), puis déconnectez votre manette de jeu en l'éjectant du port USB. Vous devriez obtenir un journal des événements comme celui-ci.
Nous savons maintenant qu’une manette de jeu a été connectée et déconnectée. C’est probablement une bonne idée d’enregistrer l’état à l’intérieur d’une variable et d’être prêt à détecter les événements de bouton.!
var gamepadActive = false; fonction gamepadConnected (evt) console.log (evt); gamepadActive = true; fonction gamepadDisconnected (evt) console.log (evt); gamepadActive = false; window.addEventListener ('MozGamepadConnected', gamepadConnected); window.addEventListener ('MozGamepadDisconnected', gamepadDisconnected); Des pressions sur les boutons permettent à nouveau d'utiliser un écouteur d'événements et une fonction de rappel avec deux événements, "MozGamepadButtonDown" et "MozGamepadButtonUp"..
Je suggèrerais de consigner tout l'événement à l'aide du bouton, appuyez sur vous-même pour voir ce qui se passe, mais l'information essentielle que nous devons obtenir de cet événement est: evt.button. C'est l'identifiant numérique du bouton sur lequel vous avez appuyé.
La fonction de rappel prend cette fois un deuxième paramètre, une valeur booléenne, pour vérifier si le bouton a été enfoncé ou relâché. Nous réglons cela nous-mêmes dans les fonctions de rappel des écouteurs d'événements.
bouton de fonctionPressed (evt, appuyé) console.log (evt.button, appuyé); window.addEventListener ("MozGamepadButtonDown", fonction (evt) buttonPressed (evt, true);); window.addEventListener ("MozGamepadButtonUp", fonction (evt) buttonPressed (evt, false);); Cela devrait maintenant indiquer les identifiants des boutons sur lesquels vous avez appuyé et s'ils ont été appuyés ou relâchés (true pour le bouton enfoncé, faux pour le bouton en haut).
Nous allons ensuite créer un tableau contenant tous les boutons de la PlayStation 3. Les indices du tableau correspondent aux identifiants utilisés sur cette manette de jeu, les valeurs correspondant au nom du bouton..
var gamepadActive = false, ps3Buttons = new Array (); ps3Buttons [12] = 'triangle', ps3Buttons [15] = 'carré', ps3Buttons [14] = 'croix', ps3Buttons [13] = 'cercle', ps3Buttons [4] = 'haut', ps3Boutons [7] = 'left', ps3Buttons [6] = 'down', ps3Buttons [5] = 'right', ps3Buttons [10] = 'L1', ps3Buttons [8] = 'L2', ps3Buttons [11] = 'R1', ps3Buttons [9] = 'R2', ps3Buttons [1] = 'L3', ps3Buttons [2] = 'R3', ps3Buttons [16] = 'PS', ps3Buttons [0] = 'select', ps3Buttons [3] = ' début';
Si vous utilisez un contrôleur différent, prenez le temps de déterminer quel index est associé à quel bouton et stockez ces informations dans un tableau similaire..
Si nous modifions maintenant le buttonPressed () fonctionner très légèrement, nous pouvons facilement dire quel bouton du contrôleur a été enfoncé.
bouton de fonctionPression (evt, appuyé) console.log (ps3Buttons [evt.button] + 'a été appuyé');
Essayez! Appuyer sur les boutons de votre contrôleur devrait maintenant enregistrer le nom des boutons sur lesquels vous appuyez. Ce sera beaucoup plus facile à comprendre que "bouton 5" (qui, dans mon cas, est sur le D-pad).
La détection d’événements d’axe permet essentiellement de garder une trace de la position des sticks analogiques gauche et droit sur la manette de jeu à l’aide de l’événement "MozGamepadAxisMove"..
Ajouter le nouveau gestionnaire d'événements et la fonction de rappel.
function moveAnalogSticks (evt) console.log (evt.axis, evt.value); window.addEventListener ("MozGamepadAxisMove", moveAnalogSticks); C'est ce que nous obtenons - déroutant, juste?
Un seul événement est déclenché par les deux sticks analogiques; chaque événement nous donne l'un des quatre axes possibles et une valeur comprise entre -1,0 et +1,0. Les axes 0 et 1 appartiennent au stick analogique gauche et les axes 2 et 3 à la droite.
Dans le diagramme ci-dessus, les axes 0 et 2 correspondent à l'axe des x et 1 et 3 à l'axe des y. En utilisant à la fois les axes x et y pour chaque stick analogique, vous pouvez déterminer l’orientation du stick analogique.!
Sur différentes manettes, vous pouvez avoir d'autres axes. Par exemple, les déclencheurs d'épaule sur un contrôleur Xbox sont également analogiques.
Cela couvre tous les événements que nous pouvons actuellement tirer d'une manette de jeu, alors mettons en pratique ce que nous avons appris.
Maintenant, je ne veux pas trop m'occuper du développement de jeux, car nous nous concentrons sur ce que nous utilisons pour contrôler les jeux eux-mêmes. L'un des éléments clés à considérer, cependant, est la commutation des schémas de contrôle. Comme tout le monde n’aura pas un clavier de commande à portée de main, nous devons nous assurer que nous fournissons des commandes pour le clavier et le clavier.
Pour lancer une petite démonstration, créez un Toile élément de votre fichier html avec un identifiant de "jeu" et définissez la largeur sur 600 et la hauteur sur 540. Comme vous le savez peut-être, l’élément canvas est couramment utilisé pour le rendu des jeux HTML sur.
Vous voudrez également copier les images "ship.png" et "space.jpg" du téléchargement de la source dans votre dossier de travail, car ce sont celles que nous allons rendre sur la toile. Vous pouvez également trouver vos propres graphiques pour jouer avec!
Introduction à l'API Gamepad API Gamepad
Maintenant que le Toile élément est dans notre DOM, nous voulons créer une boucle de jeu pour rendre notre jeu.
J'utilise un shim pour "requestAnimationFrame" de Paul Irish qui servira de base à notre boucle. Ensuite, nous obtenons le contexte 2D de la Toile nous allons utiliser pour créer et créer deux nouveaux objets d'image, l'un pour l'arrière-plan et l'autre pour notre vaisseau spatial.
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ window.requestAnimFrame = (fonction () return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || fonction (/ * fonction * / rappel, / * DOMElement * / élément) window.setTimeout (rappel, 1000/60);;) (); var canvas = document.getElementById ('jeu'), ctx = canvas.getContext ('2d'), ship = nouvelle Image (), espace = nouvelle Image (); space.src = "space.jpg"; ship.src = "ship.png"; Ensuite, l'objet joueur. Il a les coordonnées x et y qui gardent une trace de l'endroit où il devrait apparaître sur la toile; quatre états de direction (haut, bas, gauche et droite) afin que nous puissions savoir dans quelle direction le navire se déplace; une rendre() fonction, qui appelle d'abord updatePosition () puis dessine l'image du navire sur la toile en fonction des coordonnées x et y, et enfin le updatePosition () fonction elle-même, qui teste la direction dans laquelle le navire doit bouger et met à jour sa position en conséquence.
var player = x: 200, y: 250, up: false, down: false, gauche: false, right: false, render: function () this.updatePosition (); ctx.drawImage (ship, this.x, this.y); , updatePosition: function () this.up? this.y--: false; ce.down? this.y ++: false; ça.left? this.x--: false; ce droit ? this.x ++: false;
Après cela, nous avons notre fonction "renderGame" qui dessine l'image d'arrière-plan de l'espace sur le Toile d'abord, puis dessine notre vaisseau spatial en plus de cela.
Et enfin, notre boucle. Cette fonction s’appelle encore et encore, chaque fois en appelant notre fonction "renderGame".
function renderGame () ctx.drawImage (space, 0,0); player.render (); ; (fonction animloop () requestAnimFrame (animloop); renderGame ();) ();
Votre toile devrait maintenant avoir un bel arrière-plan ressemblant à un espace avec un vaisseau spatial assis au milieu - pas trop excitant, je sais. Ajoutons donc quelques contrôles!
Dans notre code de joueur, nous avons nommé les quatre boutons avec lesquels nous souhaitons contrôler notre vaisseau. Ceux-ci correspondent aux noms des boutons à l'intérieur du ps3Boutons [] tableau. Donc, tout ce que nous avons à faire est de modifier notre buttonPressed () fonctionner très légèrement et nous allons passer.
var player = … up: false, down: false, gauche: false, right: false,…
Désormais, quand un bouton de la manette de jeu est enfoncé ou relâché, son état sera défini dans l’objet Joueur. Par conséquent, lorsque vous appuyez sur le bouton "haut", player.up = true / false sera mis.
bouton de fonctionPressed (evt, appuyé) console.log (evt.button, appuyé); player [ps3Buttons [evt.button]] = appuyé? vrai faux;
Retournez à votre démo et vous devriez pouvoir déplacer votre vaisseau.!
Comme tout le monde ne joue pas avec une manette de jeu, vous voudrez probablement toujours leur permettre de jouer au jeu avec un clavier..
Permet d’abord de créer un nouveau clés[] tableau et mapper les touches fléchées du clavier code clé propriétés aux boutons équivalents sur le gamepad. Cela nous permettra de réutiliser buttonPressed () fonction que le gamepad utilise.
var gamepadActive = false, ps3Buttons = new Array (), keys = new Array (); ps3Buttons [12] = 'triangle', ps3Buttons [15] = 'carré', ps3Buttons [14] = 'croix', ps3Buttons [13] = 'cercle', ps3Buttons [4] = 'haut', ps3Boutons [7] = 'left', ps3Buttons [6] = 'down', ps3Buttons [5] = 'right', ps3Buttons [10] = 'L1', ps3Buttons [8] = 'L2', ps3Buttons [11] = 'R1', ps3Buttons [9] = 'R2', ps3Buttons [1] = 'L3', ps3Buttons [2] = 'R3', ps3Buttons [16] = 'PS', ps3Buttons [0] = 'select', ps3Buttons [3] = ' début'; touches [38] = 4; touches [37] = 7; touches [40] = 6; touches [39] = 5;
Nous avons maintenant besoin d'un écouteur d'événements "onkeyup" et "onkeydown" pour les touches de direction. Lorsqu'une touche est enfoncée ou relâchée, nous nous assurons que la manette de jeu n'est pas utilisée. Ensuite, nous empêchons la touche fléchée d’accomplir sa tâche habituelle (en faisant défiler la fenêtre du navigateur dans ce cas), puis nous appelons la même chose. buttonPressed () fonction que le gamepad appelle.
Pour ce faire, un objet événement fictif est passé avec le "keyCode" de la clé mappé à un élément de la clés[] tableau, qui passe à son tour l'ID du bouton de la manette de jeu correspondant.
window.onkeydown = function (evt) if (gamepadActive == false) evt.preventDefault (); buttonPressed (button: keys [evt.keyCode], true); window.onkeyup = fonction (evt) if (gamepadActive == false) evt.preventDefault (); buttonPressed (button: keys [evt.keyCode], false);
Cela devrait maintenant vous permettre d’utiliser les touches de direction pour contrôler le vaisseau quand une manette de jeu n’est pas branchée, tout en laissant la manette de jeu prendre le relais quand elle est présente..
Nous avons donc présenté les principes de base pour connecter une manette de jeu à votre ordinateur, apprendre à suivre les événements déclenchés par la manette de jeu, puis à les utiliser dans la pratique. Sans oublier, le support de secours crucial pour le clavier!
Un défi rapide pour ceux qui possèdent un contrôleur autre qu'un PS3 Dual Shock: ajustez le mappage des boutons en fonction du contrôleur branché..
Merci d'avoir pris le temps de vous familiariser avec l'API Gamepad. Si vous avez des questions, s'il vous plaît laissez-les dans les commentaires.
