Microsoft XNA Game Studio 3.0 : Displaying Images - Using Resources in a Game (part 4) - Filling the Screen

4/18/2011 11:48:26 AM

4. Filling the Screen

It would be nice if the image that you display could exactly fill the screen. You’ve used values that let you see the picture, but the picture does not completely cover the display, and if you run the program on differently configured systems, you notice that the picture takes up a different amount of space on the screen. It turns out that filling the screen is easy to do. Your program can ask the XNA environment the width and height of the screen and use this to set the size of the display rectangle, as follows:

jakeRect = new Rectangle(
    0,    // X position of top left corner
    0,    // Y position of top left corner
    GraphicsDevice.Viewport.Width,   // rectangle width
    GraphicsDevice.Viewport.Height); // rectangle height

I’ve changed the layout of my call to construct the jakeRect variable. Rather than put everything on one line, I’ve spread the call out a bit and added some comments. This makes it easier to see what’s happening. The code is constructing a Rectangle instance. When you do this, you can feed information into the construction process to set up the value. This particular call is feeding in the position of the top left corner in the form of x and y and the width and height of the rectangle that is required. I can get the width of the screen by using the following code:

GraphicsDevice.Viewport.Width

This looks a bit scary but is easy to understand. It’s rather like the way that we explain where things are. My office is on the third floor of the Robert Blackburn Building on the Hull campus of the University of Hull. You could express this information as follows:

HullCampus.RobertBlackburn.ThirdFloor.RobMiles

The Hull campus contains a number of buildings, the Robert Blackburn Building contains a number of floors, and so on. You can now find your way to my office by starting at the Hull campus, looking for the Robert Blackburn Building, going to the third floor, and then finding the office with "Rob Miles" written on the door. The identifier is GraphicsDevice.Viewport.Width, which means, "Start at the GraphicsDevice variable, go to the Viewport, and then get the Width field from it." The GraphicsDevice variable is the Graphics Device manager for your program. It is created by XNA and provides methods and data that you can use in your program (you’ve already used the Clear method to clear the screen). The GraphicsDevice contains a Viewport, and so on. Part of the skill of using XNA is knowing where these data items are.

4.1. Intellisense

You can find your way around the XNA framework by using the Intellisense feature, which is part of XNA Game Studio. Whenever you type an identifier into the editor, it finds the variable that the identifier represents and offers you options based on that identifier. These can save you a lot of typing. Figure 6 shows how it works. I have just typed the identifier graphics followed by the period that separates it from the next item. Intellisense is showing me all the possible items that are available. I can scroll down the list, select the one I want by pressing Enter, and then move on to the next item.

Figure 6. Intellisense for the Graphics Device manager

You can move quickly up and down the list of items by typing the first few letters of the name of the selection you want. Intellisense also shows you brief help snippets about the items that you can select. It makes writing programs much easier and reduces the amount you have to remember. The Great Programmer doesn’t think she could write programs without it.

Note:

If you are using an Xbox that is connected to a TV, you might notice that not all the picture is visible. This is because TVs use an "overscanned" display, where only the middle part of the picture is displayed.

Game Idea: Color Nerve with a Picture

Now that you can display pictures, you can improve your Color Nerve game and display a picture rather than a blank background. This makes the game much more fun, especially if a familiar picture is used.

The key to this is the way that you select the color you want to use to "light" any sprite that you draw:

spriteBatch.Draw(jakeTexture, jakeRect, Color.White);

When drawing this image, I used a white light so that the colors look natural. You can use any color of light, and XNA processes the image accordingly. If you want the image to be drawn more dimly, you can draw with the color gray; if you want to tint the image, you can simply change the color. You can use any color that you can create to tint your sprite, as follows:

protected override void Draw(GameTime gameTime)
{
    Color textureColor;
    textureColor = new Color(redIntensity,greenIntensity,blueIntensity);

    spriteBatch.Begin();
    spriteBatch.Draw(jakeTexture, jakeRect, textureColor);
    spriteBatch.End();

    base.Draw(gameTime);
}

Rather than using white as the drawing color, this version of Draw uses the color it creates based on the red, green, and blue intensity values.

You can use the same principle to make a picture mood light; this works especially well if you use a black-and-white image or one with really strong colors in it. You can also make a picture recognition game here, where the aim of the game is to be the first one to recognize a picture as you slowly make it brighter.