How to add custom loading screen to FiveM (Picture & Video) (2021)

hello everybody and welcome back to the channel today we're going to be taking a look at two different types of loading screens we have your basic one here that uses images and then we have this one here that uses videos so i have a server set up for us and if we go into our resources we can actually open up these loading screens and you can see what they are so this is the one that i've put my own video into because this is the original background image that they had chosen for it i simply went into premiere pro and shows that the the media is offline because i deleted the uh old background video but i simply took their background video dropped it in and dropped my own video layer over top of it you can use any sort of editing software that you would like to customize this because i was having some issues with actually getting just the regular video that i downloaded off of youtube to actually work so as long as you make a copy of the original background and overlay a new background in it in 1080 should work you'll be able to drag it in don't need to save any of that so that's what this is what this loading screen looks like and this down at the bottom actually has a bar and the other loading screen that we're going to be taking a look at today and i'll be showing you how to download and install these is a little bit simpler the background is not showing uh in chrome but you have your your rules you connect with us and then the content like what's actually on the server and you can customize all those this is the first loading screen we're going to be taking a look at so i simply just did a test to make sure that these guys are working you pretty much just want to go into the config and you want to set your your background image by default when you download this it is going to say use background color true you just want to change that to say use background color false and then change use background image from false to true and you can select whatever background image at whatever file extension you want i would personally use a dot png but you can use a jpg or whatever your preferred picture file type is it has audio you pretty much just grab the so if we go back over here and we just pop out my channel over here and let's click on the this video here you pretty much just want these little bit of letters and numbers before the the channel and stuff now the github page for this i believe covers this yeah so it covers it it's the question watch and then the channel id and that'll bring up your music so this loading screen will be linked down in the description you simply just want to click code download zip and open it up here and you want to close out of that and we will delete here in resources we will delete this loading screen i'm not going to delete uh that one because i have the actual video file that i'm using stored in there just drag it in drop it and call it loading screen you want to head over to your tx admin and you want to go into your cfg editor or i don't have the actual server that i use for videos at the moment that's currently sitting on a hard drive that is in a different location so i don't have that setup because i completely redid windows on my computer but you could have it in a config file like how i showed in the previous video and just ensure this in scr in your scripts.cfg so here i have loading screen insured and if we start the server you'll notice that when we launch 5m and actually go in to take a look at the server we go play and then we connect to our local host you'll see it just gives you this with a black background so what we're going to do in order to change that is we're going to head into our config folder once we get into the game here and i can quit out of 5m but we are going to head into our config folder to actually change that out from just that black grayish background to a actual image so you want to go into the loading screen folder then click loading screen again and open up config here as you can see oh it's saying to use that why isn't that working um hello that is our loading screen images and everything are there it should be showing us this image so here's one thing we can do if that does not work we can always head back to our cfx default base and delete our cache folder now that that's deleted i'm going to go ahead and give our server a restart and that's going to bring everything back online and we're going to take another look to see if it worked but by default uh those two things should be switched around i believe it was because i already had it in there and i deleted it and re-added it it caused that issue uh we're gonna see right now if that issue is fixed now that the cache folder is no longer there yes you can see now it was just a cache folder issue if you have that issue and everything is set correctly where use background color is false and use background image is set to true just simply change that out so to log into the server with that nice background and from there the only things you have to do which you can do on your own is in your config just update the website to what yours is your rules and whatever you want to put down here in content you can even change out the background images and use your own images if you would like so now that that is out of the way as well as you see that it doesn't actually does here insert server title name here so we can just make this like i'll just say hello youtube tutorial we can save that restart the server and when we rejoin it's going to show hello youtube server or youtube tutorial and that's just pretty much just going to be what the title of your server is you know like no pixel rp or something like that as you can see here kind of in the white background text it says hello youtube tutorial it's kind of hard to see because of the white text but you should be able to change that don't really have to it works with whatever image really so now that that loading screen is done and i quickly covered at the beginning of this video how to set up the the video for the second loading screen you can literally download whatever you want i just looked up like 4k nature on youtube and grabbed a video and downloaded it so the next one we're going to be looking at here is this loading screen you can just simply same thing again download zip and we'll actually do that for the sake of this video open it up it'll say 5m loading screen main you go in here where it says loading screen and you would just simply drag and drop that into your resources folder we already have one cold loading screen this one is called video loading screen so in here you what you would do is you would go you'd open up the loading screen folder you would go into html and assets this is where you can change out the background video which is this video here of just a a nature scene that was cut down to actually fit the the length that it had and here this is just the logo can be whatever size you want it'll fit on the screen and then they have a mp3 music file so for that one once you create your video there's no really configuration changing or anything you have to do i would recommend still taking this background video into whatever your video editing software of choice is and changing it out uh just by overlapping another video on top of it so once you have done that and you've exported that as a mp4 it has to be an mp4 file you can then go into your tx admin we'll stop our server and i'll go ahead and once again for video sake delete the cache if you haven't put in a loading screen yet that's all good you can go ahead and delete the cache we could go into our cfg editor we're going to comment out the other loading screen and start our video loading screen so we click save and forgot to start the server go back over here click start once the once we see that the server is online we can then go ahead and open up 5m now for me the reason i am going into play and connecting like this instead of clicking this button here for whatever reason 5m wants to think that the local host is a completely different computer i have another server running on a completely different computer uh for a youtuber and it wants to throw me into that server so i just click play you just type in like localhost call in 3120 or your pc's default ip address on your network and for me that is just one nine it should be 192.168.1 dot a set of numbers so now if we click connect here you're going to see it shows us our background with the nice little loading bar at the bottom with whatever logo you decide to switch that out with and that's going to take you and load you into your game depending on how many scripts you have and how long it takes your server to load up could depend on how long that video plays so we can now exit the game and if you want to for those of you who want to connect with your ip address i can show you this real quick you type in cmd you open up your command prompt and you type in ip config and hit enter and it will tell you your ip right here your ipv4 address for your computer so guys thank you so much for watching i hope you all enjoyed if you enjoyed this video and you'd like to see more content from me feel free to subscribe ninety percent of the people who watch my videos aren't subscribed uh so make sure to click that subscribe button hit the bell join the discord linked down in the description guys thank you so much for watching i hope you all enjoyed goodbye

Channel: trolioDev

Views: 37,698

Keywords: fivem loading screen tutorial, fivem loading screen music, FiveM Tutorial, FiveM, loading screen, caylus, tomo, slogo, jelly, crainer, infinite, gta, gtav, gtarp, gta rp, gtav rp, esx, esx framework, esx tutorial, fivem video loading screen

Id: 1xxe9RpwJWY

Length: 13min 1sec (781 seconds)

Published: Tue Sep 14 2021