Development with Microsoft Visual Studio 2008 and XNA Game Studio

Microsoft has provided the XNA Game Studio for developing games and other programs targeting not only the PC, but also the Xbox 360 and Zune devices. The newest version of XNA Game Studio also targets the Window Phone Series. By installing XNA Game Studio on top of Microsoft Visual Studio 2008, you end up not only with the tools you need, but also the XNA Framework containing the routines you need to start building games.

In this article, I'll talk briefly about installing XNA Game Studio and compiling the default project. In a couple of future articles, I'll cover a few basics to get you started in creating your first XNA applications.

If you don't already have Visual Studio 2008, don't fret. XNA Game Studio will work with the Express Edition of Visual C# that you can download from the Microsoft site at no charge.

Download Visual C# Express Edition here.

Once you have Visual C# Express edition, or a copy of Microsoft Visual Studio, you can then download and install XNA Game Studio. This product is freely available for download:

Download XNA Game Studio 3.1 here.
Download XNA Game Studio 4.0 (Windows Phone developer CTP) here.

While 4.0 Is now available as an early release, 3.1 is the current, fully released product. As such, I'll recommend downloading it unless you are specifically targeting the Windows Phone. Even if you want to target the Windows Phone Series, you can use what you learn with XNA Game Studio 3.1 and apply it to XNA Game Studio 4.0.

Installing XNA Game Studio 3.1

Once you've downloaded the XNA Game Studio 3.1, you can run the program to start the installation Wizard as show in Figure 1.

Figure 1. Installing XNA

Click Next to begin the process. You'll then need to agree to the licensing agreement. Once you have you'll then need to address some settings related to your computer's firewall settings so as to be able to communicate with either an Xbox 360 or to allow communication with network games built on the XNA Framework. If you are planning to only build for the Zune or for a local PC, then you shouldn't need to enable these rules, otherwise, enable what is appropriate.

Figure 2. Selecting firewall settings

That's it! XNA should start installing.

Once the installation is completed, you'll be prompted to go the XNA Creators Club online. In order to be able to use your games on your Xbox 360, you'll need to join the XNA Creator's Club. With a membership, you'll be able to create, share, review, and work with Xbox 360 games. It is important to know that you don't need a membership in the XNA Creators Club in order to create PC or Zune games. You will, however, need it if you plan to create games for the Xbox 360. Of course, you can choose to wait to join until you've learned a little more on the XNA Framework. After all, the club is going to require you to spend some money.

Using XNA Game Studio

Once you've installed XNA Game Studio, you'll find that XNA Game Studio 3.1 has been added to your Windows Start Menu. You can select Visual Studio from the menu option in order to start Visual Studio with the XNA Game Studio available. Of course, when you start Visual Studio, it will look like what you have likely seen before.

