How to Make a Loading Screen that Passes Parameters (Godot 4 Tutorial)

huh that was fast now that the video has loaded I'll show you how you can make a loading screen faster than many AAA games can finish loading we're not going to just make any old loading screen either I'll also show you how you can make your loading screen more appealing as gamed as we owe it to our players to make the loading process bearable especially for games that take a long time sometimes the loading screens can be fun on their own without further Ado let's load up Godot and get into it we'll start by making a basic loading screen so we'll have the functionality in place first let's create a new Godot scene since it's a UI we can use a canvas layer node as a root node you can also use a control node as a root but I find a canvas layer works well when it comes to separating different screens underneath that we then add our control node and change the anchors to full rect right underneath that we'll add a texture rack which is also fully racked at a gradient texture 1D to the texture rect and remove the white bar to make a black background then we can add some text that says loading by using a label our initial label as you see fit after that add a script on a root node and call it something like loading screen we'll be using logic based on the official Godot docs regarding background loading I have linked the page in the description if you want to check it out basically will be using a Singleton class called resource loader that can load the scene we specify behind the scenes for those who are uninitiated a Singleton is a programming technique that allows you to use the class name to access properties and methods without instantiating copy first unlike stack functions which can also be accessed with the class name Singletons are actually objects that can be modified during runtime that means we need to tell the loading screen which scene we want to load to do this create an export variable like this that can be used in the editor or pick a scene file in the ready function add this line of code to tell a resource loader to start loading the given scene we will need to check on the resource loader periodically to see if it's finished so we'll add a code in the process function like this the load threaded get status function will accomplish this and we can use the built-in enum to check that it's loaded we can then open our destination scene by adding this logic let's also add a set process false calls so the process function doesn't get called more than once while we finish loading resource loader loads the scene into a pack scene object so we can use that to change our current scene the test is out I set the Project's main scene to the loading screen and then in the editor I set the target scene to the main test scene when I run the game it works a little little too well just so we can tell it's actually working let's add a small delay into code so we can see the loading screen first the target scene isn't too big so it takes no time to load when I try again we can actually see the loading screen this time don't forget to remove the delay unless you like it there we now have the basic functionality in place but it's not very useful in this state suppose you want to use the loading screen to transition from any scene to any scene you can do this by making a single chain of our own it provides a function dial handle instantiating the loading screen for us add a new script in your project and call it something like functions this class can also be useful for functions that are extremely generic but can be used anywhere such as formatting time before we add the code go to your project settings and Godot click the auto load tab add your new class file and enable the global variable checkbox this tells Godot to load the script when the game loads which also makes it function like a Singleton now back to the code create a function like this with a parameter that lets you specify the scene path at this logic here the preload the loading screen scene and Make an instance of it and we will assign the next scene path to the instance so it knows where to load to finally we add the scene as a child to the active scene to test this function and out briefly I made a dummy scene with a button to download the main scene like before I added the logic to the button to call our new function and you can see that it works if you're enjoying this video so far I would appreciate if you see it all the way through I really want my effort making videos to benefit everybody and watching a video all the way tells YouTube to promote to a bigger audience this also helps me build an audience for my game flick while also giving back to the community thank you so much now back to the tutorial now that we have a functional load from anywhere how can we make the loading screen more flexible by adding the ability to pass parameters to the new scene is that even possible though the gettry methods that we used before don't support parameters however with the help of some official Godot documentation and some manual scene arrangement we can make this work get started let's add a script to our main scene add a parameter variable like this because it'll need to exist on the scenes we intend to load then add a code to print the parameters to the console as a test see that it's empty if I ran the scene alone next go to the loading screen script so we can make the proper changes to the loader also add a parameters variable the same type here as a pass-through between scenes after that replace to change scene line with this code to instantiate the Target scene and assign the parameters to achieve the same effect as the chain scene function we'll need to First temporarily assign a currency and as a variable then we'll need to add our new scene as a child to the root node and sign a current scene to our new node it's very important that we do this in the exact order because you can't assign a scene as a current scene if it's not in the scene tree yet pretty old scene that's in a temporary variable at the end and I'll take care of the scene swapping right before we test this out go back to the function script and add a parameters parameter to the load function along with a line to assign the parameters to the loading screen test this one out I edited the dummy scenes buttons to pass it to a dictionary now if I run it you should see it now Echoes the parameters once we reach the new scene it's great that our loading screen works now but it's really quite boring to look at so let's load it up with some cool visuals since this code I'm about to show you is from flick directly I won't create the content on the Fly instead I'll give you a walk through the scenes and the code originally I planned on making a loading screen net with cycle tips and would have a little animated graphic to illustrate just the tip however it was taking too much effort to make the graphics for each tip so I settled on this and instead the result reminds me a lot of the loading screen you see in Donkey Kong Country Returns anyway here's a glimpse of my loading screen scene tree I added labels for the tip title and the tip details I also have the loading label in the center of the screen with its own animation player I'll explain that in a bit or the tips I edited the script to include an array of elements like this I probably should have put this information in a separate file but I'm lazy so here it is in the ready function I randomly select a chip to display by Rolling a random number between the size of the array and then I update the labels accordingly to make the animated background I had to get a little creative I reused a mountain background assets I had and duplicated them four times so they line up twice the screen's length I wanted to make the mountains a solid color so I did this by making a very basic canvas item Shader make the Shader I selected all four mountains and added a new Shader material here the Shader is extremely simple it's just a couple lines of code that override the color of the Sprite with the one I choose I then group the four Mountain Sprites under a separate node TD so I can animate them together more easily for the animation I ran to a bit of an issue though I wanted to Loop several Assets in the animation however to Loop them seamlessly on the same same timeline they would have to have the same duration I wanted the player to walk faster than the mountains for example do this on one timeline I would have to duplicate the player's walk animation on the same track which gets messy because I can't set the end frame in the start frame at the same time like this here I could in theory just put the frames really close together but that didn't feel very good to me instead I decided to make an animation player for each looping animation so they can have their own duration for the mountains I made a simple four second animation where I moved to Mountains from the left side all the way to the right side I made sure to check the loop in auto play on load buttons for the character I did mostly the same thing I copied the Sprite from my player scene and applied the same Shader to it with a white color however I had to duplicate the Shader or else I'd be editing them all at once the player moves from one end of the screen to the other like the mountains but over two seconds instead of four account for the sprite animation I made a third animation player that basically Loops the walking frames accordingly which is even shorter as for the ground I literally just took a block spray apply the same Shader and stretched it a little now we get into the meat and potatoes the initial loading screen animation first I animated the modulate property of the background which is a black color rect from transparent to full color over half a second or to tip text labels I started with moving them off the screen about 3840 pixels away and then moved them to the center of the screen over half a second make the animation more Dynamic I offset these animation tracks so they happen slightly delayed from each other once the labels reach the center of the screen I added a squash animation to each of them the squash animation works by setting the X scale to half and back to full again or the loading label I didn't do too much other than animate the modulate property but a bit delayed and finally to fade into Sprite work I grouped all the Sprites under a new node 2D and animated the modulator that group like this as far as code tweaks go I wanted to make sure the player Taps on the screen to start the level before it opens so I add some logic in the process function to change the loading labels text to signal that the loading is complete I then added a GUI input function that attaches to the background color rect so that the user can click on the screen and start when the loading is done to fade out the screen I just played the init animation in reverse and then switched scenes once the animation finished and that's more or less what I did while working on this I reference a very helpful GD Quest article for the scene transitions that link is in the description as well with all that said and done here's a Final loading screen once again that's all there is for this video don't hesitate to leave a comment if you have any questions thank you for watching and have a great day as always

Channel: CoderNunk

Views: 3,908

Keywords: godot, godot 4, godot tutorial 2d, godot tutorial, godot 4 tutorial, godot 4 tutorial 2d, loading screen, loading, scene swap, scene switch, scene transition, transition, scene transitions, gamedev, game development, coding, gdscript, gdscript tutorial, godot 4.0, godot engine, godot game engine, godot4, godot 4 animation, how to godot, godot 2d, games made with godot, game dev, godot 4.0 tutorial, how to use godot, godot 4.0 stable, indie game dev, made with godot

Id: n0HXRToIZBc

Length: 8min 20sec (500 seconds)

Published: Tue Jun 27 2023