1
00:00:00,050 --> 00:00:00,500
Okay then.

2
00:00:00,500 --> 00:00:02,990
So we can start now creating our game.

3
00:00:02,990 --> 00:00:06,380
The first thing we're going to do is make this scene which manages everything, and we're going to call

4
00:00:06,380 --> 00:00:07,700
that a master scene.

5
00:00:07,700 --> 00:00:12,830
I'm going to select other node here and we'll make a canvas layer here and change the name of this to

6
00:00:12,860 --> 00:00:13,940
master scene.

7
00:00:15,320 --> 00:00:19,730
We can do control S to save and then create ourselves a new folder called Master Scene.

8
00:00:19,730 --> 00:00:22,070
And we'll save this scene inside here.

9
00:00:22,460 --> 00:00:25,940
Now we need something that we can see on here so we know what's going on.

10
00:00:25,940 --> 00:00:31,010
So let's add a new node to our master scene and we'll make a texture rect here or create a texture rect.

11
00:00:31,010 --> 00:00:37,580
And then what we can do here is make this full rect and then down inside the assets, inside the images,

12
00:00:37,580 --> 00:00:38,900
we've got this background empty.

13
00:00:38,900 --> 00:00:40,880
I'll just drag that onto the texture rect.

14
00:00:40,910 --> 00:00:43,640
Now if I zoom out a bit here, we can see that the image is a little too big.

15
00:00:43,640 --> 00:00:44,600
That doesn't really matter.

16
00:00:44,600 --> 00:00:50,030
This is purely about visual, so I'm going to press F5 here to run this and then select the current

17
00:00:50,030 --> 00:00:55,040
scene because it'll be our only master screen is the one that runs when the game starts and hopefully

18
00:00:55,040 --> 00:00:55,910
there are no errors.

19
00:00:56,090 --> 00:00:58,310
I've got any code or anything, so there aren't any good.

20
00:00:58,310 --> 00:01:03,420
So we've got some clouds that have loaded up on the screen here and the app appears to be running well.

21
00:01:03,420 --> 00:01:06,870
I'd like to do now is turn the attention to the images inside the Glitch folder.

22
00:01:06,870 --> 00:01:11,430
We've got 49 of these and each time we select a level, we want to get random pairs of these.

23
00:01:11,460 --> 00:01:17,610
Whenever you start using lots and lots of resources, it's usually a good idea to sort of preload them

24
00:01:17,610 --> 00:01:19,230
all into the memory in some way.

25
00:01:19,230 --> 00:01:22,830
And we need to do that and also be able to grab hold of them easily.

26
00:01:22,830 --> 00:01:26,640
So we want to first of all preload them, but we then need to, when we create the levels, be able

27
00:01:26,640 --> 00:01:31,920
to do things like get ourselves a random image or shuffle the images randomly and do various different

28
00:01:31,920 --> 00:01:33,960
things to them so that we can create our levels.

29
00:01:33,960 --> 00:01:38,220
To do that, we're going to make ourselves something called an image manager and that will be a singleton.

30
00:01:38,220 --> 00:01:43,200
So let's right click on resources and make a new folder called Singletons Inside Singletons.

31
00:01:43,200 --> 00:01:50,490
Then what we can do is we can right click and make a new script and we'll call this image manager Control

32
00:01:50,490 --> 00:01:51,180
S to save.

33
00:01:51,180 --> 00:01:56,490
Let's go to project project settings into auto load and let's load up our new singleton.

34
00:01:58,630 --> 00:02:03,460
And there we have a singleton called image Manager so we can do control s to save.

35
00:02:03,490 --> 00:02:06,160
Now we can double click and open up our image manager.

36
00:02:07,660 --> 00:02:10,180
Now, we won't be loading all of the functionality at once.

37
00:02:10,180 --> 00:02:10,590
Don't worry.

38
00:02:10,600 --> 00:02:11,410
Into this image Manager.

39
00:02:11,410 --> 00:02:13,330
There's quite a bit of code that we're going to need to write.

40
00:02:13,360 --> 00:02:17,260
What I want to do for this video is get the code written so that we can actually load the images into

41
00:02:17,260 --> 00:02:19,640
memory in a way that we can access them easily.

42
00:02:19,660 --> 00:02:23,980
We're going to need the ready, but we're not going to need the process so we can delete the process

43
00:02:23,980 --> 00:02:24,930
to start with.

44
00:02:24,940 --> 00:02:28,000
And then we're going to write a new function called load item Images.

45
00:02:29,650 --> 00:02:34,060
This function we're going to call immediately from ready, and I'm going to drop that in there now because

