1 00:00:08,420 --> 00:00:13,382 This is the second lecture in module five where we're exploring XNA and 2 00:00:13,382 --> 00:00:15,650 how we can use it to build games. 3 00:00:15,650 --> 00:00:18,370 So here are the module five learning objectives, and 4 00:00:18,370 --> 00:00:22,260 today we're going to address the second one where we're going to load and 5 00:00:22,260 --> 00:00:24,210 draw some sprites in our XNA game. 6 00:00:26,000 --> 00:00:31,930 So last time, we talked about the basic concepts about how games in general and 7 00:00:31,930 --> 00:00:34,650 XNA games in particular work. 8 00:00:34,650 --> 00:00:38,670 This time we're going to build our first XNA game, and 9 00:00:38,670 --> 00:00:42,210 at the end of last lecture I said I hesitate to call it a game. 10 00:00:42,210 --> 00:00:46,530 So you should take this in-lecture quiz to tell me why I have that hesitation. 11 00:00:52,336 --> 00:00:56,588 I should tell you based on one of the options in that in lecture quiz that 12 00:00:56,588 --> 00:01:00,500 I am not a hardcore traditionalist about programming. 13 00:01:00,500 --> 00:01:04,840 When you program, you are allowed to drink any flavor of Mountain Dew. 14 00:01:04,840 --> 00:01:08,240 It doesn't have to be the original green stuff. 15 00:01:08,240 --> 00:01:12,711 Okay, so let's actually start up the IDE. 16 00:01:12,711 --> 00:01:18,290 I've already built a project, and we'll get to work loading and drawing sprites. 17 00:01:18,290 --> 00:01:23,500 When we create our MonoGame Windows project from within Visual Studio, 18 00:01:23,500 --> 00:01:27,270 we end up with a folder structure that's automatically built for us. 19 00:01:27,270 --> 00:01:33,110 And so later on you might need to go open your solution again or 20 00:01:33,110 --> 00:01:36,510 you might've downloaded it from the Coursera website. 21 00:01:36,510 --> 00:01:40,130 And so how do you actually open it up? 22 00:01:40,130 --> 00:01:45,094 Well, when you navigate through the folder structure you'll end up at a folder 23 00:01:45,094 --> 00:01:48,575 that includes a file, I'll expand this so you can see, 24 00:01:48,575 --> 00:01:51,930 it's Microsoft Visual Studio Solution. 25 00:01:51,930 --> 00:01:56,140 That's the file you double-click to open up your project. 26 00:01:57,140 --> 00:02:02,010 And so you wait patiently while it opens, and we've discussed what happens 27 00:02:02,010 --> 00:02:05,860 when you just have this blue screen over here with no code. 28 00:02:05,860 --> 00:02:12,400 So let's click on Game1.cs because that opens up our Game1 file for us. 29 00:02:12,400 --> 00:02:14,970 And we'll start off by running this and 30 00:02:14,970 --> 00:02:19,090 seeing that it gives us that cornflower blue screen. 31 00:02:19,090 --> 00:02:23,780 And we'll keep the blue, but that aspect ratio is just crazy. 32 00:02:23,780 --> 00:02:27,409 So let's actually make this build an 800 by 600 game. 33 00:02:28,480 --> 00:02:29,840 And we can do that, 34 00:02:29,840 --> 00:02:33,410 remember I said some of our initialization can happen in the constructor. 35 00:02:36,545 --> 00:02:41,042 So we're going to change the resolution to 800 by 600, 36 00:02:41,042 --> 00:02:45,980 because that's an awesome, amazing resolution for games these days. 37 00:02:47,040 --> 00:02:49,480 The way we do it is we access. 38 00:02:50,760 --> 00:02:54,098 Remember there's this GraphicsDeviceManager? 39 00:02:54,098 --> 00:02:55,800 We didn't really talk about this before but 40 00:02:55,800 --> 00:03:01,000 there's this GraphicsDeviceManager that is for managing our graphics device. 41 00:03:01,000 --> 00:03:04,460 So we will set the graphics. 42 00:03:04,460 --> 00:03:09,840 So this is an object reference followed by a dot PreferredBackBufferWidth. 43 00:03:11,830 --> 00:03:13,369 So no parenthesis, so 44 00:03:13,369 --> 00:03:18,640 object.something with no parentheses means we're accessing a property. 45 00:03:19,660 --> 00:03:22,350 And we'll set the PreferredBackBufferWidth to 800 and 46 00:03:24,470 --> 00:03:28,200 we'll set the PreferredBackBufferHeight to 600. 47 00:03:32,545 --> 00:03:36,220 So there's all kinds of sort of underlying details. 48 00:03:36,220 --> 00:03:38,755 Just so you know what a back buffer is, 49 00:03:38,755 --> 00:03:43,592 basically what happens is stuff gets drawn to the back buffer first, and 50 00:03:43,592 --> 00:03:49,086 then it gets slammed to the graphics card to be displayed on the screen all at once. 51 00:03:49,086 --> 00:03:51,864 And that actually helps prevent flickering and 52 00:03:51,864 --> 00:03:56,460 all kinds of weird things that happen if you don't actually use a back buffer. 53 00:03:56,460 --> 00:04:00,133 So we'll run it with F5 and we see now, awesome, 54 00:04:00,133 --> 00:04:04,170 we have an 800 by 600 screen, so that's great. 55 00:04:04,170 --> 00:04:08,897 The next thing that we want to do is we want to actually declare 56 00:04:08,897 --> 00:04:11,040 some fields in this class. 57 00:04:11,040 --> 00:04:16,720 These are just variables for loading and drawing a couple of sprites. 58 00:04:16,720 --> 00:04:19,336 Let's do three. 59 00:04:19,336 --> 00:04:22,253 Teddy bear drawing support. 60 00:04:24,837 --> 00:04:30,711 So we'll start with one actually, and we'll add the rest of them how about. 61 00:04:30,711 --> 00:04:34,055 So Texture2D. 62 00:04:34,055 --> 00:04:40,990 It turns this light blue color because this is a class. 63 00:04:40,990 --> 00:04:45,379 Texture2D is a class that is provided within the XNA framework in the graphics 64 00:04:45,379 --> 00:04:46,710 namespace. 65 00:04:46,710 --> 00:04:50,000 And really it's for holding two-dimensional textures. 66 00:04:51,320 --> 00:04:54,410 Pictures, think of it as pictures, 2D pictures. 67 00:04:54,410 --> 00:04:57,690 Now it turns out that if you read any of the documentation, 68 00:04:57,690 --> 00:05:02,670 it talks about texels inside of these things, which, for 69 00:05:02,670 --> 00:05:06,470 our purposes, we can think of as pixels on the screen. 70 00:05:06,470 --> 00:05:08,580 They're called texels because they're textures and 71 00:05:08,580 --> 00:05:11,910 we can wrap them around models and do all kinds of weird stuff, but 72 00:05:11,910 --> 00:05:13,550 we're not going to do any of those things. 73 00:05:13,550 --> 00:05:16,920 Okay, it's not weird stuff, it's logical stuff, just in the 3D world. 74 00:05:16,920 --> 00:05:18,796 So we're not going to worry about that, 75 00:05:18,796 --> 00:05:22,930 we'll just think of them as a two-dimensional texture or a picture. 76 00:05:22,930 --> 00:05:28,060 And so we'll say, let's call this bear0. 77 00:05:28,060 --> 00:05:30,830 Now it turns out when it's time to draw bear0, 78 00:05:30,830 --> 00:05:36,410 we're going to need to provide some additional information for the drawing, 79 00:05:36,410 --> 00:05:39,660 where we want to draw and how big we want to draw and those kinds of things. 80 00:05:41,520 --> 00:05:44,030 There's lots of different ways we can do this, but 81 00:05:44,030 --> 00:05:49,980 we're going to provide a rectangle in which bear0 gets drawn. 82 00:05:51,010 --> 00:05:53,940 So we'll call this drawRectangle0. 83 00:05:56,430 --> 00:06:01,378 I started at 0, by the way, because programmers start counting at 0. 84 00:06:01,378 --> 00:06:06,415 There are lots of really both logical and historical reasons for 85 00:06:06,415 --> 00:06:11,200 doing so, so you should just practice and get used to that. 86 00:06:11,200 --> 00:06:11,930 That's what we do. 87 00:06:11,930 --> 00:06:13,920 We start counting at 0. 88 00:06:13,920 --> 00:06:18,806 Okay, so I have declared two fields here that I'm going to use for loading and 89 00:06:18,806 --> 00:06:20,320 drawing my teddy bear. 90 00:06:21,670 --> 00:06:24,580 Now we've reached the point where we need to actually 91 00:06:24,580 --> 00:06:27,640 include some content in our project. 92 00:06:27,640 --> 00:06:32,910 And we get a content folder by default in our Windows game project, 93 00:06:32,910 --> 00:06:35,700 but there's nothing in it at this point. 94 00:06:35,700 --> 00:06:39,600 I've provided appendix B from the MonoGame book to you 95 00:06:39,600 --> 00:06:42,310 in the selected book chapters link. 96 00:06:42,310 --> 00:06:47,900 So appendix B actually talks about how to use the content Pipeline tool 97 00:06:47,900 --> 00:06:49,680 for MonoGame. 98 00:06:49,680 --> 00:06:52,679 Let's take a look at doing that for this particular project. 99 00:06:53,800 --> 00:06:58,230 I'm going to add another folder here at the same level as my 100 00:06:58,230 --> 00:07:00,830 Visual Studio solution file. 101 00:07:00,830 --> 00:07:04,817 And I'm going to create a new folder and 102 00:07:04,817 --> 00:07:09,711 I'm going to call it FirstXnaGameContent. 103 00:07:09,711 --> 00:07:12,212 And you could call it anything you wanted. 104 00:07:12,212 --> 00:07:15,606 I just find this to be helpful that I include it right here so 105 00:07:15,606 --> 00:07:19,138 if I ever zip up this folder, I've got the content in it, and 106 00:07:19,138 --> 00:07:24,580 I like to add content to the end of the folder name because it is in fact content. 107 00:07:24,580 --> 00:07:27,420 Next thing we do is we start up the Pipeline tool. 108 00:07:27,420 --> 00:07:31,150 I of course have a shortcut for that, so I just double-click it. 109 00:07:31,150 --> 00:07:34,070 And I'm going to say I want a new content project. 110 00:07:35,300 --> 00:07:41,030 I will navigate to the place where I want to save that project. 111 00:07:41,030 --> 00:07:43,046 And this is the folder I just created. 112 00:07:45,629 --> 00:07:47,920 So this is where I'm going to put it. 113 00:07:47,920 --> 00:07:50,570 And I can call the project anything I want. 114 00:07:50,570 --> 00:07:53,520 But I'm going to call it FirstXnaGameContent, 115 00:07:53,520 --> 00:07:57,350 because that's what this project is for. 116 00:07:59,230 --> 00:08:03,950 At this point you can see that you can select a variety of different 117 00:08:03,950 --> 00:08:07,250 characteristics for this particular Pipeline project. 118 00:08:07,250 --> 00:08:11,830 I'm going to make sure it's for Windows, because I'm building this for Windows. 119 00:08:11,830 --> 00:08:17,140 But if you were working on a Mac, for example, you would pick Mac OS X instead. 120 00:08:17,140 --> 00:08:18,379 But I'm going to leave it as Windows. 121 00:08:19,400 --> 00:08:21,790 And I'm going to leave it the Reach profile. 122 00:08:21,790 --> 00:08:24,700 If you know you're actually building for 123 00:08:24,700 --> 00:08:29,030 a strong graphics card platform you could set it to high-def. 124 00:08:29,030 --> 00:08:32,280 But it defaults to Reach because Reach is the most 125 00:08:32,280 --> 00:08:36,199 commonly supported even with low-power graphics. 126 00:08:37,520 --> 00:08:42,370 I'm going to put an additional folder inside this project. 127 00:08:42,370 --> 00:08:46,500 So I'm going to add a new folder and I'm going to call it graphics. 128 00:08:46,500 --> 00:08:51,140 As you build games you will discover that you have a whole bunch of 129 00:08:51,140 --> 00:08:56,590 different kinds of content including fonts and audio and all kinds of stuff. 130 00:08:56,590 --> 00:08:59,530 So I like to separate them in separate folders. 131 00:08:59,530 --> 00:09:02,211 Not required, just something I like to do. 132 00:09:02,211 --> 00:09:04,827 Okay, so now if you come back here, 133 00:09:04,827 --> 00:09:10,580 I can see that I have this graphics folder but there's nothing in it. 134 00:09:10,580 --> 00:09:15,220 So now I want to actually add some PNG files to this folder. 135 00:09:15,220 --> 00:09:18,770 I'm going to go up where I know I saved them. 136 00:09:18,770 --> 00:09:25,390 And I will just cut these and I'll bring them into that graphics folder. 137 00:09:28,003 --> 00:09:28,670 Like so. 138 00:09:30,100 --> 00:09:34,650 They're still not included in my project, so now I'm back in the Pipeline tool. 139 00:09:34,650 --> 00:09:38,730 But if I right-click on the graphics folder and say I want to add existing 140 00:09:38,730 --> 00:09:45,190 items, it will let me select all three of these and I'll say Open. 141 00:09:46,310 --> 00:09:50,580 And we're almost there, I can expand this folder and you can see that they're there. 142 00:09:50,580 --> 00:09:52,770 The last thing I need to do is build. 143 00:09:52,770 --> 00:09:56,840 So what I'm doing is I'm converting these PNG files 144 00:09:56,840 --> 00:10:01,540 into a special format called XNB, which is the format for 145 00:10:01,540 --> 00:10:07,180 all of our assets, all of our content, using the XNA framework. 146 00:10:07,180 --> 00:10:11,620 So I could just say Build, and yes, I want to save the project first. 147 00:10:13,110 --> 00:10:17,010 And so you wait while it goes through and builds, and as long as they all succeeded, 148 00:10:17,010 --> 00:10:18,230 you're all set. 149 00:10:18,230 --> 00:10:25,840 So we've used the Content Pipeline tool to actually build our content into XNB files. 150 00:10:25,840 --> 00:10:30,630 And as you can see, there is the XNB files right there 151 00:10:30,630 --> 00:10:34,660 in our bin folder near our content project. 152 00:10:35,710 --> 00:10:38,260 Now we go back to Visual Studio. 153 00:10:41,586 --> 00:10:44,724 And I'm going to also add a graphics folder here, 154 00:10:44,724 --> 00:10:47,830 in my project in the content folder. 155 00:10:47,830 --> 00:10:50,250 So I right-click and I say Add > New Folder. 156 00:10:51,410 --> 00:10:53,000 And I'm going to call it graphics. 157 00:10:55,620 --> 00:10:58,990 And now what I can do is I can right-click that graphics folder. 158 00:10:58,990 --> 00:11:01,700 And I'm going to say Add > Existing Item, 159 00:11:01,700 --> 00:11:04,810 because the XNB files have already been built. 160 00:11:04,810 --> 00:11:07,760 I just want to add them to my project. 161 00:11:07,760 --> 00:11:10,900 And now I navigate to where I saved those. 162 00:11:10,900 --> 00:11:15,800 So it's up one, here's that content folder I've built. 163 00:11:15,800 --> 00:11:19,930 All the way down to bin, into graphics, and then this is empty. 164 00:11:19,930 --> 00:11:21,210 And you say what's going on? 165 00:11:21,210 --> 00:11:23,900 I built some XNBs and where are they? 166 00:11:23,900 --> 00:11:28,560 It's because the file type filter here doesn't include XNB. 167 00:11:28,560 --> 00:11:34,086 So if you click the down arrow and you select all files, there they are. 168 00:11:34,086 --> 00:11:38,605 I'm going to select them and I'm actually going to click this arrow 169 00:11:38,605 --> 00:11:43,260 next to the Add box, and I'm going to say Add As Link instead. 170 00:11:43,260 --> 00:11:48,210 This is how we always did it in our game company, because then if somebody actually 171 00:11:48,210 --> 00:11:53,810 changes the assets over in the content folder, next time we build our project, 172 00:11:53,810 --> 00:11:58,970 because we added them as links, we're going to get access to the new assets. 173 00:11:58,970 --> 00:12:02,940 And that way it's easy to integrate those new assets as the artists and 174 00:12:02,940 --> 00:12:06,170 other content builders provide them to us. 175 00:12:06,170 --> 00:12:08,310 I'm going to click on the first one. 176 00:12:08,310 --> 00:12:13,960 And we can see that it gives us some information down here. 177 00:12:15,090 --> 00:12:20,060 I'm deliberately making a mistake because you may deliberately make the same 178 00:12:20,060 --> 00:12:21,240 mistake. 179 00:12:21,240 --> 00:12:24,150 But I have added these as content. 180 00:12:24,150 --> 00:12:29,100 We're not quite done, but I'm going to continue with the lecture. 181 00:12:29,100 --> 00:12:33,410 And then we'll see a fairly common error that you might run into. 182 00:12:33,410 --> 00:12:36,280 I will point out that the asset name 183 00:12:36,280 --> 00:12:41,630 which we'll need when we try to load this content for this first one is teddybear0. 184 00:12:41,630 --> 00:12:44,420 The second one is teddybear1, and so on. 185 00:12:44,420 --> 00:12:48,755 So the asset name is the name of the file without the file extension. 186 00:12:48,755 --> 00:12:54,610 Okay, so we said that we will 187 00:12:57,120 --> 00:13:01,290 load all our content here. 188 00:13:02,690 --> 00:13:06,503 Let's say we'll load teddy bears and build draw rectangles. 189 00:13:11,336 --> 00:13:16,730 Now loading, we're going to load 190 00:13:16,730 --> 00:13:21,390 the texture2D into bear0. 191 00:13:21,390 --> 00:13:25,010 And we do that using Content with a capital C, 192 00:13:25,010 --> 00:13:28,990 and that's what's called a content manager. 193 00:13:28,990 --> 00:13:35,045 And a content manager manages content, and so we use Content with a capital C. 194 00:13:35,045 --> 00:13:39,896 And now we want to access one of the methods in Content, and 195 00:13:39,896 --> 00:13:41,980 we want the Load method. 196 00:13:43,630 --> 00:13:47,909 Now this is new, these little less than, greater than signs. 197 00:13:49,310 --> 00:13:54,478 We won't worry about the details, it's actually something called a generic, 198 00:13:54,478 --> 00:13:57,753 which we'll address when we get to lists and so on. 199 00:13:57,753 --> 00:14:01,220 But the content manager can load all kinds of content. 200 00:14:01,220 --> 00:14:03,371 So we need to tell it, between the less than and 201 00:14:03,371 --> 00:14:06,400 greater than, what kind of content we want it to load. 202 00:14:06,400 --> 00:14:10,980 In this particular case we want it to load a Texture2D. 203 00:14:12,270 --> 00:14:15,460 We are calling a method, even though this is a slightly different way of 204 00:14:15,460 --> 00:14:18,090 calling a method, so we're going to need parentheses. 205 00:14:20,000 --> 00:14:23,100 And you can see from this IntelliSense help 206 00:14:23,100 --> 00:14:25,580 that we need to provide the asset name. 207 00:14:26,610 --> 00:14:31,566 And so the asset name for teddybear0 Is, 208 00:14:31,566 --> 00:14:34,545 in fact, teddybear0. 209 00:14:34,545 --> 00:14:38,250 So this should load our content just fine. 210 00:14:38,250 --> 00:14:38,780 Let's run it. 211 00:14:45,586 --> 00:14:50,640 And unfortunately, we see that the code has crashed. 212 00:14:50,640 --> 00:14:52,350 And here's the problem, 213 00:14:52,350 --> 00:14:57,100 it says could not load teddybear0 asset as a non-content file. 214 00:14:57,100 --> 00:15:00,160 And that is the deliberate mistake I made so 215 00:15:00,160 --> 00:15:04,840 that I could show you this fairly common mistake that you might make as well. 216 00:15:04,840 --> 00:15:09,932 So I'm going to stop the debugging and I'm going to come back over 217 00:15:09,932 --> 00:15:16,003 here to the Content and I'm going to select all the XNB files that I imported. 218 00:15:16,003 --> 00:15:18,200 And I'm going to make two changes. 219 00:15:18,200 --> 00:15:20,680 Down here in the properties pane, 220 00:15:20,680 --> 00:15:25,030 the first thing I'm going to do is I'm going to click in this box that say None. 221 00:15:25,030 --> 00:15:29,010 Then I'll click the down arrow and I'm going to say this is Content. 222 00:15:29,010 --> 00:15:31,210 You should build this as content. 223 00:15:31,210 --> 00:15:33,500 Don't just do nothing. 224 00:15:33,500 --> 00:15:38,110 The other thing is in the Copy to Output Directory I'm going to click. 225 00:15:38,110 --> 00:15:43,400 Again, in the Do not copy side, click the down arrow, and I'll say Copy if newer. 226 00:15:43,400 --> 00:15:49,660 And that makes sure that this is actually copied into the appropriate location. 227 00:15:49,660 --> 00:15:55,250 And now when we build, We see it fails again. 228 00:15:55,250 --> 00:15:57,560 We're still working towards our solution. 229 00:15:57,560 --> 00:16:01,480 This one was an unplanned error on my part. 230 00:16:01,480 --> 00:16:07,765 So the issue is that it It's trying to find teddybear0 in the Content folder. 231 00:16:07,765 --> 00:16:13,735 But in fact, teddybear0 is in the graphics folder inside the Content folder. 232 00:16:13,735 --> 00:16:17,045 So we need to actually include that in the folder path. 233 00:16:17,045 --> 00:16:22,144 So it's graphics\\ is one way we can do this. 234 00:16:22,144 --> 00:16:28,990 Or we can say @"graphics\ which is my preference. 235 00:16:28,990 --> 00:16:32,220 So now, and you might be wondering, 236 00:16:32,220 --> 00:16:35,100 why do we build this if we're just trying to load the content? 237 00:16:35,100 --> 00:16:37,700 Well, this actually helps us to discover 238 00:16:37,700 --> 00:16:40,550 that we have made some mistakes with our content. 239 00:16:40,550 --> 00:16:43,290 Either we have not set them to be content or 240 00:16:43,290 --> 00:16:45,630 we don't have the right folder path to them. 241 00:16:45,630 --> 00:16:49,760 So there are a number of different possible errors we could discover 242 00:16:49,760 --> 00:16:51,920 just by loading our content. 243 00:16:51,920 --> 00:16:52,710 I'll stop debugging. 244 00:16:53,750 --> 00:16:57,760 We'll do this one more time with an F5, and we do get the blue screen. 245 00:16:58,850 --> 00:17:02,380 So when I got into post-production for this lecture video 246 00:17:02,380 --> 00:17:07,000 I discovered it was a massively huge 22-minute-long lecture, and 247 00:17:07,000 --> 00:17:10,050 while my students in my actual classroom would kill for 248 00:17:10,050 --> 00:17:14,510 me to give such a short lecture, that's way too long for a MOOC course. 249 00:17:14,510 --> 00:17:17,480 So I'm going to stop this lecture here. 250 00:17:17,480 --> 00:17:20,820 And I've broken it into two parts, so I'll stop it here and 251 00:17:20,820 --> 00:17:24,400 then go watch the other lecture to see the continuation to the end.