Christian Game Programming

Creating a New Project

2008-01-09T08:52:00.000-08:00

Welcome to the first tutorial in the 2D Tutorial Series. In this tutorial series, I hope to introduce anyone who is new to C# and XNA game programming, to the programming world.

In this first tutorial, we will create a new project, in which we will work in and create our small XNA applications in. It is assumed that you have already downloaded and installed both the C# Express Edition and XNA Game Studio Express 2.0. If you haven’t, then go to the Getting Started tab on the right side of the page.

Now, since everything is downloaded, we can begin. Open up the C# Express Edition which should be accessible from the Start menu. When you open up your project you should be greeted with the Start Page.

Figure 1.1: When you open the C# Express Edition, you will be greeted with the Start Page.

Now, we want to create a new project. This project is where we will create our applications in. When you create a new project, you can choose to either create a new, empty, blank project, or you can choose from a group of project templates. These templates do nothing special. All they do is start you out with the needed code and references for you to easily start creating your application. For us, we want to select a project template called the Windows Game.

From the File tab, select New Project. After this, a New Project dialog will show up. From this dialog, you can choose what type of project you would like to create. As said previously, we want to select the Windows Game project template. This should be the first template in the list. If you don’t see this option, make sure that on the left side of the dialog, you have XNA Game Studio 2.0 selected.

Figure 1.2: Create a new project by clicking File / New Project.

Click on the Windows Game template. At the bottom of the page, you will see a few options for naming your project. I named it, TutorialProject. However, if you dislike this name, feel free to choose something different. The save location is made by default, and is probably where you want to save it. This path saves the project into the Projects directory, where you can easily access it when you open a file in XNA GSE (Game Studio Express). The final textbox is where you can specify the solution name. It is possible to have multiple projects in a single solution, so you may want to name the solution different from an individual project. For our purposes, leave the name as it is. Also, make sure that the Create directory for solution checkbox is checked because we are creating a new solution and not adding a project to an existing solution. Finally, press OK, to create the project.

Figure 1.3: When you have completed the steps above, your project profile should look similar to this.

After a few moments, you will be greeted with the Game1.cs class file, which has been created for you by default. The default code may look confusing, but after a while you will get the hang of what happens. For now though, let’s see what the default code does. Build the project by clicking the green Start Debugging arrow at the top, middle of the screen (or by pressing F5). Your project will build and you will see an already created window for you, with a nice cornflower blue color as the background.

Figure 1.4: When you build the project by clicking the green arrow or pressing F5, you will see this screen created for you by default.

It’s nice to know that you don’t have to go through all the work of creating a window by hand and that you can start seeing results very quickly. In this tutorial, you learned how to create a new project. You didn’t code anything, but that is coming in the next tutorial.

Be a hero: don’t conform; be selfless; make a difference.

2D Tutorial Series

2008-01-09T08:43:00.000-08:00

Welcome to the 2D Tutorial Series. In this series, we explore XNA and how we can use it for programing 2D applications. 3D graphics is a whole new topic, so we stick to 2D in this series.

This series is written using C# and XNA Game Studio 2.0. No knowledge of either is needed to begin, as this tutorial series is written for total beginners.

If you find any errors in any of the tutorials, or if any of the tutorials were confusing, please let me know with a comment. Thanks all.

Tutorial 1: Creating a New Project

Lighting Demo

2007-12-19T15:06:00.000-08:00

Creating a Simple Shader

First, before anything, we need to create the shader that will be used to render our pixels onto the screen. For starters, all the shader will do is transform the geometry into correct world, view, and projection space, and then output all pixels white. Later, however, we will add cool lighting effects for all kinds of materials.

Open up an empty Notepad document. Click the File menu tab and then click Save As. Name the document Transform.fx (you will need to switch the Files of Type box to All Files). Finally, place the document somewhere easily accessed and click Save.

Effect Parameters

The first things we want to add to our shader are effect parameters. These types of variables are used to allow access for the XNA app so that we can manipulate how the shader renders the geometry. At the moment, we only need one parameter that holds the world, view, and projection matrices. We need this parameter to transform all the geometry (vertices) from their local space coordinates to the correct world, view, and projection space.

At the top of the file, add this code:

uniform extern float4x xWorldViewProjection;

uniform extern just means that this variable is like a parameter that can be accessed by the XNA app. float4x4 is a type that defines a 4x4 matrix variable (which means the same as Matrix in XNA).

The VertexInput Structure

The next step we need to take is to create a structure that defines what type of data the vertex shader takes in from the XNA app.

All the data that we want to take in for now is vertex position data (we do not need color data because we will just output all pixels white). With this in mind, we will have a very simple VertexInput structure. Underneath the effect parameter, create the VertexInput:

// Vertex input
struct VertexInput
{
    float3 pos : POSITION;
};

As you may have guessed, float3 is a keyword that creates a variable similar to an XNA Vector3. Also, we have the : POSITION0. This is called a variable semantic. The reason for using these is so that the shader knows how to map data incoming from the XNA app to their corresponding variables in the shader (we don’t want the shader to confuse vertex normal data with vertex position data).

The VertexOutput Structure

After the VertexInput structure, we create the VertexOutput. The VertexOutput structure defines what type of data will be given to the pixel shader. The pixel shader is called after the vertex shader, but does processing on every pixel instead of every vertex. Some operations only need to be done per-vertex instead of per-pixel which can increase performance (generally there are many more pixels than vertices). These operations are completed in the vertex shader. When the pixel shader comes into play, it takes in data from the vertex shader to use for processing the pixels. We declare this data structure in a VertexOutput structure.

Below the VertexInput structure, we can now create the VertexOutput:

// Vertex output
struct VertexOutput
{
    float4 pos : POSITION;
};

All we need to output to the pixel shader is the position of the vertex once it has been transformed into correct space. The position has also now been changed to a float4, which could be looked at like an XNA Vector4. The reason for this is so that we can multiply this position with matrices. Also, you may be wondering why we don’t output any color. Usually, we would output a vertex color, but, because our simple pixel shader will only output white color data for every pixel, it would be a waste to store color output for each vertex.

The Vertex Shader

Now we can create the vertex shader. The vertex shader is called first and does operations on the vertices, also known as the geometry, of the mesh to be drawn.

Below the VertexOutput structure, add the vertex shader:

// Vertex shader
VertexOutput VS_Transform(VertexInput input)
{
    // Zero out our output.
    VertexOutput output = (VertexOutput)0;

    // Transform the position of the vertex into correct world,
    // view, and projection space.
    output.pos = mul(float4(input.Pos, 1.0f), xWorldViewProjection);

    // Done--return the output.
    return out;
}

This is a very, very simple vertex shader. The first line in the vertex shader zeroes out the output that the vertex shader will return. The next line transforms the vertex into correct world, view, and projection space. We use the HLSL intrinsic mul function to multiply a float4 and a float4x4. However, the in-position of the vertex is a float3, which means we need to convert the float3 to a float4. We do this by creating a float4 and passing the in-position and 1 as parameters to the constructor (we pass in 1 as the w-component because the position is a location vector (point). If the vector were a normal or other vector that did not have a position on the screen, but only a direction, then we would specify 0 for the w-component). Also, you will notice that we multiply the position, now in homogeneous (4-component) coordinates, by the world, view, and projection matrices. These matrices can change for each object in the application, thus explains why we make this variable an effect parameter.

Finally, we are finished manipulating the output and can give it to the pixel shader. Note though, that the pixel shader will not actually use the output’s position. Even in advanced shaders, the pixel shader uses color data and texture data. The output’s position is used by the graphics card to place the vertices in correct world, view, and projection space.

The Pixel Shader

The pixel shader is called after the vertex shader and does processing on all of the pixels in the geometry, finally outputting a color for the pixel. Below the vertex shader, create the pixel shader:

// Pixel shader
float4 PS_Transform() : COLOR
{
    // Output white for each pixel.
    return float4(1.0f, 1.0f, 1.0f, 1.0f);
}

Usually, lighting calculations and other processing for cool effects would be done here, but for now, all we do is output the color white. Notice, however, that we didn’t take in a VertexOutput parameter to the pixel shader. Usually we would but because we don’t need any of the information in the VertexOutput structure, we don’t need to bother with parameters. Finally, a unique detail of the pixel shader is that it represents a color. The pixel shader has a return value of a float4, which is like a color (r, g, b, a) and also has a : COLOR semantic attached to it. Also, note that float4, which can be interpreted as an XNA Vector4, can also represent an XNA Color, which has four components as well.

The Technique

We are now 90 percent done with our simple shader. All we have left to do is add the technique, which respectively calls the vertex and pixels shaders associated with that technique. It is possible to have many different techniques, inputs, outputs, vertex shaders, pixel shaders, and effect parameters in one shader file. You could use this ability to call different vertex and pixel shaders depending on what kind of shader model the user’s computer could support. In the XNA app you would determine which level the computer can support and then call the corresponding technique (e.g. WaterTech1, WaterTech2) which would call the correct vertex and pixel shaders for your computer. This allows for extra flexibility because the user could use the same application without having to get a better graphics card. For us, however, we will just use shader model 2.0.

Below everything you have so far, create the technique for our transform shader:

// Transform
technique Transform
{
    pass P0
    {
        // Compile the vertex and pixel shaders for this
        // shader using vertex and pixel versions 2.0.
        vertexShader = compile vs_2_0 VS_Transform();
        pixelShader = compile ps_2_0 PS_Transform();
    }
}

First, we declare the technique and the name of the technique. Next, we declare a pass. A pass is a loop inside the technique that calls the associated vertex and pixel shaders. A technique may want to contain more than one pass for special effects so in the XNA app you need to loop through the passes in the currently set technique. Note however that using two passes doubles the processing time for the geometry, and using three passes makes it even worse. If you don’t need to use multiple passes, it would probably be best not to.

Inside the pass, we set the vertex and pixel shaders, respectively, to the vertex and pixel shaders we made previously. Also, we compile our vertex and pixel shaders using vertex and pixel versions 2.0.

We are now done creating the shader, which can be used in any application. We learned how to create effect parameters, vertex input and output structures, vertex shaders, pixel shaders, and techniques. Also, hopefully you learned a bit about the structure of HLSL and how to do some basic coding with it. In the next parts, we will learn how to apply shaders to geometry in the XNA application.

What are all the possible texture file types that can be used?

2007-11-22T19:50:00.000-08:00

Question: What are all the possible texture file types that can be used?

Answer: The texture file types that can be loaded using the Content Pipeline are: Bmp, Dds, Dib, Hdr, Jpg, Pfm, Ppm, and Tga.

How do I build a rectangle around an object?

2007-11-18T18:48:00.001-08:00

Question: How do I build a rectangle around an object?

Answer: By using the Rectangle class, an invisible box can be created and used for collision checking, or for virtually any other purpose.

Rectangle rect = new Rectangle((int)objectPosition.X, (int) objectPosition.Y, objectTexture.Width, objectTexture.Height);

The above code shows a common way a Rectangle is created to wrap an object. The Rectangle constructor takes an X and Y coordinate to be the base corner of the rectangle, and then a width and height for the dimensions of the rectangle. In the code above, we retrieved the X and Y coordinates from a Vector2, and we retrieved the width and height from a Texture2D. This is just one way of creating a Rectangle though, and there are many other possibilities also.

How do I check if two rectangles are overlapping?

2007-11-18T18:27:00.000-08:00

Question: How do I check if two rectangles are overlapping?

Answer: If you have two Rectangles and all you want to do is check if they are overlapping eachother or not, you can easily make use of the Intersects method.

In code, let's say you have two Rectangles called rect1 and rect2. To check if they overlap, you could have an if-statement like this:

if (rect1.Intersects(rect2))
{
//Code
}

Note: It doesn't matter which Rectangle you call Intersects fom.

In the code above, we check if any part of rect1 intersects any part of rect2. If rect1 and rect do overlap, Intersects will return true and then you can continue from there.

Any Requests?

2007-11-17T16:26:00.000-08:00

Hello,

It would be nice to see what the community wants to know at the moment. If you have a specific request, please post a comment.

Thanks

How can I check if a key is down or not?

2007-11-17T16:15:00.000-08:00

Question: How can I check if a key is down or not?

Answer: To check the state of a key on the keyboard, can call the IsKeyDown or IsKeyUp methods of a KeyboardState variable.

Inside of the Update method, create a KeyboardState and set it to the current state of the Keyboard.

KeyboardState keyboard = Keyboard.GetState();

After that, you can add the if-statement to check the value of a given key:

if (keyboard.IsKeyDown(Keys.Space))
{
//Code
}