46
00:02:34,060 --> 00:02:36,790
I know I'm going to forget it because I did it a few times in preparation.

47
00:02:36,790 --> 00:02:41,530
So as soon as this scene loads the singleton, so as soon as the program starts, we will start loading

48
00:02:41,530 --> 00:02:42,370
our item images.

49
00:02:42,370 --> 00:02:45,070
What we need to do now is set the path where we want to load the images.

50
00:02:45,070 --> 00:02:50,020
Now you can actually set any path you want on your computer's directory as well as normal paths.

51
00:02:50,050 --> 00:02:54,220
Godot has some special paths with some prefixes as well, and we'll be seeing a few of these throughout

52
00:02:54,220 --> 00:02:54,760
the course.

53
00:02:54,760 --> 00:02:58,360
One of those you can actually see on the left hand side here, which is this res colon, forward slash,

54
00:02:58,360 --> 00:03:02,740
forward slash that tells Godot we're looking in our actual project for the files that we're trying to

55
00:03:02,740 --> 00:03:03,370
access.

56
00:03:03,370 --> 00:03:04,900
So we'll make a new path variable.

57
00:03:04,900 --> 00:03:09,600
So we'll say var path that's going to be equal to res colon forward slash, forward slash, and we want

58
00:03:09,600 --> 00:03:11,240
to hear assets and glitch.

59
00:03:11,540 --> 00:03:17,300
Please make sure you have the spelling exactly the same as you do inside your assets here within the

60
00:03:17,300 --> 00:03:18,230
glitch directory.

61
00:03:18,230 --> 00:03:20,090
Otherwise things are not going to work.

62
00:03:20,090 --> 00:03:21,290
Now we have our path.

63
00:03:21,290 --> 00:03:26,000
What we need to do is open this path so we can look inside and get the files out of it.

64
00:03:26,000 --> 00:03:29,890
Now we need to do is we need to access this directory so we can read the images.

65
00:03:29,900 --> 00:03:35,090
To do that, we're going to use the Dir Access Singleton, which comes built into Godot and that has

66
00:03:35,090 --> 00:03:36,890
a function on it called Open.

67
00:03:36,890 --> 00:03:43,490
So what we can do then is we can do var dir is equal to dir access dot open and then our path.

68
00:03:43,490 --> 00:03:48,590
Now if this is not successful so it doesn't find this path, then dir will be null.

69
00:03:48,590 --> 00:03:52,550
So we can say if not dir then what we'll do is we'll print error.

70
00:03:52,550 --> 00:03:55,700
So at least we know that we've had some kind of error so we can see that in the output.

71
00:03:55,700 --> 00:03:56,990
So we'll do error and path.

72
00:03:56,990 --> 00:03:59,090
And then what we can do is simply return from here.

73
00:03:59,090 --> 00:04:01,780
Otherwise we've managed to go into the directory.

74
00:04:01,820 --> 00:04:04,910
That means then we can get ourselves the names of the files.

75
00:04:04,910 --> 00:04:09,170
So we'll do var and file names and we'll set that equal to Dir.

76
00:04:09,200 --> 00:04:15,050
This is our new directory access that we created using the access singleton and then we can do get files.

77
00:04:15,050 --> 00:04:17,870
This will return us a list of all of the file names.

78
00:04:17,870 --> 00:04:22,850
What we can do then for now is we can print these file names then to the output and see if it's actually

79
00:04:22,850 --> 00:04:24,440
managed to read something in.

80
00:04:24,440 --> 00:04:30,140
So if we do F5 now to run the application, you can see now down in the output that we have got the

81
00:04:30,140 --> 00:04:33,200
list of all of the files inside the directory, which is pretty cool.

82
00:04:33,230 --> 00:04:38,510
One thing you might notice looking inside here is that we've got the import files as well as the PNG

83
00:04:38,540 --> 00:04:41,460
files and we don't want the import files.

84
00:04:41,460 --> 00:04:45,950
So let's press F8 to stop the program and see if we can filter these out a little bit.

85
00:04:45,980 --> 00:04:51,830
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

86
00:04:51,830 --> 00:04:58,100
that if dot import not in file name print f n with that update, let's do F5 again and see if now we

87
00:04:58,100 --> 00:05:03,770
just get the pngs in the output and I can already see that we do get just the pngs inside the output,

88
00:05:04,150 --> 00:05:05,690
which is exactly what we want.

89
00:05:05,690 --> 00:05:10,880
So press f eight to close that and then close down the output here and let's remove this print file

90
00:05:10,880 --> 00:05:11,480
names.

91
00:05:11,510 --> 00:05:17,240
Now, whilst it's very nice to be printing the file names, we actually need to load these files into

92
00:05:17,240 --> 00:05:17,750
memory.

93
00:05:17,750 --> 00:05:20,750
The way we're going to do that is by keeping a list of dictionaries.

94
00:05:20,750 --> 00:05:24,560
So what I'm going to do is make a new var here and call this item images.

95
00:05:25,430 --> 00:05:28,940
Our item images is going to be a list of the images, but not just the images.

96
00:05:28,940 --> 00:05:32,420
It's actually going to be dictionaries with a couple of pieces of information.

97
00:05:32,450 --> 00:05:33,890
You don't need to type this, please.

98
00:05:33,890 --> 00:05:37,760
I just want to show you what the format will be because it's really important to understand it for later

99
00:05:37,760 --> 00:05:38,330
on in the game.

100
00:05:38,330 --> 00:05:41,990
We'll be doing everything in code and if it's not clear what we're using, it's going to get a little

101
00:05:41,990 --> 00:05:43,340
bit confusing later on.

102
00:05:43,340 --> 00:05:45,380
So we'll have a list of dictionaries.

103
00:05:45,380 --> 00:05:50,570
The dictionary will have a key or each dictionary will have a key called item name, and that will then

104
00:05:50,600 --> 00:05:52,370
be the name of the particular image.

105
00:05:52,370 --> 00:05:53,660
Let's say it's tree.

106
00:05:53,690 --> 00:05:55,760
So the original image was tree dot PNG.

107
00:05:56,030 --> 00:05:58,550
The item name we're actually going to have is then tree.

108
00:05:58,550 --> 00:06:04,430
What we'll then also have is we'll have the item texture and that item texture will be the actual file

109
00:06:04,430 --> 00:06:05,510
that's loaded.

110
00:06:05,510 --> 00:06:07,880
Now that's actually a compressed texture.

111
00:06:07,880 --> 00:06:11,270
2D, if I remember correctly, and I can spell that correctly as well.

112
00:06:11,270 --> 00:06:16,970
That'll be the actual file that we then use to set the texture on our particular sprite on our tile.

113
00:06:16,970 --> 00:06:22,160
So whenever we use this image manager later on to fetch, say, a random image, it's actually going

114
00:06:22,160 --> 00:06:24,320
to be giving us one of these dictionaries back.

115
00:06:24,320 --> 00:06:30,110
And then we need to do that image dot item texture to actually get the texture or image dot item name

116
00:06:30,110 --> 00:06:32,780
to actually get the the name of the item.

117
00:06:32,780 --> 00:06:37,060
So we're going to end up with a list of 49 dictionaries, hopefully looking a little bit like this.

118
00:06:37,070 --> 00:06:41,870
All we need to do now is create a function to actually add these dictionaries into our item images.

119
00:06:41,870 --> 00:06:48,530
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.

120
00:06:48,860 --> 00:06:52,700
The first thing we need to do is make the full path for the file that we want to load.

121
00:06:52,700 --> 00:06:57,080
So we'll say var full path is equal to path plus a forward slash, plus the file name.

122
00:06:58,580 --> 00:07:03,860
Now we're going to do is create the dictionary that we want to add then to our item images list.

123
00:07:03,860 --> 00:07:07,280
And I'm going to call this I dict in my mind that stands for.

124
00:07:07,320 --> 00:07:09,210
Or image information dictionaries.

125
00:07:09,210 --> 00:07:12,940
Whenever you see this throughout the program, we're referring to one of these.

126
00:07:12,960 --> 00:07:15,900
So what we want then is we want the item name here.

127
00:07:16,230 --> 00:07:21,030
So the item name is going to be the file name but without the dot PNG.

128
00:07:21,060 --> 00:07:24,330
So we can use a handy method on strings called strip.

129
00:07:24,330 --> 00:07:25,860
So we'll do FN dot.

130
00:07:25,860 --> 00:07:29,280
And then there's our strip and we want to strip then dot PNG.

131
00:07:29,580 --> 00:07:32,340
Then we actually want the item texture as well.

132
00:07:32,340 --> 00:07:37,920
So we'll make the key item texture and this is going to be a loading and we want to load up then from

133
00:07:37,920 --> 00:07:39,090
our full path.

134
00:07:39,090 --> 00:07:43,620
Finally, once we've done that, we can append this then to our item images list.

135
00:07:43,650 --> 00:07:49,020
Now that we have that function written, let's scroll down to where are we inside this print here?

