This is the second lecture in module
five where we're exploring XNA and how we can use it to build games. So here are the module five
learning objectives, and today we're going to address the second
one where we're going to load and draw some sprites in our XNA game. So last time, we talked about the basic
concepts about how games in general and XNA games in particular work. This time we're going to
build our first XNA game, and at the end of last lecture I said
I hesitate to call it a game. So you should take this in-lecture quiz
to tell me why I have that hesitation. I should tell you based on one of
the options in that in lecture quiz that I am not a hardcore
traditionalist about programming. When you program, you are allowed to
drink any flavor of Mountain Dew. It doesn't have to be
the original green stuff. Okay, so let's actually start up the IDE. I've already built a project, and we'll
get to work loading and drawing sprites. When we create our MonoGame Windows
project from within Visual Studio, we end up with a folder structure
that's automatically built for us. And so later on you might need to
go open your solution again or you might've downloaded it
from the Coursera website. And so how do you actually open it up? Well, when you navigate through the folder
structure you'll end up at a folder that includes a file,
I'll expand this so you can see, it's Microsoft Visual Studio Solution. That's the file you double-click
to open up your project. And so you wait patiently while it opens,
and we've discussed what happens when you just have this blue
screen over here with no code. So let's click on Game1.cs because
that opens up our Game1 file for us. And we'll start off by running this and seeing that it gives us that
cornflower blue screen. And we'll keep the blue, but
that aspect ratio is just crazy. So let's actually make this
build an 800 by 600 game. And we can do that, remember I said some of our initialization
can happen in the constructor. So we're going to change
the resolution to 800 by 600, because that's an awesome,
amazing resolution for games these days. The way we do it is we access. Remember there's this
GraphicsDeviceManager? We didn't really talk
about this before but there's this GraphicsDeviceManager that
is for managing our graphics device. So we will set the graphics. So this is an object reference followed
by a dot PreferredBackBufferWidth. So no parenthesis, so object.something with no parentheses
means we're accessing a property. And we'll set
the PreferredBackBufferWidth to 800 and we'll set
the PreferredBackBufferHeight to 600. So there's all kinds of
sort of underlying details. Just so you know what a back buffer is, basically what happens is stuff gets
drawn to the back buffer first, and then it gets slammed to the graphics card
to be displayed on the screen all at once. And that actually helps
prevent flickering and all kinds of weird things that happen if
you don't actually use a back buffer. So we'll run it with F5 and
we see now, awesome, we have an 800 by 600 screen,
so that's great. The next thing that we want to do
is we want to actually declare some fields in this class. These are just variables for loading and
drawing a couple of sprites. Let's do three. Teddy bear drawing support. So we'll start with one actually, and
we'll add the rest of them how about. So Texture2D. It turns this light blue color
because this is a class. Texture2D is a class that is provided
within the XNA framework in the graphics namespace. And really it's for
holding two-dimensional textures. Pictures, think of it as pictures,
2D pictures. Now it turns out that if you
read any of the documentation, it talks about texels inside
of these things, which, for our purposes,
we can think of as pixels on the screen. They're called texels
because they're textures and we can wrap them around models and
do all kinds of weird stuff, but we're not going to do any of those things. Okay, it's not weird stuff,
it's logical stuff, just in the 3D world. So we're not going to worry about that, we'll just think of them as
a two-dimensional texture or a picture. And so we'll say, let's call this bear0. Now it turns out when
it's time to draw bear0, we're going to need to provide some
additional information for the drawing, where we want to draw and how big we
want to draw and those kinds of things. There's lots of different
ways we can do this, but we're going to provide a rectangle
in which bear0 gets drawn. So we'll call this drawRectangle0. I started at 0, by the way,
because programmers start counting at 0. There are lots of really both logical and
historical reasons for doing so, so you should just practice and
get used to that. That's what we do. We start counting at 0. Okay, so I have declared two fields here
that I'm going to use for loading and drawing my teddy bear. Now we've reached the point
where we need to actually include some content in our project. And we get a content folder by
default in our Windows game project, but there's nothing in it at this point. I've provided appendix B from
the MonoGame book to you in the selected book chapters link. So appendix B actually talks about
how to use the content Pipeline tool for MonoGame. Let's take a look at doing that for
this particular project. I'm going to add another folder
here at the same level as my Visual Studio solution file. And I'm going to create a new folder and I'm going to call it FirstXnaGameContent. And you could call it anything you wanted. I just find this to be helpful
that I include it right here so if I ever zip up this folder,
I've got the content in it, and I like to add content to the end of the
folder name because it is in fact content. Next thing we do is we
start up the Pipeline tool. I of course have a shortcut for
that, so I just double-click it. And I'm going to say I want
a new content project. I will navigate to the place where
I want to save that project. And this is the folder I just created. So this is where I'm going to put it. And I can call the project
anything I want. But I'm going to call
it FirstXnaGameContent, because that's what this project is for. At this point you can see that you
can select a variety of different characteristics for
this particular Pipeline project. I'm going to make sure it's for Windows,
because I'm building this for Windows. But if you were working on a Mac, for
example, you would pick Mac OS X instead. But I'm going to leave it as Windows. And I'm going to leave
it the Reach profile. If you know you're actually building for a strong graphics card platform
you could set it to high-def. But it defaults to Reach
because Reach is the most commonly supported even
with low-power graphics. I'm going to put an additional
folder inside this project. So I'm going to add a new folder and
I'm going to call it graphics. As you build games you will discover
that you have a whole bunch of different kinds of content including
fonts and audio and all kinds of stuff. So I like to separate
them in separate folders. Not required, just something I like to do. Okay, so now if you come back here, I can see that I have this graphics
folder but there's nothing in it. So now I want to actually add
some PNG files to this folder. I'm going to go up where
I know I saved them. And I will just cut these and
I'll bring them into that graphics folder. Like so. They're still not included in my project,
so now I'm back in the Pipeline tool. But if I right-click on the graphics
folder and say I want to add existing items, it will let me select all
three of these and I'll say Open. And we're almost there, I can expand this
folder and you can see that they're there. The last thing I need to do is build. So what I'm doing is I'm
converting these PNG files into a special format called XNB,
which is the format for all of our assets, all of our content,
using the XNA framework. So I could just say Build, and yes,
I want to save the project first. And so you wait while it goes through and
builds, and as long as they all succeeded, you're all set. So we've used the Content Pipeline tool to
actually build our content into XNB files. And as you can see,
there is the XNB files right there in our bin folder near
our content project. Now we go back to Visual Studio. And I'm going to also add
a graphics folder here, in my project in the content folder. So I right-click and
I say Add > New Folder. And I'm going to call it graphics. And now what I can do is I can
right-click that graphics folder. And I'm going to say Add > Existing Item, because the XNB files
have already been built. I just want to add them to my project. And now I navigate to where I saved those. So it's up one,
here's that content folder I've built. All the way down to bin,
into graphics, and then this is empty. And you say what's going on? I built some XNBs and where are they? It's because the file type
filter here doesn't include XNB. So if you click the down arrow and
you select all files, there they are. I'm going to select them and
I'm actually going to click this arrow next to the Add box, and
I'm going to say Add As Link instead. This is how we always did it in our game
company, because then if somebody actually changes the assets over in the content
folder, next time we build our project, because we added them as links, we're
going to get access to the new assets. And that way it's easy to integrate
those new assets as the artists and other content builders provide them to us. I'm going to click on the first one. And we can see that it gives
us some information down here. I'm deliberately making a mistake because
you may deliberately make the same mistake. But I have added these as content. We're not quite done, but
I'm going to continue with the lecture. And then we'll see a fairly common
error that you might run into. I will point out that the asset name which we'll need when we try to load this
content for this first one is teddybear0. The second one is teddybear1, and so on. So the asset name is the name of
the file without the file extension. Okay, so we said that we will load all our content here. Let's say we'll load teddy bears and
build draw rectangles. Now loading, we're going to load the texture2D into bear0. And we do that using
Content with a capital C, and that's what's called
a content manager. And a content manager manages content,
and so we use Content with a capital C. And now we want to access one
of the methods in Content, and we want the Load method. Now this is new, these little less than,
greater than signs. We won't worry about the details,
it's actually something called a generic, which we'll address when
we get to lists and so on. But the content manager can
load all kinds of content. So we need to tell it,
between the less than and greater than,
what kind of content we want it to load. In this particular case we
want it to load a Texture2D. We are calling a method, even though
this is a slightly different way of calling a method, so
we're going to need parentheses. And you can see from
this IntelliSense help that we need to provide the asset name. And so the asset name for teddybear0 Is, in fact, teddybear0. So this should load our content just fine. Let's run it. And unfortunately,
we see that the code has crashed. And here's the problem, it says could not load teddybear0
asset as a non-content file. And that is the deliberate
mistake I made so that I could show you this fairly common
mistake that you might make as well. So I'm going to stop the debugging and
I'm going to come back over here to the Content and I'm going to
select all the XNB files that I imported. And I'm going to make two changes. Down here in the properties pane, the first thing I'm going to do is I'm
going to click in this box that say None. Then I'll click the down arrow and
I'm going to say this is Content. You should build this as content. Don't just do nothing. The other thing is in the Copy to
Output Directory I'm going to click. Again, in the Do not copy side, click the
down arrow, and I'll say Copy if newer. And that makes sure that this is actually
copied into the appropriate location. And now when we build,
We see it fails again. We're still working towards our solution. This one was an unplanned
error on my part. So the issue is that it It's trying to
find teddybear0 in the Content folder. But in fact, teddybear0 is in the graphics
folder inside the Content folder. So we need to actually include
that in the folder path. So it's graphics\\ is
one way we can do this. Or we can say @"graphics\
which is my preference. So now, and you might be wondering, why do we build this if we're
just trying to load the content? Well, this actually helps us to discover that we have made some
mistakes with our content. Either we have not set
them to be content or we don't have the right
folder path to them. So there are a number of different
possible errors we could discover just by loading our content. I'll stop debugging. We'll do this one more time with an F5,
and we do get the blue screen. So when I got into post-production for
this lecture video I discovered it was a massively
huge 22-minute-long lecture, and while my students in my actual
classroom would kill for me to give such a short lecture,
that's way too long for a MOOC course. So I'm going to stop this lecture here. And I've broken it into two parts,
so I'll stop it here and then go watch the other lecture to
see the continuation to the end.