GUI Development in Roblox Studio
Create menus, HUDs, shops, and notifications with ScreenGuis, UI constraints, and TweenService animations.
Introduction
Graphical user interfaces connect players to your game's systems. Roblox UI uses a hierarchy of ScreenGui → Frame → TextLabel/TextButton/ImageLabel with UDim2 positioning and UI constraints for responsive layouts. This hub teaches UI scripting patterns that scale from simple health bars to full shop interfaces.
ScreenGui Fundamentals
ScreenGuis live in StarterGui and clone to each player's PlayerGui on join. Use ResetOnSpawn = false for persistent HUDs. AnchorPoint and Position use UDim2 scale (0-1) for responsive layouts. Size constraints (UISizeConstraint, UIAspectRatioConstraint) prevent UI from breaking on different screen sizes.
Animating UI with TweenService
TweenService creates smooth property transitions. Tween button colors on hover, slide panels in from off-screen, fade notifications. Use TweenInfo for easing styles. Chain tweens with Completed:Connect for sequential animations. Keep animations under 0.3 seconds for snappy UI feel.
Use Cases
- Main menu design
- In-game shops
- Quest trackers
- Leaderboard displays
Best Practices
- Use UIListLayout and UIPadding for consistent spacing
- Test UI on mobile using Studio's device emulator
- Keep LocalScripts in StarterGui for UI logic
Troubleshooting
Script runs but nothing happens in-game
Verify the script type matches its location. Server Scripts belong in ServerScriptService; LocalScripts in StarterPlayerScripts or StarterGui. Check the Output window in Studio for error messages.
Changes don't appear after editing
Stop and restart Play mode in Studio. Some scripts cache values on first run. For published games, republish after testing locally.