L'interface joueur (GUI) est tout ce que le joueur voit par-dessus le monde 3D : barre de vie, score, menus, boutons. Sur Roblox, une GUI vit dans un ScreenGui placé dans StarterGui, et se construit avec des Frame, TextLabel, TextButton et ImageLabel positionnés avec le système UDim2.
Le point qui déroute le plus au début est UDim2 : il combine une part relative (en pourcentage de l'écran, pour s'adapter à toutes les tailles) et une part absolue (en pixels). Maîtriser ça, plus l'AnchorPoint, te permet de créer des interfaces qui restent belles sur mobile comme sur PC.
📐 UDim2 — Position & Taille
-- UDim2.new(xScale, xOffset, yScale, yOffset)
-- Scale : proportion (0 = 0%, 1 = 100%)
-- Offset : pixels fixes
-- Centre de l'écran
frame.Position = UDim2.new(0.5, -100, 0.5, -50)
frame.Size = UDim2.new(0, 200, 0, 100)
-- Plein écran
frame.Size = UDim2.new(1, 0, 1, 0)
-- AnchorPoint : origine de l'objet
frame.AnchorPoint = Vector2.new(0.5, 0.5) -- centre🏷️ TextLabel & TextButton
local label = Instance.new("TextLabel")
label.Text = "Score : 0"
label.TextColor3 = Color3.fromRGB(255, 255, 255)
label.TextSize = 18
label.BackgroundColor3= Color3.fromRGB(0, 0, 0)
label.BackgroundTransparency = 0.5
label.Font = Enum.Font.GothamBold
label.Parent = screenGui
-- Bouton
local btn = Instance.new("TextButton")
btn.Text = "Jouer"
btn.MouseButton1Click:Connect(function()
print("Cliqué !")
end)🖼️ Frame & ScreenGui
-- Créer une GUI par script (côté client)
local plr = game.Players.LocalPlayer
local pg = plr.PlayerGui
local sg = Instance.new("ScreenGui")
sg.ResetOnSpawn = false
sg.Parent = pg
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0, 200, 0, 150)
frame.Position = UDim2.new(0.5, -100, 0.5, -75)
frame.BackgroundColor3= Color3.fromRGB(30, 30, 40)
frame.Parent = sg📋 UIListLayout & UIPadding
-- Alignement automatique vertical
local layout = Instance.new("UIListLayout")
layout.FillDirection = Enum.FillDirection.Vertical
layout.HorizontalAlignment = Enum.HorizontalAlignment.Center
layout.SortOrder = Enum.SortOrder.LayoutOrder
layout.Padding = UDim.new(0, 8) -- 8px entre éléments
layout.Parent = frame
-- Marge intérieure
local padding = Instance.new("UIPadding")
padding.PaddingTop = UDim.new(0, 10)
padding.PaddingLeft = UDim.new(0, 10)
padding.Parent = frame⚡ Événements bouton avancés
-- Clic souris
btn.MouseButton1Click:Connect(function() end)
-- Survol (hover)
btn.MouseEnter:Connect(function()
btn.BackgroundColor3 = Color3.fromRGB(80, 80, 200)
end)
btn.MouseLeave:Connect(function()
btn.BackgroundColor3 = Color3.fromRGB(50, 50, 160)
end)
-- Appui tactile / manette
btn.Activated:Connect(function() end)🎞️ Animer la GUI (Tween)
local TS = game:GetService("TweenService")
-- Fondu d'entrée
frame.BackgroundTransparency = 1
TS:Create(frame, TweenInfo.new(0.3), {
BackgroundTransparency = 0
}):Play()
-- Slide depuis le bas
frame.Position = UDim2.new(0.5, -100, 1.2, 0)
TS:Create(frame,
TweenInfo.new(0.4, Enum.EasingStyle.Back, Enum.EasingDirection.Out),
{ Position = UDim2.new(0.5, -100, 0.5, -75) }
):Play()🔧 UICorner, UIStroke & ImageLabel
-- Coins arrondis
local corner = Instance.new("UICorner")
corner.CornerRadius = UDim.new(0, 12) -- 12px de rayon
corner.Parent = frame
-- Bordure colorée
local stroke = Instance.new("UIStroke")
stroke.Color = Color3.fromRGB(100, 150, 255)
stroke.Thickness = 2
stroke.Parent = frame
-- Image
local img = Instance.new("ImageLabel")
img.Image = "rbxassetid://12345678" -- ID Roblox
img.ScaleType = Enum.ScaleType.Fit
img.Parent = frame✅ Bonnes pratiques & erreurs fréquentes
- Privilégie les dimensions relatives (scale) aux pixels absolus : ton interface s'adaptera aux écrans de toutes tailles, mobile inclus.
- Crée la GUI côté client (LocalScript) : l'interface est personnelle à chaque joueur, inutile de la gérer côté serveur.
- Utilise
AnchorPointpour centrer :AnchorPoint = (0.5, 0.5)+Position = (0.5, 0, 0.5, 0)centre parfaitement un élément. - Ne fais jamais confiance au client pour la logique de jeu : la GUI affiche, mais c'est le serveur qui décide (score, argent, achats).