Contrôles tactiles et une astuce pour détecter la méthode d'entrée

Favourite 270 favourites
Tutorial written by AshleyOriginally published on 22nd, December 2011 - 5 revisions

Translation Team:

1 revision

Ces jours-ci il est naïf de considérer que tout le monde sur le web utilise un clavier et une souris. Sur le web moderne, beaucoup de gens naviguent dorénavant via des appareils tactiles, comme l'iPhone, l'iPad et les smartphones Androïd. Si voutre jeu ne peut être contrôlé que par une souris et/ou un clavier, les utilisateurs de ces dispositifs ne pourront pas jouer à votre jeu !

Cependant, il est facile de mettre en place des contrôles pour écran tactiles, et il existe une astuce facile et intelligente de détecter si l'utilisateur utilise un dispositif tactile aussi.

Input de souris pour le tactile

Tout d'abord, si vous créez un jeu spécifiquement pour les appareils tactiles, ou que votre jeu utilise uniquement les clics de la souris, utilisez l'objet Touc. Définissez sa propriété Utiliser l'input de la souris à Oui (elle est définie à Non par défaut). A présent, les clics de souris déclenchent des événements "toucher" comme Début du toucher et Touche. Evidemment, vous ne pouvez simuler que des input de type single-touch (un seul point touché) avec les clics de souris - maintenir le bouton gauche enfoncé représente un toucher, et le relâcher représente une absence de toucher. Ainsi un cliquer-glisser représente un glissement du toucher.

Cela permet facilement l'input de la souris et du tactile, ce qui est suffisant pour les jeux simples.

Contrôles Tactiles sur l'écran

Pour beaucoup d'autres jeux, les boutons sur l'écran sont nécessaires aux contrôles. Ceux-ci peuvent être faits avec des objets Sprite.

Premièrement, si vous n'en avez pas déjà un, faites un calque non-défilant (vous ne voulez en effet pas que les boutons se déplcent sur l'écran au fur et à mesure que vous vous déplacez dans le niveau !). Ajoutez un nouveau calque et définissez son Parallaxe à 0, 0. Ceci empêche tout objet sur ce calque de défiler - ils apparaitrons toujours au même endroit sur l'écran.

Maintenant, vérifiez que ce calque est sélectionné. Le contour en pointillés en haut à gauche de la vue du layout montre la taille de la fenêtre. Ajoutez quelques Sprites représentant vos contrôles quelque part dans cette zone. Un exemple de flèches directionnelles en bas à droite de l'écran est montré ci-dessous.

Touch controls
Ayez en tête que les gros boutons sont plus faciles à toucher ! Vous pouvez également vouloir améliorer les polygones de collision dans l'éditeur d'image pour rendre leur zone légèrement plus grosse et ainsi plus facile à toucher.

Vous pouvez maintenant utiliser les actions Touche un objet des objets Touch pour appeller une l'action Simulate control d'un comportement comme ci-dessous :

Touch control event
Maintenant vous avez des contrôles sur l'écran qui restent toujours au même endroit de la fenêtre et pouvant contrôler le jeu.

Si votre jeu utilise de simples contrôles Gauche-Droite vous pouvez utiliser des variations, comme de gros sprites invisibles pour détecter si l'utilisateur touche le côté gauche ou le côté droit de l'écran. Souvenez-vous, plus la zone qu'ils peuvent toucher est grosse, plus il est facile de contrôler le jeu.

Contrôles Tactiles Alternatifs

Il existe différentes façons de contrôles les jeux sur des dispositifs tactiles. Vous ne devez pas forcémment avoir des contrôles sur l'écran et parfois les alternatives sont plus faciles et plus amusantes à utiliser. Voici deux autres suggestions :

1. Toucher autour du joueur pour le faire se déplacer, au lieu d'utiliser des flèches directionnelles sur l'écran. Par exemple, dans Space Blaster, le vaisseau spatial pourrait se déplacer là où le joueur touche. D'autres boutons sur l'écran peuvent ainsi proposer des actions différentes comme tirer des roquettes.

2. Utiliser l'accéléromètre de l'appareil pour contrôler les movements. Dans l'objet Touch, vous pouvez récupérer les valeurs de l'accéléromètre grâce aux expressions Alpha, Beta et Gamma. Cela vous permet de détecter l'inclinaison de l'appareil sur les différents axes, qui peuvent alors diriger certains mouvements.

Finalement, you devriez adapter les contrôles de façon à ce qu'ils soient plus faciles à utiliser pour les dispositifs tactiles. Les contrôles tactiles peuvent être plus difficiles à utiliser qu'un clavier et une souris, simplifier les contrôles peut donc rendre le jeu plus amusant. Par exemple, le joueur doit maintenir la barre d'espace enfoncée pour tirer avec le laser principal dans Space Blaster. Changer le laser de façon à tirer automatiquement quand des enemis sont à l'écran a rendu le jeu plus amusant que lorsqu'il fallait appuyer sur un bouton de tir annexe. Cela le rend aussi un peu plus facile, mais le but principal est indéniablement de le rendre amusant et non frustrant à contrôler !

Méthode de détection d'input

Vous avez alors maintenant des contrôles tactiles sur l'écran. Et si l'utilisateur est sur un ordinateur fixe avec un clavier et une souris ? Il n'y a aucun intérêt à afficher de gros boutons à l'écran dans ce cas. Heueusement, il existe un moyen vraiment simple de détecter si l'utilisateur utilise un écran tactile : utiliser un écran titre.

C'est aussi simple que cela. Sur l'écran titre, ajoutez un message comme Appuyez sur n'importe quoi pour continuer.... Puis, si les événements du Clavier N'importe quelle touche pressée ou de la souris Lors de n'importe quel clic sont déclenchés sur l'écran titre, vous savez que l'utilisateur est sur un ordinateur de bureau. Si l'événement de l'objet Touch Lors du toucher est déclenché sur l'écran titre, vous savez que l'utilisateur est sur un dispositif tactile. Vous pouvez alors définir une variable globale indiquant si l'utilisateur est sur un écran tactile et lancer le premier niveau. Si la variable globale est définie, montrez les contrôles tactiles, sinon rendez-les invisibles. Vou utiliserez automatiquement le bon système de contrôle et l'utilisateur n'a rien eu à faire !

Voilà tout !

Pour aller plus loin...

Les appareils tactiles ont souvent des tailles d'écran différentes, vous pourriez vouloir lire
Supporter plusieurs tailles d'écran aussi.

Tester sur des mobiles et des tablettes est beaucoup plus facile avec preview sur réseau local.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.