Un menu pause, un inventaire, un panneau de boutique — toute interface Roblox repose sur trois briques : ScreenGui (le conteneur), Frame (les panneaux) et TextButton / TextLabel (les éléments cliquables ou juste affichés).
Contrairement au reste du jeu, une interface se construit surtout visuellement dans l'Explorer de Studio, puis on la contrôle par script. Ce guide couvre la structure minimale et le script pour ouvrir/fermer un menu.
🧱 La structure de base
Dans StarterGui, crée cette hiérarchie :
- ScreenGui — le conteneur racine, un par interface
- → Frame — le panneau visible (le fond du menu)
- →→ TextButton — un bouton cliquable à l'intérieur
- →→ TextLabel — du texte non cliquable
👁️ Ouvrir / fermer le menu
-- LocalScript, à l'intérieur du ScreenGui
local menu = script.Parent:WaitForChild("Frame")
local boutonOuvrir = script.Parent.Parent.BoutonMenu -- ex: dans un autre GUI
menu.Visible = false -- fermé au départ
boutonOuvrir.MouseButton1Click:Connect(function()
menu.Visible = not menu.Visible -- bascule ouvert/fermé
end)💡
MouseButton1Click fonctionne aussi sur mobile et tablette (le "clic" devient un appui) — pas besoin de code séparé pour le tactile.🔘 Un bouton qui fait une action
local boutonJouer = script.Parent.BoutonJouer
boutonJouer.MouseButton1Click:Connect(function()
print("Bouton Jouer cliqué !")
-- ex: lancer une partie, téléporter, etc.
end)
-- Changer l'apparence au survol (effet visuel simple)
boutonJouer.MouseEnter:Connect(function()
boutonJouer.BackgroundColor3 = Color3.fromRGB(80, 160, 255)
end)
boutonJouer.MouseLeave:Connect(function()
boutonJouer.BackgroundColor3 = Color3.fromRGB(60, 120, 220)
end)📏 Position & ancrage responsive
| Propriété | Rôle |
|---|---|
AnchorPoint | Point de référence de l'objet (0.5, 0.5 = centre) |
Position | Emplacement en UDim2 — mélange % et pixels |
Size | Taille, aussi en UDim2 |
-- Centré à l'écran, quelle que soit la résolution
frame.AnchorPoint = Vector2.new(0.5, 0.5)
frame.Position = UDim2.new(0.5, 0, 0.5, 0)⚠️ Sans
AnchorPoint à 0.5/0.5, un Position à 50%/50% place le coin de l'objet au centre, pas son centre à lui — le menu paraît décalé.✅ Bonnes pratiques & erreurs fréquentes
- Toujours
WaitForChildpour récupérer un élément de GUI depuis un script : l'interface peut ne pas être totalement chargée au premier frame. - Un LocalScript pour l'affichage, jamais un Script : le GUI est une notion côté client. Un Script placé dans un ScreenGui ne s'exécutera pas comme prévu.
UDim2plutôt que des pixels fixes pour la taille et la position : sinon ton interface est illisible sur mobile ou un écran différent du tien.- Un seul ScreenGui par grande interface plutôt qu'un empilement anarchique : plus simple à retrouver et à faire évoluer.
Va plus loin : les deux modules GUI complets
Ce guide couvre la structure de base. Les modules GUI : Crée ton Interface et GUI : Boutons et Interactivité détaillent les layouts, les animations d'interface et les exercices pratiques corrigés.
Voir le module gratuitement →