Comment créer un joystick virtuel pour votre jeu HTML5 - les nuls

De nombreux jeux HTML5 tactiles utilisent un mécanisme de joystick virtuel. L'utilisateur touche l'écran pour commencer la saisie, puis balaie pour fournir une entrée. Glisser vers la gauche est lu comme si vous déplaciez un joystick vers la gauche. Plus l'utilisateur effectue un balayage, plus la valeur d'entrée est grande. La bibliothèque simpleGame possède un objet de joystick virtuel qui facilite l'implémentation d'un joystick virtuel sur vos appareils tactiles.

Le joystick virtuel fonctionne en retournant des données numériques. Il est souvent plus facile de comprendre comment cela fonctionne en regardant la sortie numérique avant de la mapper à un élément visuel.

manette de jeu Test var game; sortie var; joystick var; function init () {game = new Scène (); sortie = document. getElementById ("sortie"); si (jeu. Touchable) { joystick = nouveau Joy (); } else { alert ("Ce test nécessite une interface tactile"); } jeu. start ();} // fin de la fonction init () { if (jeu. touchable) { jx = joystick. getMouseX (); jy = joystick. getMouseY (); jdx = joystick. getDiffX (); jdy = joystick. getDiffY (); resultat = "joystick x:" + jx + "

"; résultat + = "joystick y:" + jy + "
"; résultat + = "joystick dx:" + jdx + "
"; résultat + = "joystick dy:" + jdy + "
"; sortie. innerHTML = result;} else {alert ("Cet exemple attend un écran tactile");}} // end update Rien encore arrivé

Le joystick virtuel est assez simple à utiliser:

1. Crée une variable pour le joystick.

   Vous pouvez l'appeler joystick. Un peu accrocheur.

2. Créez le joystick si possible.

   Utilise le jeu. propriété touchable pour déterminer si une interface tactile est présente. Sinon, envoyez un message à l'utilisateur.

3. Obtenez la position de la souris.

   Lorsque l'objet Joystick virtuel détecte un contact sur l'écran, il déclenche les valeurs mouseX et mouseY. Utilisez les méthodes getMouseX () et getMouseY () du joystick pour déterminer les positions X et Y du toucher. De cette façon, l'interface tactile agit un peu comme la souris traditionnelle.

4. Obtenez une lecture diffX et diffY à partir du joystick.

   Lorsque l'utilisateur touche l'écran, la bibliothèque suit les coordonnées du contact initial. Il mesure ensuite à quelle distance l'utilisateur a glissé. La différence de X s'appelle diffX, et la différence de Y s'appelle diffY. Utilisez les méthodes getDiffX () et getDiffY () de l'objet joystick virtuel pour déterminer le nombre de pixels en X et Y que l'utilisateur a déplacés depuis qu'il a touché l'écran.

5. Afficher les valeurs actuelles.

   Pour ce premier passage, il est important de comprendre ce que le joystick affiche. Il suffit donc de prendre les valeurs et de les imprimer sur une sortie à l'écran.

Bien sûr, le but d'un joystick virtuel est de déplacer des choses sur l'écran.

Voici le code:

joystick Test var game; var ball; var joystick; Fonction init () {game = new Scène (); balle = nouveau Sprite (jeu, "redBall.png", 50, 50); si (jeu. touchable) {joystick = nouveau Joy ();} else {alert ("Ce jeu nécessite un écran tactile");} // fin si balle. setSpeed ​​(0); ballon. setPosition (400, 300); Jeu. start ();} // fin de la fonction d'initialisation update () {game. clair(); si (jeu. touchable) {balle. setDX (joystick, getDiffX ()); ballon. setDY (joystick.getDiffY ());} // fin de la touche tactile. update ();} // update_fin

Cet exemple est encore plus simple que le précédent.

1. Créez un sprite simple.

   Pour cet exemple, une simple bille est utilisée. Créez-le comme n'importe quel autre sprite de base.

2. Construire un objet joystick.

   Créez un objet de joystick virtuel.

3. Mappez le diffX du joystick et faites la différence avec les valeurs dx et dy de la boule.

   Ceci donne un mouvement extrêmement sensible, donc vous pourriez vouloir ajuster la sensibilité en divisant le diffX et diffY par un facteur d'échelle.