By using the Keys enum type, we can check against any key on the keyboard.

How can I check to see if a controller button is down?

2007-11-17T14:33:00.000-08:00

Question: How can I check to see if a controller button is down?

Answer: The key to tracking input from the Xbox 360 controller is the GamePadState class. To track if a controller button is down, we want to check the ButtonState of the button in a GamePadState.

First, inside of the Update method, create a GamePadState variable:

GamePadState gamePad = GamePad.GetState(PlayerIndex.One);

After creating the GamePadState, we then initialize it with the current value of player one's game pad. Since this code is processed every Update method, the value that our GamePadState contains is always valid.
Now, we can check to the value of the controller. In the Update method, you would add something like this to check if a button is pressed:

if (gamePad.Buttons.A == ButtonState.Pressed)
{
//Code
}

In the above if-statement, we ask if the A button is pressed. If it is, then the code inside the if-statement will be processed. You can also check if the button is released by checking against ButtonState.Released.

How do I scale the size of a sprite?

2007-11-17T12:07:00.000-08:00

Question: How do I scale the size of a sprite?

Answer: Scaling the size of a sprite when drawn consists of only one step: modifying the scale parameter of a spriteBatch.Draw call.

After creating a SpriteBatch, between the Begin and End calls, you will want to call spriteBatch.Draw(...); There are seven different overloads of Draw but only two of them take scale parameters. These are overloads 6 and 7.

You would call the Draw method with overload 6 as follows:

spriteBatch.Draw(texture, position, sourceRect, color, rotation,
origin, scale, spriteEffects, depth);

The seventh parameter is the scale. This parameter is a float. The default value is 1. Note that if you specify 0, the sprite will dissapear because all its dimensions will be multiplied by 0 which will result in 0.

You would call the Draw method with overload 7 as follows:

spriteBatch.Draw(texture, position, sourceRect, color, rotation, origin, scaleVector, spriteEffects, depth);

Again, the seventh parameter is the scale parameter. This parameter is different from overload 6 in that it is a Vector2 instead of a float. The reason for this is so that the user can scale the width of the texture differently from the height.

Note: You could also scale a texture by using the destination rectangle, but that will not be covered in this post.

Getting Started with XNA

2007-11-16T17:13:00.001-08:00

Getting started with XNA is very simple and easy. Here are a few posts to help out with this process.

A Quick Article on What XNA Is

The XNA and C# Express Edition Download Instructions

How to Print Simple Text onto the Screen

2007-11-15T17:06:00.000-08:00

Most games need to be able to render text on the screen. Since many people would like to know how to do this, I’ve decided to write a small tutorial on this subject.

Text in itself is rendered onto the screen in the same way as a texture; through a bitmap image. On this image, every letter and symbol has its own small area. Before XNA 1.0 came out, I saw text being rendered through someone using their own system where a string is dissected and then each letter is drawn separately. Fortunately for us though, XNA 1.0 gives us the SpriteFont. This name refers both to an XML file and a C# class.

As said before, to render text follows almost the same concepts as rendering textures. The steps in the process are few and simple:

Create a SpriteFont XML file and specify the needed properties.

Load the SpriteFont file using the Content Pipeline, into a SpriteFont class.

Render text using the specified SpriteFont and a shader (we use the SpriteBatch).

From these steps it is very easy to recognize the similarity between rendering textures and rendering text.

Creating the SpriteFont
So the first step to implementing a certain font is to create that font. This can be accomplished using the SpriteFont XML file. Inside of the Solution Explorer, right click on your project and click Add / New Item.

Figure 1: Right Click on your project name and click Add / New Item.

Note: A default Windows Game template is used with the namespace of WindowsGame1. It is not in the scope of this lesson to explain about project templates though.

You should now be taken to a page where you can choose what you want to create. We want to create a SpriteFont. Click on that template and name the SpriteFont, “Verdana”.

Figure 2: Create a SpriteFont named “Verdana”.

After clicking Add, in your Solution Explorer you will see the Verdana.spritefont file in your list. This file is already opened. If you take a quick look around the file you will notice several different XML tags specifying the different properties of the font. These properties are as follows:

FontName: This property changes the font family of the font (i.e. Times New Roman, Verdana, etc.).
Size: This property changes the size of the font.
Spacing: This property changes the amount of spacing in between the characters of the text. Usually, you can leave this as the default value of two.
Style: This property changes the appearance of your text. You can enter “Regular” for no changes; “Bold” for bolded text; “Italic” for italicized text; or finally, “Bold, Italic” for both bolded and italicized text. Unfortunately, there is not ability for underlined text.

For our simple purposes, we will leave the font properties as they are.

Note: If understanding the XML is confusing, do not worry. That is not necessary as long as you know what text you change. For all tags there is a common structure: [name]text[/endname] Where you want to place the code is where the “text” would be; in between the name and endname tags.

Code Note: For the rest of the tutorial, open and close brackets will be used to replace open and close tags. I cannot use tags in the text due to the HTML problems.

Using the Content Pipeline to Create a SpriteFont Class
Now that we have our SpriteFont file created, we can load it into a SpriteFont class. This class will then be used to draw a specified string along with the help of the SpriteBatch class.
The first step is to create a variable for the SpriteFont. At the top of the class where the GraphicsDeviceManager and ContentManager are created, add this code:

//The SpriteFont to hold the Verdana XML font.
SpriteFont verdanaFont;

Next, we can initialize this variable. Similar to a Texture2D, instead of calling the constructor of the SpriteFont class (which is virtually useless) we instead directly load it with an outside file using content.Load(). We want to place this code into the LoadGraphicsContent method (so that it can be re-loaded when necessary), specifically inside of the if (loadAllContent) statement:

//Init the SpriteFont with a real SpriteFont file
//from the Solution Explorer.
verdanaFont = content.Load[Texture2D]("Verdana");

Code Note: Switch the two forward and backward slashes for tags. I couldn't use tags in this post because of the HTML. This code practice will be used for the rest of the tutorial.

This code first calls the Load method of the ContentManager variable content and tells it to load a SpriteFont. Then, we pass in the name of the SpriteFont XML file. Notice that we remove the file extension (i.e. .spriteFont).

Note: The reason why we load the SpriteFont inside of the LoadGraphicsContent method is not to be explained in this lesson. For now you don’t really need to know anyway.

Rendering Text onto the Screen Using the SpriteBatch
Finally, we have come to the part where we can render text onto the screen. As said earlier, a font is exactly the same in that it is a bitmap image that needs to be rendered. The SpriteBatch class, which is commonly used to render textures, can also be used along with its DrawString method to render text. Note that, the SpriteBatch actually draws the text. All the SpriteFont does is hold the value of what the text will look like.

Since we first need a SpriteBatch to begin drawing, add this code to the top of your class along with the other variable declarations. This code creates a SpriteBatch variable.

//The SpriteBatch used to draw the text.

SpriteBatch spriteBatch;

Now we want to initialize this variable. Inside of the Initialize method, place this code:

//Initialize the SpriteBatch.
spriteBatch = new SpriteBatch(graphics.GraphicsDevice);

The SpriteBatch constructor needs a GraphicsDevice class in order to be initialized. The GraphicsDeviceManager graphics has a GraphicsDevice in it, so we just use that.

Finally, we can draw the text. Using the SpriteBatch class and the SpriteFont class, we can render any string that we want. Inside of the Draw method, after the graphics.GraphicsDevice.Clear(Color.CornflowerBlue); line, add this code.

/*Start the SpriteBatch. This call is required to set different options. For us, we don't need any special modes so we call the zero-parameter method.*/

spriteBatch.Begin();

/*Draw the font. We pass in the SpriteFont to use, the string to draw, the position, and the color of the text.*/

spriteBatch.DrawString(verdanaFont, "Look at me!!", new
Vector2(100, 100), Color.Black);

/*Finally, end the SpriteBatch. For better processing results, all things to draw are placed in a list. When we call End, we draw all these things at once. Also, we return the different changed parameters back to their default values.*/

spriteBatch.End();

This code may seem confusing, but it can be easily divided into three simple parts.

First, we start the SpriteBatch. This is needed so that we can set different render-states for the device such as alpha-blending (transparency), or the way you want sprites to be sorted.

Then, you draw the SpriteBatch. This is the most important part of the code. In this call, we pass in several different parameters. First, we pass in the SpriteFont to be used. For us we passed in our Verdana font. Next, there is the actual string to draw. This can be anything you want. After this we pass in the position. The position is stored as a Vector2. We pass in 100, 100, which is just a little off of the top-left corner of the screen. Note that the top, left corner of the first letter of the string will be drawn at 100, 100. To change this you need to change the origin of where the text is drawn. Finally, we have the color of the text which mostly explains its purpose by its name.

The last part of the code is the call to end the SpriteBatch. As mentioned in the comments, it would be very inefficient to render each sprite whenever a Draw call was made. For this reason, all sprites to be drawn are put into a list. When the End method is called, all the sprites in the list are drawn at once. Also, once all the sprites are drawn, the different render-states for the device are reset back to their original values.

The Final Results
Finally, we can see the results of our work. If you run the project (F5), you should see something very similar to this:

Figure 3: The results of our efforts. Simple text printed onto the screen.

Hopefully, now you will see, “Look at me!!” written onto the screen. If you do not see these results or if you are confused or found an error, please post a comment so that I can fix it. I do hope this helped you with in your programming quest.

How to Render a Sprite Using the SpriteBatch

2007-11-15T17:04:00.002-08:00

One of the most common requests for a beginner programmer would probably be how to render a 2D image onto the screen. This process is not actually very complicated at all. Using the SpriteBatch class given to us you can render 2D texture images in no time.

To render a sprite (a 2D texture) there are three main steps that need to be followed. These steps are as follows:

Add an image to your project so that it can be accessed in your code.
Create a Texture2D variable in your project and load the texture image into that variable using the Content Pipeline.
Draw the texture onto the screen with certain parameters that you would like to be applied to the texture.

Adding an Image to Your Project
First, before you can draw the texture, you need to be able to access the texture you want to draw. Through a system called the Content Pipeline, you can load different content files into your project and then access them using a ContentManager. Though this process is important, we first need to load an image into our project.

To load an image, you need to first navigate to your Solution Explorer (View / Solution Explorer). After this, right click on the name of your project and select Add / Existing Item.

Figure 1: Right click on the name of your project and select Add / Existing Item

You should now be taken to a page where you can browse through your computer files. What you want to do is browse to where a simple texture is located. Once you have located where the file should be, in the Files of Type drop-down box, switch to Content Pipeline Files. This option shows all files that XNA will allow to be added to your project. Most likely, your image is of file type TGA, PNG, BMP, JPG, or DDS, all of which can be added into your project. Once your file is select, click Add. The file now should be added to your Solution Explorer where you can see it:

Figure 2: You can now see the texture file inside of your Solution Explorer. My texture was a JPG file called StoneTexture.

Creating a Variable to Hold the Texture
After loading an image into our project, we can now create a variable to contain that image data. This variable will then be used to draw the image onto the screen.

First, because our texture is a 2D image, we want to create a variable of type Texture2D. Create this variable at the top of the class near the GraphicsDeviceManager and ContentManager variables.

//The texture variable that will hold our image data.

Texture2D texture;

Next, we need to initialize this variable. With most variables, you call the constructor of the class to create it. Unlike these classes, all content-related variables are created by directly loading them with a file. For our case, this will be the texture loaded into our project. Because of graphics device related issues which do not need to be explained in this lesson, put this code inside of the if (loadAllContent) statement of the LoadGraphicsContent method. This code initializes our Texture2D:

/*Use the ContentManager content variable to initialize
the Texture2D with a real texture.*/
texture = content.Load[Texture2D]("StoneTexture");

Code Note: The brackets in the above code should actually be tags. I needed to use brackets because the HTML would not allow tags.

This code statement may look long and confusing but it is quite simple. We call the Load method of a ContentManager variable named content (created by default). Then we specify for the method that we are loading a Texture2D and that the texture name is “StoneTexture” (for you that will probably be different). That is really all there is to that line.

Drawing the Texture Using the SpriteBatch
Finally, we have come to the part where we can display our texture. Using the SpriteBatch class and its Draw method, we can easily draw our texture.

Note: To draw a sprite means the same thing as to render a sprite.

The first step is to create the SpriteBatch. At the top of the class along with the other variable declarations, create a SpriteBatch:

//The SpriteBatch we will use to draw the texture.

SpriteBatch spriteBatch;

Now, we can initialize it. Inside of the Initialize method, add this code to initialize our SpriteBatch:

