You add graphic files to your applications via the content pipeline in much the same way that you add other types of content (including fonts). The first step in incorporating the use of graphics into your XNA games is to import them into your XNA projects. This is done by right-clicking on the Content element located in the Solution Explorer window and then selecting Add > Existing Item option as shown in Figure 8.2.

Figure 8.2. Adding a new graphic asset to an XNA project.

The Add Existing Item – Content window then appears, as shown in Figure 8.3. Using this window you can select the graphic file that you want to import into the application.

Figure 8.3. To finish adding the graphic file, select it and click on Add.

Using this simple set of steps you can add any number of the various types of graphic file types listed in Table 8.1 to your XNA projects.

Trick

XNA makes copies of any resources you add to your projects and places them in its Content folder (e.g., in Solution Explorer). If you want to use the same resource in several XNA applications, you can optionally add a link to the resource. To do so, right-click on the Content folder and click on Add > Existing Item and then click on the down arrow located on the right-hand side of the Add button and then select the Add As Link option as shown in Figure 8.4.

Figure 8.4. XNA will follow the link to the resource when your XNA application is compiled.

A big advantage of using this option is that it allows you to modify a resource external to your XNA projects and then to incorporate the modified resource into your XNA applications the next time you compile them.

Once you have imported the graphic files your XNA game requires and the XNA content pipeline has generated an asset name for each file, you can begin making use of them within the application. In order to be able to programmatically interact with and control the use of graphics in your XNA games, you must define and associate a unique variable for each asset. For example, the following statement defines a variable named gameBall.

Texture2D gameBall;

In XNA, the graphic images that are drawn are referred to as textures. These textures are drawn on top of 2D or 3D models. In the case of the examples presented in this book, you’ll be working with a 2D model of type Texture2D. This data type manipulates two-dimensional graphics, drawing them on a flat surface area of the screen. Note that as is the case when defining any variable, you must specify the type of variable being defined. In the case of the gameBall variable, a type of Texture2D has been specified. Texture2D is a 2D image that is applied to an object.

Once you have loaded content into the content pipeline and then defined variables with which to reference them, you can load the assets, allowing you to programmatically work with them. To load an asset, you must use the Content property as shown below. The property belongs to the ContentManager class. The Content property provides access to any asset in the content pipeline. The ContentManager also supports the Load method, which provides the ability to load any asset that has been defined within your game.

gameBall = Content.Load<Texture2D>(@"Graphicsall");

The Load method is a generic method that can be used to load any asset. As such, you can use the method to retrieve and load any type of content resource that you add to your XNA application, be it a 2D or a 3D graphic or an audio file. In order to work, you must tell the method the type of resource being loaded. Note the specification of the @ character, which instructs XNA to process the path string that follows exactly as shown, beginning in the Content folder.

gameBall = Content.Load<Texture2D>(@"ball");

When you load and manipulate graphics into your games, the graphics are often referred to by game developers as sprites. A sprite then is a preloaded graphic file displayed and moved about the screen during game play. In order to control the placement and movement of sprites on the screen, you can use the Rectangle structure.

The Rectangle structure is used to store coordinate and size location for the rectangle (and therefore for its contents). To define a Rectangle, you must adhere to the following syntax.

variableName = new Rectangle(x, y, width, height);

Here, x and y represent coordinate values and width and height specify the size of the graphic in pixels. Figure 8.5 depicts the relationship of these four arguments to the placement of the sprite on the game window.

Figure 8.5. You can use the Rectangle structure to control the placement of your sprites.

Now that you have defined a local variable with which to set up a reference to a graphic image, have loaded it into memory, and have created a rectangle with which to control its placement, you are ready to display it on the screen. To do so, you need to draw it, which you can do using the SpriteBatch class. The SpriteBatch class provides you with access to methods that allow you to begin, end, and perform draw operations.

   protected override void LoadContent()
   {
       //Create a new SpriteBatch, which can be used to draw textures.
       spriteBatch = new SpriteBatch(GraphicsDevice);
   }

Drawing operations should occur with the XNA application’s Draw method. Before you can begin drawing, you must execute the SpriteBatch class’s Begin method, as shown here.

spriteBatch.Begin();

