Okay then.
So we can start now creating our game.
The first thing we're going to do is make this scene which manages everything, and we're going to call
that a master scene.
I'm going to select other node here and we'll make a canvas layer here and change the name of this to
master scene.
We can do control S to save and then create ourselves a new folder called Master Scene.
And we'll save this scene inside here.
Now we need something that we can see on here so we know what's going on.
So let's add a new node to our master scene and we'll make a texture rect here or create a texture rect.
And then what we can do here is make this full rect and then down inside the assets, inside the images,
we've got this background empty.
I'll just drag that onto the texture rect.
Now if I zoom out a bit here, we can see that the image is a little too big.
That doesn't really matter.
This is purely about visual, so I'm going to press F5 here to run this and then select the current
scene because it'll be our only master screen is the one that runs when the game starts and hopefully
there are no errors.
I've got any code or anything, so there aren't any good.
So we've got some clouds that have loaded up on the screen here and the app appears to be running well.
I'd like to do now is turn the attention to the images inside the Glitch folder.
We've got 49 of these and each time we select a level, we want to get random pairs of these.
Whenever you start using lots and lots of resources, it's usually a good idea to sort of preload them
all into the memory in some way.
And we need to do that and also be able to grab hold of them easily.
So we want to first of all preload them, but we then need to, when we create the levels, be able
to do things like get ourselves a random image or shuffle the images randomly and do various different
things to them so that we can create our levels.
To do that, we're going to make ourselves something called an image manager and that will be a singleton.
So let's right click on resources and make a new folder called Singletons Inside Singletons.
Then what we can do is we can right click and make a new script and we'll call this image manager Control
S to save.
Let's go to project project settings into auto load and let's load up our new singleton.
And there we have a singleton called image Manager so we can do control s to save.
Now we can double click and open up our image manager.
Now, we won't be loading all of the functionality at once.
Don't worry.
Into this image Manager.
There's quite a bit of code that we're going to need to write.
What I want to do for this video is get the code written so that we can actually load the images into
memory in a way that we can access them easily.
We're going to need the ready, but we're not going to need the process so we can delete the process
to start with.
And then we're going to write a new function called load item Images.
This function we're going to call immediately from ready, and I'm going to drop that in there now because
I know I'm going to forget it because I did it a few times in preparation.
So as soon as this scene loads the singleton, so as soon as the program starts, we will start loading
our item images.
What we need to do now is set the path where we want to load the images.
Now you can actually set any path you want on your computer's directory as well as normal paths.
Godot has some special paths with some prefixes as well, and we'll be seeing a few of these throughout
the course.
One of those you can actually see on the left hand side here, which is this res colon, forward slash,
forward slash that tells Godot we're looking in our actual project for the files that we're trying to
access.
So we'll make a new path variable.
So we'll say var path that's going to be equal to res colon forward slash, forward slash, and we want
to hear assets and glitch.
Please make sure you have the spelling exactly the same as you do inside your assets here within the
glitch directory.
Otherwise things are not going to work.
Now we have our path.
What we need to do is open this path so we can look inside and get the files out of it.
Now we need to do is we need to access this directory so we can read the images.
To do that, we're going to use the Dir Access Singleton, which comes built into Godot and that has
a function on it called Open.
So what we can do then is we can do var dir is equal to dir access dot open and then our path.
Now if this is not successful so it doesn't find this path, then dir will be null.
So we can say if not dir then what we'll do is we'll print error.
So at least we know that we've had some kind of error so we can see that in the output.
So we'll do error and path.
And then what we can do is simply return from here.
Otherwise we've managed to go into the directory.
That means then we can get ourselves the names of the files.
So we'll do var and file names and we'll set that equal to Dir.
This is our new directory access that we created using the access singleton and then we can do get files.
This will return us a list of all of the file names.
What we can do then for now is we can print these file names then to the output and see if it's actually
managed to read something in.
So if we do F5 now to run the application, you can see now down in the output that we have got the
list of all of the files inside the directory, which is pretty cool.
One thing you might notice looking inside here is that we've got the import files as well as the PNG
files and we don't want the import files.
So let's press F8 to stop the program and see if we can filter these out a little bit.
What we'll do then is we'll say for F in for file name in and then our file names and then we can say
that if dot import not in file name print f n with that update, let's do F5 again and see if now we
just get the pngs in the output and I can already see that we do get just the pngs inside the output,
which is exactly what we want.
So press f eight to close that and then close down the output here and let's remove this print file
names.
Now, whilst it's very nice to be printing the file names, we actually need to load these files into
memory.
The way we're going to do that is by keeping a list of dictionaries.
So what I'm going to do is make a new var here and call this item images.
Our item images is going to be a list of the images, but not just the images.
It's actually going to be dictionaries with a couple of pieces of information.
You don't need to type this, please.
I just want to show you what the format will be because it's really important to understand it for later
on in the game.
We'll be doing everything in code and if it's not clear what we're using, it's going to get a little
bit confusing later on.
So we'll have a list of dictionaries.
The dictionary will have a key or each dictionary will have a key called item name, and that will then
be the name of the particular image.
Let's say it's tree.
So the original image was tree dot PNG.
The item name we're actually going to have is then tree.
What we'll then also have is we'll have the item texture and that item texture will be the actual file
that's loaded.
Now that's actually a compressed texture.
2D, if I remember correctly, and I can spell that correctly as well.
That'll be the actual file that we then use to set the texture on our particular sprite on our tile.
So whenever we use this image manager later on to fetch, say, a random image, it's actually going
to be giving us one of these dictionaries back.
And then we need to do that image dot item texture to actually get the texture or image dot item name
to actually get the the name of the item.
So we're going to end up with a list of 49 dictionaries, hopefully looking a little bit like this.
All we need to do now is create a function to actually add these dictionaries into our item images.
So let's go above the load item images and we'll do add file to list taking in a file name and a path.
The first thing we need to do is make the full path for the file that we want to load.
So we'll say var full path is equal to path plus a forward slash, plus the file name.
Now we're going to do is create the dictionary that we want to add then to our item images list.
And I'm going to call this I dict in my mind that stands for.
Or image information dictionaries.
Whenever you see this throughout the program, we're referring to one of these.
So what we want then is we want the item name here.
So the item name is going to be the file name but without the dot PNG.
So we can use a handy method on strings called strip.
So we'll do FN dot.
And then there's our strip and we want to strip then dot PNG.
Then we actually want the item texture as well.
So we'll make the key item texture and this is going to be a loading and we want to load up then from
our full path.
Finally, once we've done that, we can append this then to our item images list.
Now that we have that function written, let's scroll down to where are we inside this print here?
We don't need to do this print anymore.
We can call add file to list with the file name and then we want the path that we set up as well.
And we can do control s to save.
Last but not least, down the bottom here, what we can do then is we can just do loaded colon and have
a look at how many images we've actually loaded so we could do item images, dot and size and control
an S to save.
So if we run the program, what should happen now is we should end up with a list of item images.
That is 49 images long.
I'm wondering if I've made any spelling errors that I'm not seeing here and you've seen.
So let's give this a go, actually, and run this with F5.
And I can see that I get loaded 49in the output.
Now, one thing that is a little bit tricky here, and I think I explained in the intro, we're going
to be doing quite a bit from code with this application.
When you start doing things from code and you don't have something to visualize, it can be quite difficult
to understand what's actually going on.
And this is a case here.
This is where the debugger comes in really, really handy.
Now, a debugger could be worth at least a ten hour course on its own.
So I don't want to go into massive detail, but I do want to show you the very basics of it now so that
you can use it throughout the rest of the course when you're developing the other games as well.
Let's imagine we actually want to see what's going on as the program is running here.
If you hover the mouse over this sort of blank strip on the left hand side, you can see these little
red dots appearing.
You can use the mouse with these red dots to actually set what are known as break points.
They're points where the app will actually pause and let you inspect all of the variables and things
that are going on at that particular moment.
That's really, really useful.
So, for instance, what we can do is we can set actually a break point.
Let's say here at the start of the for loop and then we can check what the path is and the directory
object.
Then we can also do is set a break point here as well.
So we would stop the first time we come to add a file so we could check the file name and the path.
Then what we can also do is we can set a breakpoint also here as well, so that when we call add file
to list, we can check what our ID looks like.
So let's have a look at what that actually does.
Let's do F5 to run the application and we'll find that we'll stop straight into the debugger.
And in fact that's happened.
If you see down the bottom, you can see that the debugger window is open and we've stopped here at
our first breakpoint.
If I scroll the window up quite a bit here and scroll the code down, let's see if I can try and find
some space.
I'm so zoomed in.
There we go.
That's good.
We can see that we have local variables here, so the locals are whatever variables are currently created.
We're inside the load item, images, function and we've created the path and the dir and you can see
that with the path and the Dir.
We've also created file names which you can see here and it says it's a packed array string size 98.
In addition, we have members self, so that's this object itself, the, the item, the image manager.
And here we have item images which we created at the top of the file.
That's the variable for this, this whole class and that has a list size of zero.
Then we have globals, which is the image manager, which is exactly the same object number as ourselves
because that's what we're looking at.
So what we can do is go to the next breakpoint, which is this one here.
So I'm going to press next.
And now we can see that we've got this created as well and it's admin underscore widget dot PNG.
So what should happen if I click to the next breakpoint is we should then stop here and see what the
i dict was.
So let's go next.
Now we can see that we've got the i dict that's appeared here, we've got the fn path and full path.
They are now the locals fn path and full path that were created inside this function and we can see
we've got our I dict if we click on that we can see that the item name key is there, it's the admin
widget and the item texture then is here and if we go on the right hand side clicking on that and if
we go on the right hand side we can actually see where this particular resource was loaded from as well.
So we can see it's the admin widget dot PNG.
Now we can go to the next one and that should have added the first image.
And if we scroll down we can see the item.
Images actually is a list of size one.
Now we're now into the next loop, the second loop, but we haven't added the file yet, so we've now
got array size one so we can go forward another couple of breakpoints and we can see now that we've
got array size two, we can actually click on this and have a look at the array.
So the first one is our admin widget and the second one is bag moving box.
Now if you're satisfied with using a debugger, you can always remove the the breakpoints whilst the
program is running.
I find that brilliant.
So you can unclick the breakpoint here and click here and then we can just hit next breakpoint and the
program then runs as normal.
If we look at the output, we can see we've got the loaded 49.
So the debugger is something that can be really, really useful.
And I highly recommend that if something goes wrong in your code or you're not sure, just put some
breakpoints in, run the program, inspect the variables, and it allows you to very quickly get an
easy idea of what's going on.
So I'm going to press F8 to stop the application, then close down the output.
We've written out our load item images, our Add file to list.
Let's remove this print loaded here.
We don't really need this now.
Everything seems to be working.
So we've created our image manager, which is going to come in very, very handy.
We're now loading all the images into a list of dictionaries into the memory.
And we've also taken the time to have a look at the debugger that sets us in good stead, I think,
for the development of the rest of the application.