//Initialize the SpriteBatch.
spriteBatch = new SpriteBatch(graphics.GraphicsDevice);

The constructor for the SpriteBatch needs a GraphicsDevice. We access one by using the GraphicsDevice property inside of our GraphicsDeviceManager variable.

Since our SpriteBatch has now been created, we can now use it. The following calls to the SpriteBatch class will be placed in the Draw method right after the graphics.GraphicsDevice.Clear(Color.CornflowerBlue); line.

First, we need to start the SpriteBatch. The reason for doing this is to set any needed parameters for the SpriteBatch. These parameters are things such as allowing the ability to take transparency into account or setting the way the SpriteBatch will sort the sprites. Place this code into the Draw method:

/*Start the SpriteBatch. Your sprite may contain transparency so we allow Alpha-Blending.*/
spriteBatch.Begin(SpriteBlendMode.AlphaBlend);

Next, we want to draw the sprite. Place this code right after the previous line:

//Draw the sprite.
spriteBatch.Draw(texture, new Vector2(0, 0), Color.White);

We draw the sprite by calling the Draw method of the SpriteBatch variable. The first parameter is the Texture2D that we want to draw. We pass in texture. The next parameter is the position to draw the sprite at. This value is stored in a Vector2. For us, we specify 0, 0, which means that the origin of the sprite will be drawn at that position. The final parameter is the color to taint the background of the sprite with. We want the sprite to look completely normal so we specify Color.White.

Note: The default origin of the sprite is at the top-left corner of the sprite. To change this, a different overload of Draw needs to be called.

Finally, we need to “end” the SpriteBatch. There are two purposes for this. One is that instead of the sprites being drawn at the moment you call the Draw method, they are actually added to a list. Once End is called, all the sprites in the list are drawn at once. This is actually more efficient. The second reason is to reset the different values you changed when you called the Begin method. The different values are changed back to their default value until you call the Begin method again. After the two previous calls to the SpriteBatch, place this final statement:

//End the SpriteBatch.
spriteBatch.End();

Congratulations! You have now successfully coded a small application that renders a sprite onto the screen. Running the project now should result in your sprite drawn at the top-left corner of the screen (because we specified 0, 0 for the position).

Figure 3: After completing this lesson, you should hopefully see a result resembling this screen-shot.

I do hope that you have been able to solve some confusion by reading this lesson and I fully hope that you can easily continue along with your gaming quest. If you find any errors or mistakes, or if any parts of this lesson were confusing, please post a comment so that I can fix it. Thanks again.

Tutorials

2007-11-15T17:04:00.001-08:00

These tutorials I hope can get you going onto a new topic or help you with an unknown subject. If you have any requests, please post a comment. Thanks.

The SpriteFont
How to Print Simple Text onto the Screen

2D Textures
How to Render a Sprite Using the SpriteBatch

I give all the desires of my heart to you, Lord. May you work in everyone's heart so that they will discover the true joy that comes with following you. Amen.

Methods and Properties

2007-11-15T17:00:00.001-08:00

Basic Method Creation
Methods are very useful in the C# language. Methods can help organize and simplify code, and are used all the time in game programming. This lesson should be able to introduce anyone who knows even nothing about programming, to the world of methods and how to create them, use them, and benefit from them in your programming.

A method can be looked at like a named container that holds code and does something to a value. This can be useful, for example, if you wanted to explode a ship. Instead of re-writing the code to explode the ship every time there is a collision, you can just create a method that explodes a ship, and then just call that method every time you want a ship to explode.

First, before we can call a method, we need to learn how to create methods. Here is the method creation structure:

accessModifier returnType methodName ( parameters )

First of all, methods need an access modifier. This modifier serves the same purpose as access modifiers on variables.

Next, there is the return type. The return type shows what type of variable you want the method to return. For example, let’s say that we have created a method called GiveBackEight. This method would look like the following:

private int GiveBackEight()
{
return 8;
}

When we call this method, we want to set any integer to a value of eight. In order to be able to set an integer to the value that the method returns we need to have an int as the parameter type. This way, we can set the value of a variable to the value this method returns by using the command int myVariable = GiveBackEight(); This sets the value of myVariable to the value of what GiveBackEight returns.
You can also create a variable that has a return type of, void which means the method does not return anything. These types of methods could be used for example to just draw something. You could declare a method that drew the number eight on the screen like this:

private void DrawEight()
{
Console.WriteLine("8");
}

This just draws the number eight onto the screen. These types of methods don’t give back anything. These types of methods are to do commands that will finish themselves. They are never used to change the value of a variable and give it back because with a void return type, the methods cannot return anything. You can call this method by using a command like DrawEight(); This just calls the method to do what it does.

After the return type, you have the method name, which is just like a variable name, and is used to access the method.

Finally, you have the parameters, which are placed in parentheses. A parameter is like a value that is given from an outside source so that the method can complete what it needs to do accurately. We have talked about these types of variables in the previous chapter. For example, if we wanted to allow the capability to draw any number, not just eight, we could change the DrawEight method to:

private void DrawNumber(int numberToDraw)
{
Console.WriteLine(numberToDraw.ToString());
}

This code takes any number that you choose as a parameter, and then draws that number. This is very helpful because, instead of having to make a billion different methods to draw every number, you can just create one method that has the capability to draw any number.

Method Overloads
Sometimes you may want to create the same method, but with maybe a few different parameters. An example of this is, maybe you have an explosion method that explodes at a given intensity value. You may also want to make it where the default intensity value is 100. You could do something like this:

private void ExlodeShip(int intensity)
{
//Explosion code
}
private void ExplodeShip()
{
ExplodeShip(100);
}

This code first creates the ExplodeShip method. This method takes an int parameter for the intensity of the explosion. Below that method though, we have another method with the same name. This method is an overload of the original ExplodeShip method but takes no parameters. Since 100 is the most common explosion intensity, for most cases the user will just pass in 100 for the intensity value. Instead of making him do that, we create an overload of ExplodeShip that takes no parameters but calls the one-parameter ExplodeShip version and passes in 100 because that is what the user wants. For more complicated methods, this can save a lot of time.

There are a few things you need to watch out for when using method overloads. You need to be careful not to have a continual loop. This could maybe happen when you on accident call the same method that you are in. For example calling ExplodeShip(); in the zero-parameter method would result in a continual loop because you are inside the method that you are calling.

Another thing is that you can’t have the method overload have the same parameter types. Even if one overload has int intensity and another method has int timeDelay, you can’t do this because the C# compiler (program that executes the code) will not be able to tell the difference. For it, both overloads have the same parameter types and it won’t know which method to call.

Properties
Properties are another type of code-block that you can use in C#. Some people may think properties are really confusing, but they aren’t at all, and are almost exactly the same as methods. You could look at a property like a method that doesn’t have parameters. To create a property, you would do something like this:

accessModifier returnType propertyName

You can see that this format is almost the same as the method format. We have an access modifier, a return type, and a property name. These all serve the same purpose as for methods.

There is one exception though. Besides the fact that properties can’t take parameters, they also can’t have the void return type. This is because properties are usually used a little differently than methods. Methods are more used to do things to values and then give the value back. Properties aren’t so much used that way. Properties are more used to give a value or set a value of something. This would explain why you can’t have the void return type because properties can’t just do something; they have to return a value.

To explain this, you could create this method which would return the value of ten:

private int Ten()
{
return 10;
}

You could also create the same thing using a property:

private int Ten
{
get
{
return 10;
}
}

The property would be the correct way to go. All this property does, is, when you try to access the value of what Ten has, the get part of the property is called. The only difference is that instead of calling myInt = Ten(); which is the method version, you call myInt = Ten; which doesn’t use the parentheses because there can be no parameters in a property.

Properties are mostly used for when you want to access a value in a class. For example the MathHelper class has a property called Pi which gives the value of PI.

Set Properties
Set properties are also types of properties that you can use. The way I will explain this is in a game example. Pretend you had a player class. Inside that player class you have a health property that allows access to the health. You would want someone to be able to access the health variable and change it to his liking. You could do this by using this code:

private int health;
public int Health
{
get
{
return health;
}
set
{
health = value;
}
}

First, we declare a private variable called health. This variable allows us to access health in our class when we want to change it or set it to a value.

After that we have our property called Health (remember variable names are case-sensitive). First we call the get part which returns the value of what our private health variable is. Then we call the set part. This part is called when we set the value of Health using something like Health = aValue;. In this part of the property we set health, our private variable, to value which is the value that we put on the right side of the equal sign when we set Health.

Since names in C# are case-sensitive, we can make a variable and a property have the same name. Of course, you may think that we can just make the private health variable into a
public one, we won’t have to worry about the property stuff. We could do this, but it would be incorrect programming practice. Also, using properties allows us to change the value of what we return which you can’t do if you just have a public variable. This could look like the following:

private int health;
public int TenMoreThanHealth
{
get
{
return health + 10;
}
set
{
health = value;
}
}

C# Primer

2007-11-15T16:59:00.001-08:00

Since XNA uses the C# language, I've decided to write some simple lessons on the basics of C#. This way, understanding the XNA code won't have to be so confusing.

Variables--Explains about variables and how to use them.

Methods and Properties--Explains about how to create and call methods and properties.

I give all the desires of my heart to you, Lord. May you work in everyone's heart so that they will discover the true joy that comes with following you. Amen.

Variables

2007-11-15T16:57:00.000-08:00

Creating Variables

Variables are very important in the C# language. Using variables gives you control of many different values. There are tons of different variables that can be used in C# and they all follow a similar pattern; one that we will explain.

First of all, what is a variable? A variable is named object that can be accessed and manipulated. You can access these values to use them in your project.

There are three different ways you can declare variables. The first way you can declare a variable is at the top of a class. This allows you to access the variable from any method or property inside of the class. These types of variables can be called class-variables. To declare a class variable, you would try and follow this format:

accessModifier variableType variableName ;

First of all, there is the access modifier. An access modifier is a keyword placed in front of a variable, method or other member, which restricts or allows access to it from some other class or struct. A member is any variable, property, or method inside of a class. The private modifier allows the least amount of access and allows the item to only be accessed inside the class it was created in. The protected modifier allows access only from inherited classes, and the public modifier allows total access from all classes.

There is also an access modifier named static. The static keyword allows the item it is being applied to, to not be part of a class instance but, instead, related to the class name. This modifier is not used at the moment but will be explained later.

After the access modifier we have the variable type. Each variable type contains different information needed for that variable type. For example, the int class contains information that holds integers. The string class contains information that holds text, and the bool class contains information that holds true or false values. Each variable type is different but most can be created the same way.

Then, after the variable type, you can name the variable. Variable names can be anything they want, but they are case-sensitive.

Finally, you have the semi-colon which you place to signify that you are done creating the variable.

As I told you, there are different ways that you can create a variable. We just looked at the class variable type. There is also another way to create variables. In this way, you create a variable inside a method or property. The difference between these types of variables is that they can only be accessed inside of that method or property. You create these types of variables the same way as a class variable, but you do not place an access modifier because you can’t access the variable outside of the function it was created in. This limit of access is called a variables scope. You would want to create this type of variable like so:

variableType variableName ;

Finally, there is one last way you can create variables. These types of variables are used inside method calls and are called parameters. For example if I called the, Multiply method of a Math class then I could pass in, 5 as an parameter. I wouldn’t name the variable because I can never access it again, and I don’t need any access modifiers, variable type name, or even a semi-colon. All I need is the value of the variable.

There are many different types of variables and their uses can be used in different ways. Here is a list giving a quick description of the variable types and their uses:

Variable Type; Containment Type; Constructor Type
Int32(int); (-)2,147,483,64(7-8); int intVar;
Int64(long); (-)9,223,372,036,854,775,80(7-8);long longVar;
Byte(byte); 255; byte byteVar;
UInt32(uint); 4,294,967,295; uint uintVar;
Uint64(ulong); 18,446,744,073,709,551,615; ulong ulongVar;
Single(float); (-)7 Digits; float floatVar
Double(double); (-)15-16 Digits; double doubleVar;
Decimal(decimal); (-)28-29 Digits; decimal decimalVar;
String(string); Text between quotes(“”); string stringVar;
Char(char); One Character between symbols(‘’);char charVar;
Boolean(bool); True or False; bool boolVar;
Random; Used for Randomizing; Random rnd = new Random()

The Constructor Type shows how you can create a variable of that type. The Random class inherits from the Object class instead of the Type class and needs to be created using the, new ClassType(...); format. This way calls the constructor of that variable. The constructor of a variable is the method that is called to create the variable.

