[Release] New Player Spawn Tutorial UI (Add a beautiful tutorial for your server!) [v1.2]

FiveM Resource Development & Modding Releases
1

Finally, a tutorial for new players! [v1.2 RELEASED]
This is a fairly basic but very effective tutorial for new players, and works with any server!

Features

  • All slides fully customizable, background and everything else! (via PSD’s)
  • Will force every new player to go through this tutorial!
  • Must follow through all slides in order to spawn
  • Customizable spawn point after tutorial in client.lua
  • Remembers players who have done the tutorial and doesn’t shows them again, unless they use /tutorial
  • Support UNLIMITED SLIDES! Must have minimum of 2
  • Fits all screen resolutions
  • Edit the title and description of tutorial in tutorial_config.js

Example Screenshots:

tutorial-slide-1
tutorial-slide-11920×1080 579 KB

tutorial-slide-4
tutorial-slide-41920×1037 533 KB

tutorial-slide-5
tutorial-slide-51920×1080 498 KB

tutorial-spawned
tutorial-spawned1920×1080 344 KB

Important notes:

  • Resource must be named “tutorial” (if you need to change the folder name you must edit the nui/UI.js file)
  • If you want a transparent background (no background, game as background) (change nui/responsive.css -> body { background-color: transparent !important; )

Requirements:
No requirements! Standalone script.

Download/Source
Here
(RESOURCE FILE NAME MUST BE “tutorial” or spawn button won’t work!)

Last update - Feb. 6 2018
v1.2 ALL BUGS FIXED

Installation Guide/Important info

SHOW
  1. Download from Github
  2. Drag folder ‘tutorial’ into your resources folder
  3. Add ‘start tutorial’ to your server.cfg
  4. Change tutorial configs in nui/tutorial_config.js
  5. Change server name in click.lua
  6. Change your background.jpg if you want (some samples included) (make sure its 4K resolution)
  7. Edit slides with included photoshop templates
  8. If you are adding more than 5 slides remember to add into the ui.html and __resource.lua
  9. Deleting slides, just remove from ui.html
  10. Finally, edit your spawn point after the tutorial is finished in the client.lua

If you use this, post your server IP below so I can check it out!
Join my discord also for help or suggestions: https://discord.gg/qAmb2nA

Feel free to edit, modify, use to your liking. However,
No re-releasing without my permission

Install this resource on ZAP-Hosting
Rent your own FiveM GTA 5 server
https://zap-hosting.com/rox

56 Likes
2

moved to Resource Developing & Modding - Releases.

1 Like
3

YEESSS Downloading ::slight_smile:

2 Likes
4

@FAXES luv u baeeeeeeee

1 Like
5

I’m editing atm. Went to the top of my priority’s. Quick question is it only in the ui java file where the resource name is. All my server scripts are combined into 1 resource and would love to put it in there so we can use…
? :grinning::heart_eyes:

6

Yes should be that only in UI.js you can change to the folder name

1 Like
7

Can u link me the Fonts u used Kindly!!!
Thank u!!! Keep up…

8

Pricedown and SignPainter Housescript @Mumin_Khan

9

Looks neat.

2 Likes
10

Script updated:

  • Now supports unlimited slides with a minimum requirement of 2
    Remember to add into __resource.lua if you are adding more slides
11

How can i fix the resolution https://i.gyazo.com/e1ba0d0f35d9d9c5832525552b16f982.jpg i change in ui.css
.playerMenuContainer {
width: 3840px;
height: 2160px;

12

Modify the background image css size to fit the resolution. I will try to compensate for bigger screens in a future update.

13

I modify but is the same.

.playerMenuContainer {
width: 3840px;
height: 2160px;
overflow: hidden;
z-index:-9999;
background-color: #333333;
display: none;
}

#background
{
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 3840px;
height: 2160px;
overflow: hidden;
z-index:0;
}

#Background
{
left: 0px;
top: 0px;
position: absolute;
width: 3840px;
height: 2160px;
z-index:1;
}

14

Is your background size that large to begin with? The image you are using for your background must also be 3840x2160 then. Regardless I will try to get an update out to fix this later.

1 Like
15

This looks great, saw this before it was released and got super hyped about it! This is great for RP servers!!!

2 Likes
16

Should this auto-resize? Not everyone has the same size res. for instance, mine is 1366x768. Which is a 32" monitor. Should it auto-resize for someone that has, say, a 19"? Even on my 32", it is larger than my resolution and makes have to scroll around it to Spawn. I tried making it a smaller size just to show up in the center of the screen, but the slides, which are small anyways, end up over the edge of the res. Any ideas?

Thanks

17

I am already working on a fully responsive version, as I am aware it does not scale properly due to positions being absolute. It should be out in a few days.

2 Likes
18

Every time i enter my server the tutorial appear, the firstrespawn function is working? (sorry for bad english)

20

Should be fixed now , pushed to github

21

NEW VERSION RELEASED! (1.2)

  • Fixed ALL SCREEN RESOLUTIONS, now displays perfectly on everything (Was a major pain in the ass, had to rewrite entire design and css)
  • Fixed bug with showing tutorial to players every server restart
  • No more need for photoshop on server title/description in tutorial page (edit in tutorial_config.js)
  • You can even make the background transparent if you want (if you don’t want any background at all) [in responsive.css put a “!important” here: background-color:transparent !important;
3 Likes