Tutorial 1 - Basics

[Jeff]

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.

	     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

	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

	GraphicsDeviceManager graphics;
	ContentManager content;

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.

	//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.

	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

	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.

 

[Setharnas]

Neat.

Bugreport: in Main() you're using (Game1 game = new Game1()), while your game class is named BasicsGame. Either - or.

 

[Jeff]

Neat.

Bugreport: in Main() you're using (Game1 game = new Game1()), while your game class is named BasicsGame. Either - or.

Ah ya, thanks.

 

[Storm33229]

Definitely a helpful tutorial, I'm wasn't at home at the time of veiwing it, so I haven't been able to open up the project yet and start playing around with things you have taught, but I read through it and understood most of it.

The main things that confused me are:

                //The rotating of our primitive
                //Yaw is the Y axis, so it rotates left and right(front to back).
                //Pitch would be X axis and rotate up and down
                //Roll would be Z axis and rolls left and right(top to bottom)

I suppose that it would make more sense to me if it read:
Y = up and down
X = left and right
Z = front to back

and

       //Scale of our primitive. 1 = 100% of the original size. 
                //2 would be 200% and so on
                scale = 1f;

I under stand everything here...but...why is there an 'f' after '1'? and I still don't really understand the concept of a matrix. Help?

 

[arul]

1f means that its float. If the variable is float by itself, it can be omitted, though it can be useful in some cases(for example to avoid an integral division).

 

[Jeff]

Definitely a helpful tutorial, I'm wasn't at home at the time of veiwing it, so I haven't been able to open up the project yet and start playing around with things you have taught, but I read through it and understood most of it.

The main things that confused me are:

                //The rotating of our primitive
                //Yaw is the Y axis, so it rotates left and right(front to back).
                //Pitch would be X axis and rotate up and down
                //Roll would be Z axis and rolls left and right(top to bottom)

I suppose that it would make more sense to me if it read:
Y = up and down
X = left and right
Z = front to back

and

       //Scale of our primitive. 1 = 100% of the original size. 
                //2 would be 200% and so on
                scale = 1f;

I under stand everything here...but...why is there an 'f' after '1'? and I still don't really understand the concept of a matrix. Help?

1f represents a float. if you say 1, it can be ambiguous from int and float. same as something like 1.01, however, i believe 1.01 would throw a compiler error and say it cant implicitely compile 1.01 from a double to a float.

As far as matrix stuff goes, i don't think its important to understand what exactly they do at this point. Just more you need to know why, Basically all the information in a matrix tells the graphics card how to draw each vertex. So if you have a Matrix.Identity, the graphics card applies this matrix to the vertex data and it wont change because Matrix.Identity is like multiplying 9 * 1. The answer is 9 cause nothing changes. Matrix math is quite confusing. The point here is to not try and understand it to much but just remember the steps you need to take to get a proper matrix to apply to the shader effect.

As for this

I suppose that it would make more sense to me if it read:
Y = up and down
X = left and right
Z = front to back

This is wrong. My explination is right, Y is not up and down. Take a pencil and tape a piece of paper to it, hold the pencil by the eraser with the tip of the pencil facing the ground and twist your fingers, this is the effect of rotating on the Y axis, the paper moves left and right, not up and down...same applys to all other axis. Basically when you drive your car, you are turning left and right on a Y axis, if you were in a plane and turn left and right the plane rotates on its X axis in the air. If you look up Yaw Pitch Roll and how they apply to a plane, you will see exactly how it works...infact Ill post a picture

This isnt the best example but you can sorta see what i mean.

 

[Storm33229]

1f represents a float. if you say 1, it can be ambiguous from int and float. same as something like 1.01, however, i believe 1.01 would throw a compiler error and say it cant implicitely compile 1.01 from a double to a float.

As far as matrix stuff goes, i don't think its important to understand what exactly they do at this point. Just more you need to know why, Basically all the information in a matrix tells the graphics card how to draw each vertex. So if you have a Matrix.Identity, the graphics card applies this matrix to the vertex data and it wont change because Matrix.Identity is like multiplying 9 * 1. The answer is 9 cause nothing changes. Matrix math is quite confusing. The point here is to not try and understand it to much but just remember the steps you need to take to get a proper matrix to apply to the shader effect.

As for this

This is wrong. My explination is right, Y is not up and down. Take a pencil and tape a piece of paper to it, hold the pencil by the eraser with the tip of the pencil facing the ground and twist your fingers, this is the effect of rotating on the Y axis, the paper moves left and right, not up and down...same applys to all other axis. Basically when you drive your car, you are turning left and right on a Y axis, if you were in a plane and turn left and right the plane rotates on its X axis in the air. If you look up Yaw Pitch Roll and how they apply to a plane, you will see exactly how it works...infact Ill post a picture

This isnt the best example but you can sorta see what i mean.

Never meant to imply that you were wrong, just that this was a new way of thinking for me. Thanks for the picture hahah! It really does help.

 

[Jeff]

Never meant to imply that you were wrong, just that this was a new way of thinking for me. Thanks for the picture hahah! It really does help.

I was more pointing out to you that the way you thought of it was wrong There is something misleading about that picture though, it should be rotated on the Y axies 90 degrees.

 

[Jeff]

Would it help if I added a coordinate system to these tutorials? So in the game you would see something like this?

At all times?

 

[crackrat]

Another quik easy way to remember the Cartesian Coordinate System is to put your right hand palm up and parallel to the default world view with your thumb extended. for terrains the defualt view is your top view looking down this is also considered the global coordinate system. When viewing a model it is usually the front view of the model, also known as the construction plane. The thumb points to x+, the finger to y+, and the palm to z+. if the positive x or y axis rolls toward you it is rolling in the positive direction away from you is in a negative direction. the z axis rolls positive clockwise and negatively counter clockwise.

Where it really gets screwed up is when you start viewing an object that due to movement or placement is no longer inline with the world view of the scene, in those cases you must remember the models construction plane and use your hand accordingly. the models construction plane will always add up to the total movement and rotational vectors.

Be aware the each individual feature or piece of any model may have its own distinct construction plane that may differ from the models collective construction plane. Usually it is a good idea to align the different construction planes to the collective construction plane, lol but thats way above the scope of the current teachings

interesting note from a graphics arts perspective when using 3dstudio(and may be true of other applications using this file format), when saving an model as an .3ds file it will twist the model, so that the accumulated construction plane matches the the global coordinates. this can lead to some unexpected results .

 

[Storm33229]

Would it help if I added a coordinate system to these tutorials? So in the game you would see something like this?

At all times?

I suppose its not necessary, I'll probably understand it more as we move along.

 

[Jeff]

I suppose its not necessary, I'll probably understand it more as we move along.

Well ill prolly create it jsut because, but ask all the questions you want, thats what this forum is here for, if you dont understand something, ask. Ill answer best I can.

 

[FingersMcSteal]

Would it help if I added a coordinate system to these tutorials? So in the game you would see something like this?

At all times?

Yes i think so, something small in the corner so i know which way 'I' am looking at it from, or which way the 3D world is.

Might be helpful if you could draw a grid going out into the distance to get some spatial awareness of where you 'The Cam' are and where the 'object' is in 3d space, that would help me greatly and might help with knowing which axis things are spinning on.

If i remember a good few years ago myself and some friends wanted to get into this sort of thing but the CPU power wasn't around in the 80's-90's... yeah i'm an old fart.

Good work tho, hope to see more of this stuff here.

** Edit **
Don't most app's use Z for height ?

 

[Jeff]

Don't most app's use Z for height ?

Ya, and thats just oreintation, you can turn on the x axis 90 degrees and Z will indicate height.