Comment ajouter des boutons à votre jeu de HTML5 pour l'accès mobile

La simpleGame bibliothèque possède une fonction pratique appelée GameButton pour ajouter un bouton à l'écran d'un appareil mobile pour votre jeu HTML5. Le clavier est un des moyens les plus faciles à obtenir l'entrée dans un navigateur standard, mais la plupart des appareils mobiles ne pas claviers. Le premier problème est de savoir comment obtenir l'entrée d'utilisateur quand il ya pas de clavier.

La GameButton objet de bouton personnalisé commence par les caractéristiques d'un bouton HTML standard, mais ajoute ensuite quelques trucs pour le rendre approprié pour les jeux. Vous pouvez activer le bouton avec une souris ordinaire ou avec les commandes tactiles, le rendant idéal pour les jeux qui peuvent être joués sur les deux types de dispositifs. La button.html Page illustre le bouton en action:

Comme d'habitude, les nouveaux et intéressants éléments sont indiqués en gras. Voici comment vous ajoutez un bouton de jeu pour un jeu:

1. Créer une variable pour le bouton.

   Comme tout autre élément de jeu, vous commencez par créer une variable de se référer à la touche.

2. Construire le GameButton objet.

   
   
   
   
   

   Construire le GameButton objet dans la init () Procédé. Le seul paramètre indique la légende de la touche.

3. Définissez la taille et la position de la touche.

   Vous aurez envie de réfléchir un peu sur la façon dont votre jeu fonctionnera sur les appareils mobiles. Placez vos boutons où ils peuvent facilement être atteint par le joueur sans bloquer trop de la vue. Notez que vous aurez également besoin de faire les boutons assez gros pour être pressé pendant la chaleur de la partie. (Boutons à l'écran sont beaucoup mieux pour les jeux sous forme de comprimé.)

4. Vérifier l'état de touche pendant mettre à jour().

   Tout comme vous vérifiez normalement l'état du clavier lors de la mettre à jour() fonction, vous pouvez également appeler une fonction pour vérifier l'état de votre bouton. Bien sûr, vous aurez besoin d'écrire cette fonction.

5. Lire sur le bouton de isClicked () Procédé.

   Si le bouton est enfoncé en cours, la valeur de isClicked () est vrai. Si le bouton est pas actuellement pressé, isClicked () retourne false. Utilisez cette méthode pour déterminer l'état actuel de chaque bouton et agir en conséquence.

6. Traiter un bouton tout comme le clavier.

   Parce que tester les boutons finalement retourne des valeurs booléennes (vrai ou faux), la vérification des boutons se sent généralement beaucoup comme la vérification pour le clavier.

7. Considérez boutons ajoutant seulement lorsque cela est nécessaire.

   Si vous voulez, vous pouvez concevoir un jeu pour afficher (et de test) boutons seulement quand un écran tactile est disponible. La Scène objet a une variable spéciale appelée touchable. Cette variable est vrai si la bibliothèque détecte un écran tactile, et faux sinon. Vous pouvez utiliser cette variable pour générer une interface personnalisée qui adapte à l'environnement de jeu.

Normalement, vous allez ajouter plusieurs boutons à votre interface, pour le remplacer chaque touche que vous attendez l'utilisateur à utiliser (par exemple, les flèches et la barre d'espace). De cette façon, vous pouvez créer un clavier virtuel sur l'écran. Vous devrez peut-être tester la taille et la position de chaque touche pour obtenir une expérience de jeu confortable.

Notez que la légende du bouton est HTML ordinaire, donc si vous voulez faire vos boutons basé sur les images, vous pouvez simplement ajouter la appropriée tag comme une légende de bouton.