Boutons interactifs

Ce tutoriel vous montre comment faire des boutons sur l'écran pour les menus, les actions de l'interface et plus encore.

Types de boutons

Il y a deux types d'objets bouton que vous pouvez utiliser dans vos designs d'interface utilisateur :

Bouton de texte	Bouton d'image
Un TextButton ressemble à un TextLabel excepté que les joueurs peuvent l'activer avec un clic/touche. Il partage également de nombreuses propriétés visuelles similaires — police, couleur de l'arrière-plan, couleur de la garniture, etc.	Un ImageButton est comme une version interactive de l'objet ImageLabel. Il partage également la plupart des mêmes propriétés que son non-bouton de contrepartie.

Créer un bouton

Les étapes suivantes montrent comment ajouter un ImageButton à l'écran et le faire tourner entre trois apparences en fonction de l'interaction du joueur.

1. Dans la fenêtre Explorer, passez la souris sur l'objet StarterGui , cliquez sur le bouton + et insérez un ScreenGUI .

   

2. Sélectionnez le nouvel objet ScreenGUI et, d'une manière similaire, insérez un ImageButton .

   

   Cela ajoutera un bouton d'image vide à l'angle de la voirdu jeu.

3. Pour une meilleure pratique, renommez le nouveau bouton en fonction de son but, par exemple Bouton de carte .

   

Taille

Pour que le bouton soit redimensionné dynamiquement sur différents appareils et écrans, il est préférable d'utiliser les propriétés Échelle .

1. Dans la fenêtre propriétés , localisez la propriété Taille et cliquez sur la flèche pour étendre son arbre.

   

2. Définissez les propriétés de taille suivantes :

   

3. Restreignez le bouton à une boîte de taille carrée en définissant Contrôle de taille à Relative YY .

   

Redimensionnement

La taille actuelle devrait bien fonctionner sur un téléphone, mais l'échelle de X/Y de 0,15 (15%) peut sembler trop grande sur un écran d'ordinateur. Pour corriger cela, vous pouvez ajouter un UISizeConstraint .

1. Survolez l'objet Bouton de carte et insérez un Contrôle d'interface utilisateur .

   

2. Sélectionnez l'objet de contrôle de taille nouveau et définissez sa propriété MaxSize sur 90, 90 .

   

Position

Les boutons doivent généralement être déplacés dans la zone de la main d'un joueur sur les appareils mobiles, par exemple la zone inférieure droite de l'écran.

1. Changez la propriété AnchorPoint du bouton pour 0,5, 1 afin que le positionnement soit basé autour de son point central inférieur.

   

2. Expand the button's Position tree and set the following property values. This will move the button near the default jump button that appears on phones/tablets.

   

Images

Ce bouton a besoin de trois images personnalisées - son apparence normale sur l'écran, une apparence de survol et une image finale pour quand le joueur le presse.

Normal

Pausez votre souris.

Presseur.

Vous pouvez configurer ces apparences à travers les propriétés Image , HoverImage et PressedImage .

1. Localisez la propriété d'image du bouton et collez-la dans rbxassetid://6025368017, ou utilisez votre propre ressource. .

   

2. Pour la propriété image de survol , collez dans rbxassetid://6025452347.

   

3. Pour la propriété PressedImage , collez dans rbxassetid://6025454897 .

   

Stylage

Pour finaliser l'apparence du bouton sur l'écran, effectuez les ajustements suivants :

1. Définir la transparence de l'arrière-plan à une valeur de 1 pour rendre le fond transparent.

   

2. Pivotnez le bouton légèrement en définissant Rotation à -5 .

   

Fonctionnalité des boutons

La dernière tâche est d'intégrer la fonctionnalité de bouton de base.

1. Dans la fenêtre Explorateur, passez la souris sur l'objet Bouton de carte et insérez un LocalScript.

   

2. Dans le script, copiez et collez dans ces nouvelles lignes :

   local button = script.Parent
   
   local function onButtonActivated()
   	print("Button activated!")
   	-- Effectuer l'action de bouton(s) attendue(s) ici
   end
   
   button.Activated:Connect(onButtonActivated)

Ce script de bouton simple fonctionne comme suivant :

• La première ligne définit un bouton de variable qui indique au script quel objet spécifique il est lié. Dans ce cas, il est lié au ImageButton , le parent du script.
• La fonction onButtonActivated gère l'activation du bouton. À l'intérieur, vous devez effectuer l'action souhaitée comme ouvrir le menu principal du jeu.
• La dernière ligne connecte le bouton à la fonction onButtonActivated avec l'événement Activated. Cela provoquera l'exécution de la fonction à chaque fois qu'un joueur active le bouton dans le jeu.

Débogage

Si le bouton ne fonctionne pas comme prévu, vérifiez les suivre:

• Assurez-vous d'avoir utilisé un client côté LocalScript, et non un côté serveur Script.
• Assurez-vous que le LocalScript est un enfant direct du bouton objet (pas un enfant du ScreenGui conteneur).
• Confirmez que les propriétés de votre bouton Image , HoverImage et PressedImage sont définies sur les ressources d'image appropriées.