136
00:07:49,020 --> 00:07:51,030
We don't need to do this print anymore.

137
00:07:51,030 --> 00:07:56,430
We can call add file to list with the file name and then we want the path that we set up as well.

138
00:07:56,430 --> 00:07:58,470
And we can do control s to save.

139
00:07:58,500 --> 00:08:02,880
Last but not least, down the bottom here, what we can do then is we can just do loaded colon and have

140
00:08:02,880 --> 00:08:08,260
a look at how many images we've actually loaded so we could do item images, dot and size and control

141
00:08:08,260 --> 00:08:09,180
an S to save.

142
00:08:09,190 --> 00:08:13,690
So if we run the program, what should happen now is we should end up with a list of item images.

143
00:08:13,690 --> 00:08:15,400
That is 49 images long.

144
00:08:15,400 --> 00:08:18,970
I'm wondering if I've made any spelling errors that I'm not seeing here and you've seen.

145
00:08:18,970 --> 00:08:21,430
So let's give this a go, actually, and run this with F5.

146
00:08:22,620 --> 00:08:25,860
And I can see that I get loaded 49in the output.

147
00:08:26,010 --> 00:08:29,550
Now, one thing that is a little bit tricky here, and I think I explained in the intro, we're going

148
00:08:29,550 --> 00:08:32,310
to be doing quite a bit from code with this application.

149
00:08:32,310 --> 00:08:36,390
When you start doing things from code and you don't have something to visualize, it can be quite difficult

150
00:08:36,390 --> 00:08:38,580
to understand what's actually going on.

151
00:08:38,580 --> 00:08:40,110
And this is a case here.

152
00:08:40,470 --> 00:08:43,410
This is where the debugger comes in really, really handy.

153
00:08:43,440 --> 00:08:46,800
Now, a debugger could be worth at least a ten hour course on its own.

154
00:08:46,800 --> 00:08:51,240
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

155
00:08:51,240 --> 00:08:54,900
you can use it throughout the rest of the course when you're developing the other games as well.

156
00:08:54,930 --> 00:08:59,040
Let's imagine we actually want to see what's going on as the program is running here.

157
00:08:59,040 --> 00:09:03,360
If you hover the mouse over this sort of blank strip on the left hand side, you can see these little

158
00:09:03,360 --> 00:09:04,640
red dots appearing.

159
00:09:04,650 --> 00:09:08,880
You can use the mouse with these red dots to actually set what are known as break points.

160
00:09:08,910 --> 00:09:13,290
They're points where the app will actually pause and let you inspect all of the variables and things

161
00:09:13,290 --> 00:09:15,210
that are going on at that particular moment.

162
00:09:15,210 --> 00:09:16,650
That's really, really useful.

163
00:09:16,650 --> 00:09:19,860
So, for instance, what we can do is we can set actually a break point.

164
00:09:19,860 --> 00:09:26,170
Let's say here at the start of the for loop and then we can check what the path is and the directory

165
00:09:26,170 --> 00:09:26,710
object.

166
00:09:26,710 --> 00:09:29,740
Then we can also do is set a break point here as well.

167
00:09:29,740 --> 00:09:35,650
So we would stop the first time we come to add a file so we could check the file name and the path.

168
00:09:35,650 --> 00:09:40,600
Then what we can also do is we can set a breakpoint also here as well, so that when we call add file

169
00:09:40,630 --> 00:09:43,270
to list, we can check what our ID looks like.

170
00:09:43,270 --> 00:09:45,070
So let's have a look at what that actually does.

171
00:09:45,070 --> 00:09:49,660
Let's do F5 to run the application and we'll find that we'll stop straight into the debugger.

172
00:09:49,660 --> 00:09:50,680
And in fact that's happened.

173
00:09:50,680 --> 00:09:54,700
If you see down the bottom, you can see that the debugger window is open and we've stopped here at

174
00:09:54,700 --> 00:09:55,960
our first breakpoint.

175
00:09:55,960 --> 00:10:00,730
If I scroll the window up quite a bit here and scroll the code down, let's see if I can try and find

176
00:10:00,730 --> 00:10:01,210
some space.

177
00:10:01,210 --> 00:10:01,900
I'm so zoomed in.

178
00:10:01,900 --> 00:10:02,320
There we go.

179
00:10:02,320 --> 00:10:02,920
That's good.

180
00:10:02,920 --> 00:10:09,100
We can see that we have local variables here, so the locals are whatever variables are currently created.

181
00:10:09,100 --> 00:10:15,160
We're inside the load item, images, function and we've created the path and the dir and you can see

