The Two Screens#
Tutorial Creator has two faces, and it helps to know which is which from the start.
Screen | Opened with | What it is for |
|---|---|---|
The tutorial | First spawn, or | What players see: the cinematic tour with its overlay on top. Every player. |
The creator |
| Where tutorials are written, filmed, designed and set live. Staff only — see Installation. |
Only one is ever on screen: a tutorial does not start while the creator is open, and the creator does not open while a tutorial plays. The overlay players see and the creator's canvas are drawn by the same renderer, so a tutorial cannot look different in game than it did in the editor.
The Eight Bundled Tutorials#
Every install ships with eight complete tutorials, each a different style, all built with the same creator you have. Welcome to the city is live until you choose another.
Tutorial | What it is |
|---|---|
Welcome to the city | The default. A six-stop tour with a portrait per step, narration over a bottom scrim, letterbox, and click to advance. |
Spotlight | Hands off. A centred card, a live countdown on every step and an objective list beside it. Every step advances on its own; clicking only gets there sooner. |
Skyline | No buttons, no portraits, no hurry. Five landmarks at golden hour, big centred type and a hairline progress bar. Runs itself end to end. |
Anthem | Built around a track. Background music is on out of the box and every step runs on a timer, so the cuts land with the song. |
Broadcast | A video plays beside the narration the whole way through, framed like a feed on a studio wall, with a news-desk voice reading over it. |
Noir | Rain, brass and a narrator. Wide letterbox, desaturated timecycles, film grain and a serif that never rushes. For crime and mafia servers. |
Neon | The city after dark. Magenta and cyan, scanlines, hard corners and a countdown ring. Every shot forces the clock to the small hours. |
Dispatch | A briefing, not a tour. Monospaced amber in a framed HUD and a task list per stop. Meant to be fired from a job script at a new officer or medic, so it is not limited to once per character. |
Anthem and Broadcast ship without their media, so add your own: drop a track into audio/ and pick it under Settings → Background music, and drop a WebM into videos/ and pick it on the Video element in the Design tab.
The coordinates are real Los Santos landmarks, but they were written rather than captured, so a shot may be framed a few metres off on your map. Fly there shows you in one click and Capture from game fixes it in one more. Noir and Skyline use the Georgia font and Dispatch Courier New, both present on every Windows install; everything else uses the bundled Poppins.
Saving a bundled tutorial keeps your version under the same id, and it replaces the original for your server. Revert throws away unsaved changes; deleting your saved copy brings the original back. To keep both, press Duplicate first.
Making a Tutorial#
/tutorialcreator opens on a picker. Each card shows the tutorial's steps, its elements, and whether it is Live, Built-in or Yours. Start from nothing gives you one step and the usual elements, ready to point at your own city.
1 · Steps — the script
Add a step, name it, write what the player reads, then press Capture from game: the creator gets out of the way, you fly to the shot and press ENTER. Repeat per stop.
2 · Design — where it sits on screen
The elements are already laid out. Drag them, restyle them, add more from the library. Nothing here is required to ship a working tutorial.
3 · Settings — how it behaves
Once per character, skippable, background music, fade timings.
Save, then Set live
Both sit in the bar under the tabs and work from any of the three. Set live asks you to save first, then pushes the tutorial to every connected player — nobody reconnects.
The bar under the tabs#
It is the same on every tab, so nothing is ever a tab away:
Control | What it does |
|---|---|
Tutorials | Back to the picker, asking first if there are unsaved changes. |
Checklist | Steps, cameras placed, a way to advance, saved, live. Each chip turns green as you go; an amber one jumps to the tab that fixes it. |
| The exports and events for this exact tutorial, with its id filled in, ready to copy. |
Revert · Duplicate · Delete | Back to the last saved version; a copy under a new id; remove a saved tutorial together with everybody's progress on it. |
Play in game | Runs the draft for real — fades, cameras, music, buttons — without saving it, even if you have already watched it. |
Save · Set live | Store it, then make it the one players get. |
Steps and Chapters#
A step is one shot: one camera, one line of narration, one button. A chapter groups steps under a name, subtitle, icon and colour, which the Chapter card element puts on screen. A tutorial with one chapter is fine; so is one with none.
Field | What it is |
|---|---|
Step name | For you, in the creator. Players never see it. |
Title · Speaker · Narration | What the Narration element shows, typed out at the speed you set. |
Button label | The Continue element's text on this step. |
Shake the portrait | Makes Portrait elements tremble on this step — for a line that should land. |
Objectives | A list the Objectives element draws, ticking off the ones behind the player. |
Enabled | The eye on the step's row. A disabled step stays in the creator but is skipped in game. |
Hover a step in the list to move it up or down, duplicate it or delete it. Deleting a chapter keeps its steps; they simply move to No chapter.
How a step ends#
Under Flow, each step picks what moves it on:
How it advances | What happens |
|---|---|
The player clicks | The Continue element, or its keyboard shortcut. Button appears after holds it back so nobody skips a line before reading it. |
After a while | A timer — Time on screen, from half a second to five minutes. The Timer element can draw it as a ring, bar or digits. |
Either one | Whichever happens first. |
Client event on enter fires a client event of yours when the step starts, called with (tutorialId, stepId, index) — open a door, spawn a prop, give a starter item. Sound for this step swaps the background music for a track of its own while that step is on screen.
Cameras#
This is the part a config file cannot do, so it is the part the creator is built around. Press Capture from game on a step and you are given a free camera. It starts from the shot the step already has — a brand-new step starts in the middle of the map, so duplicating a nearby step is often quicker.
Key | Does |
|---|---|
| Fly and look around. |
| Up and down. |
| Faster, slower. |
| Field of view, 10° to 120°. |
| Save this shot into the step. The creator comes straight back. |
| Throw it away and go back. |
The six movements#
Movement | What the camera does |
|---|---|
Static | Holds one shot. |
Pan | Stays put and turns. Capture the start, then Capture the end. |
Dolly | Moves and turns from one captured shot to another. |
Track a point | Moves from A to B while always looking at a third point you capture — the shot that makes a building read as the subject. |
Orbit | Circles a captured point at a radius, a height and a speed in degrees per second, either way round. |
Follow the player | Rides behind the character at an offset, looking at their head. Good for the last step. |
Move time and Easing shape pan, dolly and track moves: sine is the cinematic default, linear is the one that looks like a script, and sineIn, sineOut, quad, quadIn, quadOut, cubic and expo sit in between. Go back and forth loops the move instead of holding the last frame. Every value can also be typed by hand.
Everything else on a shot#
Option | What it does |
|---|---|
Camera shake | GTA's own shakes — |
Depth of field | Near, far and strength. |
Arrive with | A cut, a fade, or a camera blend that glides from the previous shot to this one over the transition time. Blend two nearby shots and they read as one continuous move. |
Atmosphere | A timecycle modifier with a strength (for example |
Seeing your work#
Three buttons, three different questions:
Button | Where | Shows |
|---|---|---|
Preview | Top right | The overlay only, with arrows to step through. For text, layout and typewriter timing. ESC closes it. |
Fly there | Steps tab, Camera box | The real game camera on one shot, full screen, doing its move. A small bar lets you walk shot to shot; Back to the creator or ESC returns. |
Play in game | The bar under the tabs | Everything at once, for real — the rehearsal. |
The world is streamed at the camera rather than by teleporting the player, which is why buildings are already there when a shot fades in and why the player never ends up somewhere they did not ask to be. Config.Cinematic sets how long a shot may spend loading — see Installation.
The Design Tab#
Everything on screen is an element: add it from the library, drag it on the canvas, set its properties in the inspector. Elements are placed on a 1920 × 1080 design and scaled to each player's real screen.
The strip along the top chooses which step the canvas shows. Beside it: undo and redo, zoom, All steps to draw every step's elements at once, a grid, the safe area, and a switch for entrance animations.
Shortcut | Does |
|---|---|
| Undo. |
| Redo. |
| Duplicate the selected element. |
| Delete the selected element. |
The elements#
Group | Element | What it draws |
|---|---|---|
Basics | Text | Fixed words, or a live value that updates itself (below). Font, gradient, outline, typewriter. |
Basics | Image · Shape · Icon | A picture with colour filters; a rectangle or ellipse with gradient fills; one of 58 icons — socials, money, vehicles, services and more. |
Basics | Effect | Vignette, film grain, scanlines, gradient wash, glow, particles, stars, rain, sheen, noise or film burn. |
Story | Narration | The step's speaker, title and narration, typed out. The heart of the thing. |
Story | Portrait | A character image that shakes when the step asks and can float gently. For a different face per step, add one Portrait per step and scope each with Shows on. |
Story | Chapter card · Objectives | The current chapter as a card, inline or badge; the step's objective list as checks, list or cards. |
Flow | Continue | The button. Takes its label from the step, runs any action, has a keyboard shortcut and its own appear delay. |
Flow | Skip | Hold to skip, with the hold drawn as a fill ( |
Flow | Progress · Timer · Letterbox | Dots, bar, segments or numbers over the whole tutorial or the chapter; a countdown ring, bar or digits on timed steps; the two cinema bars, sliding in. |
Media | Video · Slideshow | A WebM file from |
Every element shares the same base: position, size, rotation, opacity, blend mode, corner radius, an entrance animation (fade, up, down, left, right, zoom, zoom out, blur, flip) with delay and duration, and an optional backing panel with fill, border, shadow and backdrop blur. The element list beside the canvas hides, locks, reorders and duplicates them.
Shows on#
Every element answers Shows on in the inspector: every step (a letterbox, a progress bar, a skip button), a chapter (something that belongs to one act) or a step (a video only during the airport shot). That is what lets one tutorial hold a talking-head intro, a map-heavy middle and a quiet closing shot without every element fighting over the same screen.
Text that updates itself#
A Text element's Content can be fixed text or a live value, with a prefix and suffix around it:
From the step: title, narration, speaker, button label, step number, step count.
From the chapter: name, subtitle, chapter number, chapter count.
From the server: server name, Discord, website — from
Config.Server.From the player: player name, job, the area they stand in, the clock and the date.
The background#
With nothing selected, the inspector shows the tutorial itself. Background is Game by default — the live camera — or a colour, an image, slides or a video in front of it, with blur, brightness, saturation, an overlay and a vignette.
What a button can do#
The Continue element runs an action when pressed:
Action | What happens |
|---|---|
Next step · Previous step | Moves through the tutorial. Next on the last step finishes it. |
Skip · Finish the tutorial | Ends it and counts it as watched. |
Run a command | Runs a chat command as the player. Anything in |
Trigger a client / server event | Fires an event of yours. |
Copy a link | Puts a URL — your Discord, your rules — on the player's clipboard. |
Set a waypoint | Marks X and Y on the player's map. |
A keyboard shortcut is a single letter, or SPACE, ENTER, BACKSPACE or ESC. It is shown on the button as a hint and accepted while the tutorial is on screen.
Music and Video#
To add your own music or video:
Put the file in
qs-tutorial/audio/(OGG, MP3 or WAV) orqs-tutorial/videos/(WebM).Restart the resource — the folders are read when it starts.
Pick the file from the dropdown in the creator, then Save.
Background music (Settings tab) is an OGG, MP3 or WAV picked from audio/, and plays for as long as the tutorial is on screen, with a volume, a loop and a fade. Any step can override it under Sound for this step, which is how the nightclub shot gets different music from the hospital.
The Video element and the Video background play a WebM picked from videos/, with loop, mute and volume. A video keeps playing while its step is on screen and stops when the step changes; set it to Cover and it fills the element whatever shape you made it.
Your media folders#
Folder | For | Formats |
|---|---|---|
| Portraits, logos, slides. Seven portraits ship in it. | PNG, JPG, WebP, GIF |
| Clips. | WebM (VP9) |
| Music and stings. | OGG, MP3, WAV |
Anything dropped in appears as a dropdown in the creator after a resource restart, so nobody has to type a path. Images can still take a URL, and a CDN link works; music and video only play from their folders. Local files are stored as a relative path, such as images/talk3.png.
Everything in these three folders is downloaded by every player on join. Keep files sized for what they are, and keep videos short.
The Settings Tab#
How this tutorial behaves while it plays. Each tutorial keeps its own settings.
Setting | What it does |
|---|---|
Only once per character | Once finished, it no longer plays on spawn for that character. |
Let players skip it | Arms the Skip element, with the hold time. A skipped tutorial counts as watched. |
Freeze the player · Hide the player model | Keeps the character still and out of shot while the camera is elsewhere. |
Swallow game input | Stops keys reaching the game during the tutorial. |
Put the player back where they were | Returns them to the exact spot and heading they started from. |
Fade in · Fade out · Between steps | The fade timings, in milliseconds. |
Client event when it ends | Fired with the tutorial id when it is finished — hand over the starter kit here. |
Background music | See Music and Video above. |
Reset everybody's progress | Every player watches this tutorial again on their next spawn. It only forgets, so there is no confirmation. |
Tutorial id | What exports and commands call it by. |
The tab also shows which tutorial is live, and warns when something would break in game — a step that waits for a click with no Continue element to click, or a Skip element while skipping is off. Whether a tutorial starts on its own after spawn is set for the whole server by Config.Tutorial.autoStart, and your HUD is hidden through Config.Hud.
Progress#
Whether somebody has watched a tutorial lives in the database, against the character — the ESX identifier, the QBCore and Qbox citizen id, the qs-core citizen id, or the licence on a standalone server — so a reconnect or a reinstall of FiveM does not replay it.
A replay never takes back a completion; only a reset does.
/resettutoriallets a player forget what they have watched, so the next spawn replays it.Reset everybody's progress does it for the whole server, for one tutorial.
Deleting a tutorial deletes everybody's progress on it.
Up to
Config.MaxTutorials(45) tutorials can be saved; the eight bundled ones do not count. Each tutorial may be up to 1 MB, which is far more than even a long one with many elements needs.