Jeux vidéos : désactiver les fonctions tactiles natives




 

Lorsque vous développez un jeu vidéo en html5 pour un smartphone ou une tablette, les fonctions tactiles par défaut telles que le scrolling de l’écran posent problèmes en venant polluer les interactions que vous avez définies. En effet, elles sont prioritaires par rapport aux fonctions tactiles définies pour votre jeu vidéo : par exemple si vous essayez de glisser avec le doigt un élément sur l’écran de jeu, c’est la fonction scrolling du navigateur qui va se mettre en place et non le mouvement de l’objet du jeu vidéo. Dans cet article, je vous montre comment les désactiver pour que votre jeu vidéo ne soit pas pollué par ces fonctions tactiles.


 

Prérequis

Je vous conseille d’avoir fait un peu de javascript et de connaitre la gestion des événements.

 

Mise en œuvre en javascript

L’objet javascript event met à disposition la méthode preventDefault() permettant d’empêcher le navigateur de déclencher le comportement par défaut de l’objet auquel est attaché l’événement.

En prenant comme exemple le bouton submit d’un formulaire, l’événement onsubmit est levé lorsque le bouton est cliqué. La soumission du formulaire est alors déclenchée. Si la méthode preventDefault() est invoquée au sur cet événement, la soumission du formulaire (comportement par défaut) ne se fait plus.

<html>
 <body>
  <form id="formulaire" method="post" action="./script.php">
   <input id="boutonSubmit" type="submit" value="Valider"> 
  </form>
 </body>
 <script>
 var boutonSubmit = document.getElementById("boutonSubmit");
 boutonSubmit.onsubmit = function(event) {
   event.preventDefault(); // la soumission du formulaire est désactivée 
 };
 </script>
</html>


En se replaçant dans le contexte du jeu vidéo et en prenant l'<strong><u>événement ontouchmove</u></strong>, le comportement par défaut est le scrolling de l'écran du navigateur <strong><u>html5</u></strong>.

L'événement associé est <strong><u>touchmove</u></strong> : <strong><u>window.ontouchmove</u></strong>.

Si vous souhaitez bouger, par exemple un sprite avec le doigt sur l'écran de jeu (l'écran du navigateur), vous devez désactiver la fonction par défaut qui est le scrolling de l'écran du navigateur. Cela se fait en invoquant la méthode <strong><u>preventDefault()</u></strong> :

<html>
 <body>
 ....
 </body>
 <script>
 window.ontouchmove = function(event) {
   event.preventDefault(); // la fonction scrolling est désactivée
   // actions à réaliser sur l’événement
   // bouger le sprite
 };
 </script>
</html>

Rien de complexe donc.

 

Ça vous a plu, partagez, commentez sans hésitation.

 

Posté dans html5Taggé html5 facile, html5 touchmove, javascript, ontouchmove  |  1 commentaire

Une réponse à "Jeux vidéos : désactiver les fonctions tactiles natives"

Répondre

*