182
00:10:15,160 --> 00:10:17,260
that with the path and the Dir.

183
00:10:17,290 --> 00:10:23,170
We've also created file names which you can see here and it says it's a packed array string size 98.

184
00:10:23,200 --> 00:10:29,380
In addition, we have members self, so that's this object itself, the, the item, the image manager.

185
00:10:29,380 --> 00:10:32,230
And here we have item images which we created at the top of the file.

186
00:10:32,230 --> 00:10:37,210
That's the variable for this, this whole class and that has a list size of zero.

187
00:10:37,240 --> 00:10:42,490
Then we have globals, which is the image manager, which is exactly the same object number as ourselves

188
00:10:42,490 --> 00:10:43,780
because that's what we're looking at.

189
00:10:43,780 --> 00:10:46,420
So what we can do is go to the next breakpoint, which is this one here.

190
00:10:46,420 --> 00:10:48,070
So I'm going to press next.

191
00:10:48,250 --> 00:10:54,460
And now we can see that we've got this created as well and it's admin underscore widget dot PNG.

192
00:10:54,670 --> 00:10:59,740
So what should happen if I click to the next breakpoint is we should then stop here and see what the

193
00:10:59,740 --> 00:11:00,820
i dict was.

194
00:11:00,820 --> 00:11:01,840
So let's go next.

195
00:11:01,870 --> 00:11:07,540
Now we can see that we've got the i dict that's appeared here, we've got the fn path and full path.

196
00:11:07,540 --> 00:11:12,340
They are now the locals fn path and full path that were created inside this function and we can see

197
00:11:12,340 --> 00:11:17,050
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

198
00:11:17,050 --> 00:11:22,030
widget and the item texture then is here and if we go on the right hand side clicking on that and if

199
00:11:22,030 --> 00:11:27,790
we go on the right hand side we can actually see where this particular resource was loaded from as well.

200
00:11:27,790 --> 00:11:30,310
So we can see it's the admin widget dot PNG.

201
00:11:30,640 --> 00:11:34,720
Now we can go to the next one and that should have added the first image.

202
00:11:34,720 --> 00:11:36,370
And if we scroll down we can see the item.

203
00:11:36,370 --> 00:11:38,740
Images actually is a list of size one.

204
00:11:38,740 --> 00:11:42,850
Now we're now into the next loop, the second loop, but we haven't added the file yet, so we've now

205
00:11:42,850 --> 00:11:46,990
got array size one so we can go forward another couple of breakpoints and we can see now that we've

206
00:11:46,990 --> 00:11:50,590
got array size two, we can actually click on this and have a look at the array.

207
00:11:50,620 --> 00:11:55,000
So the first one is our admin widget and the second one is bag moving box.

208
00:11:55,000 --> 00:11:59,110
Now if you're satisfied with using a debugger, you can always remove the the breakpoints whilst the

209
00:11:59,110 --> 00:11:59,800
program is running.

210
00:11:59,800 --> 00:12:00,580
I find that brilliant.

211
00:12:00,580 --> 00:12:05,740
So you can unclick the breakpoint here and click here and then we can just hit next breakpoint and the

212
00:12:05,740 --> 00:12:07,450
program then runs as normal.

213
00:12:07,450 --> 00:12:10,450
If we look at the output, we can see we've got the loaded 49.

214
00:12:10,450 --> 00:12:13,300
So the debugger is something that can be really, really useful.

215
00:12:13,300 --> 00:12:16,720
And I highly recommend that if something goes wrong in your code or you're not sure, just put some

216
00:12:16,720 --> 00:12:21,010
breakpoints in, run the program, inspect the variables, and it allows you to very quickly get an

217
00:12:21,010 --> 00:12:22,510
easy idea of what's going on.

218
00:12:22,510 --> 00:12:26,350
So I'm going to press F8 to stop the application, then close down the output.

219
00:12:26,380 --> 00:12:30,100
We've written out our load item images, our Add file to list.

220
00:12:30,130 --> 00:12:31,930
Let's remove this print loaded here.

221
00:12:31,930 --> 00:12:33,190
We don't really need this now.

222
00:12:33,190 --> 00:12:34,570
Everything seems to be working.

223
00:12:34,570 --> 00:12:37,930
So we've created our image manager, which is going to come in very, very handy.

224
00:12:37,930 --> 00:12:41,890
We're now loading all the images into a list of dictionaries into the memory.

225
00:12:41,890 --> 00:12:47,230
And we've also taken the time to have a look at the debugger that sets us in good stead, I think,

226
00:12:47,230 --> 00:12:49,450
for the development of the rest of the application.