Boutons de texte et d'image

Les boutons sont des GuiObjects qui permettent aux utilisateurs d'effectuer une action. Vous pouvez personnaliser les boutons pour fournir un contexte et un retour d'information, comme changer l'apparence visuelle ou le script audio lorsqu'un utilisateur clique sur un bouton.

Il existe deux types de boutons que vous pouvez placer sur l'écran ou dans l'expérience :

• Un TextButton est un rectangle avec du texte qui déclenche l'événement Activated lors d'un clic/tap.

• Un ImageButton est un rectangle avec une image qui déclenche l'événement Activated lors d'un clic/tap. Il dispose d'états supplémentaires pour échanger l'image lors du survol ou de l'appui par l'utilisateur.

Créer des boutons à l'écran

Les boutons à l'écran sont utiles pour guider rapidement les utilisateurs vers divers menus ou pages.

Pour ajouter un bouton à l'écran :

1. Dans la fenêtre Explorer, sélectionnez StarterGui et ajoutez un ScreenGui.

   1. Survolez StarterGui et cliquez sur le bouton ⊕. Un menu contextuel s'affiche.

   2. Insérez un ScreenGui.

2. Sélectionnez le nouveau ScreenGui et ajoutez un bouton.

   1. Survolez ScreenGui et cliquez sur le bouton ⊕. Un menu contextuel s'affiche.

   2. Insérez soit un TextButton soit un ImageButton.

   

Créer des boutons sur les faces des parties

Les boutons sur une partie sont utiles pour permettre aux utilisateurs d'interagir avec les parties. Par exemple, vous pouvez permettre aux utilisateurs de marcher sur un bouton pour compléter une action.

Pour ajouter un bouton à la face d'une partie :

1. Dans la fenêtre Explorer, sélectionnez la partie et ajoutez un SurfaceGui.

   1. Survolez la partie et cliquez sur le bouton ⊕. Un menu contextuel s'affiche.

   2. Insérez un SurfaceGui.

2. Sélectionnez le nouveau SurfaceGui et ajoutez n'importe quel type de bouton ou d'entrée.

   1. Survolez SurfaceGui et cliquez sur le bouton ⊕. Un menu contextuel s'affiche.

   2. Insérez soit un TextButton soit un ImageButton.

   

   Si vous ne voyez pas le bouton, essayez de choisir une autre face dans la propriété Face du SurfaceGui.

Changer l'apparence d'un ImageButton

Changer l'apparence d'un ImageButton lorsque l'utilisateur interagit avec lui fournit un retour d'information visuel utile. Par exemple, lorsqu'un ImageButton change d'apparence visuelle lorsque l'utilisateur passe la souris dessus, cela indique à l'utilisateur qu'il n'est pas désactivé et qu'il a la possibilité de cliquer dessus s'il souhaite effectuer cette action ImageButton.

Un ImageButton a trois propriétés pour changer son apparence visuelle :

• Image - L'image qui s'affiche lorsque l'utilisateur n'interagit pas avec le ImageButton.

• HoverImage - L'image qui s'affiche lorsque l'utilisateur passe son curseur sur le ImageButton.

• PressedImage - L'image qui s'affiche lorsque l'utilisateur clique sur le ImageButton.

Pour changer l'apparence d'un ImageButton avec l'entrée de l'utilisateur :

1. Ajoutez un ImageButton à un écran ou à une surface.

2. Dans la fenêtre Explorer, cliquez sur l'objet ImageButton.

3. Dans la fenêtre Propriétés, attribuez trois ID d'actifs différents respectifs pour les propriétés Image, HoverImage, et PressedImage.

Script des boutons

Vous pouvez script une action lorsqu'un utilisateur appuie sur un bouton en connectant le bouton à un événement GuiButton.Activated. Par exemple, lorsque vous parenterez le LocalScript suivant à un bouton, le bouton changera de couleur aléatoirement chaque fois qu'un utilisateur cliquera dessus.

local button = script.Parent
local RNG = Random.new()
local function onButtonActivated()
	-- randomize the button color
	button.BackgroundColor3 = Color3.fromHSV(RNG:NextNumber(), 1, 1)
end
button.Activated:Connect(onButtonActivated)