Jeff
Lord
Tutorial 1 - Basics
What’s needed?
Visual C# Express (Yes, express not Visual Studio)
Visual C#
Visual C# Express Service Pack 1 (VS80sp1-KB926749-X86-INTL.exe)
Download details: Visual Studio® 2005 Express Editions SP1
XNA Game Studio Express 1.0 Refresh
Download details: Microsoft XNA Game Studio Express 1.0 Refresh
Additional Comments:
For these tutorials I am assuming you have at least a beginner to intermediate understanding of C#.
I also am assuming you’ve download and installed the items below, and have the project for this tutorial open in Visual C#.
Some thing first before I begin, I love to explain things with analogies. I love when things are presented this way to me, so I will bring the same to you whenever necessary. The other thing I love to do is to just jump right in and start playing with stuff. I don’t learn well from books because I’m too much of a “hands on” type of person. Everything I’ve learned about XNA and pretty much programming in general I’ve taught myself with very little reading. I learn best from example and trial and error. So without further ado, let’s jump into so code.
In this tutorial I will be showing you how to draw a simple triangle on the screen. This may sound dumb, and you may be thinking “I want to do something more fun”. Well, we will, but be patient because I assure you without the stuff I explain in this tutorial, you will be lost in the more heavy stuff I go over later on.
Ok, so a game loop in itself is extremely simple and basically looks somewhat like this.
Pretty simple, right? There are some other things that really go on behind the scenes but most of that important stuff is taken care of by the XNA framework so that you don’t have to bother with it. The basics of 3d rendering for games is that everything is really a triangle. So when you are playing your favorite 3d game, the graphics card is really rendering tons of small triangles to the screen with textures or colors applied to them. The more triangles you render the better your character, building, vehicle, etc. appear to look. The side effect to this is the frames per second at which the video card can draw these triagles drops. So for this tutorial I will be showing you how to draw a simple triangle to the screen. So lets jump into the code.
Lets you look at line 14
Notice we are inheriting from the Xna frameworks Game class. We do this because Game already contains the basics of a game engine. It has a render loop that we can override called Update and Draw. The basic Xna project, when created, contains 2 fields
These fields are extremely important to us. GraphicsDeviceManager contains our graphics device which will be used to draw objects to the screen. ContentManger is a resource management class that will help us load models, textures, shader, etc. in later Tutorials. In the code I’ve provided you will also notice a few more fields.
Basically I’ve commented the entire file to explain what things are and what they do along the way. No real need to do it twice . But these are all important and you will need all of these for every 3d object you draw to the screen. The only exception to some of this is that they can be done in different methods. For instance, yaw, pitch, roll can be summed up with a class proviced by the Xna framework called Quanternion. The reason I didn’t include this though, is it isn’t as easy to understand.
Anyway enough babbling, lets look at more code.
This is also another important overridable part to Xna. This is called for every single game component, including the engine during the initialization of the game. It is also called whenever the graphics device gets reset or is lost. This can happen whenever you resize the screen, minimize it, or enter full screen mode. You should reinitialize al lthe objects in your game whenever loadAllContent is true. This means the graphics card was completely lost and was recreated. Thus all objects using it need to be recreated as well.
Well, there really isnt a whole lot more I need to point out, that isnt already explained in the code itself. A lot of the things in the code that are explained also have examples of how they effect the game itself, the only one of these I wanted to go over in more detail is the projection matrix on line 153
I explained in the code that this is how First Person Shooters create a zoom effect with certain guns. Basically this messes with the view area of the current view point. When I watch how some people try to zoom, what they do is move the camera closer to the object they want to view, this is wrong. You want to decrease your projection of what you are viewing, this will give you a zoom effect. If you want to see what im talking about, run the program one time as its written, then change the 3.0f to something like 10.0f. This will look like you are REALLY close to the object when really you are the same distance away, but looking at it from a smaller perspective.
Well that’s about all I have for this tutorial, I will start working on a new one soon. If anyone has any questions, suggestions, or comments please feel free to leave them here. I will be happy to answer, any and all of them when I get a change.
What’s needed?
Visual C# Express (Yes, express not Visual Studio)
Visual C#
Visual C# Express Service Pack 1 (VS80sp1-KB926749-X86-INTL.exe)
Download details: Visual Studio® 2005 Express Editions SP1
XNA Game Studio Express 1.0 Refresh
Download details: Microsoft XNA Game Studio Express 1.0 Refresh
Additional Comments:
For these tutorials I am assuming you have at least a beginner to intermediate understanding of C#.
I also am assuming you’ve download and installed the items below, and have the project for this tutorial open in Visual C#.
Some thing first before I begin, I love to explain things with analogies. I love when things are presented this way to me, so I will bring the same to you whenever necessary. The other thing I love to do is to just jump right in and start playing with stuff. I don’t learn well from books because I’m too much of a “hands on” type of person. Everything I’ve learned about XNA and pretty much programming in general I’ve taught myself with very little reading. I learn best from example and trial and error. So without further ado, let’s jump into so code.
In this tutorial I will be showing you how to draw a simple triangle on the screen. This may sound dumb, and you may be thinking “I want to do something more fun”. Well, we will, but be patient because I assure you without the stuff I explain in this tutorial, you will be lost in the more heavy stuff I go over later on.
Ok, so a game loop in itself is extremely simple and basically looks somewhat like this.
Code:
while (game.Running)
{
Update();
Draw();
}
Pretty simple, right? There are some other things that really go on behind the scenes but most of that important stuff is taken care of by the XNA framework so that you don’t have to bother with it. The basics of 3d rendering for games is that everything is really a triangle. So when you are playing your favorite 3d game, the graphics card is really rendering tons of small triangles to the screen with textures or colors applied to them. The more triangles you render the better your character, building, vehicle, etc. appear to look. The side effect to this is the frames per second at which the video card can draw these triagles drops. So for this tutorial I will be showing you how to draw a simple triangle to the screen. So lets jump into the code.
Lets you look at line 14
Code:
public class BasicsGame : Microsoft.Xna.Framework.Game
Notice we are inheriting from the Xna frameworks Game class. We do this because Game already contains the basics of a game engine. It has a render loop that we can override called Update and Draw. The basic Xna project, when created, contains 2 fields
Code:
GraphicsDeviceManager graphics;
ContentManager content;
Code:
//These are all the basic variables we need
//to draw a 3d object to the screen.
//Most of these are pretty self explanitory.
//Those that aren't will be explained along the way.
VertexDeclaration vertDec;
VertexPositionColor[] vertices;
BasicEffect effect;
Matrix world;
Matrix view;
Matrix projection;
Vector3 position;
float yaw;
float pitch;
float roll;
float scale;
int[] indices;
Basically I’ve commented the entire file to explain what things are and what they do along the way. No real need to do it twice . But these are all important and you will need all of these for every 3d object you draw to the screen. The only exception to some of this is that they can be done in different methods. For instance, yaw, pitch, roll can be summed up with a class proviced by the Xna framework called Quanternion. The reason I didn’t include this though, is it isn’t as easy to understand.
Anyway enough babbling, lets look at more code.
Code:
protected override void LoadGraphicsContent(bool loadAllContent)
This is also another important overridable part to Xna. This is called for every single game component, including the engine during the initialization of the game. It is also called whenever the graphics device gets reset or is lost. This can happen whenever you resize the screen, minimize it, or enter full screen mode. You should reinitialize al lthe objects in your game whenever loadAllContent is true. This means the graphics card was completely lost and was recreated. Thus all objects using it need to be recreated as well.
Well, there really isnt a whole lot more I need to point out, that isnt already explained in the code itself. A lot of the things in the code that are explained also have examples of how they effect the game itself, the only one of these I wanted to go over in more detail is the projection matrix on line 153
Code:
projection = Matrix.CreatePerspectiveFieldOfView(MathHelper.Pi / 3.0f, graphics.GraphicsDevice.Viewport.Width / graphics.GraphicsDevice.Viewport.Height, 1, 1000);
I explained in the code that this is how First Person Shooters create a zoom effect with certain guns. Basically this messes with the view area of the current view point. When I watch how some people try to zoom, what they do is move the camera closer to the object they want to view, this is wrong. You want to decrease your projection of what you are viewing, this will give you a zoom effect. If you want to see what im talking about, run the program one time as its written, then change the 3.0f to something like 10.0f. This will look like you are REALLY close to the object when really you are the same distance away, but looking at it from a smaller perspective.
Well that’s about all I have for this tutorial, I will start working on a new one soon. If anyone has any questions, suggestions, or comments please feel free to leave them here. I will be happy to answer, any and all of them when I get a change.