Assigning Values to Variables
Assigning values to variables is also very important. In order to actually be able to use the variable in your project, you need a way to assign values to it.

The assignment operator is used for assigning values. An operator is a symbol that C# recognizes as a command to do something to a variable(s). You can assign variables using the following structure:

leftHandVar = rightHandValue ;

First, we place the name of the variable we want to assign a value to. If a variable does not yet have a specified value, then this process is called initializing. A variables initial value is the value it is first set to. You can also initialize a variable at the same time it is created like, private int intVar = 4; If you don’t initialize a variable it will either be set to a default value like zero, or will be set to null, which means no value.

Next we have the equal operator. This operator gets the preceding variable ready to be assigned a value.

Finally, we have the new value we want the variable to be set to.
You can also assign a variable to equal the value of another variable. This could look like, intVar = intVar2;

Modifying Variable Values
After you have assigned a value to a variable, you will probably want to be able to modify that value. For numbers, there are some of the normal math operators that can be used. These operators can be used as such:

int1 += 10;
int1 -= 10;
int1 *= 10;
int1 /= 10;

These operators change the values of variables. The += means the same thing as, int1 = int1 + 10; You can also modify the right hand value by doing something like, int1 += 10 * 3;

What are all the possible font names that you can use for a SpriteFont?

2007-11-15T16:52:00.000-08:00

Question: What are all the possible font names that you can use for a SpriteFont?

Answer: Microsoft has allowed almost all the font families to be used for a SpriteFont. If you are having problems though, take not that there are some standards that need to be used in order to have XNA recognize the font family name.

You need to allow spaces which may seem odd but is needed (i.e. the font family Times New Roman would still be entered in as “Times New Roman” and not “TimesNewRoman”).

Also, obviously you need to spell the name correctly. No little mistakes as every letter matters. Also, there is no abbreviating.

The Algerian font family is not accepted.

How can I vibrate an Xbox 360 controller?

2007-11-15T16:50:00.000-08:00

Question: How can I vibrate an Xbox 360 controller?

Answer: Vibrating an Xbox 360 controller is actually quite simple. All you need to do is call the SetVibration method of the static GamePad class.

To vibrate a controller, you don’t actually need a GamePadState to work with because all you have to do is call GamePad.SetVibration(…). For our sake though, we will create a GamePadState just so that we can check if certain buttons are down and then vibrate the controller respectively. Create a GamePadState at the top of the Update method.

//The GamePad to check for input from.
GamePadState gamePad = GamePad.GetState(PlayerIndex.One);

Now, for a simple effect, whenever you are pressing the A button, the left motor of the controller vibrates and whenever you are pressing the B button, the right motor of the controller vibrates. To do this, place this code also into the Update method.

//Create two variables to keep track of the rotation values of the
//motors.
float leftMotorVibration = 0;
float rightMotorVibration = 0;

//If A is pressed, vibrate the left motor.
if (gamePad.Buttons.A == ButtonState.Pressed)
{
leftMotorVibration = 1;
}
else
{
leftMotorVibration = 0;
}
//If B is pressed, vibrate the right motor.
if (gamePad.Buttons.B == ButtonState.Pressed)
{
rightMotorVibration = 1;
}
else
{
rightMotorVibration = 0;
}

//Finally, vibrate the motors based on their individual values.
GamePad.SetVibration(PlayerIndex.One, leftMotorVibration,
rightMotorVibration);

First we create two simple floats to keep track of the vibration value of the motors. After that we check for input. Note that we have to check if the buttons are not pressed along with if they are pressed. This is because, if the buttons were pressed and then were released, nothing ever sets the vibration back to zero. Finally, after checking for input, we call the SetVibration method of the GamePad class. The first parameter specifies the player controller to vibrate which for us was Player 1. The second and third parameters specify the amount to rotate the motors by. For us we passed in leftMotorVibration and rightMotorVibration.

If you run the project now and press A or B, Player 1’s game controller should vibrate accordingly.

2007-11-15T16:45:00.000-08:00

Question: How do I tint the color of a Texture2D using the SpriteBatch?

Answer: To tint the color of a Texture2D when using the Draw call of a SpriteBatch, you need to change the Color parameter. For example, to tint the background of a sprite to the color orange, you would make this call in the Draw method:

spriteBatch.Draw(myTexture, new Vector2(0, 0), Color.Orange);

The Color.Orange parameter is the important parameter. This tells the SpriteBatch to draw the texture with an overall orange-ish background. An example of the same texture drawn twice is shown below:

Figure 1: On the left there is the texture drawn with a white background. On the left, the same texture is drawn with an orange background.

The same texture was drawn once with Color.White. This value specifies that you want no changes to the background of the texture (i.e. if the original background was blue and you specified Color.White, the background would stay blue). Then the texture was drawn with Color.Orange. This drew the sprite with an orange-ish color. Note that if the original background was blue, the background would not turn orange, but instead the blue background would be mixed with the orange color to create a new, odd color.

Question and Answer

2007-11-15T16:43:00.000-08:00

Hopefully, these question and answer posts will help you. If you have a question that is not answered, please post a comment and ask for it to be answered.

The SpriteFont
What are all the possible font names that you can use for a SpriteFont?

The Xbox 360 Controller
How can I vibrate an Xbox 360 controller?
How can I check to see if an controller button is down?

The Keyboard
How can I check if a key is down or not?

The Content Pipeline
What are all the possible texture file types that can be used?

Drawing 2D Textures With the SpriteBatch
How do I tint the color of a Texture2D using the SpriteBatch?
How do I scale the size of a sprite?

2D Rectangles
How do I build a rectangle around an object?
How do I check if two rectangles are overlapping?

I give all the desires of my heart to you, Lord. May you work in everyone's heart so that they will discover the true joy that comes with following you. Amen.

Tutorial 8 -- Keyboard Key Presses and Mouse Clicks

2007-09-09T17:34:00.000-07:00

Introduction

This tutorial shows you how to track keyboard key presses and mouse button clicks.

Requirements

Knowledge of Tutorial 7.

Read

Read the tutorial here: Tutorial 8

Remember

You don't get to Heaven by what you do, but by what you believe.

Handling Keyboard Key Presses and Mouse Clicks

2007-09-09T11:59:00.001-07:00

In this tutorial, I want to talk about how you can handle keyboard key presses and mouse button clicks. You already know how to track if a keyboard key or mouse button is down, but a lot of input checks need to only occur if a key is presses or a button is clicked.

Handling Keyboard Key Presses

What we need to do is keep a KeyboardState variable, that actually contains the data for the last Update loop. That way, if we need to have a check for key being down, all we have to do is make sure the current keyboard state is not equal to the last keyboard state. Then, after each Update, we set the value of the old keyboard to the value of the new keyboard. You may see how this works once we get started.

Step 1: Create an Old Keyboard State Variable

First we need to create a variable that holds the old state of the keyboard. Create this variable in the fields are:

KeyboardState myOldKeyboard = Keyboard.GetState();

As you see here, we are creating a keyboard state variable and naming it myOldKeyboard. Also, we are intializing it right now. This is because we are not going to initialize it at the beginning of the first update loop, so we should initialize it now. This is only going to matter if a key happens to be pressed right when the project starts(which would have to be in like the first 1.6 milliseconds or so).

Step 2: Update the Old KeyboardState at the End Of The Update Method

Now we need to update oldKeyboard at the end of the Update method. This is because, if a key happens to be pressed, and we don't keep track of that in the old KeyboardState variable, then oldKeyboard will not be exactly correct.

To update the old keyboard to the old state of the real keyboard, put this line at the end of the Update method:

myOldKeyboard = myKeyboard;

All this does is set the value of the oldKeyboard, to the value of the current keyboard(myKeyboard), which is actually old because it is used at the end of the Update method.

Note: When I say, "the end of the Update method", I always mean at the bottom of the Update method, but above the base.Update line.

Step 3: Test Key Presses

Now we get to test if what we have done so far actually works. In order to track a keyboard key press, we will check if the space bar is pressed. If the space bar has been pressed, we will taint our first sprite with a color of blue. If the space bar is pressed again, we will take the blue off of the color.

Put this code underneath the other keyboard input code for our first sprite:

if(myKeyboard.IsKeyDown(Keys.Space) &&
myOldKeyboard.IsKeyUp(Keys.Space))
{
spriteColored = !spriteColored;
}
Figure 1-1 The Code to Track a Key Press

First this code checks if currently, the space bar is pressed. Since myKeyboard is always set to the current state of the keyboard at the beginning of the Update method, if the space bar is pressed, this will be true. Then we also check(using the and(&&) operator) if the old state of the keyboard, which was set to a value at the end of the last Update call, does not have the space bar pressed. If both of these if checks return true, then we set a variable called spriteColored to its opposite. Now we just need to create this variable in the fields area:

bool spriteColored = false;

This creates a bool(a class that can have a value of either true or false) variable and initializes it with a value of false so that the sprite will start out normal.

Now we just need to make the sprite appear blue when spriteColored equals true.

In our Draw method, locate the call that draws the first sprite. Delete that and replace it with this code:

if(spriteColored)
{
mySpriteBatch.Draw(myTexture, spritePosition, Color.Blue);
}
else
{
mySpriteBatch.Draw(myTexture, spritePosition, Color.White);
}

This draws the sprite with a blue color if spriteColored equals true, and white if not. We use the else statement to signal that if spriteColored equals false, then the code inside the else statement will be executed.

Figure 1-2 Drawing Our Sprite Blue If SpriteColored Equals True

Note: Instead of using if(spriteColored == true), I can just put, if(spriteColored). Also, if(spriteColored == false) is the same as if(!spriteColored).

Now run the project. You should be able to press the space bar and the sprite will turn blue. You can press it again and the sprite will turn back to white.

Figure 1-3 The Sprite When it is Blue

That is how you keep track of a key press. Now time to check for mouse clicks.

Handling Mouse Button Clicks

Handling mouse clicks goes pretty much the same as handling keyboard key presses. To show when a mouse button is clicked, we will flip the second sprite using its SpriteEffects parameter when the right mouse button is clicked.

First, just like the KeyboardState variable, create a MouseState variable and initialize it:

MouseState myOldMouse = Mouse.GetState();

Then, at the bottom of the Update method, set it so that it always has the current, old value of the keyboard. In other words, so that it always is one Update method behind.

myOldMouse = myMouse;

Now we can check if the right button is clicked. Put this code under the mouse input code for the second sprite:

if(myMouse.RightButton == ButtonState.Pressed &&
myOldMouse.RightButton == ButtonState.Released)
{
sprite2Flipped = !sprite2Flipped;
}

Create the sprite2Flipped bool in the fields area:

bool sprite2Flipped = false;

Finally, flip the sprite when sprite2Flipped equals true. Delete the code that draws the second sprite and replace it with this:

if(sprite2Flipped)
{
mySpriteBatch.Draw(myTexture2, spritePosition2, null,
Color.White, 0, new Vector2(myTexture2.Width / 2,
myTexture2.Height / 2), 1, SpriteEffects.FlipHorizontally,
0);
}
else
{
mySpriteBatch.Draw(myTexture2, spritePosition2, null,
Color.White, 0, new Vector2(myTexture2.Width / 2,
myTexture2.Height / 2), 1, SpriteEffects.None, 0);
}

This code flips the sprite horizontally when sprite2Flipped equals true, and doesn't when sprite2Flipped is false. Now you can run the project. You should be able to click the right mouse button and the sprite should flip horizontally.

Now you know how to track keyboard key presses and mouse button clicks.

Figure 1-4 The Sprite When it is Flipped

If you have any requests or questions, please post a comment and I will try to answer. Thanks for reading the tutorial.

Remember:

You don't get to Heaven by what you do, but by what you believe.

Tutorial 7 -- Advanced Sprite Drawing

2007-09-08T16:56:00.000-07:00

Introduction

This tutorial talks about the different parameters used in the different method overloads of spriteBatchVariable.Draw. This tutorial also talks about what method overloads are.

Requirements

A sprite drawn on the screen.

Read

Read the tutorial here: Tutorial 7

Remember

Be a hero: Don't conform; Be selfless; Make a difference

Advanced Sprite Drawing

2007-09-07T17:18:00.000-07:00

In this tutorial, I will talk about how you can draw a sprite with more effects applied to the sprite than just a color to taint the sprite with.

What we need to do is call the draw method of the our SpriteBatch variable, but just fill in a few more parameters.

You may ask, "But how can a method have different amounts of parameters and still be the same method?". This is possible with a thing called overloading. If you overload a method, you create a method with the same name as the method you are overloading, but you create the method so that it takes a different amount of parameters. Method overloading is useful for making it easier for the user to use the method.

Example: Pretend you have a method that explodes a ship called Explode. This method needs a Ship class as a parameter so that it can explode that ship and an intensity for the ship to explode at.

//This is the original method
private void Explode(Ship shipVariable, int explosionIntensity)
{
//Code that explodes the ship.
}

For your game, 99/100 explosions occur with a 100/1000 intensity. Method overloading comes in here. For that 1 ship that needs a 200/1000 intensity explosion, you have the orginal Explode method which allows you to pass in the ship to explode, and the intensity of the explosion. But now you want an easier way to explode you 99 ships that all have a 100/1000 intensity explosion. You can create an overload of the Explode method that only takes one parameter, the ship to explode, and then passes in 100 as a default value for the intensity:

//Overload of original Explode method
private void Explode(Ship shipVariable)
{
//Call the other Explode method and pass in the

//shipVariable it got as a parameter, and then 100 as the
//default explosion intensity
Explode(shipVariable, 100);
}

You can see how method overloading makes it easier for the user to use the method because now, since 99/100 of your ships use the default explosion intensity which is 100/1000, instead of always calling Explode(shipVariable, 100);, you can just call Explode(shipVariable);

I hope that made sense to you but if you don't get it you may get it more along the tutorial or sometime later.

Now, since I explained all that to you, I am going to show you where it is actually used.

In the mySpriteBatch.Draw call we passed in three parameters, a Texture2D to draw, a Vector2 position, and a Color to taint the sprite with. This was good for our purpose because we didn't really want to change anything on the sprite. Well, now we do want to change the attributes of the sprite. The Draw method of the SpriteBatch class has several overloads. In fact, you can see all the overloads by typing or re-typing the first parenthesis of the Draw method call. A tan box should appear(we used this in the second tutorial), but this time we will use this to find how many overloads the method has. In the top right corner you can see 1 of 7. This shows that you are on method overload one out of seven different method overloads. If you push the up or down arrow keys you can see what parameters are needed for this method overload. If you haven't found for yourself by now, we are currently using method overload two. This takes a Texture2D, a Vector2, and a Color.

Figure 1-1 The Tan Box Showing the Current Method Overload and Parameters Needed

For what we want to do we will use overload number six which is one of the overloads that allows the most options to change the way the sprite is drawn. I will explain what all of the overloads we are using mean, and then I will get along with the code.

Texture2D texture
This parameter is asking for the texture to draw on the screen.

Default value: There is no default, you have to give the texture in all overloads.

Vector2 position
This parameter is asking for the position to draw the sprite on the screen at.

Default value: There is no default, you have to give the position in all overloads. In some cases you may use a rectangle that holds the position instead though.

Rectangle sourceRectangle
This parameter is asking for the rectangle out of the texture you want to draw. For example. pretend you have a texture that has all the button images in the game on it. If you wanted to draw only one part of that image, you would specify the size and position for that rectangle to be at on the texture. If you want to use the whole image, you can pass in null instead which means nothing so the whole image whill be drawn.

Default value: null

Color color
This parameter specifies what color to taint the sprite with, i.e. orange maybe if the sprite is the player and blue if the sprite is any enemy.

Default value: There is no default, you have to give the color in all overloads. If you don't want any color to be applied to your sprite though, then just use Color.White.

float rotation
This parameter specifies how much you want the sprite to be rotated by.

Default value: 0.0f

Vector2 origin
This parameter specifies the main point for the sprite. If the origin is the center of the sprite, when you draw the sprite, the sprite will be drawn around the center point which means the position you specify for the sprite to be drawn at will refer to the center of the sprite.

Default value: 0, 0 (the top left corner)

float scale
This parameter sets how much you want the sprite to be scaled by.

Default value: 1 (if you put 0 the sprite will end up as small as nothing because you are multiplying your sprites original size by zero which always gives zero.)

SpriteEffects effects
This parameter specifies which type of sprite effects you want applied to your image. You can flip horizontally, vertically, or just do nothing.

Default value: SpriteEffects.None

float layerDepth
This parameter specifies the depth position of your sprite. This is useful for making certain sprites appear on top of eachother.

Default value: It depends on which order your sprite is drawn at out of all the other sprites. Sometimes the last sprite drawn appears on top of the others and sometimes the sprite drawn first appears on top. It depends on which sort mode you pass into the second or third overload of spriteBatchVariable.Begin. We are not using the second or third overload so the default value is SpriteSortMode.BackToFront.

That was the last parameter for the overload of Draw that we are using. Now we can get to some code. You can mostly test the different parameters on your own, I don't have to explain what they do because you can probably figure out, but, I will show you a few things.

First run your project. Now click the mouse and the sprite should move to that position. If you look closely though, you will see that the top left corner of the sprite is going to the position where you clicked. That is because we are not specifying an origin for the sprite. If we want to change where the sprite goes to, you must change the origin for that sprite.

Change the call to draw the second texture to look like this:

mySpriteBatch.Draw(myTexture2, spritePosition2, null, Color.White, 0, Vector2.Zero, 1, SpriteEffects.None, 0);

This code draws the exact same thing we had before. All the parameter values we have now are the default values they would been. This is not so useful to us now, until we want to change anything.

Note: In the code above, we used Vector2.Zero which is accesssing a value that the Vector2 class has in it. This is the same as using new Vector2(0, 0);

Now we can actually do something. Since our origin is still 0, 0, the sprite will still be drawn with the top-left corner of the sprite drawn at spritePosition2. Instead of using Vector2.Zero for our origin parameter, we will use this: new Vector2(myTexture2.Width / 2, myTexture2.Height / 2);

This gives our sprite an origin that refers to the center of the sprite.

Now run the project. If you press the left mouse button, the sprite will be moved to where you clicked but the center of the sprite will be moved to the position of the mouse.

For the next test, I will show you how to use the source rectangle. For this rectangle, you are specifying what part of the texture you want to be drawn. For an example, just put this line instead of null: new Rectangle(0, 0, 50, 50);

This is creating a rectangle that starts from the top left corner of your texture, and has a width and height of 50 pixels. Run the project now. You should see only a 50 pixel square of the texture.

Figure 1-2 The Source Rectangle Example

That was just an example, so change the source rectangle parameter back to null.

For the last example, I will show you how to rotate the sprite correctly. You may think, "Well all I have to do is type in a number and the sprite will rotate by that many degrees."

This is incorrect thinking. When you type in a number, the sprite is not rotated in degrees. Type in, 45, for the rotation value. You should see that the sprite is not rotated by 45 degrees, but in radians. Now type in this instead: MathHelper.ToRadians(45); This draws your sprite at a rotation relative to the number you put in. Now run the project. You should see the sprite is rotated exactly by 45 degrees.

Note: When you put in, 45, as a parameter for the ToRadians method, you are not actually drawing the sprite in degrees. Whats happening is, you are converting a value that is in degrees, into a value in radians. You can also use MathHelper.ToDegrees(MathHelper.ToRadians(45)) which converts a radian value into a degree again.

Figure 1-3 The Correctly Rotated Sprite

Again, erase the value for rotation and put 0.

Now you know a little more about how sprites are drawn. You also know about method overloading.

Figure 1-4 The Code That Draws the Second Texture

Figure 1-5 The Complete Tutorial. Nothing Much Different That You Can See

Note: If you want you can change the values of other parameters to see what they do. Make sure to change everything back to the way it is now though, when you are done testing.

If you have any questions or requests, please post a comment and I will try to answer.

Thanks for reading the tutorial.

Be a hero: Don't conform; Be selfless; Make a difference

Tutorial 6 -- Mouse Input

2007-09-04T20:48:00.000-07:00

Introduction

In this tutorial you will learn how to move a sprite to a certain position based on where the mouse is pressed at. You will learn how to check for rectangle collisions using a new method called the Intersects method.

Requirements

Knowing how to load a Texture2D with an image.

Read

Read the tutorial here: Tutorial 6

Remember

If something bad happens, do you really think God does not have it under control?

Mouse Input

2007-09-04T18:14:00.000-07:00

In this tutorial, I want to introduce mouse input. What this tutorial will teach is how to move a sprite to a certain position based on the mouse position.

For this tutorial., we will use a new image. Start off the project by adding an image through the Solution Explorer(remember Add--> Existing Item).

Now create a Texture2D variable and initialize it with your image that you loaded into your project(remember content.Load etc...) I will name my variable myTexture2;

Create a Vector2 variable named spritePosition2 and initialize it with a value of 400, 300. This is so that it will appear in a different position then the first texture we have, which is at position 0, 0.

Finally, call mySpriteBatch.Draw under the call for our first texture and draw myTexture2(really you can put the mySpriteBatch.Draw call anywhere as long as it is in between the mySpriteBatch.Begin and mySpriteBatch.End calls). Pass in spritePosition2 for the position to draw the sprite at.

Figure 1-1 The Call to Draw the Second Texture

Now run the project. You should get a result looking something like this:

Figure 1-2 The Newly Drawn Texture

Now we can move on to what the tutorial is supposed to do. Follow these steps.

Step 1: Create a variable to keep track of mouse input.
Step 2: Check if the mouse left button is pressed.
Step 3: Move the sprite to the position of the mouse.

Step 1: Create a variable to keep track of mouse input

Just like the KeyboardState variable we used to check for keyboard input, Microsoft gives us a MouseState variable to keep track of mouse input. Create a MouseState variable and name it myMouse. Now initialize the variable in the Update method underneath where we have all our other code except the base.Update call. We initialize(or more often re-set the value of) the variable by using the command myMouse = Mouse.GetState(); I wanted to initialize the variable underneath all our other code because we will check for mouse input underneath all the other code and I wanted to keep the code for moving the second sprite all kind of in one general area.

Step 2: Check if the mouse left button is pressed

In order to check if the mouse left button is pressed, place this statement underneath the myMouse = Mouse.GetState() call;

if(myMouse.LeftButton == ButtonState.Pressed)
{

}

This code checks if the left button of the mouse is pressed. We check for the left button of the mouse using the command mouseStateVariable.LeftButton. Then we check if it is pressed by using the command == ButtonState.Pressed. The == operator is not the same as the = operator. The = operator assigns values to variables while the == operator checks the values of variables. The == operator can only be used in if statements.
Now we have checked if the left button of the mouse is pressed.

Note: We are checking if the left button of the mouse is currently pressed, not clicked which means pressed and then released. We will discuss how to do check if the left button of the mouse is clicked in a following tutorial.

Step 3: Move the sprite to the position of the mouse

Now comes the part where we move our sprite.

In order to move our sprite to the position of the mouse, we need to access the X and Y-positions of the mouse, and then change the position of the sprite to those positions. Place this code inside the if statement that checks if the left button of the mouse is pressed.

spritePosition2.X = myMouse.X;
spritePosition2.Y = myMouse.Y;

This code is very simple and straightforward. All we are doing is resetting the X and Y-Positions of the sprite to the X and Y-Positions of the mouse, which we get by using the commands mouseStateVariable.X and mouseStateVariable.Y.

Figure 1-3 The Code That Checks for Mouse Input

Now there is just one problem left. By default, the mouse is not visible when it is on top of the screen. In order to fix this, place this code inside the Initialize method above the base.Initialize call.

IsMouseVisible = true;

This code just sets the mouse to be visible when it is on top of the screen.

Now you have checked for mouse input, which is not that different from keyboard input. If you run the project now, you can move the second sprite to the position of the mouse whenever you press the left button of the mouse. Notice the sprite will move even when the mouse button has not been released yet. This is because we are not checking if the mouse has been clicked. We will solve this problem in a following tutorial.

Finally, you may notice that if you click outside the screen, the sprite goes out of the screen also. We do not want this to happen. There are two ways we could come about stopping this. Either we could move the sprite to the edge of the screen when the mouse is clicked outside of the screen, or we could ignore mouse input when the mouse is clicked outside of the screen. I am going to choose the second option because it is easier.

In order to ignore mouse input when the mouse is around the screen, after we have checked if the mouse is clicked, we need to check that the mouse is in the screen before we move the sprite. To do this, we can use an easy helper Microsoft has given us called Intellisense. Highlight the code that moves the sprite to the mouse position and right click.

Figure 1-4 Intellisense Helping us Create an If Statement

You should see a box come up. Click on Surround with and then find the if(or type in i). Now hit enter. You should see that your code that moves the sprite is now surrounded with another if statement. Fill in the if statement as this if statement looks:

if(mouse.X st screenRectangle.Right && mouse.X > screenRectangle.Left && mouse.Y > screenRectangle.Bottom && mouse.Y st screenRectangle.Top)
{
spritePosition2.X = myMouse.X;
spritePosition2.Y = myMouse.Y;
}

This checks if the mouse is inside the screen rectangle by checking that the mouse positions are not outside of the screen rectangle edges.

There is actually an easier way to do this though. We can just check if the mouse is inside of the rectangle by creating a rectangle around the mouse and then checking if it is inside of the screen rectangle by using a helper method that the rectangle class has called, Intersects.

Create a rectangle around the mouse by putting this code above the second if statement:

Rectangle mouseRectangle = new Rectangle(myMouse.X, myMouse.Y, 1, 1);

This just creates a 1 by 1 pixel rectangle around the mouse. Now replace the code inside the second if statement with this code:

if(mouseRectangle.Intersects(screenRectangle))
{
spritePosition2.X = myMouse.X;
spritePosition2.Y = myMouse.Y;
}

We are now checking of the mouse rectangle is intersecting the screen rectangle. If the mouse is outside of the screen, this if statement will not return true and the code inside will not be executed. Figure 1-5 The New Code to Move the Sprite

Now you can move the sprite to where the mouse is clicked, but only if the mouse is inside of the screen.

Figure 1-6 Final Ouput of the Tutorial

If you have any requests or questions, please post a comment.

Thanks for reading this tutorial.

If something bad happens, do you really think that God does not have it under control?

Tutorial 5 -- Handling Input

2007-09-02T16:50:00.000-07:00

Introduction

This tutorial teaches you how to move the sprite whenever a keyboard key is down.

Requirements

A drawn, movable sprite (shown in Tutorial 4)

Read

View the tutorial here: Tutorial 5

Remember

Seriously, where do you think you are going to go when you die?

Handling Input

2007-09-02T15:39:00.001-07:00

Important Note: When you see a red st inside a code sample, this means a "<" symbol. Because of html tags and such with the website it won't let me draw the smaller than symbol.

In this tutorial, you will learn how to move the sprite we have, based on input. Handling input is actually not that hard, thanks to the classes that Microsoft lets us use. In order to complete this tutorial, there are a few steps we need to do.

Step 1 : Create a variable that can keep track of the keyboard input.
Step 2 : Check for input constantly.
Step 3 : Act upon input.

Now let's do these steps.

Step 1 : Create a variable that can keep track of the keyboard input

In order to check for input, we need to create a variable that can keep track of input. Microsoft has created a class that helps with this type of thing. This class is called a KeyboardState. Create a variable for this in the fields area:

KeyboardState myKeyboard;

This creates a KeyboardState variable. Notice we don’t initialize it. That is because we will re-set the value of it every update, so we don’t need to spend time initializing it now.

Note: We didn’t put the private keyword in front of our variable declaration. This is because we don’t need to. If we don’t put private in front of the variable declaration, then the variable will become private by default.

Step 2 : Check for input constantly

This is the step where we will actually check for input. Since we must always be checking for input(because the user can push a key at any time), we need to put our input checks in the Update method. Again we will use if statements to check for input. Place this code inside the Update method after the code you had placed there in the previous tutorials:

if(myKeyboard.IsKeyDown(Keys.Right))
{

}
if(myKeyboard.IsKeyDown(Keys.Left))
{

}

This code actually checks for input. We have put two different checks to check if the left or right arrow keys have been pressed. You can probably see what is going on in these if statements.

First off, we access the IsKeyDown method of our keyboard variable myKeyboard. This method checks if a key was is currently held down. We want to see if the right or left arrows of the keyboard is down so we pass in as parameters, Keys.Right or Keys.Left. Keys is a class Microsoft has let us use that stores all the keys on the keyboard.

Now that we have the input checks done, there is one thing we have to do before we can actually put something inside these if statements. We need to actually get the current state of the keyboard. To do this, put this code at the top of the Update method, underneath the code to exit the game:

myKeyboard = Keyboard.GetState();

As I was saying earlier, we didn’t initialize myKeyboard because we would reset it’s value every update. In this line of code, we are setting myKeyboard to a value of the current state of the keyboard. We get the current state of the keyboard by using the command Keyboard.GetState() which calls the GetState method of the Keyboard class. The GetState method takes no parameters.

Figure 1-1 Initializing Our Keyboard Variable Every Update

Step 3 : Act upon input

This is the final step, and the step where we actually get to do move our sprite based upon the keyboard input. We want our sprite to move only when we push the arrow keys. Instead of constantly updating the sprite’s position like we have been doing, we will now only move the sprite if an arrow key is pressed. Delete the code that increases the sprite’s position by speed and place this code inside the if statements that check for input.

//This code inside the right arrow input check
spritePosition.X += speed;
//This code inside the left arrow input check
spritePosition.X -= speed;

This code will move the sprite only when the left or right arrows of the keyboard have been pushed. We increase the sprite’s X-position by speed when the right arrow is down, and decrease the sprite’s X-position by speed when the left arrow is down.

Figure 1-2 Moving Our Sprite Based on Keyboard Input

Now since we won’t need the sprite to reverse direction when it collides with the side of the screen, you can replace the old collision code with this new code:

if(spriteCollisionRectangle.Right > screenRectangle.Right)
{
spritePosition.X = screenRectangle.Right - myTexture.Width;
}
if(spriteCollisionRectangle.Left st screenRectangle.Left)
{
spritePosition.X = screenRectangle.Left;
}

All this code does is, if the sprite’s left or right side has started to go beyond the screen. Then the sprite’s left or right side will be set to the left or right side of the screen. This way the sprite cannot go beyond the edges of the screen.

You may think it would be easier to type spriteCollisionRectangle.Right = screenRectangle.Right or spriteCollisionRectangle.Left = screenRectangle.Left. This would be easier but there are two problems that occur with this.