You can then use the SpriteBatch class’s Draw method to draw on the screen. The Draw method has the following syntax.

spriteBatch.Draw(Texture, Position, Color);

The draw method accepts three arguments. Texture identifies the name of a Texture2D variable that specifies the graphic image to be drawn. Position specifies the coordinate location at which the graphic image is to be drawn. Color specifies the tinting color to be applied to (or shined on) the graphic image.

When done drawing, you must execute the SpriteBatch class’s End method, as demonstrated here.

spriteBatch.End();

The DisplayGraphics application displays its graphic at actual size starting in the upper-left corner of the screen. If the graphic is smaller than the screen size, then the picture ends up displaying on a color background, as is the case of the example shown in Figure 8.6. If you want, you can stretch the images in order to make it fit the entire screen.

To stretch a graphic across the screen, you must determine the width and height of the screen. Once this information is acquired, you can use it to resize the rectangle within which the image is displayed.

To capture width and height information you can use the GraphicsDevice class’s Viewport structure’s Width and Height properties to retrieve the application window’s width and height, as demonstrated here:

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

As you can see, this statement sets the coordinates for the rectangle, starting at coordinates 0, 0, with a width set equal to the width of the screen and a height set equal to the height of the screen. (See Figure 8.7.)

Figure 8.7. Retrieving screen width and height.

To better understand how to fill the entire application window with a graphic, let’s create a new XNA Windows application. This new application will be a modified version of the DisplayGraphics application. Begin by highlighting and copying all of the code statements that make up the DisplayGraphics application’s Game1.cs file. Now, create a new XNA Windows application and name it Picture Viewer. Next, add Kittens.jpg to the application’s content pipeline. Now paste the code statements you copied from the DisplayGraphics application into the Game1.cs file for your new application, replacing all existing statements. Next, change the application’s namespace statement from

namespace DisplayGraphics

to

namespace Picture_Viewer

At this point, the Picture Viewer application operates identically to the DisplayGraphics application. Now it is time to change that, modifying the application so that it displays the picture in full screen. To make this happen, all you need to do is modify the application’s Initialize() method. The changes to be made to the Initialize() method are shown below in bold.

protected override void Initialize()
{
    int PicWidth; //Define variable used to specify picture width
    int PicHeight; //Define variable used to specify picture height

    //Set picture width and height to be the size of the window
    PicWidth = GraphicsDevice.Viewport.Width;
    PicHeight = GraphicsDevice.Viewport.Height;

    //Instantiate the rectangle
    DisplayRect = new Rectangle(0, 0, PicWidth, PicHeight);

    base.Initialize();
}

The first two statements in the Initialize() method define a pair of variables named PicWidth and PicHeight. The next two statements assign the width and height of the application window to the PicWidth and PicHeight variables. This data is retrieved using the Width and Height properties belonging to the GraphicsDevice class’s Viewport structure. The last change you need to make to the Initialize() method is to modify the statement that instantiates the Rectangle object. As you can see, this statement has replaced width and height arguments of 640 and 480 with the PicWidth and PicHeight variables (e.g., the width and height of the application window).

Figure 8.8 shows how the Picture Viewer application looks when executed. Now the picture takes up the entire application window.

Figure 8.8. Now the application uses the graphic to fill the entire window.

Other than displaying a window with an interesting background, there is not much to this application to keep the user interested. Let’s make things more interesting by turning the Picture Viewer application into an electronic picture viewer that displays an assortment of different pictures at two-second intervals. To set this up, you need to make a number of changes to the Picture Viewer application.

For starters, you must add a couple of new picture files to the application. You’ll find copies of two picture files named Newborns.jpg and Pup.jpg available for download from this book’s companion web page located at www.courseptr.com/downloads. Once you have updated the application’s content, you can start making the required code modifications.

The first set of changes to be made are to the application’s game world data and as such are made at the beginning of the program, at the start of the Game1 class definition. These changes are shown below in bold.

public class Game1 : Microsoft.Xna.Framework.Game
{
    GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;

    int timer;         //Used to control timer execution

    //Define texture variables used to display graphics

    Texture2D Kittens;
    Texture2D Pup;
    Texture2D Newborns;
    Texture2D SelectedPic;

