Comment créer un menu principal Roblox en partant de zéro (débutant)

TL;DR

Tu veux un vrai menu d'accueil avec un bouton Play qui cache l'écran quand on clique dessus ? Ce guide couvre tout : hiérarchie Explorer, mise en page ScreenGui / Frame / TextButton, et le LocalScript avec MouseButton1Click. Aucune expérience préalable n'est requise — juste Roblox Studio ouvert devant toi.

Ce tutoriel se concentre sur la construction du menu. Si tu veux aller plus loin sur le responsive (Scale vs Offset, UIAspectRatioConstraint), un post dédié à ces règles est déjà disponible sur le forum.

Pourquoi un menu principal ?

Un menu principal, c'est la première chose que le joueur voit. Même simple, il donne une impression de jeu fini et professionnel. Sans lui, le joueur se retrouve directement en jeu — ce qui peut être déroutant si tu as des paramètres à choisir ou juste une belle scène d'intro à montrer.

Un GUI Roblox (Graphical User Interface) représente tout ce que le joueur voit superposé au monde 3D — menus, barres de vie, compteurs, etc. C'est la façon dont les joueurs interagissent avec les systèmes du jeu sans passer par le monde lui-même.

Étape 1 — Mettre en place la hiérarchie dans l'Explorer

Avant d'écrire une seule ligne de code, il faut construire la structure visuelle.

Si tes éléments d'interface ne sont pas enfants d'un ScreenGui, ils n'apparaîtront tout simplement pas à l'écran du joueur. Commence par aller dans le dossier StarterGui dans l'Explorer, clique sur l'icône + et ajoute un ScreenGui.

Voici la hiérarchie complète à reproduire :

StarterGui
└── MainMenuGui  (ScreenGui)
    ├── MainFrame  (Frame)
    │   ├── Title  (TextLabel)
    │   └── PlayButton  (TextButton)
    └── LocalScript

Une erreur que beaucoup de débutants font : laisser tous les objets avec leurs noms par défaut (Frame, TextButton). Le script devient alors un cauchemar à gérer. Nomme-les de manière explicite — PlayButton, MainFrame — parce que quand tu seras 200 lignes plus loin dans le code, tu te remercieras de ne pas avoir à deviner quel Frame est lequel.

Propriété importante : IgnoreGuiInset

Pense à activer la propriété IgnoreGuiInset sur ton ScreenGui. Sans ça, un petit espace apparaît en haut de l'écran à l'endroit où se trouve la barre Roblox, ce qui casse l'immersion.

Étape 2 — Configurer le Frame (fond du menu)

Sélectionne ton MainFrame dans l'Explorer et règle ces propriétés dans le panneau Properties :

La bonne pratique est d'aller dans StarterGui, d'ajouter un ScreenGui nommé par exemple MainMenuGui, puis d'y insérer un Frame qui couvre l'écran entier — Size = {1, 0}, {1, 0}.

Étape 3 — Ajouter le titre (TextLabel)

Insère un TextLabel dans MainFrame et nomme-le Title. Règle ces propriétés :

Les objets texte (TextLabel, TextButton) se comportent comme des Frame mais contiennent du texte. Ils héritent des mêmes propriétés de base mais ont aussi des propriétés uniques comme Text ou Font.

Étape 4 — Créer le bouton Play (TextButton)

Insère un TextButton dans MainFrame et nomme-le PlayButton.

Les boutons sont fondamentaux dans tout menu interactif. Dans Roblox, ils se créent avec la classe TextButton, et il est essentiel que chaque bouton donne un retour visuel quand il est survolé ou cliqué.

Bonus visuel : coins arrondis

Insère un objet UICorner directement dans le PlayButton (et dans le MainFrame si tu veux). Règle CornerRadius à UDim2.new(0, 8) pour un rendu moderne.

Étape 5 — Le LocalScript (la magie)

Puisque le menu n'existe que sur l'écran du joueur, on utilise un LocalScript. Place-le directement à l'intérieur de ton ScreenGui.

Voici le script complet commenté :

-- LocalScript dans MainMenuGui

local player = game.Players.LocalPlayer
local gui = script.Parent                          -- le ScreenGui
local mainFrame = gui:WaitForChild("MainFrame")    -- le fond du menu
local playButton = mainFrame:WaitForChild("PlayButton")

-- Quand le joueur clique sur Play
playButton.MouseButton1Click:Connect(function()
    mainFrame.Visible = false   -- cache le menu
    print("Partie lancée !")    -- visible dans la console Output
end)

Les LocalScript s'exécutent sur la machine du joueur, ce qui est obligatoire pour l'UI. WaitForChild garantit que l'objet existe bien avant que le script essaie de l'utiliser.

La ligne MouseButton1Click:Connect(function()) écoute un événement précis : le clic gauche du joueur sur le bouton. Le :Connect(function()) indique à Roblox d'exécuter le code à l'intérieur à chaque fois que cet événement se produit.

Étape 6 — Tester dans Studio

1. Clique sur Play en haut de Roblox Studio
2. Le menu devrait apparaître en plein écran
3. Clique sur le bouton PLAY → le menu disparaît
4. Ouvre la fenêtre Output (View > Output) pour voir le message "Partie lancée !"

Aller plus loin : bloquer les déplacements avant Play (optionnel)

Si tu veux que le joueur soit immobile tant qu'il n'a pas cliqué sur Play, tu peux désactiver ses contrôles au chargement et les réactiver au clic :

local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local gui = script.Parent
local mainFrame = gui:WaitForChild("MainFrame")
local playButton = mainFrame:WaitForChild("PlayButton")

-- Désactiver les déplacements à l'arrivée
UserInputService.ModalEnabled = true

playButton.MouseButton1Click:Connect(function()
    mainFrame.Visible = false
    UserInputService.ModalEnabled = false  -- réactiver les déplacements
end)

Erreurs fréquentes chez les débutants

Les erreurs les plus courantes incluent les fautes de frappe — Lua est sensible à la casse. Par exemple, mousebutton1click n'est pas la même chose que MouseButton1Click.

Autre piège : utiliser un Script classique au lieu d'un LocalScript. L'interaction avec l'UI ne se déclenche pas correctement côté serveur.

Vérifie aussi la hiérarchie : si le script cherche un Frame qui n'existe pas ou qui est mal nommé, il lancera une erreur.

Enfin, le problème de ZIndex : un bouton peut être "derrière" une autre couche transparente, et tu cliques dessus sans le réaliser.

Récapitulatif : la checklist du menu parfait

• ScreenGui dans StarterGui, propriété IgnoreGuiInset activée
• MainFrame couvrant tout l'écran (Size = {1,0},{1,0})
• TextLabel pour le titre du jeu, TextScaled = true
• TextButton nommé PlayButton, bien positionné
• LocalScript dans le ScreenGui, pas un Script classique
• WaitForChild utilisé pour référencer les éléments UI
• Test en mode Play dans Studio avant de publier

FAQ

Pourquoi mon menu n'apparaît pas quand je lance le jeu ? Vérifie que le ScreenGui est bien dans StarterGui et non dans Workspace. Aussi, assure-toi que la propriété Enabled du ScreenGui est sur true.

Le bouton est cliquable mais rien ne se passe ? Ouvre la console Output (View > Output). S'il y a du texte rouge, Roblox t'indique exactement l'erreur. Vérifie les noms des objets dans le script — une majuscule oubliée suffit.

Comment ajouter un effet de fondu quand on clique sur Play ? Tu peux animer la disparition avec un TweenService en faisant varier le BackgroundTransparency de ta Frame et le TextTransparency des boutons. Ça prend une dizaine de lignes mais change radicalement le ressenti du jeu.

Mon menu se décale selon l'appareil ? Utilise uniquement les valeurs Scale (premier paramètre de UDim2.new) et laisse les valeurs Offset à zéro. Pour aller plus loin, consulte le post dédié au responsive sur le forum ou la documentation officielle Roblox Creator Hub.

Tu débutes dans le développement Roblox ? N'hésite pas à parcourir la section Script Development du forum pour d'autres guides, ou à explorer les ressources disponibles sur GM Market si tu cherches des scripts et UI déjà prêts à l'emploi.