>> John Nordlinger: Thank you all for attending this workshop, and thank you
those that are watching online. This is being broadcast through Microsoft's
network. I'm very pleased to introduce Kelvin Sung for University of Washington
Bothell. Kelvin's been doing XNA programming now for a few years. He's been
doing talks around the world, including China and Mexico and other places. And
the amazing thing about Kelvin is whatever country he goes to, whatever venue
he goes to, he's brings incredible enthusiasm to the scenario. And he's quite
popular. As a result his talks have typically standing room only. And he's able to
build the programming paradigm so that if you're not used to game programming,
if you're not used to some of these more subtle graphics ideas, he's able to get
you very enthusiastic producing very compelling little examples in a short amount
of time, and he'll demonstrate some of the things he's done at a Guadalajara
where he had people who hadn't programmed games before producing a real
nice little game within a few hours.
So thank you again for coming, for spending your Saturday with us. And Kelvin
Sung from University of Washington, Bothell.
>> Kelvin Sung: Thank you, John. So thank you very much on a Saturday.
Fortunately it's raining or else I would feel very bad. And so what we're going to
do today is that we're going to talk about doing game-themed application
development, and I say game-themed because I'm not sure if we're doing
games. You know, games supposed to be fin.
So let me -- I'm going to switch around. And we should all have downloaded a
zip file, and then if you look at a zip file, what we're going to do is we're going to
go through the -- this is not the one I want to show you. But we're going to go
through basically everything on there and I'm just going to bring up the -- at least
I think I am, I'm going to bring up today's agenda and then we'll see. The number
of us here means that we can do this the schedule can be very, very flexible in
terms of we can basically do whatever we want.
For the next hour or so what we're going to do is I'll show you how you can start
up with XNA programming in about five minutes time. They really wrap this up
very, very well. And then we'll have a brain rest a little bit, and then we will look
at the way we wrapped XNA further and to hopefully make things even simpler.
And then we'll have some lunch. Maybe it's a bad idea to do this after lunch, but
then I'm thinking that we'll spend about an hour, hour and a half to write the
Blockbreaker game in about an hour. And then you will see that when I shouldn't
challenge you in terms of programming. It's all how we put these things together.
And then finally what we'll do is if we still have time is I'll show you our
approaches in wrapping your typical programming classes in games so that kids
start to get confused until they are learning games but then we're actually
teaching programming concept. So that's kind of today's agenda.
I typically -- this is a -- like a three day workshop agenda that's squeezed into one
day. So I'll speak a little bit fast, and then we'll see what happen.
So here it's I have a little bit of an intro. And a before even I -- we do anything, I
really want to acknowledge the people I work with. I work with Mike Panitz quite
closely. He's from Cascadia
Community College. So a lot of these ideas and this material was developed in
collaboration with him. And I work with Robin Angotti and Becky
Reed-Rosenberg and David Goldstein from our campus. Becky and Reed are
our teaching learning center people. They help us assess our student learning.
So everything I present here was tested in our classrooms and with interesting
observation was on that. And Robin Angotti is from our education program.
She's actually in classroom expert.
And Ruth Anderson and Jessica Bayliss from other campuses. What they do is
they help us evaluate what we have done and basically tell us our stuff's not
good -- no, that's not what they say. So they help us evaluate that.
I really want to thank Jennifer Carlson and John Nordlinger and Kent Foster for
setting this up. And I'm not sure if Chris Hacking is here. But Filiz and Andrew
are the two students who will be walking around. So the idea is if you are not
following, and we don't like to disturb people when we're not following, you know,
it's like if your program's not working, they will be spying behind your back, okay.
And then they will let us know -- let me know and then so let's try to have as
much fun as we can.
And this work is -- Microsoft has very generously sponsored our work. And a lot
of this start with an NSF Grant where I look at how do you teach computer
graphics based on games and then a result to all these things. Everything
started with a Grant from University of Washington Bothell, the Worthington
Scholar Award.
So that's kind of at bit of a background. And I gave you these websites just
because. This is who I am. This is my website. Well, there's no reason to bring
this up actually. And then, let me see. Oh, this is kind of interesting. So
everything we talk -- I'm going to talk about today is part of this project that we're
working on, and if you have nothing else to do when you're free, you're welcome
to come and look at this thing. It summarizes what we're doing here. So those
are the two things.
And so before we begin, I want to see who I'm talking to so I know how -- when I
can start throwing really strange things at a you. So how many of you here are
academics? Oh, cool. And then people from Microsoft? I need to be really
careful. And then how about programming language that you know? How many
of us know C#? You can teach me after. I really don't know C#. This is a
wonderful -- you don't need to know it to program it. How about C++? Okay. So
you will have no problem. Java? Okay. So you have no problem following this.
How about programming with the user interface like event driven programs?
Okay. And how about graphics? How many of us write graphics programs?
This is really cool. I really like the audience. And -- our work is based on the
premises that you do not need to know graphic code, user interface programming
or graphics programming to do games. And I hope we can verify that today.
So I'm just wondering if we can figure out what you're looking for. How many of
us are here because you want to evaluate potential use for classroom? Yeah.
We need to get together after the workshop and see if there's any way that I can
convince you to work with me on -- bring some of these materials back into a
classroom and real see. So after other stuff. Are there people who are here
because they have nothing else to do? No. Well, it's raining.
So a little bit me, my background. I've been with the University of Washington
Bothell for about ten years now. Before that I worked for a company, you may
not have heard of, it's a really small company in Toronto, it's called Alias
Wavefront. And they build a software called Maya. And I was there working with
them. I was actually one of the designers for the first version of Maya Renderer.
So I'm a graphics person. I know a lot about image generation.
And you probably figured that out by now I'm a foreigner, and I speak with a
heavy accent. And I speak fast. And this stuff excites me, and when I get
excited I speak extra fast. So you guys have to be comfortable in slowing me
down. My students don't slow me down. It's like after the quarter you go like
man, half the time I don't know what he's talking about. Let's not do that. Slow
me down and go, you know -- be comfortable with that.
And then like I'm saying, the schedule is really flexible. We just do whatever we
can do, and if we don't have fun we just all go home. Let's not do that.
So anyway, so this workshop is about -- I was really amazed. I've been working
with the graphics program and start with Open GI and then I went to Direct 3D.
When XNA came out [inaudible] actually he was one of our contacts at Microsoft,
called me up and say you should try with this thing and I downloaded it and
looked at, wow, it's amazing the amount of time it takes to actually start working
with graphics. And that was quite intriguing. And I want to share that with you.
And even if you've never programmed with graphics before, you see this, boom,
takes no time to start. That's really good. And so that's what I want to show you.
And at this point if you have some graphical user interface background,
programming with GUI, you know, humor me and let me know how I'm doing in
terms of convince you this stuff is easy. And then if you don't program with this
before, at this point let's take some opportunity to review the model-view
controller framework because that's the framework we'll be working in. And as
you know, we'll not go into too much of it. But we look at this slightly and it's kind
of interesting that we'll be working with external control programming model and
then let's start programming with pseudo games. The main goal here, the main
goal of this entire workshop is that I keep on calling this thing game-themed
because it's just basically interactive graphical application. It's really easy to start
working with and if we have another day, we'll look at how you can integrate this
into introductory computer science classes quite easily. So today let's just have
fun. Let's build a game. This what we'll be doing.
And like I said, give me feedback. Please, slow me down. Are there any
questions before we start? And okay. No question. At least I know you are not
reading Internet. You know, it's like when -- in class when student gets really
quiet, you look at them go look are you guys surfing the net? This is my newest
thing. I say everyone raise your hand, right, and, no, no, you don't have to. The
student all raise their hand and say stand up, go to the back of the room. And
then I'll go check their monitor. If it's on the network then I'll shut down the
machine and then they can't open it up again in class or they can't come to class
again. So it's not very good at building morale in class.
So anyway, I thought that we'll start by looking at game console development,
and that's what XNA is doing. It provides you with very easy way to start doing
game console development. And I want to kind of talk about the model behind it,
and let's start from there. So if you look at game console development, so you if
you want to develop a game for console, a console for Xbox 360 or PS3 or
whatever, the model is actually quite similar to what we are used to. Here's the
source code we're developing. You would be developing this based on some
console API. Right? And as you're developing this, and typically the
development environment is such that they have a runtime environment, this is
DLL libraries and all that, and everything will be running on the PC through
somehow we [inaudible] here. So so far so good. There's no problem. And then
what happened is that once you have something working, you will look at your
game console on the side and you have your piece of code of your program that
runs. What you're going to do is at that point you have to pay the vendor a lot of
money to get this development kit. You know, just a business model. So you
have to respect that. But the -- so this is really good for business and everything.
And then the developer kit will help you download everything to the game. It's
good for business and everything, but then young kids get start to get excited
about this and they go hey, how can I do this at home? And I can tell you, I
shouldn't, I'm being recorded stores of people trying to develop for their own
game console, they do really strange things to get that happening in the past. So
what XNA guys did is they make this really, really simple, as we will see today.
So anyway, if you compare this kind of work flow thing that you have your game
-- your code, this is your code on some API through some developer,
development kit, you can load on to the hardware to our conventional
programming environment where we have all source code in color, and then we
work with a group of API in game environment. You have a lot of APIs you have
to work with. And then you have your operating system. And then in this
integrated development environment, and then when you are done, you run this
on the CPU on your PC.
So if you look at this, there's really no need to be different. They are exact
identical, conceptually there's one to one mapping on to go game development
and for a console and developing a software in a PC. And so based on this
model if you look at what's going on you here is that there's my PC or my laptop.
There's the Xbox. What the XNA guys did is that through .NET and -- .NET
compact framework which runs Direct 3D, those things doesn't make sense to
you, you don't have to worry about that. What they have done is on top of that,
they have built this layer of API and functionality that's called XNA framework.
By the way, the XNA guys are here, so I will say this very carefully. XNA doesn't
stand for anything. Right. People keep on thinking that it stands for some an
network system. As it turns out, it didn't, so XNA is a brand. And in the collection
of the library that XNA provides for the programmer, it's called XNA framework.
Okay? So that's very new. I was at this very interesting naming convention.
.NET is a collection of I guess a system level library. And the names always
threw me off.
So anyway, on top of XNA framework they integrate the library very, very well
with the integrated development environment. They call this XNA Game Studio
or this is C# Express. So C# Express is the integrated development
environment, and it wraps around XNA such that you don't have to worry about
the API functions at all, and you would develop your code in that environment.
So what you have is a really well integrated environment, it just looks like Visual
Studio or C# Express, it's a simpler version of Virtual Studio. You do a
development and you compile you will compile to your PC application, you are
done.
And what they have done is that in two mouse click you can compile to Xbox
360. And then you can run your program on Xbox 360, right? And that's what
we're going to do today in our first hour. We can probably do it in about 20
minutes. And so I want to speak a little bit about the disconnection to Xbox 360.
Your source code is trivial. You basically don't need to do anything. And we'll
see that. And then what happened in reality is this thing you know Xbox 360, be
by the way, we have that right, so in our lab we got a few of these things through
the grant from Microsoft. When I was doing my research, I realized I need one
Sunday afternoon because we need it on Monday, I need four Xboxes so I went
to the toys are us on Sunday and go oh, I need four of those. And the guy look
at me like wow, what's your problem.
And then I saw, hey, there's an Elite, so I'll get one of those also. And my kids
were with me, right, they go like wow, so that's what you do in computer science.
So you go buy Xboxes. So I told them they should study hard so they can do
research, and research means buying Xboxes.
So anyway, so what you have here is you have your Xbox and you have your
Xbox and then you have your code compiler on the PC. One of the concerns of
opening up this game console is that you open up the possibility for people to
inject bad programs into the system. So what they've done is they want to make
sure that they know who you are before they let you download even for fun. So if
you want to run your program on the Xbox 360, you would download a game.
This is an application that runs on Xbox 360. This game is called XNA Studio
Connect. Okay. So this is an application that runs on Xbox 360. And then when
you are ready to download your game, what you would do is through XNA Studio
Connect, you will connect to Xbox live and they have all your background, so
they know who you are. So that you have to get an account here. And after
you're connected to the Xbox live, then XNA Studio will talk to your XNA game
studio there. So these guys will communicate this guy and this guy. It's slightly
more complicated than that, but basically these two guys would talk to each other
and they will load your game over, and then you can run it. So to run this thing
for security purposes is about two steps.
So that's all I want to talk about -- okay. Okay. So that's how XNA work. And if
you look at this thing, you know, we're going to throw away all the rest of the
stuff. This is the key. Your source code runs on XNA and then you run XNA
studio -- game studio. This is C# Express or Visual Studio the same
environment. And this guy is really simple. But then if you've never worked with
games before, you never worked with graphics before, it can still be a little bit
intimidating, as we will see today.
So what you can do is what we have done is that we kind of push a source code
a little bit further away from XNA and our goal is to make things even simpler.
And I hope you will agree with me that it is indeed the case. And so today that's
the environment we'll be working in. And you can actually from your source
code, if you want to, you can get access to XNA framework, but you don't really
need to for the type of programs that we will be developing. So that's what we'll
be to go today. And are there any question on any of this stuff? It's kind of like a
little bit of background. It's very interesting to talk about a product, a software
when the developer is just sitting in the back. They're sitting there like taking
notes and go okay, that's wrong. Now I know.
But, by the way, this -- I got this wrong for the longest time. I got this thing
wrong. Because I really don't know what it's like. I just look at the code and read
and then I go I think what's going on. So I came in one of the presentations, I
think it was Mitch Walker sitting back going like no, no, no, no, no, that's not
what's going on. And it was really embarrassing. But he was really nice. So he
told me that -- about this framework.
Okay. So anyway, so now what we want to do now is to we have the machines
ready? If you don't actually at this point we're still okay. If you do have the
machine you can follow along because we're going to do something that's not
very difficult. It may be too trivial to follow. Okay? So if you have -- if you have
your environment set up and everything, there's this thing called Visual C#. We
just open that. So what we're going to do now is we're going to write our first
game program. If you just open that up, so I double click mine. And are we
okay? Are you guys following along? Do you want to?
And then what I'm going to do now is I'm going to create new project. So you just
come out here and you say you want to create new project. And then you will
see that that is XNA. This guys up here. If you don't have XNA installed, what
you have here is an empty development environment. If you have XNA installed,
XNA is smart enough to tell Visual Studio that these are the wizards that will help
you create your projects. So what we're going to do is we're going to create
project and then analyze it to death. Can I say that? I did. So we will actually
figure out exactly what happened and all the things that they have done for us.
So I'm going to take out my notes so that I know that I'm not missing anything.
And we are going to create a Windows project. And it's actually quite exciting
here because if you look at the -- if you look at other options we have, there are
basically three wizards here. You can create a Windows 3.0 games or you can
create Windows game library. So what this will do is it will create the aisle for
you. And then oh, look, Xbox 360. And very excitingly you can do Zune games
now.
The library we have right now won't do Zune and if we get more support we will.
It's great. I tried it. It was just a lot of fun to have that little thing and you can
program your game on there.
So anyway, let's do a Windows game for now because we don't have all those
devices with us. And what I'm going to do now is I'm going to name my
SimpleXNA, my project called SimpleXNA and I'm going to create subdirectories
so that everything is just -- it's separated. We can look at the clarity. Okay? So
we're going to do a Windows game and then I call it SimpleXNA. By the way,
every single source code that we go through here is on that CD. So if you can't
follow this thing or then if you mess things up, don't worry about it, because it's all
in the CD.
And what we're doing right now is we are looking at -- I need to go back. We are
looking at simple example. So we're at 1B now. Okay. I'll try to let you know
where we are as we move along. So we're at 1B, and then we'll continue that.
So now we just -- we say that we're going to start with one of these thing and
then we click okay, and it's going. And it will take a little while, maybe a minute
or so, depends on how fast your machine is. And what this is doing is creating
an entire project for you. And wizards are great. You get this started
immediately.
For those of us who grew up a while ago, when people give you three files and if
you don't know what those three files are, you can't sleep at night. I can't. So
when this works and then here's the thing. If you -- if you come here and just do
a build solution, and now it's compiling, once it start compiling it goes really fast.
And what you can do now is you can start -- you can start without -- we just start
without debugging. And when our first games program is ready it's not very
impressive right now, but still the thing though is that at this point I get nervous
because too many things has been done for me. And then I -- and what I want to
do is I want to kind of go through that with you.
So what we have here is we have a very simple sharp program and if we look at
all these things that's been done for us it's actually quite scary. And what we
want to do now is we want to analyze what's going on. There's all the files that's
been given to us. And we want to go through that. Are we okay? Are there any
questions in am I going too fast? Too slow? Too boring? We don't care. So
anyway, so the thing that we want to do now is we want to look at the files that's
been created for us. And I created my project on my desktop and sure enough
there is this thing called Simple XNA. So what we want to do is we want to
locate development environment and we want to locate a file system and see
what other things that the wizard created for us and what are those things for.
So if we come here and we look at the file system, we see that here's the Simple
XNA and this is the solution file that describes how to build the solution, this
Simple XNA.sln is this guy right here. So that's one to one. This solution is
represented by this file. And if you don't believe me, I'm going to start a -- I'm
going to start a text editor. So I'm going to start a note pad. So here's a note
pad. And what I'm going to do is I'm going to drag this solution file into the note
pad. You don't have to do this. I just showed you what's in there.
And if we take a look at this note pad file, this is the solution file. Okay? And we
can see that it's actually quite simple. These are description how you will build
your project and you know, these are unique ID numbers so they know exactly
what to do. So that's fine. And this, we don't really know what that is. The thing
though is that we do know is that, hey, here's my project name called Simple
XNA and then here's my solution name. And then there's this file that looks like a
file in the folder is called SimpleXNA\SimpleXNA.csproj. Okay. So what we're
seeing here is a picture of her to find the project. So here's the project. And if
we look at that, this is the solution that's called Simple XNA. It tells us that to in
this Simple XNA solution there's a project called Simple XNA we'll come out here
and look at under Simple XNA that's a folder name and by the way, notice this
one to one thing. Here's the folder and that the folder. So it's actually referring to
the file system for you. And in there there's the CS project file. And that file
describes how to build your you system. Right?
So the solution file tells us where to go look for the project file. And the project
file is actually in this folder. By the way, all these things you can change. So I'm
going to show you, you don't have to follow this thing, I'm going to select my
project, this is my project. I will change the project name. So you can do a right
mouse button and then say rename. I'm going to rename this project to say
whatever. And we will notice that -- we will notice that this is changed to
whatever. So it is one to one. It actually describes everything for you. And I'm
going to hide away my -- my explorer now. The interesting here is that explorer
let's you see the file system. In a development environment this solution explorer
is exactly like explorer. It let's you see the file system and more.
So in -- I'll show you. What we can do here is that there are three buttons here.
This middle button says show all files and this one shows you all the files in the
file system. So we can see that there's bin, there's content, there's obj. These
are the files that they are not part of the project so that they don't show you. So
you can hide these. We just want to know that we're seeing that.
So what we're seeing here is a one-to-one mapping. This is the actual file
system. If you come out here and change a file name, the file name will be
changed on injure hard drive. You come out here and threat the file, the file will
be deleted. From the file system. What you can do is you can remove files from
being part of the project. So I can come out here and say I exclude this file from
the project. And what that will do is it will exclude the file, but then the file will still
be on the file system. So we can do that. I'm going to exclude this file from the
file system. So it's gone.
But then because I can see the entire file system, I can click and say, oh, here's
the file, see the colors different and I will say included it back in the project. So
you can actually do that. Okay? So this is quite a one-to-one.
Besides that, so we can examine all the files we have by just looking at this folder
here. The assembly info, if we look at that, assembly info basically describes
how you want to build your -- how you want to build your program. This
assembly title, this is the title bar. So I'm going to change this to my whatever
and see what happens. So if I recompile this and run, I will see that it changed
the window's name out here. Okay.
So what we're seeing is that the everything that the system give us we can
change and will have some sense of what those things are. This icon right here,
this icon right here is this game.ico. So you can change that, also. You can
change that into anything you want. And -- and then this guy right here,
GameThumbnail, let me show you. Okay. How do I go back a projection? What
that is is -- oh, I switch off my Xbox.
Remember what we're doing here. We are -- I'm in the process of trying to show
you what is this file for. This file right here. This file is for this. Students love
this. That file is this. So they can put their face on their project. It's -- you know,
they go wow, and they do a very interesting thing with that idea. So we see -- so
now we understand what's the ICO file, we understand what is this. And I'm
going to hide away the files I don't need in here. The program file, this is a
dummy container. This is a dummy container and then this is like if you write
Java program, this is static main and you start writing your program from here.
And then we see that in your main function what you do is you create a game
that calls Game1 and Game1 is our source file. So that's the only file we need to
worry about. The rest of the files are supporting. And because we kind of have
went through what's going on here, I hope you agree with me that this is not that
scary. In the beginning when you see like seven, eight files created for you, for
me it is, I get nervous.
So if we look at Game1.cs, we open up Game1.cs, it looks a little bit intimidating
until we start try to classify what we're seeing according to functionality. So one
nice thing about C# Express, the development environment is you can close
things up. So we can see that here I have a name space. It said that the
terminology they use in Java they can create name spaces. I think in C++ you
can do the same thing. I get so confused by this, all this syntax now, I don't know
which language is what.
This using is basically included in C++ or import in Java. So we're seeing that
we're including a bunch of XNA framework libraries. So we're working with a
bunch of -- whole bunch of libraries. Fine. So this is included stuff. I'm going to
close that up. And this is my name space. If I open up my name space, I can
see that all I have is one class, okay, and with that one class I have interactive
game that I can develop. And then we see that your classification name is
Game1. We've already seen that this Game1 was called from this program. So
we can change this to anything we want as long as we change it consistently. So
if I come out here and change it to MyGame, what I need to do is I need to come
to my program here and make sure this is MyGame. And then notice the ID's
very, very nice. It does continuous syntax checking for you. Sometimes it gets
on your nerve but most of the time it's really nice.
So now I just change my class name. So that's my class. So fine. And then if
we open up this class, this is the slightly intimidating part. Or first off I need to
make sure that my construction is the same name as MyGame. And then I'm
going to close up all these things and we can do that, so I'm just going to close
up everything that I can close and then we'll realize that we can look [inaudible]
we can analyze the structure of the framework they provide us. And this is where
our knowledge of model-view controller may come in a little bit handy here.
We see that here's my class. There are two really scary looking object that's in
the class. But then besides that we see five functions. We have a conductor.
We all know what that is. There's a protected override initialize function, there's
a load content and load content update and draw. So there are five functions
provided for us and based on this framework you can do really interesting game
programming. So what does these five function does? Constructor, we initialize
our memory and then so now the knowledge of model-view controller comes in
handy.
What we have here is the controller and the view, so it's a view controller pair
here. So view controller pair, if you remember the model-view controller
framework, these guys are responsible for getting user input and providing output
of the application state. Okay? So what we have here is that we're going to
initialize ourselves. This is the protocol XNA implicitly defined for us. They will
call us at the initialization stage. So you initialize your variables. After that is
done XNA's going to go do some -- it's own internal initialization, and then it's
going to turn and call you to load content. Content is a generally description on
anything that's not inside your code. So if you are writing a games program,
what you need is you need a lot of images to make your game looking
interesting. You need to have audio files. And those loading will happen here.
You have to load your content and then so you initialize, you load your content,
and then when that is done what happened is that you will continuously call you,
update and draw, update and draw. And this is where you will change your
application state and then you will draw the application state. So the protocol
then is very, very simple. You initialize your application state, you load in all the
resources you need, all the resources are like the images and the audio files, and
continuously update and draw. And that's what a game is. Initialize, update, and
draw.
So let's -- we can verify that this is indeed happening. So each one of these is a
protected function, meaning that it's defined in the base class in the XNA
framework. And they enforce this protocol for us, which is kind of nice, it's very
nice because makes things very easy.
So what I'm going to do now is I am going to -- you don't have to follow this thing.
I'm going to put in break points in each one of these functions to verify that the
protocol that we understand is indeed happening. So I'm going to put in break
points in each one of these guys here. I'm going to put a break points and locks.
So I guess I need to have some code in here. And then I'll put in a breakpoint
here. And then I will also put in a breakpoint here and I'll put in a breakpoint in
draw. I'll put a breakpoint in draw right here.
So here I have all -- I have breakpoints in each one of these function and then I'm
going to run my program now. So I'm running with the barrier on and let me
make sure that this goes away. So indeed the first thing that happen is that my
program stops in initialize. Okay? So after initialization is done what will happen
is that it should call load. So all the resources are allocated, all the system
objects are allocated. You will call load. When I say continue, you come to load.
And at this point our job as programmer was supposed to load in all the
resources we need, all the file texture, all the audio files so that we can start
using them. And I'm going to type F5 now. What that will do is let the program
continue. F5 becomes to update. At this point you would change your
application state according to user input according to your AI in your game. And
then when I tab F5 again, you will -- you will continue execute, you will come -oh, it's doing update. Oh, it will come to draw. So what happened? What just
happened there?
Because this is a realtime system, you don't need to draw your system realtime.
What's realtime? Like really there's time. Realtime is about you need to update
your screen about 60 times a second. If you update your screen like 100 times a
second, you have really sharp display. If you update your screen 200 times a
second, it's really unnecessary.
So what happened here is that XNA will call draw about 60 times a second, no
more. There's no need to do that more. But you will call update as soon as it
has the chance. So in between draw there's many update going on. We okay
with that? That's what happened. So if I keep on continue here it's going to go
to update, update, update, update, update, update, update, update. Eventually
you will go to draw. Come on. Go to draw. I -- oh, do we see draw?
So anyway, we can see that many update happens one draw, many updates
happen one draw, because I have nothing in here. So what we have done is we
verified the framework what they are doing for us. And then we can run this
program and get a really interesting blue screen. But then -- yeah. Yeah. What
we can actually do is we can actually [inaudible] bold face on this. So what we're
going to do now is that we will try to draw with this. Okay? And let's see what's
involved in drawing and what's involved in actually -- we can actually develop the
game based on this framework, it's just the code will be a little bit -- well, we'll
see. It's actually not that hard.
So what we have done so far is we have looked at a schedule that we are trying
to follow is I hope we are about only half an hour behind. So we are done with
1B. I will speak fast. So what we're going to do now is let's look at drawing with
the XNA and then let's look a little bit with interactive control. If you have your -if you look at your download the zip files and if you unzip that, this is organized
into what we are going through in section 1 here. And then if we just open up
section 1, if we just open up this section 1, we went through the background,
here's the Power Point and then we went through Simple XNA, that's what we
just went through, let's look at draw with XNA. Okay? And this is a source file
we'll start working with, and let's just double click on that. One thing I want to you
kind of -- I want you. I have to be careful. I don't know how to speak very well.
Under 1C here, this is we're under 1C, there's a folder called useful file. If you
double click this useful file, you will see a JPEG image. We will draw with that
JPEG image. Yes?
>>: [inaudible].
>> Kelvin Sung: Okay.
>>: Take a ten-minute break so we can do that?
>> Kelvin Sung: Okay. So let's take a ten-minute break.
>>: How many people need Kelvin's CD?
>> Kelvin Sung: Oh, yeah, yeah, yeah. There are two keys floating around, and
then I have CD here. Oh, yes. Thank you.
>>: It's on the right.
>> Kelvin Sung: Oh, do we have another -- oh, yes, thank you. Yes. Right here.
It's right here.
>>: Oh, great. Thanks.
>> Kelvin Sung: Are we okay now with the installation? Okay? Are we good?
So we can -- I'm going to go now. No, I don't mean I'm going to go, I mean we
can start again now. And so this is where we are. Oh, God, I don't know where
this -- this is where we are. We are going to -- we are going to -- we are going to
look at drawing with XNA. Okay? And then to look at drawing with XNA instead
of recreating the project and everything, we come to 1C, the file you have just
unzipped under section 1C, so I'm going to go into section 1, let me do this, I'm in
section 1C. So I'm in section 1C now. And then there's the source code. Notice
that there's a useful file folder. We just want to be aware of that folder. And then
we come back be out here. I'm going to go into source file. Open up the source
file and then this source file is basically the empty structure that the wizard will
create for us.
So if you look at the Game1.cs right now, it is -- oh, actually I put in the code
already. So you have the code. What should I do? Let's create it from scratch
because it's more fun. So my apology. Let's start -- let's recreate a new project,
so let's just -- I just restarted my Visual C# and then we'll come and say new
project. We've done this before. New project on desktop. I'm going to create my
say draw. This program I'll call you draw. And I'm going to call this guy draw.
Okay. And I'm going to say okay, and you will create empty project for me. And
the only thing -- so you create the empty project for me. The only thing you need
to remember is where is your useful file folder. Because we need that image.
What I'm going to do now is that I am going to do the what I said we should do is
that I'm going to draw a Microsoft logo because we're in Microsoft right now. And
to draw a Microsoft logo this what I will do. I will create an object so I can draw
with. So what I've done is that I've come to the class area above my constructor.
I'm going to create instance variable here. And the instance variable I'm going to
create is called texture 2D. Look at this. This ID really spoils you. If you type in
T, it echos it out. At this point if you type tab it will do auto expansion for you.
Okay. If you get used to this and you start typing your code, you see tab all over
the place because when I start coding I don't look at what I'm typing. And then
I'm going to call this guy, I'm going to call it MyLogo. I wish it's mine. So this is
my instance variable. And what I will do is I will instantiate this instance variable
because this guy is not a real object, it's kind of like a stub. I'm going to load the
texture for this, add load time. So during initialization I don't need to do anything.
During load content time, what I'm going to do now is I'm going to load in that
logo. So something I call -- see that? I don't need to actually remember what it -MyLogo. I'm going to get content that load texture to D. I'm going to raise this
thing slightly.
So inside load content I'm going to actually load the content into a target in my
code. And the -- I need to give you a parameter and the name of the -- the
parameter's called MS. Okay? So I'm loading in something and then I -- the
thing I'm loading in is called MyLogo. Now that I have this object loaded, what I
want to do is I want to draw it. And then I will come all the way down into the
draw function, into the draw function here I will say I want to say my -- oh, it's not
that simple. Be careful now. So what I want to do is I want to sprite, draw, begin,
and then I will say MyLogo.draw, and then I'm sure that you are all very annoyed
because you don't know what's going on.
So what I'm doing here in a nutshell is that inside the draw function, I'm telling the
system, hey, I want to begin drawing now, so I will say spriteBatch. If you notice,
this is an instance variable I created in the class. I will say spriteBatch.begin,
say, hey, I'm ready to draw now. And then I will tell my object, you draw yourself,
MyLogo.draw, and then I will tell the system that I'm done drawing, say
spriteBatch.end. If you have that typed in or have to -- to put in more because I
have to tell myself where I'm drawing to. So here I will say I'm going to draw to a
new position and I'm just going to draw a 200, 200 for the sake of it. And I will
draw with color white. It doesn't seem to like my -- I think I'm okay. I'm going to
compile now. We can draw now. I'm going to compile now. Go to build and
build solution. Let's see if I get an error. I do get an error. Wait. Pardon me.
I'm going to delete this thing and look at the syntax for draw now. Sorry, sorry.
It's spriteBatch.draw and MyLogo and then I'm going to draw it to -- as you can
see, I know XNA really well.
So this is what -- this is what we do. It tells what -- spriteBatch I'm going to draw
now. What am I drawing? I'm drawing MyLogo. I'm drawing at a position 200,
200 with color white. And then I say I'm done. Yes?
>>: Is sprite like a container and if so, why didn't we add MyLogo to the batch?
>> Kelvin Sung: To the -- you don't add it to the batch. SpriteBatch is how do -how -- it's a -- it's an object that they provide you that's kind of interfaced to
drawing. So you don't add object into the batch. You kind of initialize, say I'm
ready to draw, to kind of initialize it, and then you draw to it and then you can
close it.
>>: [inaudible].
>> Kelvin Sung: Yes. You have your own object. And you are responsible for
making sure it's drawn. It doesn't compile. It does? But does it run?
>>: No.
>>: No.
>> Kelvin Sung: Yeah, yeah, yeah. Why not?
>>: [inaudible].
>> Kelvin Sung: We don't have the logo. So I actually turn out every resource
you put into the system, you have to tell the system where it is. So what we're
going to do now is we have to give the logo to the system. And this is how we'll
do it. I'm going to drag this back out. That's what this content project is all about.
It lets you put your resources that you need at runtime into the system and this
what I'm going to do. Don't blink. Now, if you blink you're going to miss this.
I'm going to go to my 1C useful file and see my MS logo. Are we okay? You find
that file? Okay. And the workflow is actually like how you work in explorer. I'm
going to drag this file. Be careful of where you drop it. I'm going to drag it to
content. We okay with that? I'm going to release [inaudible] it's in there. Now,
what I've done is I've included this image as part of my project. Okay? And then
now if you compile and run it's going to work. So I'm compiling. I'm running. My
Microsoft logo. Do we have a Microsoft logo? We okay?
Okay. So what we have done is we put in six lines of code and you have a logo
out there, and believe it or not, I'm going to show you how you can interact with
this logo. And from the olden days, that's kind of incredible. Okay? And what
we want to do is want to make this slightly simpler because I don't know about
you, I was quite scared when I first started doing this. A lot of magical things you
need to do.
So before we go away, let's verify the model-view controller framework in terms
of what's going on. And here I'm doing my draw, I'm drawing MyLogo, and then it
update what I can do is I can change my application state. So I'm going to make
my application slightly more sophisticated. And what I'm going to do now is I'm
going to come all the way back up here into where I declare MyLogo, I'm going to
create an instance variable to tell myself where I'm going to draw. So I'm going
to come out here and create instance variable called vector 2. So if you just type
in VE tab, it will give you vector 2. And then I'll call it pos for my position.
>>: [inaudible].
>> Kelvin Sung: Okay? And now we are working C#. It's manage code. It
works exactly the way like Java. For any object you have, you need to allocate
memory. You can allocate your memory in the constructor or in the initializer.
I'm going to allocate my memory initialize, so I'm going to come to my initialized
function and anywhere in there I'm going to initialize my position. Position gets
new and notice that if you notice the help InteliSense that comes up, a lot of tabs
will give you this few lines of code. So let's do this again. This is initialize. I'm
going to type P. It's going to give me pos. And then I will say it's equal to new.
And then it knows that I need to initialize a vector 2. So at this point if I type tab,
it would just give me the class name. Don't get used to that because you can't
go back.
So it's difficult to go back after you get it. So now if my position initialize you can
actually provide it with instance variables. I mean, you can provide the
constructor with, you know, I'm going to initialize it to 200, 200. Now that I have a
fancy variable that I can use when I come to draw instead of just drawing there,
I'm going to go all the way down here into my draw function and in my draw
function I'm going to expand that now instead of recreating this every time, I'll just
passing my position.
So now if my position, if I run the program, I will get exactly the same output
because I didn't change anything, right, instead of just creating the every time I
patch in variable. So we can compile this thing. I just compiled it. And if I run it,
then we will see the same logo that not interesting at all. But then what we have
now is that my application state is the logo and it's the logo and a position. So
what I can do is I can change the position.
So what I'm going to do now is that I am going to come into -- I'm going to come
into my update function. Here in my update function I'm going to say every time
when I update, I'm going to figure out what's going on. So for example, what I
can do now is don't blink -- well, actually you can. Please blink. I'm going to say
is keyboard.getstate -- this is Y getstate.key.iskeydownkeys.arrowup. I just want
to say up. Are you impressed that I am remember all that? I can't. The
intelligence help. It's great thing. So what happens here is that in the update
function I want to check my up arrow key. So I say the keyboard, this is a system
resource get the state and I want to check if the up key's down. If the up key's
down, what I want to do is I don't know, let's just increase my Y value. So if the
up key is being pressed here, what I want to do is I want to save my position, dial
Y gets -- let's increment that. Okay? So what's going to happen now? Now we
can compile the program if we build the solution and we can run and now do we
all have our -- and then if you press the up key, what's going to happen? Boom
dropping down. Do we have this thing dropping down? Anybody has any
question? It depends on how old you are, but having your origin at the top left is
not something I like or we should like. A lot of games are like that. You know, it's
difficult to teach with that saying okay, let's forget about [inaudible] you've
learned, let's assume Y goes downwards, like that's not very good. But that's
how the hardware guys think, right, because of the TV days. And you think that
that's 50 years ago, half a century ago. They can let that go.
So anyway, now what we are verifying is that I have a state, I have my object,
and then at drawing time I take this together and present an image for you and
update what I can do is I can change my state and I will draw up date draw so
now we can see this thing coming down. And then what that means is that if we
want to do something slightly fancier is that we can come out here and say I am
going to make my object just fly. So what I'm doing here is that this is in my
update function again. In my update function instead of changing the value
according to user input, I can change it automatically, right?
So if I compound -- so here's the thing. So for I didn't teach you anything at all,
I'm just showing you how to use this thing except maybe one thing. If you like
console programming, programming with character I/O, you are always in
control. You have your Y loop and all that going on. It's internal control model.
So we have to switch this around. We're working with external control model.
We don't have the central control anymore. We have to get used to the idea that
somebody's calling us. So if you want to change state, just change one at a time.
I'm not going to put a Y loop over this and say Y and X go. That's a very difficult
thing to switch out of. But then once you get used to this, I'm going to compile
this now, if you type control shift B you will control. You will compile. And then
control F5 you will run. And then I'm going to see my -- I'm going to see my
Microsoft logo. I've pressed my key down now. It actually -- we should make this
go up. Going down is not good.
So anyway, so we can do all this. Are we okay so far? And that's it. What else
do I have to say about programming with the XNA? Oh, the other thing I want to
say about programming with XNA is the fact that you can actually load this
program right here on to the Xbox 360. And let me show you how. You guys
have Xbox 360 with you? No. So you can only watch me do this now.
What I'm going to do now is I'm going to come out here with my right mouse
button click. We can see that. They come with translators for you. You can
create your project as an Xbox 360 project or Zune. You can actually compile
this as Zune and load it on to Zune. Which is kind of cool. So I'm going to
compile this, create this project, Xbox 360. So if I click on that, what happened is
that I have a separate project called Xbox 360. I'm just going to name it
something slightly less scary, so I'm just going to call it my X project. Okay? And
then if you open up this project, you're going to see the same source structure.
As it turn out, they share the same source code. And if you look at the folder that
contains the work, be so -- this -- my project is called -- what did I call my
project?
>>: [Inaudible].
>> Kelvin Sung: Draw. Thank you very much. So inside draw I'm going to see
two cs -- x.csproj, that's my Xbox project. I'm going to see my
WindowGame.csproj, that's my Window Game project. I do not see copies of the
source code. So program.cs and Game1.cs, there's only one copy of each one
of those. So the project describes the same source file, and then it's capable of
telling the system how to build based on the same source file, build the
executable. So if you look at this, everything is shared here. So I can open up
this file from here it says this project -- this file is documents opened by another
project. That's because I open that up here. So it's exact same document. If
you change something, both of them will see. And in almost 90 percent of the
time everything we can do here it runs both on Xbox and on PC.
Okay. So all those are -- all those are good and all that. And what I can do now
-- so the only thing different is these references. This is link library. These
libraries are did it for Xbox 360, they have a different binary set. So that's the
only thing different. So at this point what you can do is you can build and you
can deploy and if you have your thing set up right when you say deploy, it's going
to ship it to Xbox 360 and you can play that just like a regular game.
>>: [inaudible] to deploy is the checking the security right that you had talked
about earlier that all happens ->> Kelvin Sung: Well, actually before -- what ->>: [inaudible].
>> Kelvin Sung: Let me show you that. What you need to do on Xbox 360 is
this. So you have your Xbox 360. You will come to your -- you know if you bring
this stuff to class, you're certainly the most popular professor on campus.
[laughter]
>> Kelvin Sung: Until they realize programming is too hard. But then they are
more motivated, you know. So anyway, so you come to all games and what you
will do is you will run this program called XNA Studio Connect. And what this
program would do is you would talk to the IDE and let you do deployment. And I
can't do that for you right now because I can't go online right now. Because I go
online and check my ID and all that. I can't go online. Otherwise I would do that.
Not only can I -- see, this is the program that I deploy last night. Not only can I
not go online, I can't even run this. In order to run this these programs, you have
to be -- you have to sign up.
One good thing about this thing is all this program after students are done
developing them, they can sell it. Xbox LIVE hobby or Xbox LIVE help me, Xbox
LIVE something, they have three of those communities. There's Xbox LIVE for
professional and there's for people who are hobby, and what you can do is you
can develop this game and a sell it on Xbox LIVE as a hobbies and then, you
know, each game sells for like a buck. And you keep 80 cents of the profit. And
last year Sohie [phonetic], one of her classmates built a game up in my class and
sold it, and they rank number eight. Yeah. And I told him to not stop coming to
school. I'm sitting here, he'll be a millionaire. He's still there, so I'm not sure how
much money he's making. But anyway, so if you -- you can run this and the
program works in exactly the same way. There's nothing spectacular about it
except that now you can, you know, show it to your grandma at home and then
grandma will think that you are smart.
So that's all I want to show about programming with XNA. And this is -- yes?
>>: So how do we -- [inaudible].
>> Kelvin Sung: Yes.
>>: [inaudible].
>> Kelvin Sung: That's such an excellent question. What do we do ->>: [inaudible].
>> Kelvin Sung: The question is that we have keyboard control. Much we have
up arrow and down arrow and all that. On Xbox what you going to do? As it
turns out this won't run on the Xbox because there's no such input device on the
Xbox. So Xbox -- oh, look, there's something called game pad. So what you can
do is you don't follow this, I'm just going to show you what some of the interface
function are. So if you come out here and you go like if game pad,
gamepad.getstateplayerindex4, or whatever, there are buttons, there are -- there
are thumb stake, there are triggers and all the devices and it's really, really
simple to work with this, right, because that's all you need to do.
It could be a little bit overwhelming with this thing. So for that reason what we've
done is we have developed our library. So we won't put a layer of code on top of
this thing. So for those of us who are just not really into this much stuff we'll
make things simpler. Okay? And this was -- this is supposed to be about 11.
We're 11:30 now. So I'm just going to zoom, continue, okay. So now let's look at
the library and the library that we're providing, I'm going to close this now. And
I'm pretty sure the next one I have it right. So I'm going to open up my [inaudible]
I'm going to open up my folder structure. And we are done with section 1. I'm
going to come into section 2 now. And section 2 has four projects. We're going
to go through the first two here, and then inside simple circle. So what I want to
do is I want to show you beginning of the program and end of the program so
that we have a place to start. Okay?
So we're going to start with this begin template. It is just empty template. We'll
look at that. And then after that's done, this is where the source code is. And the
reason I'm giving you this is so that if you get lost somewhere down the line,
don't get very nervous. It's okay. So I'm going to look at begin template now.
And inside begin template once again you kind of need to know where is this
folder is because we kind of need it a little bit. We will see three files in there.
We will see a font file, we will see two DLLs, okay. So one font file and two
DLLs, and these two DLLs are the library that we're providing you.
So let's look at the source folder now. Remember where this folder is. If we look
at the source folder, double click on that and what that will bring up is this is my -this is our wizard. It's whole lot less impressive than Microsoft wizard. And then
the file structure, the folder structure, everything is identical. The only thing that's
different is if you open up Game1.cs, we see something slightly different. Same
name space and all that. The only thing different is said the Game1 program
instead of inheriting from the long XNA you'll be inheriting from our provider base
class. So this base class wrap XNA off from us. Okay?
Anybody has any question? Are we okay here?
>>: I can't get it to come [inaudible] I missed some link somewhere along the
line.
>> Kelvin Sung: Oh, okay. If you are stuck trying to compile the XNA program
[inaudible] don't get too concerned with that. There are two purpose of -purposes of doing that, and it's kind of contradictory. The first reason for doing
that is to show you it's not that difficult to do it the. The second reason of
showing you that it's really complicated. So if you can't get it to compile, it's
okay. Because I kind of want to let you see that. Although it's not that difficult it
can be quite challenging. And this is the interface. So if you come to this folder,
this is an interface we have. We inherit from our library and we can see that we
are using our library. We use our library and we inherit from our library, and
instead of having five functions as an interface our library has two. There is
initialize, there's update. You don't have to worry about drawing, which is
actually a mixed blessing because it can be a curse.
So you only need to worry about creating your world and drawing your world.
And at this point, we can actually compile. So if you come out here and just
build, [inaudible] solution, you will fail. And then the reason you fail is because
we didn't include the DLL as part of our environment. So we need to actually go
included that. So to include a DLL environment, you come to references. This is
where you specify what other libraries you need. If you right click on the
references, you can add a reference. Now you are adding a library into the
system. You add reference and then you go look for the file that we were log for
just now. It takes a while for this to load up. So you go look for the file we
examined just now and you want to add in the PC version of the DLL. We give
you the Xbox version so that anything you do here you can run Xbox. This is
taking a while. And then what we want to do here is we want to browse. And I
think you -- if you go up two folders, you will see the useful file folder. And this is
the file we want to include. Okay. Are we okay with that? I want to include that.
Now, this is included. Now I can compile my program now and I can run and I
can I'm just going to run -- I'm going to run a program now and it's just like XNA,
it's completely empty. Yeah?
>>: This your library that you wrote or is that ->> Kelvin Sung: Yeah. Yeah.
>>: All right.
>> Kelvin Sung: Yeah, it's -- I don't know how to say this well, but it's incredibly
simple to write that library once you've done it. So it's a very simple library. But
it's a very simple library, however, it's -- we can also do interesting thing with that.
So what we're going to do now is we're going to create circle. So I'm going to
come out here in the instance variable place. I'm going to type XNA and then
you will see that there's whole bunch of classes that you can choose from. You
just type XNA and then I'm going to go down the InteliSense with a circle, so I'm
going to create new circle. And then I'm going to call this M-circle because we're
in Microsoft. I'm going to follow their convention. M dash means things are part
of the -- part of the class so that you can differentiate between instance variable
and local variable.
And we want to initialize that circle. Let me get ourself into a place and then I will
come help those of you who are a little bit stuck. So here is -- I'm going to
instantiate a circle. So the idea is the same thing. I'm going to instantiate my
object in initialize and I'm going to update it in update. So I'm just going to
instantiate my circle and then the syntax for this is circle is equal to -- I'm going
new now and I'm going to new circle, and the place I'm going to create it, let's
create it at new vector, new vector 2 at 200 by -- well, let's do it at 50, 50, how
about that? 50, 50. And then the radius of my circle let's create it as 3. Can we
see the entire thing? Let me chose that up.
Type that in compile and then you will have a circle.
>>: It's just slow.
>> Kelvin Sung: Oh, this machine ->>: It's a couple steps behind.
>> Kelvin Sung: Okay.
>>: It's been slow all morning.
>> Kelvin Sung: Okay. Okay. So if you -- now you compile this in run, you will
see a circle. I promise you. So I will just compile and if I run I see a circle. All
right? So now you know I don't have to worry too much about all these things.
And then what you can do is let's -- in update world let's change information
about that circle. So what I'm going to do now is I'm going to say my circle's
center, let's move it up. Let's move it down because it's so high up right now.
Circle.center.center X, I'm going to increment that in my circle.center Y, I'm going
to decrement that. How about that?
And then if you compile this and run the circle will just move. So all did I is I put
in two lines of code and then the circle will now move. And if we want to, what
we can do is instead of moving the circle automatically, this is AI, right. When it
talk about in game AI, that's what that is. Your object can move by itself. So
what we can do here is that we can -- let's change my circle according to my
thumbstick, okay? So what I'm going to do is I'm going to say my circle.center +=
gamepad. -- let's say thumbstick.left. So this is a variable in the system, it will
give you the vector 2 of the left thumbstick. So this is the thumbstick that we will
be working with. It's going to work with the -- let's use the right one. Because
the right one it's easier to work with on the PC. So I'm going to just map this to
the right thumbstick. So this thumbstick right here.
And what this device does is that it gives you a floating point range between
minus 1 to paucity of 1 in the X and Y direction. So that's why we can do that.
Okay?
Now if we compile this in run and I'm going to run this now, you can actually
move your circle with the arrow key. So what we have done in our library is that
if you are running on the PC, we map all your keys to -- all the controller
functionality to a keyboard. And if you're running on the Xbox then you would
just use the Xbox controller. And then if you can plug this stuff in into -- on to
your PC. So I always go to what is now with my Xbox controller. And I'm really
popular in school. So now what I can do now if I run this thing and I can control
this with my -- it's exactly the same thing as though, you know, it's the same. So
we are drawing with -- oh, and I want to echo messages. I want to show user
something. And for that what we need to do now is font is not part of the library.
So if you want to do anything, you have to provide it with the information.
So this is the part where because the library is so simple to work with, it's also
really, really rigid. And your students don't need to know this, but you kind of do.
So I'm going to bring out my solution explorer now. My solution explorer. In
order for the system to see font, what I need to do is I need to create a folder
under content. So I'm going to come to content and do a right mouse button and
say add new folder. What this will do is will actually add a new folder into the
system library -- I mean to the filed system. So I'm going to add a new folder
here I'm going to call fonts.
By the way, the name got to be called fonts -- oh, actually. Did you guys type
that already. If you haven't, it has to come under resources. So I'm going to
create a folder called resources, r-e-s-o-u-r-c-e-s, and then under resources I will
add the folder called fonts. And then I'm going to do something really fast now.
Well, there's a folder called fonts. And then inside fonts I will put the fonts file in
there. You can either drag and drop this or what you can do is you can come out
to your useful files, so I can just drag this file and drop it into fonts just like the
way we drop in our -- I can put into fonts -- come on, let me put into fonts. I can
drag that font into fonts or I'll show you another way of doing exactly the same
thing. So what I can do here is I can come out here and do a right mouse click
and say add existing item and then I can go search for it. They give you many
ways of doing exactly the same thing. So I can add that.
Now I have the font. So at this point, I can -- I can actually output text on to -- in
my application. For example, I want to -- are we okay with the font file included
here? We're okay? So I'm going to -- I'm going to give my -- give my object a
name. So I'm going to come out here and say my circle.label. So you can
actually change the label of your object. I'm going to call this say let's say circle.
And then if I compile this in run, then my circle has a name. And so you can -you can call your object whatever you want to, and then remember this is not
designed so you can build fancy games, it's designed so that you can present
concepts in programming. So another way of communicating to a user is just to
echo messages. So you can -- there are two status area that you can echo to.
You can echo to the bottom status or the top status. So you know, if you echo to
the bottom status saying that what should I do, let's say circle is add
circle.center. So the operator overload is done really well in C# that you don't
have to worry about, you know, it's just like Java I guess, they all do this now. So
I can just echo my circle's position by echoing that way. And I'm echoing this at
the bottom and at the topic do something similar. I can -- there's an echo to the
top status. I don't know what else to echo to say hello. So now you are
outputting text. So you can echo the status of your application for your -- for your
user. So we can see that here's my circle and then here is my hello. Okay?
And then one thing interesting is that if I start moving my circle around, we can
see that it keeps me realtime feedback on what's going on. And then if I just
continue to move up off the screen is still drawing, is still trying to -- the circle is
still being drawn. So once you create an object it's always -- it's always being
drawn. We're okay with this? You have a question?
>>: [inaudible] we should worry about clipping or performance?
>> Kelvin Sung: We should worry about performance when you have to,
meaning that object's now out of sight, out of mind, you don't have to worry about
it, you should worry about it.
So one of the things we can do is I'm going to let my circle be under my control
and everything, and then I'm also going to let it have its velocity, okay. Let's
create some chaos for ourselves. And if I compile this and run, my circle is going
to just move away and then you will see that it's continuously existing in my
world. Okay? So we need to be a little bit careful about that. So what I want to
do is I want to kind of clamp it. I want to clamp my circle within the application
bound. So what I can do is this thing. I'm going to come out here and call
function. I'm going to come out here and call function. So I'm going to say
bound collect collide status. So if you just type in b-o-u-n-d, you will see bound
collide status. And then let's call that status. So this is the object type, right?
And this is my status. Status. And the status of that is equal to -- I'm going to do
world.clampatworldbound. I'm going to do world.clampatworldbound. And what
am I clamping? I'm clamping the circle.
So what that would do is it will make sure the circle doesn't go far away. Okay?
And if you compile this in run you see that the circle is always inside the
application window. I'm going to compound now and run now. So all I did was
the bound collide status, this is a status and then you tell the world to clamp your
circle at the bound. Are we okay with that the? And you can compile -- now,
your run you see a circle go all the way down to the -- I'm going to build my
solution. And then I'm going to run my application. And the circle will go boom
and get stuck there. It's still trying to move, it just always get clamped there.
Right?
Any question? No question. So I'm going to -- so at this point it's probably a little
bit scary, you know. I was -- what I'm talking about XNA having so many
different secret functions, now we're working with all these really secret functions.
So what happened is that I'm going to bring this up now. This library that we've
developed, if you click on that, we have a guide for you on how to work with this
library. And my goal today is to show you that you don't need to read through the
guide to do everything. Okay? There are tutorials here step by step guide of
everything we went through basically just now. And some of these examples are
slightly more complicated. But they're tutorials for you to learn the library with.
We don't have time to do that. None of us have time to do that.
One thing you can do is I'm going to click on this thing. If you -- if you are this
tutorial guide page, come here and click on this compile HTML help and what it
will ask you is to you want -- just say open. And this what you get. This is a
documentation of the library. And I want in the next five minutes to show you that
it's really not that difficult to work with this. If you open up the library part of it,
you will see that these are all the classes that -- all the classes in the library. And
basically the library consists of a world and two primitive type and nothing else.
And I claim therefore 90 percent of the things we need to do, that's all we need.
You need to have a world, a circle and a rectangle. Strictly speaking don't even
need a circle, just need to have a rectangle. Okay?
And if you look at world what are the things you want to do to your world? The
things you want to do to your world are -- here are the members. This is a base
class. I'm sorry. If you look at the base class of the providing functionality this is
the base class, you can echo to the top, to the bottom. You can play a queue.
When something interesting happen, you can let your user know, boom, player
queue. You can play background audio if you want to have something
interesting game be nice to have some background audio. And then you
generate random numbers. And that's it.
So the base class provide this tool for six functions and nothing else. Okay?
And then in the base class there's also something called the world. So this kind
of like utilities on the side. And then there's the game pad that we've seen.
Game pad give you access to all the keys on the game pad. And then there is
the -- there's the world class. This world class tells you about information of the
world. If we take a look at that the methods on the world class, these are the
methods.
You can clamp at the world bound. You can collide with the world bound. So
clamp meaning that you just want to make sure your object don't go outside. And
collide tells you if you collided with it. And then you can test if you're outside of
the world bound. You can remove all your objects from the draw set. There's
something called a draw set. That's why after you create object you always
show. So you can always add objects in their -- and remove objects from there.
You can set the background colors, set the background texture and set world
[inaudible] this kind of most interesting function. We do not work in text -- we do
not work in pixel space. We work in the real space that you can define and
coordinate to be whatever you want. And I'll show you what that means. So we
can set a world coordinate. And these are all the functions we have in the world.
And then the world provides you with some properties. These are like variables
you can access.
It tells you the min and max position of the world and tells you the dimension, that
that defines the window boundary, right? And that's it. Besides this you don't
really -- well, now you don't need to, but in this kind of basic functionality you
need. And then besides that, what we have here is we have the primitive class,
that's the super class with the circle and for the rectangle. And if you look at the
primitive class, the -- all the methods you have can be -- well, this these are all
the methods and then there's a property up there. The properties are kind of like
information you want to get a hold of, the center of the geometry. So there are
two types of information here, the geometric information and then the
appearance information. Here it tells you the center coordinate of the primitive
and then you can look at its bound. You can look at its max bound and mean
bound of the primitive. So you can know the X and Y value primitive and then
you have appearance. You have the label color. This label is the text we saw
just now. And then you can have the outside color. You can change the color of
the primitive. And the behavior of the primitive is also defined. And then this is
something we have not seen yet, and I want to look at this. After we go through
this library I'll show you -- show you how to work with this thing. You can change
the velocity of an object. So each primitive has an object. Each primitive has
appearance, what is its color. It has geometric information where it is, how big it
is. And it has behavior. Behavior are things like speed and velocity, and I'll show
you how to work with that like right now.
Okay. So circles and rectangles, they all have similar type of behavior. And
that's it. So with that, I say that you can build interesting games. The methods
are -- these are some of the methods you can -- you have on the primitive. You
can -- you can ask primitive whether it's above another primitive, whether it's
below another primitive, you can collide primitives. And then you can control the
visibility of primitive by removing it from the draw set. And these are all things
we'll look at. My point here is there are not a whole lot of functions you need to
know. There's about a handful of functions. Okay. And let's look at how to -how we can work with one of these.
So what I'm going to do now is I just came back to my circle class and this is
code we're working on just now. I'm clamping my circle at the boundary. I will
show you how we can set up the velocity. We don't even need to update the
circle ourselves.
So what I'm going to do now is add a creation of the circle in initialize world, I am
going to say my circle velocity direction. I'm going to give it a new velocity
direction of 1, 1. What this will do, it would define where the circle is heading. If
you remember a velocity, velocity is the direction and the speed. So here we're
just setting the direction. And what I can do on top of that is I can set the speed.
And I want my speed to be let's say a 2. So my speed is 2. And then I'll tell my
circle that I should travel. So I set up the velocity direction, I give you the speed,
and I say hey, you should move.
What this would do is it tells the circle every time when update comes, you
should move. And I don't the need to explicitly change its value here anymore.
So I'm going to talk these two lines out. I'm going to compile and run and my
circle moves. And it gets stuck. Do we have a moving circle? You guys realize
that we have a ball bouncing a window now? How do we bounce that ball?
Won't it collide with a boundary? Change its velocity direction.
So what we're going to do now is that we're going to look at this status. We're
going to look at this status. And the way to do that is I'm going to do a switch
statement here. C# is really nice in that way. I'm going to do a switch on status
and then case statement. Case. Look, I don't have to remember anything. If I
type case, it will give me the class name. So if you type, just type tab, it will give
you that okay. And then if you type that, it will ask you which one. In like 20
years there will be no more real programmers anymore. People working with
this, they're not cool.
You know, the cool guys are the ones who can do programming with text editor.
So I'm going to do a bottom and then as it turn out top and bottom behave
exactly the same way, so I'm going to put these two cases together. Collide, top.
When you collide with the top or the bottom, you want to flip the Y direction. So
all I'm going to do now here is I'm going to say my circle.velocity.velocityY gets
minus circle.velocityY. And then I will break.
And you know, for the sake of not getting too bored, let's just do that. And now
you can compile this in run. And then the circle will get stuck, and it's
somewhere else. You will not get stuck at the top or bottom boundary. Are we
done typing that? If you are done typing that, go figure out how to flip in XY
boundary. So now your circle actually bounce around inside the boundary.
I notice a few of us are not programming anymore. Is there a reason for that?
>>: It's tough to keep up with you.
>> Kelvin Sung: Okay. No, I'm very interested in knowing whether it's realistic to
have people follow what I'm doing. And some of us say no, we won't keep up.
Oh, some of us are. You know C# though. Right?
>>: I was in XNA with that guy over there.
>> Kelvin Sung: Oh, really? Oh, so you can teach this class.
>>: No, you are teaching the class.
>>: Yeah. Yeah. For at least [inaudible] we're deciding if it's easier for you to
follow you.
>> Kelvin Sung: Than to just type?
>>: To do it. Yes. It's not as important for us to ->> Kelvin Sung: So what happened is that I -- we go through this thing and then
we will build the Blockbreaker game and if you guys are interested in another day
of this stuff is that I will give you guidelines on how you can design your own
games and then we spend about three or four hours in designing our own game.
So in Guadalajara what they did was professors got together and a group of
them designed a worm game in like three or four hours and then they spent four
hours implementing it. You know, it's like 30, 40 lines of code. It's kind of tricky
to implement that stuff.
But once you go through that once, it's really easy. So if you are still following,
then I'm just going to complete this thing. So I'm going to do a left and right here.
And left and right. And then of course when left and right happen what we want
to do is want to change the velocity to X direction. I'm going to change the X
direction. And what you have then is that you have a circle that's being bounded
by the world, and it just collides around in the world. And if you look at what I've
done, it's -- I basically just have like few lines of code doing this stuff. This is too
easy actually to try to follow, right? I guess if you follow this and you realize that
there's some stuff that looks easy but it may not be as easy. One thing we want
to do now is that that's kind of nice and everything. What I want to do is I want to
put in audio so that when interesting [inaudible] happen, I want to play some
music for myself. So what I'm going to do now is that I'm going to come out to
my resource area, I'm going to add a new folder called textures. You cannot
misspell this because the library's so stupid. Well, you know, you can be easy if
you are easy to use then it typically means you're very restrictive. I'm also going
to put in a folder called audio, a-u-d-i-o. So these are the resources I'm going to
have in my system, okay. So I've added two folders here, audio folder and
texture folder. And what I'm going to do the now is I'm going to come out into my
-- the zip file that unzip. If you look at a zip file that we unzip, there is under 2
there is with media. Go into that folder. Oh, boy. Do you guys have something
called useful files in there? Oh, I guess it's in begin template. Under begin
template, there's something called useful files. We have that? Go into useful
files. I'm going to drag B.png and BG, background.png. This can be a
photograph, right? You take a photograph. And then I'm going to drag these two
files into the textures folder. It's part of my project now.
I'm also going to drag my bound.wav into my audio folder. I'm going to drag my
bound.wav into my audio folder. Come on. It's in my audio folder now. So now
all these files are part of my project, and I can start using them. And I'm going to
use them like this. I'm going to come into my initialize world, and instead of
having a blue background or whatever color background that was, I'm going to
set its background texture. So there's a function called
world.setbackgroundtexture. So I'm going to have a background information
rather than the boring world and this is BG texture.
And notice that I don't include the file extension when I specified the name. The
extension -- well, the system is smart enough to figure out what's going on. Do
not specify the extension. And then for the circle, instead of a color circle like
that, I'm going to do circle dot texture. I want to give you the texture. And here's
my B.png, so I'm going to just call it B. Now, if I compile this and run this, I have
a B jumping around. Are we okay?
Okay. And then when an interesting event happen, you want to tell your user
that something has happened. And so what you can do here is tell when
interesting event happen, like when you switch your velocity, you want to tell the
user I'm going to switch out my audio now, be careful, it's kind of loud. So I'm
going to say play, I'm going to say world dot -- it's not under world, PlayACue. I
want to play a hint for my user, and I think it's called bound. It is called bound.
So I'm going to play a cue called bound and I'm going to do it on both places.
PlayACue.
So what we went through just now is slightly random, but then it's actually slightly
on purpose is that you finish all your logic. When something's kind of working,
then you start decorating it with textures and cues. Those things are just useless
stuff as far as learning is concerned, right. But then it makes the application look
slightly more interesting. So now we have this thing going -- oh, because -- be
careful now.
So now this looks like a game now. No? It's not a game. This is pretty boring
stuff. But then the thing now is what we've went through is the layer of library
we've put on top of X and A introduce semantics so that it makes -- allows you to
think at a higher level in terms of here's an object interacting with the world. It's a
really, really, really, really simple game engine, okay.
Are there any game programmers here? Because it's embarrassing when you
say that. But then this lets you do -- think at a higher level. And everything we've
done here can be taught in intro programming classes. And then if you can, you
know, just with a couple of strokes what you can do is you can put in the
resource like texture and audio.
The last thing I want to do before we go have food is I want to show you the
world coordinate system that we're working in. So notice that we didn't specify
how big our world is. We just started working. Okay? And then if -- I'm going to
make my circle stop moving around because it's really annoying. So I'm going to
bring this up. One thing we notice is that we didn't specify how big our window is.
It just came up the size. Okay? And that's by design. You cannot change that.
And the reason for that is I want to make the library as simple as possible. And
the dimension of this window is actually restricted. It follows the Xbox 360 HD
TV such that the width is 19 versus the height is 9 -- I mean 16 to 9. So this is 16
to 9 ratio for HD TV. So the idea is that you can develop your -- everything with
measurement in this environment and then when you run on Xbox 360 you just
run exactly the same way. Okay? So the dimension is fixed.
Another thing is that this position right here, 0, 0, as we can see if that's 0, 0 -- if
this is 0, 0, the length here is by default 100. So we're working in a world of
between 0 to 100 and then height is between 0 to I don't know, 9 divided by 16
multiplied by about 100. That's our height. We okay that? So that's the
dimension we're in.
And the nice thing is that you can change that. You can change that
independent of the pixel resolution. So you don't have to worry about how big
should this play or anything like that, the dimension's always like that. So what
we can do here is we can change the resolution. For example, my circle's radius
is five. I'm located at X is equal to 50. And we can see just now the circle's right
smack in the middle X of my application. What I'm going to do now is I'm going
to change my world to set world coordinate. So there's a
world.setworldcoordinate function. I'm going to define the lower left corner
continued to be 0, 0, it's so convenient to think of that's at 0, 0. I'm going to
define the width to be 200. If I do that, then my circle becomes smaller. So it will
appear as smaller. So I'm going to define this thing as 0, 0, this is my lower
left-hand corner, and then the width is -- I'm going to define my width to be 200.
So here I'm defining world coordinate system. The entire window is going to map
to 0, 0. And then the width is 200. Notice you can't specify height here. Height
is implicit because of the ratio is 200 -- 16 by 9. So if you specify the width, the
height will be defined for you. And then if I compile this in run, because my circle
is located at 50 and my width is 200, you'll be like the first quarter. So if we run
this thing we'll see that the circle is like right here as a first -- right here at the first
quarter. Right? And that's because the entire width is 200. So we can define
any kind of a coordinate system we want.
Are there any question or if I go like that? If you still have brain for the -- I hope
you have brain. Let's have some food and that will help replenish. So what
we're going to do now is what I want to do in the afternoon is to show you how
you can take this thing and start abstracting things and at an even higher level,
depending on what you want to do. What we'll go through in the afternoon is
we'll go through a very simple design procedure. If you think about like a
Blockbreaker game, what's involved in the design, this is what we'll be building in
about two hours in the afternoon. I hope we can do this in about one hour or so.
So we are done with section 1 and 2. In section 3 at the end of section 3, this is
the game we will build. At this point you can regenerate the blocks, okay. And
then I'm saying that we all have that knowledge right now. Because you have
that knowledge coming in. What we need now is one example of when you see
something like this is how do you map what you want to do and into this
graphical form. Okay? I'll guide you through that and it takes about an hour.
And after that, you can all go do the worm game at home. Okay? So I think
lunch is here. Let's go eat some food. So officially class is dismissed now.