With Visual Studio (or Visual C#) started, you can start your first game project by selecting File -->New --> Project. This will display the New Projects dialog. If XNA Game Studio 3.1 isn't the default selection, then select it from the Project Types. This should present you with Templates similar to what are shown in Figure 3.

Figure 3. Selecting an XNA Project Type in Microsoft Visual Studio

As you can see in Figure 3, there are several types of projects you can create. If you are running XNA Game Studio 4.0, you'll also have options for targeting the Windows Phone. Go ahead and select Windows Game (3.1). This will setup the project for a Windows game. You should make sure you select the right template.

In addition to selecting the right template, you'll want to give your project a name. In Figure 3, the defaulted name of WindowsGame3 is used. I'll rename the project to PictureMover and choose to create the solution in its own directory. Clicking Ok will create the project and open up the editor with the Game1.cs file displayed. At this point, you could compile and run the program. You'd end up with a game program that does nothing other than setting the background to CornflowerBlue.

Of course, the key is to create a program that does something. For a game, you'll want to follow standard project practices. Additionally, with a game project you'll want to make do a lot of your logic in the Update method and then let the Draw method update your display.

There are two lines of code in the default project that are worth pointing out:

if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit();

If you look at this line of code, you'll see that it is referencing a game pad. If you have a wired Xbox controller, you can plug it into a USB connection on your PC and use it. The above line of code will then exit the game if the back button is pressed on the controller. In my next article, I'll show you how to check for other buttons on an Xbox controller.

Development with Microsoft Visual Studio 2008 and XNA Game Studio

Starting from the Beginning

To create a more functional program, the following will walk you through the following:

  • Load an image into your application as a texture
  • Place the image texture onto a rectangle
  • Set coordinates into the rectangle to set where the rectangle will display in the window
  • Display the rectangle and thus the image

Loading an Image

To use an image in your application, you need to first add it to your project. You can do this by right clicking on Content in the Solution center and selecting Add --> Existing Item.... You can then select the image you want to use in your application. For my example, I selected a Codeguru icon.

Once the image is loaded, you can adjust the properties to give the image an Asset Name that you can use in your application. Do this by clicking on the image name in the Solution Explorer in Visual Studio then adjusting the properties. As shown in Figure 4, I've called my image CGPicture.

[XNA0104.jpg]

Figure 4. Adding an image.

With the image now loaded as part of your project, the next thing to do is add some code to actually use it. This starts by creating a variable to hold the image and then is followed by placing the image as a texture on a rectangle. You'll need to variables to make this work. As such, you should define a texture variable and a rectangle. More specifically, you should define a 2D texture of type Texture2D to hold the image. In the example, this will be called myPicture. You can also define a rectangle that will be used to hold the image:

private Texture2D myPicture ; private Rectangle myRect;

You can add this code to the top of your class after the SpriteBatch variable that was defined by default.

With these variables now added to your class, you'll first want to load your image to your image to your program. To load the image, within the LoadContent method, you use a generic for loading content. Specifically, you'll tell the Content object to load a Texture2D:

myPicture = Content.Load("CGPicture");

As you can see in this line of code, the picture CGPicture is loaded into the variable you created called myPicture. Once you have your picture loaded, you need to create a rectangle to use the picture texture:

myRect = new Rectangle(10, 10, myPicture.Width, myPicture.Height);

This line of code creates a rectangle object that will be placed at coordinates 10, 10 on the window and will be the width and height of your picture. The 10, 10 starts 10 pixels over and 10 pixels down from the top left corner of the window.

Displaying an Image

With the image set and a rectangle ready to help display it, the next step is to actually draw the picture. This is done in the Draw method. To draw on the window for a game, you need to begin a sprite batch processes. You then draw your image. Finally, you image the sprite batch process. The code for drawing your image would be:

spriteBatch.Begin(); spriteBatch.Draw(myPicture, myRect, Color.White) spriteBatch.End();

The spritebach object was set up for you by default when you started the Windows game project. As you can see in the second line, you are drawing your picture using the rectangle you set up. The third parameter, Color.White, uses white light to highlight your image.

At this point, you can compile and build the game project and it will display the image you loaded as shown in figure 5. As you can see, the image is displayed 10 pixels down and 10 pixels over.

[XNA0105.jpg]

Figure 5. Running the program.

For fun, you can change the values you used to create myRect. This will move the rectangle to a different location. You can also change the third and forth parameters. This will stretch or shrink the image. For example, to double the height of the image you could multiply the myPicture.Height value by 2:

myRect = new Rectangle(50, 100, myPicture.Width, ( 2* myPicture.Height));

When you recompile and run the program, the image will now be stretched and in a different location as shown in Figure 6.

[XNA0106.jpg]

Figure 6. Stretching an image's height

Source Code

The following is the complete code listing prior to stretching the image.

Listing 1: The Game1.cs code for displaying an image:

using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Media; using Microsoft.Xna.Framework.Net; using Microsoft.Xna.Framework.Storage; namespace PictureMover { /// /// This is the main type for your game /// public class Game1 : Microsoft.Xna.Framework.Game { GraphicsDeviceManager graphics; SpriteBatch spriteBatch; private Texture2D myPicture; private Rectangle myRect; public Game1() { graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; } /// /// Allows the game to perform any initialization it needs to before starting to run. /// This is where it can query for any required services and load any non-graphic /// related content. Calling base.Initialize will enumerate through any components /// and initialize them as well. /// protected override void Initialize() { // TODO: Add your initialization logic here base.Initialize(); } /// /// LoadContent will be called once per game and is the place to load /// all of your content. /// protected override void LoadContent() { // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); // TODO: use this.Content to load your game content here myPicture = Content.Load<Texture2D>("CGPicture"); myRect = new Rectangle(10, 10, myPicture.Width, myPicture.Height); } /// /// UnloadContent will be called once per game and is the place to unload /// all content. /// protected override void UnloadContent() { // TODO: Unload any non ContentManager content here } /// /// Allows the game to run logic such as updating the world, /// checking for collisions, gathering input, and playing audio. /// /// Provides a snapshot of timing values. protected override void Update(GameTime gameTime) { // Allows the game to exit if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); // TODO: Add your update logic here base.Update(gameTime); } /// /// This is called when the game should draw itself. /// /// Provides a snapshot of timing values. protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.CornflowerBlue); // TODO: Add your drawing code here spriteBatch.Begin(); spriteBatch.Draw(myPicture, myRect, Color.White); spriteBatch.End(); base.Draw(gameTime); } } }

In the next article, I'll show how to use the game pad to move the image around on the window.



About the Author

Bradley Jones

Bradley Jones, in addition to managing CodeGuru, Brad! oversees the Developer.com Newtwork of sites including Codeguru, Developer.com, DevX, VBForums, and over a dozen more with a focus on software development and database technologies. His experience includes development in C, C++, VB, some Java, C#, ASP, COBOL, and more as well as having been a developer, consultant, analyst, lead, and much more. His recent books include Teach Yourself the C# Language in 21 Days, Web 2.0 Heroes, and Windows Live Essentials and Services.
Google+ Profile | Linked-In Profile | Facebook Page

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Where the business performance of their mobile app portfolios are concerned, most companies are flying blind. While traditional application portfolios are held to all kinds of ROI measure, the investment plan for mobile apps -- increasingly the more crucial bet -- is made by guesswork and dart-throwing. This interactive e-book investigates how mobile is driving the need for app and portfolio measures unlike any we saw in the days of web. Good mobile analytics must deliver leading indicators of user experience …

  • Is your sales and operations planning helping or hurting your bottom line? Here are 5 useful tips from the experts at Quintiq to guide you to a better S&OP strategy.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds