Show Me Something on Screen (XNA Game Studio 4.0 Programming)

In next topic,"Getting Started," you spent some time creating projects and saw them run with nothing showing except a solid colored background. Let’s expand on those projects and show new and hopefully interesting things instead! Start by creating a new game project in Visual Studio and add a new variable to the list of variables the project already has defined, as shown in the following:

GraphicsDeviceManager graphics; SpriteBatch spriteBatch; Texture2D texture;

Texture2D is a class that holds any images you might want to render on screen. In later topics, you see how this is also used to give detail to 3D models, but for now, it is simply a data store for the image we want to show in our game. Also notice the other two variables declared by default, namely the SpriteBatch and GraphicsDeviceManager.

The GraphicsDeviceManager is discussed in more detail in later topics, but the SpriteBatch object is what you use to do the actual rendering.This object is discussed in depth throughout this topic, but before you learn about the intricacies of rendering 2D objects, first, you shouls just get something showing on the screen.

You need an image to draw to the screen. In your Visual Studio solution, notice that you have two projects: your code project where your game is and a content project next to it.This content project is where you add the images you want to draw and it is discussed in more detail in later topics. Right-click your content project now, and then choose Add->New Item. Feel free to pick an image for your computer (ensure the image is a common image format such as jpg, bmp, png, or gif), or use one from the downloadable examples.The example included with the downloadable examples uses the file gla-cier.jpg, which is used in some of the samples you can download for Game Studio 4.0.


Content Item Properties

Selecting an item in a content project (such as the image you just added) and viewing its properties show you many different options depending on the type of item you have selected. For now, the only one that is important is Asset Name, which, by default, is the name of the file you’ve added to the content project without the extension. In the case of the code in the downloadable examples, it is glacier. The other properties are explained in more detail in later topics.

Getting something on screen is remarkably easy from here. First, you need to scroll through your project’s game1.cs file and find the LoadContent method. As the name implies, this is where you load the content for your game, so add the following line of code to that method:

tmpD-8_thumb

If you used a different image other than the glacier image this example uses, you need to enter that filename (without the extension) instead. This takes the image data from your picture and loads it into the Texture2D object you specified.The Content object is an instance of the ContentManager, which was automatically created by the new project. Again, the content manager is discussed in more depth later, but for now, it is the thing that loads your content.

All that is left is to draw your image on the screen. Look through your project to find the Draw method and replace the method body with the following code:

tmpD-9_thumb

The first and last lines are the same as what is already in your project, whereas the middle three lines are where the actual drawing of your image is. Run the project and you should see an image similar to the one shown in Figure 2.2 if you used the glacier image provided with the downloadable examples or an image you chose that covered the entire window if you did not use the glacier image.

A 2D image drawn on screen

Figure 2.2 A 2D image drawn on screen

A theme you will notice throughout this topic is how easy it is to do simple operations using Game Studio 4.0.This is an example of this simplicity. With a mere five lines of code, you’ve done more work than you probably realize, rendering your image on to the screen.With the instant gratification of seeing something, now it’s time to take a step back and see what has gone into rendering this picture.

Next post:

Previous post: