Create a REAL Loading Screen in Unreal Engine 5 with Async Loading Screen Plugin

hello ladies and gentlemen my name is decryption and I hope you are well one of the key issues I see when people are creating games in un real is either a lack of loading screens or a really poor attempt at a loading screen as you can see I have a game here and I have a trigger right here that takes me to a new level it just basically reloads the same level but if I go into it you can see the game freezes it looks terrible it takes a while to load as your game gets bigger that freeze is going to get longer and longer and longer it's not fantastic stick one of the common things you'll see is people will go into everywhere you open a level so here they will show a widget just before you open a level to show the loading symbol or whatever and then it'll load the level more often or not the show Lo loading part won't work so you'll you'll see them append a delay shortly after it just to give it a few frames to be able to create itself on screen some of the tutorials even put an animated loading screen in but as soon as the open level's called it just freezes and then you have to wait they're not very good so in today's tutorial I'm going to show you how to create a proper loading screen like you see on screen now it has your tip text at the bottom it is completely animated from the start of open level all the way to when the level is fully loaded where it's literally just changing screen and then it's got the dynamic backgrounds on the back which change every time you call loading and as a bonus we're also going to take a look at intro screens as well so you can whack your awesome intro at the beginning of your game so let's get started [Music] now in order to create a proper loading screen the first thing you're going to need is well multiple levels all I've done is I have this level trigger here that basically implements my event interact and then calls open level but I just kind of ignored that and added a trigger so when I my character hits it it just calls open level and all I've done is added the level to a variable and then back in my world I've just set it to the same level so if I hit that trigger it just reopens the same level it's that simple so once we have that you should be able to walk into it and then it will respawn the level dead easy so the next thing you need in order to do a proper loading screen is you need to be able to learn C++ so we can implement the logic into C++ to make the loading screen render on a different thread cuz if we render it on the game thread it will just freeze when the game's changeing levels so we're going to go back 2 years and learn C+ no we're not I'm joking we're not going to go into do that there is a free plugin on the Epic Marketplace called async loading screen it's completely free and it does all the heavy lifting of C++ for you to give you completely animated loading screens now you're not going to get an interactive loading screen like you would with something like Skyrim where you can rotate the models or something like that this isn't going to give you that this is going to give you your bug standard here's some text here's a spinning loading screen and a background image you can add a movie instead of the background image if you want so you could have like a small transition to the left kind of thing or some smoke fading in fires whatever but you're not going to get an interactive loading screen that's the key difference here if you want the interactive loading screen you're going to need to find another Plugin or look into the C++ side but for this sake we need to download this plugin I've tested it on Windows and Linux no problems at all like the plugin claims it works on everything so yes so sign up download that and then add it to your project once you've done that if you go up to edit and plugins just to make sure it's added in you can see I have async loading screen enabled here now the documentation for this is very very good you can just read it all down uh I didn't got any issues with it and they show you all the different types of loading screens I believe they even give you a couple of examples and there tutorials but we're going to run through how I made my custom one so in order to actually use this loading screen let's start with the opening movies to when your game loads so the opening movies are the ones you see on screen now where it says the on real engine if you want that you I think you need to get a license for it but it's fine and then your company logos any other logos you've used as well so what you need to do is if I come into my content folder here you can see I have a movies directory here you need to create this with a capital m just like so so movies this is inside the content folder now it looks like I've got nothing here but I do actually have files in here which is these two here I have the freely available unreal fade in logo and then I have my custom intro here for you know my channel so you just need to put these two in here MP4s are preferred I don't know if it works with anything else but the documentation highly suggests MP4s and just make sure it's not got any dodgy characters in it otherwise it won't work don't worry about unreal not importing it that's completely fine and now in order to start using the plugin let's go to edit and project settings and now normally if you've got an intro movie you'll have added it into the movies here the async loading screen plugin disables this functionality and takes over it so if you have it in here it's not going to work anymore so in order to add the startup movies now if you go into your acing loading screen under game you can see we now have a lot of settings here which is how we control which loading screens we want so if I come into my startup loading screen here this is the one I customize when I'm wanting to change the the startup sequence now you can have a loading screen if you want you don't need to have intro movies but equally you can as well going down all the settings I'm not going to read that every single one of them because some of them you don't really need to know anyway but in order to recreate the loading screen I have I'm going to come in and untick auto complete when loading completes cuz what this is going to do is when your game map has loaded it will auto complete this and skip them all since I'm using this as an intro movie I don't want that and then the next thing I'm going to do is I'm going to make sure the movies are skippable cuz if you come into a game you've already played it multiple times you don't want to sit watching the movies again you want to be able to click through them and this will allow you to just tap the mouse button to skip it really really nice the next thing I'm going to do I'm going to come down to the movie paths here and I'm going to add an iteration to it now you can see it's just wanting some text I don't know why they've not let you select it maybe it's because it doesn't import into one real properly all you need to do is put the exact name of your movie in so you'll see if I come to my content browser and I'll just open this up in my file manager so all they're looking for is you to put the exact name of this without the extension so if I copy this and paste it in here there is my movie path if you put the MP4 it's not going to work cuz it'll append on MP4 later so you just need the exact path you don't need to put SL content SL movies if you've got in a sub folder say intros you can do that but you just need the movie name like so and I'm going to add both of my movie names in like so now you have the option to shuffle this if you want them to be randomly organized and then play but as it stands the movie passs will play every single one and then Shuffle will just randomize them which I don't want them randomize I'm going to put them in the order that I want them so that's completely fine and then if you want anything else adding like maybe you want a spinner on your intro movies or or a custom background you can add all of that but for me that's completely fine I don't need any of that now you'll notice that when you start the game this isn't going to work and this is a key thing about the loading screen most of it it doesn't work in the editor when you're playing it you've got two options you can either you can come up to the top bar and click the three dots and click Standalone game and that will open up a new window build unreal it'll act like it's compiled the game for you now this does work and that will show you the intro mes and everything although in my current game with my current setup you take a hit at the start but then it's already cooked and it works really fast so I'm just going to come up and package the project and I'll click it open here and then it's good practice to package project often anyway cuz you shouldn't be doing it right at the end and then after a while it will package and then now as you can see on screen there is my intro screens nice and up and I can also click through them to skip through them and it takes me to my main menu awesome so that's the first part of the loading screens we now have an intro screen awesome so the next thing we're going to look at is adding the background image of the loading screen cuz at the moment we walk up it freezes it's not fantastic so I'm going to close down the startup loading screen and I'm going to come into the default loading screen so the plug in comes with four or five layouts you can pick from you can customize them as much as you want the first one is which you'll see mostly is classic which is what most people do the next is Center where your spinner is in the middle then letter box where it's at the top and bottom and then sidebar and then duel sidebar you can customize these any way you want now on my current version I don't know why but the classic layout just seems broken it doesn't work great at all glitches out it doesn't show the icons half the time I have got the latest version from their GitHub so chances are it's probably a bug so you'll have to try out all of them but if you do experience any major issues just try switching your layouts and see if it helps but what I'm going to go for is the classic layout but I'm going to use the center L and then just move this throbber down to the bottom and do what I need and just recreating it to get around the bug so I'm going to come and set my minimum loading screen display time to 10 and what this does is basically overwrite when the game loads so this is good to say load the game and if you've not hit 10 seconds yet wait 10 seconds just so they actually have a loading screen because if your game's quite small when you change levels and you're trying to debug it you're never going to see it's going to be on and off so quickly so 10 seconds or 20 anything you want just so you've got a hard code minimum time your screen will show for next I don't want it to autocomplete when loading commences because otherwise that's going to overwrite my display time at the top but typically you will probably want this clicked so as soon as the game's loaded bang it'll jump straight in and I don't want the loading screen to be skippable cuz that doesn't make any sense so I'm going to untick that and next you can see we're going to ignore the movie pass and actually just tick Shuffle cuz I want it to shuffle between the loading elements I give it and then we need to make sure show widget overlay is ticked if this isn't ticked it's not going to show any of the loading screen data below we're about to put in so you'll notice on the startup screen this is actually unticked because we we're not using anything so down here you have your options of loading complete text and this is what shows up saying loading is complete I'm not going to use this so I don't need it but feel free to play around with it so I'm going to come straight into the background here so inside this background section these are going to be the images you actually want to show so you can see on the hover It also says if you haven't got a show widget overlay it's not going to work so we have show a widget overlay so this is going to work and in here is where you bulk add the images you want to show on your loading screen so I hired a custom Fiverr artist called alza design art sorry if I butchered your name it's not sponsored he just did great work when I paid him so as you can see he's got all my loading screens there of all the different characters in the game so we have Glenn the shopkeeper we have the main player we have the Nakamura Twins and we have Lily I just love the artwork how they've actually took the polygon characters and they've into actual characters bully style which I thought was just pretty epic and um my personal favorite I'm torn between Glenn and the player because they're both very very cool what I did was I got these artwork and I included the source of one of them so I could expand it a little bit and that's basically given us the loading screens here so as you can see I have my load screens I've expanded it I've basically made it the size of my monitor or the the maximum size I think people are probably play my game which is probably going to which is going to be 1440p so 2560 by 1440p that's the size of my loading screen and you can see I've purposely left some Gap at the bottom because that's where I want my throbber and yes it is called a throbber we'll get to that later and the tip text down here and I've done the exact same with all of the templates like so so you can really put these any way you want you can put it in a Gallery folder anyway you want I've just created one called loading screens and I've dumped them in here like so so all we're going to do is come up to the project settings back into our Asing loading screen and inside backgrounds I'm just going to drag these in like so there we are next um I'm going to set the image stretch to fill so it just fills the entire screen because I've already set it to 1440p it should work and I really don't need to change any other options on mine you can come in you can change the padding so you can scrunch it down you can add a background color if you you want I don't need any of that because my loading screen images take care of themselves you can see now if I compile and as you see on screen we have a proper loading screen unfortunately it's just static it doesn't really do anything so we need to add functionality but we're already ahead of the curve you will have noticed that we've not had to come into them real and modify anything we've not had to come into the level trigger and say on the open level show loading screen don't show loading screen the plugin takes care of all of that it takes over when you call open level and it shows the loading screen and then continues on how cool is that so let's get on to actually showing some cool stuff let's start with the tit T so this is where we need to start working with the templates of it so we've added the background in order to show it but we need to actually set which layout it's using cuz at the moment it doesn't really matter they're all just showing a background as I said the at the start this classic for me is broken at the moment give it a try if it doesn't work feel free to switch but I'm going to change mine over to Center like so so all I'm going to do is come down to the layout now that I've done that and open up the center one and we can change some of the options in here so because I'm using the center layout based on the screenshot you saw earlier the tip text is at the bottom so it's wrapped in apparent so I'm going to set it horizontally and vertically just in the center so it's across the bottom here and I'm really just going to leave everything else alone except the bottom padding here I'm going to set this to 80 just so it's up from the floor more so it's more in in line of the middle of the screen otherwise it'll be across the very bottom of it which is not what we want and that's all the changes I'm going to make but going down all of here you can choose whether the tip is at the bottom or the top of the screen you can choose which alignment it is so do you want it left aligned right aligned whatever you want you can choose how the Border actually sits you can add some color to it if you want there's loads of settings you can tweak and because it's completely open source you can also go and modify the C++ and add your own as well my only criticism with this plugin is for the artists it would be nice if they didn't have to come in and fill all these settings in a simple blueprint widget would be very nice but this is what we've got for free it's still fantastic so now that we have this let's go and set our tip settings so back in the default loading screen you have this tip widget here and this basically lets you come and add in loads of text that you want and I'm just going to come in and bulk add a bunch of text here there we are so I've added a bunch of tip text here now all random stuff that the game might consider useful if you want text that unlock over the progress of your game you can't really do this with this you'll need to find another way of doing that but you do have another option of set display tip manually which if you over it if you want to show a certain tip at certain times you can do that you just need to call the set display tip index which is setting the array item here and it will only show that one otherwise it will just Shuffle between them so now that we've added all my tip text I'm going to come up and open the appearance I'm going to keep M why I am not going to change any of the font or anything like that but what I am going to do is change the outline so I'm going to change this to a two and I'm going to set the outline color to be black just so it's white and it's got a black outline of it and then for me it wraps just a little bit too early so I'm going to change the wrap at 1,500 just so it's a little bit longer so that's really all I'm going to do so now you can see if I build and compile again or if I simulate the game you can see as we run up to the level transition here you can see we now have tips awesome you can see since the game was loaded back in if I run back in again I get a different tip how cool is that ladies and gentlemen we now have a loading screen with tip showing still this is something you can do with a widget and a delay it's not fantastic let's start animating it so as I said earlier the throbber which is a weird sound is the S the name of the loading Spinners that you commonly see now I've got a custom throbber that I've made as you saw on the intro where I've basically took my logo and then stuck it on a cylinder like a coin and span it and all I've done in blender is I've come and grabbed a cylinder I've compressed it down I've chamfered the edges which you can't really tell but it actually does change it compared to a normal spinning one it's just round of the edges just that little bit just to make it look a bit nicer and then I stuck my logo on it and on the UV editing I basically put my logo so it's only in the middle like that and you can see it wraps the D down here I'm not the greatest text or UV artist but for me it works really well then all I did was enable the three-point lighting plugin built into blender because I don't need any specific type of lighting I need it to be static fixed lighting so if I went to edit plugins in blender and I just added the try lighting option here then I did shift a light and threep point lights added my camera then I sat playing with the animation and I determined 60 frames is all I want and then you can see over the course of it it'll just spin like so and you'll notice that to achieve this all I did was change the curve so I selected both with my key frames I right clicked interpolation mode and I choosed linear which basically means it doesn't accelerate up and then accelerate back down again like you see mostly it's just one constant smooth spin light then finally I came up to my render settings and I made sure I exported it as a PNG and then I went render animation and what this basically did was spat out a bunch of images which I've stuck in my loading screen spinner like so which is each individual frame and you guessed it we do indeed have 60 frames I set it to 60 key frames and you can see as you look across it's my loading spinner and because it's seamless it starts and ends at the same spot it works really really nicely so let's add this into our loading screen so inside the loading widget you get to pick which type of spinner you want so the throbber is the one that you see on most websites where it spins sideways the circular throbber I'm not quite sure what the difference is but I'm going to come and pick image sequence cuz that's the one I want I don't need to worry about so coming down here we we come to the translation settings and this is the key part where I'm overwriting the center's layout in order to place it where I need to you might not need to do this but this is how I achieved the same look as the classic but getting around the bug so all of my Spinners here are actually set 2 1920 x 1080 it's a big image but it's transparent the loading screw spinner is actually very well detailed and possibly doesn't even need to be that detailed but that's what I've rolled with for now so I need to actually scale that down cuz otherwise it's going to render it on top and it'll just have a giant spinner in the middle of the screen you won't be able to see your background it'll just look terrible so I'm going to come and set the scale to be15 so it's 10th almost of what the size is and that's what gives me my nice small loading screen but at the moment it's still in the middle of the page and we don't want that so I'm going to come and set the translation which is pre numbers I already know of 300 by 150 so that'll move it 300 across and 150 down which will roughly put it in the bottom right where I need it to the pivot I'm also going to set to one and one because all this does is move from the center down to the bottom corner and then when I do 300 to 150 it's in the bottom corner here if it's in the center it will be hanging off the screen which is not what we need now I don't need any loading text because I'm not using it so I'm going to get rid of it and I'm going to untick the two bits here for the loading text because it doesn't really matter now the appearance we don't need to change because we're not using the loading text so I can get rid of that and then this is where you can come and ignore the two throbber and circular throbber settings cuz we've not set them so I can come straight into image sequence so all I need to do is drop in 60 images here so a little tip for you if you just drag it off to the side I can control space to open this up I can select all of them and just drag them all into here like so and it'll go boom 60 array element and it's now populated all 60 images like so and now it's not going to shuffle the image sequence because otherwise your flip chart would look really really odd your Sprite sheet so we're going to ignore that the scale in the interval I'm going to keep the same but you might want to change the interval to make your animation play as smoothly as you want I find 0. 5 works really well for me and that ladies and gentlemen is pretty much all I've done for the loading screen so you can see now if I load it up we have our intro screens perfect when we get to a loading screen you can see it loads we've got an animated spinner at the bottom right we have the text and we have the background and each time we walk into it it all completely changes how cool is that it's fully animated loading screen now you can come back in and you can set movies on the loading screens if you want a transition over something or you can do anything you want and it'll look really cool and everything will work really nicely so there we are ladies and gentlemen there is a proper loading screen in on real engine none of this freezing one where you just show some static image and that's it you can't do anything else we have an anime all the way through loading the map right until it's about to switch off and then boom it's done instant there we go and there's plenty more to the plug-in you can add so much to it you can also go and customize it however you want [Music] [Music] have you got any suggestions ladies and gentlemen how would you create your loading screens if you've already created one show me below if you've gone into the C++ and modded it let me know below cuz it'll be cool to see thank you for watching my name is decryption and I will see you next time

Channel: D3kryption

Views: 11,658

Keywords: unreal engine plugin, unreal engine, unreal fest, unreal fest europe, game engine, ue4 plugin, game development, unreal, epic games, game dev, UnrealEngine5, GameDev, LoadingScreen, AsyncLoadingScreen, GameDesign, UnrealTutorials, ue4, unreal engine 4, Create a REAL Loading Screen in Unreal Engine 5, REAL Loading Screen in Unreal Engine, Async Loading Screen Plugin, Unreal Engine 5 tutorial, ue5, unreal engine 5, incorporate animated spinners

Id: TRpFxT9zGu8

Length: 22min 0sec (1320 seconds)

Published: Thu Nov 09 2023