    //Define rectangle with which to display graphics
    Rectangle DisplayRect;
    .
    .
    .

As you can see, a number of new code statements have been added. The first of these statements define an integer variable named timer, which the application will use later as part of an internal timer mechanism that controls the display of pictures at two-second intervals. The rest of the code statements define a series of variables. These first two variables (Pup and Newborns) will be used to reference the additional two graphic files. The third variable (SelectedPic) will be used to specify which of the application’s graphics should be displayed at any given moment in time.

The next set of code changes need to be made to the Initialize() method. These changes are highlighted below in bold.

protected override void Initialize()
{
    int PicWidth;  //Define variable used to specify picture width
    int PicHeight; //Define variable used to specify picture height

    timer = 0;   //Set timer to zero
    SelectedPic = Kittens; //Specify the default picture

    //Set picture width and height to be the size of the window
    PicWidth = GraphicsDevice.Viewport.Width;
    PicHeight = GraphicsDevice.Viewport.Height;

    //Instantiate the rectangle
    DisplayRect = new Rectangle(0, 0, PicWidth, PicHeight);

    base.Initialize();
}

The first highlighted statement assigned a starting value of 0 to the timer variable. The second highlighted statement sets the value of SelectedPic to the value assigned to Kittens, specifying the image that is initially displayed by the application.

Now that you have defined the variables the application will use to reference the application’s graphic files, you need to modify the LoadContent() method so that it loads the two additional graphic files into memory. The code statement changes that make this happen are highlighted below in bold.

protected override void LoadContent()
{
    //Create a new SpriteBatch, which can be used to draw textures.
    spriteBatch = new SpriteBatch(GraphicsDevice);

    //Load the application's graphic files
    Kittens = Content.Load<Texture2D>(@"Kittens");
    Pup = Content.Load<Texture2D>(@"Pup");
    Newborns = Content.Load<Texture2D>(@"Newborns");
}

In order to control the timing of the application so that it displays a different picture every two seconds, you need to implement a timer mechanism, making use of the timer variable, which you just added to the application’s game data. To do so, modify the Update() method as shown here.

protected override void Update(GameTime gameTime)
{
    // Allows the game to exit
    if (GamePad.GetState(PlayerIndex.One).Buttons.Back ==
        ButtonState.Pressed)
        this.Exit();

    //Switch picture every two seconds
    switch (timer)
    {
           case 0:
               SelectedPic = Kittens;
               break;
           case 120:
               SelectedPic = Pup;
               break;
           case 240:
               SelectedPic = Newborns;
               break;

           case 360:
               timer = -1;
               break;
    }
    timer++; //Increment value by one

    base.Update(gameTime);
}

As you can see, these statements test the value assigned to the timer variable (defined at the beginning of the program and assigned an initial value of 0). Using a switch code block, four case statements are specified that change the value assigned to SelectedPic when the value of time is equal to 0, 120, 240, and 360, respectively. The value assigned to SelectedPic determines which image file is displayed on the screen.

Remember that by default the Update() method executes 60 times a second. So timer will be equal to 0 when the application first starts. As a result, the value of SelectedPic is set to Kittens. At 2 seconds (e.g., when timer = 120) SelectedPic is set to Pup. At 4 seconds, the value of SelectedPic is set to Newborns. In addition, the value of timer is reset back to zero, restarting the sequence again. Also note that the value of time is automatically incremented by 1 at the end of the Update() method.

The last change you need to make is highlighted below in the Draw() method.

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    //Draw the currently specified picture on the application window
    spriteBatch.Begin();
    spriteBatch.Draw(SelectedPic, DisplayRect, Color.White);
    spriteBatch.End();

    base.Draw(gameTime);
}

Instead of hardcoding the variable name of the picture to be displayed (e.g., Kitten, Pup, or Newborns), the selectedPic variable is used within the sprite-Batch.Draw() statement. This way the application displays whichever picture the value of selectedPic has been set to.

Once you have made all of the changes that have been outlined, you are ready to test your new electronic picture viewer. Figure 8.9 shows a series of three screen shots, showing each of the three pictures displayed by the application as it executes.

Figure 8.9. The Electronic Picture Viewer application displays a different picture every two seconds.