First of all, if you wrote that, the compiler would throw an error because for some reason you cannot change the values of the rectangle, you can only use them. In other words, the rectangle values are readonly(a C# keyword).

Second of all, even if you could change the values of the rectangle, why would you want to. If all we did was move the collision rectangle, the position of the sprite would stay the same. In other words, if we just moved the sprite's collision rectangle, the sprite would not stop moving because his position is not being changed, only his collision rectangle.

In order to make it where the position of the sprite is changed, we have to access either the sprite's X or Y-positions. Since we are moving horizontaly we accesss the sprite's X-position.

Then we need to stop the sprite's X-position movement when we are colliding with the screen edge.

Figure 1-3 The New Collision Code

We put spritePosition.X = screenRectangle.Right - myTexture.Width. All this code is doing is setting the X-position of the sprite to the right side of the screen. We need to minus the width of the texture because the X-position of the sprite refers to the left side of the sprite and since we want to make it seem like there is a collision with the right side of the sprite and the right side of the screen, we need to actually make a collision with the left side of the sprite(the sprite's X-position), and the right side of the screen minus the width of the texture.

When we do the command spritePosition.X = screenRectangle.Left we don't have to make any changes because we are setting the left side of the sprite to the left side of the screen.

Now test your project. You should be able to move the sprite based on keyboard input. Also, the sprite should stop when it collides with the sides of the screen.

Figure 1-4 The final result

Just to add a little more functionality into our project, add this code into the Update method to allow up and down movement:

//Under the left and right arrow input checks
if(myKeyboard.IsKeyDown(Keys.Down))
{
spritePosition.Y += speed;
}
if(myKeyboard.IsKeyDown(Keys.Up))
{
spritePosition.Y -= speed;
}
//Under the left and right side collision checks
if(spriteCollisionRectangle.Bottom > screenRectangle.Bottom)
{
spritePosition.Y = screenRectangle.Bottom - myTexture.Height;
}
if(spriteCollisionRectangle.Top st screenRectangle.Top)
{
spritePosition.Y = screenRectangle.Top;
}

Finally, move all the collision code underneath the input code. I don't know why but I like to have input code before collision code.

Figure 1-5 The New Update Method With Added Code

Now you can move your sprite up and down also. You should be able to understand what this code does.

Figure 1-6 The Final, Final Result

If you have any requests or if parts of this tutorial were confusing, please post a comment.

Thanks for reading this tutorial.

Seriously, what do you think will happen to you when you die?

Tutorial 4 -- Rectangle Collisions

2007-09-01T16:32:00.000-07:00

Introduction

This tutorial shows how to do some collision checking using the Rectangle class. You will end up with a sprite moving from one side of the screen to the next reversing its direction whenever it collides with a screen edge.

Requirements

A moving sprite (shown in tutorial 3)

Read

View the tutorial here: Tutorial 4

Remember

You don't have to live a life with no point. God offers a free gift. Take it.

Rectangle Collisions

2007-09-01T15:43:00.000-07:00

Very Important Note: You will see a red st in one of the if statements below. This stands for a smaller than sign "<". Make sure to put that instead. I had to put st because the web site uses html and it thinks I am trying to create a tag using html.

Note: All words in italics are names of things.

In this tutorial you will learn the basics of collision handling. What we want to accomplish in this tutorial is to make our sprite reverse directions when it hit’s either side of the screen. In order to accomplish this we need to create some kind of collision box around the sprite every time the game updates. Then we can check for a collision with the side of the screen and reverse the sprite’s direction accordingly.

In order to accomplish this there are a few steps we need to do:

Step 1 : Every update(every time the game calls the Update method) create a collision box around the sprite.
Step 2 : Check for collisions with the sprite and the screen.
Step 3 : Reverse the sprites direction if there is a collision.

Once we accomplish these steps we will hopefully have a sprite colliding with the screen borders.
Step 1 : Every update create a collision box around the sprite

First of all, we need to create a collision box around the sprite. Microsoft has provided us with a class that helps with this type of stuff. This class is called Rectangle. In order to create a rectangle that we can use for collision checking, we could do one of two things.

One idea is to create a rectangle around the sprite when we first start the game, and then every time the sprite moves, update the position of this rectangle.

Another idea is to only create a rectangle around the sprite when we are going to start collision checking That way, the rectangle is already at the current position of the sprite. I am going to use this method because that way I don’t have to worry about updating the position of the collision rectangle.

Now that we have decided what we are going to do, we can actually do it. Since we want to create the rectangle at the time we are going to check for collisions(every loop), we are going to put this code inside the Update method. Put this code before the call to move the sprite, but after the call to create speed.

Rectangle spriteCollisionRectangle = new Rectangle((int)spritePosition.X, (int)spritePosition.Y, myTexture.Width, myTexture.Height);

This code creates our rectangle around the sprite. First of all, we create a rectangle variable. Then we initialize the variable. You can see that we are calling the constructor of the rectangle class. This constructor needs two positions to create the rectangle at, and then the width and height the rectangle should be. In order to make a rectangle boxing in our sprite, we pass in the position of the sprite(the X and Y-coordinates), and then we pass in the width and height of the texture we are using. We get this by using the commands myTexture.Width and myTexture.Height. Notice we put (int) in front of the sprite positions. This is because the sprite positions(spritePosition.X and spritePosition.Y) when we try to use them return(give a value of) a float. The rectangle constructor only takes integers as it’s parameters so we have to convert the float into an integer(int). This is a process know as casting.

Now we have created our collision rectangle around our sprite. Every update loop this rectangle is re-created to be at the current position of the sprite.

Figure 1-1 The Creation of the Sprite’s Collision Rectangle

Step 2 : Check for collisions with the sprite and the screen

Now that we have a rectangle for our sprite, we can start to check for collisions. First lets make a variable to hold the rectangle for the screen. Put this code under your code for the sprite’s rectangle:

Rectangle screenRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height);

This code creates a rectangle for our screen. First we put, 0, 0, which is always the position that the top left corner of the screen is at. Then we pass in the width and height of the screen by using the commands graphics.GraphicsDevice.Viewport.Width or graphics.GraphicsDevice.Viewport.Height.

Now that we have our screen rectangle created, it is time to check for collisions.

All we have to do to check for a collision is add an if statement. In order to check for a collision with the right side of the screen and the right side of the sprite, add this code underneath the rectangle variable declarations:

if(spriteCollisionRectangle.Right > screenRectangle.Right)
{

}

This code is your first if statement. First we place the word if. Then we place two parentheses after the if. Then inside of the two parentheses we write what we are checking for. We want to see if the right side of the sprite rectangle is at a greater position than the right side of the screen rectangle. We do this by accessing the right side position of these rectangles(rectangleName.Right), and checking their positions by using the > operator which checks if one value is greater than another.

Note : Using the command, rectangleName.Right, just gets the position of the right side of the rectangle.

After the if and the two parentheses, we just add two curly brackets. These brackets are where you would put any code that you want to be executed if the spriteCollisionRectangle’s right side is greater than the screenRectangle’s right side. We will fill these brackets in the next step. For now, lets just finish up checking for collisions.
Add this code to check for collisions with the left side of the screen and the left position of the sprite’s rectangle:

if(spriteCollisionRectangle.Left st screenRectangle.Left)

{

}

Notice that we have changed the > to a <. This is because we are checking for a collision with the left side of the screen. And since when you are moving left, your position is getting smaller so you need to put <. Note : If you put >= or <= the project will not work because then we are checking if the sprite rectangle’s side is greater or equal to the side of the screen and since we start out at position 0, 0, there is a collision from the start. In the end the sprite will end up not moving at all. If you really want to know why then post a comment.

Figure 1-2 The Screen Rectangle and If Statements

Step 3 : Reverse the sprites direction if there is a collision

Now that we have all the collision if statements down, all there is left to do is make those if statements change something. All we have to do is reverse the direction that the sprite is moving in. Place this code inside both sets of brackets following the if statements:

speed = -speed;

This code changes the speed that the sprite is moving by, to its opposite. Since the sprite’s X-position is being increased by speed, if speed equals 0.5(the sprite is moving right) then speed will be reversed to -0.5 which means the sprite’s position will be increased by -0.5 or in simpler words subtracted by 0.5(moving left).

Figure 1-3 The Code in the If Statements that Reverses the Sprite’s Direction

Now there is just one thing to fix. We need to stop recreating speed each time the Update method is called. This is because when we recreate speed, we are resetting its value to 0.5 which means that if none of the if statements return(end up as) true(say the sprite is in the middle of the screen so there are no collisions happening), then even if the sprite was moving left, the sprite would move right because when we recreate speed we are setting or more often re-setting it’s value to 0.5 which means moving right.

All we need to do to change this is move the creation of speed to the fields area. This will give speed an initial value of 0.5(moving right) but if we reverse the value of speed in an if statement, speed will keep that new value instead of constantly being reset to 0.5.

Move the, float speed = 0.5, in the Update method, up to where we placed our fields.

Figure 1-4 Moving Speed Up To Our Fields Area

Now if you test the project, the sprite will reverse it’s direction when it collides with the sides of the screen. You have now learned how to do some basic collision checking.

Figure 1-5 Finished Tutorial - The Sprite Just Bounced Off of the Right Side of the Screen

Finally, just change the initial value of speed to 5 so that we can get the sprite moving a bit faster:

Figure 1-6 Changing Speed to the Value of 5

If you have any requests or if parts of this tutorial were confusing post a comment.

Thanks for reading this tutorial.

You don’t need to live a life that has no point. God is offering you a free gift. Take it.

Tutorial 3 -- Moving Our Sprite

2007-09-01T15:27:00.000-07:00

Introduction

This tutorial explains how to move a sprite. There is no collision checking or input handling. This tutorial is meant to teach someone how to move a sprite.

Requirements

A sprite drawn on the screen (shown in Tutorial 2).

Read

View the tutorial here: Tutorial 3

Remember

Don't worry. God has everything under control.

Moving Our Sprite

2007-09-01T14:12:00.000-07:00

Note: Words in italic are names of things.

Now that you have a pretty sweet sprite drawn on the screen. It is time to actually make the sprite do something. Here are the steps we need to do to make the sprite move:

Step 1 : Give our sprite a position variable so that we can change the sprite’s position.
Step 2 : Draw the sprite at the position variable instead of at a variable we create when we call mySpriteBatch to draw.
Step 3 : Every time the computer loops through the code, move the sprite by a certain amount.

These steps we will accomplish and hopefully, without much confusion.

Step 1 -- Give our sprite a position variable so that we can change the sprite’s position

As the name of this step shows, we need to create a variable for our sprite. You may be wondering why we need to do this because we already created a variable for the position of the sprite in the call to draw:

Figure 1-1 The Call to Draw the Sprite at a Position

Well, yea, we created this variable but there is a problem:
This variable does not have a name that we can access it by. When we call mySpriteBatch to draw, we are creating a new Vector2 class to draw the sprite at. This is useful if you are never going to need to access this variable, but throws a problem when we want to change the value of this variable. In order to fix this problem, we need to create a Vector2 variable that can be accessed from everywhere inside the class. Then we can always change this position whenever we want to.
To create this variable, type this code in the fields area(the place where all our other variable declarations are):

private Vector2 spritePosition;

This code creates our Vector2 variable that can hold the position of our sprite. Now we need to initialize it.
Instead of going to the Initialize method, we can just initialize the variable at the same time that we create it. To do this, replace the code you just typed, with the following:

private Vector2 spritePosition = new Vector2(0, 0);

Now we have created our variable, and initialized it at the same time. It is easier to do this instead of creating the variable and then initializing it somewhere else. The reason we didn’t initialize mySpriteBatch when we first created it was because in order to initialize the mySpriteBatch, we had to use the GraphicsDeviceManager variable graphics. It happens that graphics is not initialized until the constructor is called. If I try to use graphics to initialize mySpriteBatch before it is initialized, the compiler(program that processes the code) will throw and error because the GraphicsDevice inside of graphics is set to null.

If that was confusing just think of it as I need graphics to be set to a value before I can use it, and since graphics is not set to a value until the constructor is called, I need to create mySpriteBatch after the constructor is called, which is in the Initialize method.

Step 2 -- Draw the sprite at the position variable instead of at a variable we create when we call mySpriteBatch to draw

Now that we have an initialized Vector2 variable to work with, lets test out the variable by changing the call to draw. Replace the old mySpriteBatch.Draw call with this:

mySpriteBatch.Draw(myTexture, spritePosition, Color.White);

This code replaces the, new Vector2(0, 0), call we had there earlier, with our Vector2 variable spritePosition. This does not throw an error because all the Draw method is asking for is a Vector2, so whether we pass in a new Vector2 we create at the moment, or a variable, it doesn’t matter because all that the method needs is a Vector2.

If you run the project right now, you should see the same sprite placed at the exact same position it was at the end of the last tutorial. This is because we didn’t change the value of spritePosition. We kept the spritePosition at the value of 0, 0, which was the same value of the new Vector2 we had created when we called to draw. Build the project anyway, just to make sure everything is working correctly.

Figure 1-2 Your Output Should Look Like This

Step 3 : Every time the computer loops through the code, move the sprite by a certain amount

Now comes the fun part. Actually moving the sprite.

Since we put the position of a sprite in a variable. All we need to do to move the sprite is change it’s position by a certain amount every time the compiler loops through the code. To make this happen, we need to go to the Update method. The Update method is called every time the compiler loops and is where you want to place all your game code. By this I mean all code that updates positions, collision handling, input checking, etc… You do not want to put draw code in this method though. You should put drawing code inside of the Draw method.
Once you have located the Update method, place this code inside of it. I put my code in between the input check for exiting the game, and the base.Draw(gameTime), call.

float speed = 0.5f;
spritePosition.X += speed;

This code moves our sprite by a certain amount every time the compiler loops through the code.
First we create a variable to keep the speed the sprite should move at. We store this variable as a float, which is like a decimal, but it only keeps the first 7 decimal points. We set the value of the speed to 0.5f. We put an f or an F after the number to show that this number is a float. If you don’t put it there, the compiler will think that you are trying to make an integer and since integers can't hold numbers after the decimal point, the compiler will throw an error.

After we declare speed, we need to change the sprite’s position. We want to move the sprite to the right so we have to do two things.

First we have to access the X-coordinate of spritePosition because we want to move the position of the sprite sideways.

Secondly, we have to add to the X-coordinate of the sprite. We add because we want to move the sprite to the right. The further right to the screen(in a 2D game) means the higher the number of the X-coordinate. The further left to the screen means the lower the number.

Now maybe you have just one more question. What does the += operator mean?
Putting the += operator is the same thing as putting: spritePosition.X = spritePositon.X + speed;

Figure 1-3 The code in the Update Method

Now if you run the project. The sprite should move across the screen at a slow pace. If you are patient enough to watch though, we have one problem. The sprite doesn’t stop when it hit’s the end of the screen. Even though we could fix that problem now, I want to save that for the next tutorial. What we learned in this tutorial though, is how to move a sprite. Which, after all, only takes a few lines of code.

You can run the code now and enjoy your sprite moving across the scene…until it moves off the screen.

Figure 1-4 Our Finished Tutorial

P.S. Try seeing how you can move the sprite’s Y-coordinate. I’m sure you can figure it out. Just one tip : The further towards the bottom of the screen, the higher the number of the Y-coordinate. Once you have tested the code enough, make sure to erase all modifications you made so we can all be on the same page for the next tutorial.

If you have any questions or requests, post a comment for this tutorial.

Thanks

Remember: Don’t worry, the Lord has everything under control.

Drawing Our First Sprite

2007-08-31T16:43:00.000-07:00

In this tutorial, we will learn how to draw an image onto the screen. First of all I will tell you the steps needed in order to draw a sprite(2d image) onto the screen.

Step 1 : Create a variable that is capable of holding a 2d texture image.
Step 2 : Load the actual image that we are going to draw, into the project.
Step 3 : Give the texture variable that we created the value of the actual image we loaded into the project.
Step 4 : Draw the image onto the screen each frame.

I will go through these steps, trying to make it as easy as possible.

Note: All words in Italics are names of some item or variable.

Step 1-Create a variable that is capable of holding a 2d texture image

First off we need to create a variable that can hold all the information a texture image has. Thankfully, Microsoft has made XNA, which has lots of different classes that have different uses. Out of these classes is one that is perfect for our use. This class is called the Texture2D class. So now right above the constructor(public Game1()) type in this code :

private Texture2D myTexture;

Simple enough. First off we declare private.

private is a keyword and should appear in blue. All that this word does is set an access modifier. In other words, by using this word in front of a variable declaration, we have said that only code inside the Game1 class can access it.

Next we have the Texture2D.

This is referring back to the class I told you about. This is a class that holds information about 2d texture images.

After the Texture2D statement, we have the myTexture.

This should not appear in any special color, because this is just a name. This name refers to one Texture2D class. Now whenever we want to access something that a Texture2D class has, we just use myTexture. I have named our Texture2D class, myTexture, but it doesn’t really matter what you name it. Be careful though, names of variables are case sensitive.

Figure 1-1 The Variable Declaration

Last but not least, we end our variable name with a semicolon. Semicolons are used to end statements. There is a pretty basic rule about semi colons. Whenever a statement has two following curly braces after it, then you do not put a semicolon. Otherwise, pretty much always end statements with a semicolon.

Step 2-Load the actual image that we are going to draw, into the project

After we have created our variable and named it myTexture. We can draw it right? Wrong. All the values inside myTexture(our Texture2D class) are set to default and null(nothing) values. We can’t draw the image because some of the data is nothing. First we need to set our myTexture variable to an image, and then we can draw it. Now the problem is how to do just that. How do we set a Texture2D variable to a real image? Theoretically, we could create a file stream and then load a texture image that way, but it would be way harder. Microsoft has again created an easier way to load content(images, sound, models, etc). This is called the Content Pipeline. All we have to do is load our image into our project, and then do a simple command to access this image.

First, lets load our image into our project. Go to the Solution Explorer(View-->Solution Explorer). Now you should see the name of your project with a little computer flag by it(that is the symbol for a Windows Game). Right click on the name of your project and go to Add--> Existing Item.

Figure 1-2 Add-Existing Item

Now you should see your some files of your game. Browse to where the image you want to add is. You should see nothing. This is because you are not looking at files related to the Content Pipeline. Go to the bottom where the Files of Type drop down box is. Select Content Pipeline files. Now you should see your image. Select that image and click Add(bottom-right). In the Solution Explorer under the files related to your project, you should see your image file. Now you have added the image into your project. The next step is to do something with it.

Figure 1-3 Added Image

Step 3 : Give the texture variable that we created the value of the actual image we loaded into the project

We are half way done now. We still can’t draw anything yet because our values in the myTexture variable are still set to default and null values. Even though we loaded the image into our project. The myTexture variable doesn’t just magically get assigned the value of the texture. In order to assign the myTexture variable to the image we loaded into our project, we need to type this line of code inside the LoadGraphicsContent method:

Figure 1-4 The LoadGraphicsContent Method

After you have located the method, you should see an if statement. Inside the if statement should be a green line of code(It is green because it is a comment. Comments are marked with two preceding backslashes and are just there to help the coder). Delete the comment and type in this line of code in it’s place:

myTexture = content.Load<Texture2D>(“JesusRocks“);

This is the actual code that loads our texture variable with a real image. Pretty sweet. One problem though. It may be kind of confusing. Hopefully not for long.
First we start with myTexture =.

This is getting our myTexture variable ready to be assigned(or re-assigned) a value. The equals operator(sign) is used like it shows in pretty much all cases. It is used to assign or re-assign values to variables.

Next we have the content.Load(“JesusRocks“);

This looks like a complicated statement but is actually quite simple. First we access the content variable. If you look to where you placed your Texture2D variable declaration, above it somewhere, you will see two more variable declarations. These are created there by default and are used for drawing and loading graphics. The second one down is the ContentManager content variable declaration and is just creating a ContentManager class and naming it content.

This variable is initialized(set to a value) in the constructor and is done so by default.
Now back where we are loading our myTexture variable we can use this content variable to help with loading. It so happens that the ContentManager class has a method(a group of code that we can call) that is called Load. We access this method by using content.Load. We use the dot to access all the available methods that the content variable has stored within.

After the content.Load we have ("JesusRocks");. All this does is, since we want to load a Texture2D, we have to pass this in as a parameter. A parameter is just some external information that the method we are calling needs in order to operate correctly. In our case, the Load method of the ContentManager class needs to know which type of gphic object we are loading, so we pass in Texture2D. We have the <> symbols because this method is a type of special method. Usually, methods take parameters in between the () symbols. But in this case a parameter was passed in between the <> symbols. This is actually because this method is called a generic method. When we call this method, we need to pass a class between the <> symbols. What I mean by this is, if you try to pass myTexture in between the <> symbols, it won’t work. Even though the myTexture variable is a type of the Texture2D class, we need to actually pass in a class. Again the same thing when we call the () symbols following the <>. We need to pass in a variable, not a class. In our case, the Load method is generic so it needs both sets of parameter types. In the <> symbols we pass in a class name, which is a Texture2D. We say a Texture2D and not some other class because our myTexture variable is a Texture2D so it makes sense.

After the first set of parameter symbols, we have the () symbols. These are where we pass in variable parameters. We pass in a string which refers to the name of our image that we loaded. As you may notice, we have excluded the file extension because it is not needed and can not be used when you pass in the string. Also, going back to parameter types, since I need a string as a parameter in between the () symbols, I pass in an already initialized string. If I had passed in the class name, String, it would not work. It is all pretty easy to tell the difference because it depends on whether you are using the <> symbols or the () symbols.

The texture name that I loaded into my project is called JesusRocks, so I passed that in between the () symbols. I also put quotation marks before and after the, JesusRocks, to symbolize that this is a string and not a variable name.

Note: You may be wondering how I had known that I was to pass in a string into the () symbols. If you just type(or re-type) the first parenthesis, you will see that a tan box comes up showing the name of the method and then all parameters needed. In this case, the tan box shows that I need a string.

Figure 1-5 The Tan Box Showing That I Need a String as a Parameter

Finally, I end the statement with a semicolon. Because there are not two curly braces following the end of this statement(line of code), I end with a semicolon.

Phew, that was a very long step and I really hope that didn’t confuse you, but eventually, you will get the hang of it. Now time to draw.

Figure 1-6 The Code Inside the LoadGraphicsContent Method

Step 4-Draw the image onto the screen each frame

Now comes the fun part. Actually seeing what you are doing. If you run the code right now(F5) then you will see only a blue screen. This is because we haven’t called any method to draw our texture. First before we do any drawing, we need a SpriteBatch. A SpriteBatch is a class Microsoft has let us use that allows us to draw images to the screen. In order to use this class, we must create a variable for it. Just like we did for the Texture2D variable, create a SpriteBatch variable:

private SpriteBatch mySpriteBatch;

Figure 1-7 Our SpriteBatch Variable Declaration

After we have named our SpriteBatch variable, we must initialize it. In the Initialize method, type this code inside of the method.

mySpriteBatch = new SpriteBatch(graphics.GraphicsDevice);

All this code is doing is assigning the value of our SpriteBatch variable that we created, to a new SpriteBatch class. We use the new keyword to specialize that we want to create a new ‘something‘. Then we place the name of the class we want to create(we put a SpriteBatch because our mySpriteBatch variable is a SpriteBatch).

After the name of the class you see what looks like a parameter. This actually is a parameter. We are calling the constructor of the SpriteBatch class. A constructor is like a method that helps create a class. Every class has one and it looks like a method. The constructor of the SpriteBatch class takes the parameter of a GraphicsDevice class. A GraphicsDevice is a class that helps with drawing. At the top of our code right above the ContentManager variable declaration, you see a GraphicsDeviceManager variable declaration. This variable is named graphics. Again, like the ContentManager variable, graphics is initialized by default. Now since graphics is a GraphicsDeviceManager, in order to get the GraphicsDevice that is stored inside of the GraphicsDeviceManager class, we need to use the command, graphics.GraphicsDevice which gets the GraphicsDevice related to the graphics variable.

Figure 1-8 Initializing our SpriteBatch

Note: Not all classes have a GraphicsDevice related to them. The GraphicsDeviceManager class does have one though.

Now that we have our SpriteBatch variable created, we have a sprint to the finish. In the Draw method, find this code:

graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

This code just accesses the GraphicsDevice of the graphics variable, and calls a method of the GraphicsDevice class that clears the screen color to a specified color. By default, this code is there and a color is passed in. This color is CornflowerBlue. You may change this color if you want. Anyway, after this statement, place this code:

mySpriteBatch.Begin(SpriteBlendMode.AlphaBlend);
mySpriteBatch.Draw(myTexture, new Vector2(0, 0), Color.White);
mySpriteBatch.End();

This code actually draws your image onto the screen. First off, we call:

mySpriteBatch.Begin(SpriteBlendMode.AlphaBlend);

This code calls the Begin method of the SpriteBatch class, which is required to get the mySpriteBatch variable ready for drawing. We pass in a certain blend mode as a parameter. A blend mode is just a way that you want to draw the sprites. SpriteBlendMode.AlphaBlend is just saying that you want to draw your sprites using transparency(alpha is the transparency value of an image).

Then we have the meat of the code:

mySpriteBatch.Draw(myTexture, new Vector2(0, 0), Color.White);

This code calls the Draw method of the SpriteBatch class. This method is the first method we have used that takes more than one parameter.

First off, the method needs a Texture2D variable to actually draw. We pass in our myTexture variable. Then, after a comma, which is needed to separate one parameter from the next, the method needs a position to draw the sprite at. The method is asking for a Vector2 which is a class that holds the x and y coordinates of anything. Instead of passing in an already created variable, we can also just create a variable right there and then, inside of the method call. We do this by just saying, new Vector2(0, 0). As you may recognize, we are again calling the constructor of a class. This time we are calling the constructor of the Vector2 class. This constructor takes two parameters, an x and a y coordinate. We specify, 0, 0 to say that we want to draw the sprite at the top-left corner of the screen. Lastly, we pass in a color to taint our sprite with. This can be used to show if a certain sprite is selected. In our case we don’t want our sprite to be tainted with any color, so we specify Color.White.

Figure 1-9 The Code to Draw Our Sprite

Lastly, we end with:

mySpriteBatch.End();

This calls the End method of the SpriteBatch class. This method takes no parameters, but we still have to place the two parentheses. The End method actually draws the sprites on the screen.

Now if you press F5(or click the green arrow on the top of the page), you can see your sprite drawn on the screen:

Figure 2.0 The Final Result-Our Sprite Drawn on The Screen

Even though you didn’t specify anything about frames, since you placed your drawing code inside the Draw method, the sprite is drawn every frame. Now maybe you are wondering why the top-left point of the sprite is drawn at position 0, 0, instead of maybe the center of the sprite. This is because the origin(main position) of your sprite is set by default at the top-left corner of your image. You can change the origin of where your sprite is drawn at, but we will not go through that today.

Now, after a lot of work, you have drawn a sprite on the screen.

If you have any questions or requests, post a comment.

Thanks

If you need something, pray.

Tutorial 2 -- Drawing Our First Sprite

2007-08-31T16:40:00.001-07:00

Introduction

This tutorial shows you how to draw a sprite onto the screen. You do not need any coding experience in order to complete this tutorial.

Requirements

A windows game project (created in Tutorial 1)

Read

View the tutorial here Tutorial 2

Remember

If you need something, pray.

Creating a New Project

2007-08-31T14:58:00.000-07:00

The first step in this tutorial series that needs to be completed is to create the project in which we will be working in.

First, we want to open up the programming environment. From the desktop, locate the C# Express Edition and open it. You should be greeted with the Start Page.

Figure 1: You should first be greeted with the Start Page.

Now we want to create a project. This project is where we will type our code into. Project templates are just already made projects which come with code that starts you off in a given direction. The template we want to use is the Windows Game template. In order to create a Windows Game you need to navigate to the menu and select File / New Project.

Figure 2: Select File / New Project to start creating the project.

Now you should see a list of different project templates that you can choose from. In our case, we want to create a Windows Game. We want a Windows Game because then we are already supplied with the code to get working on game elements. It is much easier to choose Windows Game when working on a game project, but you can create the exact same thing by choosing a different project template.After selecting Windows Game, change the name of your project. I am going to change the name of my project to TutorialProject. If you don’t like this name, feel free to choose something else. For now, you do not need to worry about the other directory options; just leave them as they are for now (right now, all the default options are what we want. When we need to change these options, I will tell you).

Figure 3: Create a Windows Game project. I named my project TutorialProject.

Now you have officially created a Windows Game project. As I was telling you, by creating a Windows Game, you can already build (run) the project and get a nice looking blue screen. Do this now if you want by pressing F5, or by clicking the green arrow at the top of the screen.

Figure 4: If you run the project now (F5) you will be greeted with a very friendly cornflower blue screen.

If you have any troubles or requests, leave a comment and I will try to answer you.

Thanks to the Lord Jesus Christ for helping me do these tutorials and helping me solve all my problems. He is all there is to life.

Tutorial 1 -- Starting a new Project

2007-08-31T14:51:00.000-07:00

Introduction

This tutorial shows a introduction to starting an XNA project. This project will be the project that we will use for the following 2D Basic tutorials.

Requirements

C# Express Edition
XNA version 1.0

Read

View the tutorial here: Tutorial 1

Remember

The Lord is all there is to life.

XNA and C# Download Instructions

2007-08-23T11:21:00.000-07:00

If you have come to the decision that you want to engage in the XNA world and learn to program games in C#, then you will need some tools. This post will hopefully help you find the downloads.

First, make sure your computer meets the System Requirements for C# and XNA.
Next, you need to download and install the C# Express Edition.
After that, go ahead and download and install the Service Pack 1 for the C# Express Edition. If you have a Windows Vista operating system, then you should download and install the Windows Vista Service Pack 1 Update.
Now, download and install XNA Game Studio Express.
Finally, if you want to develop games for the Xbox 360, there is a Video that will help you with this task.

Note: There is actually a newer version of XNA, XNA 2.0 (Beta) but I am not using that version yet in any of the tutorials.

Once all these steps have been completed, you should be up and ready to get started creating your very first small games. If you don't know C#, there are two simple lessons on them located under the C# Primer label. Also, there are some other tutorials for XNA under the Question and Answer label and the Tutorial label. If you have any requests for tutorials, please, ask for them.

I hope that you are able to fully suceed in your gaming quest and finally, I hope that you will understand the peace and hope that comes with accepting the Lord Jesus Christ. Thanks again.

What is XNA?

2007-08-23T11:13:00.000-07:00

What is XNA? That is a very good question. While XNA is not a programming language, XNA is a game development huge class library. By using the classes that are stored in the XNA namespaces, any games from 2D to 3D to RPG to RTS are in reach. Microsoft has really outdone themselves by enabling the easy ability to create games using XNA.

Some may think that XNA was built off of managed DirectX. Well, even though XNA shows many similarities between DirectX, XNA was built completely from scratch. Also, unlike managed DirectX, XNA does not require any device creation! This saves tons of time when trying to learn the boring stuff and not even seeing any results.

Finally, it is useful to mention that XNA was made for the C# programming language, and to my knowledge does not fully support any other languages. However, I am not sure if it supports Visual Basic or not. I program in C#, but if you love Basic, I recommend searching to see if XNA is supported in that language. I do know though that there is a wonderful XNA community and forum at http://creators.xna.com/. This community uses the C# language (there is section that uses C++, but this section talks about DirectX and not XNA).