Advanced Tutorial System – Roblox Tutorial UI System
A cinematic Roblox tutorial system designed to guide new players through important areas and features of a game. The system moves the player's camera between configured tutorial points while displaying step-specific titles and descriptions through an animated GUI.
Tutorial text appears with a configurable typewriter effect and sound, while players can quickly skip text or advance through steps using mouse, touch, Space, or Enter. UI crossfades, optional pop-in scaling, and screen fades can be configured for camera transitions.
The system uses a modular structure with Config, Remotes, Server TutorialService, and a Client Tutorial Controller. A DataStore-backed seen state can prevent the tutorial from replaying for returning players.
Key Features
- Cinematic camera tour moving smoothly between configured tutorial points
- Workspace TutorialPoints setup for defining camera locations
- Step-based tutorial configuration with Point, Title, and Text settings
- Character-by-character typewriter text animation
- Configurable typewriter sound effect during text display
- Click and tap controls for quickly completing tutorial text
- Space and Enter controls for fast-forwarding tutorial text
- Second skip input advances immediately to the next tutorial step
- Smooth crossfade transitions between tutorial steps
- Optional UI pop-in scaling animation for tutorial elements
- Optional screen fade effects during camera movements
- Configurable tutorial step timings and camera tween settings
- Configurable typewriter speed and sound settings
- DataStore-backed Seen state for one-time tutorial playback
- Server TutorialService for saving tutorial completion and handling remotes
- Client controller for camera movement, GUI flow, typewriter effects, and skip controls
- Modular/OOP structure separated into Config, Remotes, Server, and Client components
6a7c9796046c8325b85b333e