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