Microsoft XNA Game Studio 3.0 : Displaying Images - Using Resources in a Game (part 2) - Positioning Your Game Sprite on the Screen

2. Positioning Your Game Sprite on the Screen

In computer gaming terms, you can think of the image of Jake as a sprite. A sprite is a flat, preloaded image that is used as part of a computer game. Sprites can be large, such as background sky, or smaller, such as spaceships and missiles in a space shooter game. From the point of view of XNA, a sprite is an image resource along with location information that tells XNA where to draw the image. This means that you need a way to tell XNA where on the screen you want to put your sprite. You do this by using yet another XNA type, the Rectangle. This holds information about the position and size of a rectangle. You don’t need to worry about how a rectangle works at the moment; you need only know how to create one and set the size and position of it. Figure 4 shows how you use a rectangle to express where on the screen you want Jake to be drawn.

Figure 4. Placing a drawing rectangle on the screen

The position of the rectangle is given by the coordinates of its top left corner. You can regard the screen as a piece of graph paper. You express a position on the screen by giving an x coordinate value (the distance across the screen from the left) and a y coordinate value (the distance down the screen from the top). This means that the position with the coordinate of (0, 0) is the top left corner. Note that this is not quite the same as graphs that you may have drawn in the past. In a conventional graph, the y value increases as you go up the page. In computer graphics, the y value increases as you move down the page.

In Figure 4-14, you can see that the top left corner of the Jake sprite is at position (30, 20). This means 30 steps across and 20 down. The units are called pixels. Pixel, an abbreviation for "picture element," refers to the smallest dot that can be drawn on the screen. The Xbox can drive displays with a range of different sizes, so the pixel at position (30, 20) may be a different physical distance across the screen, depending on the type of screen being used. Later, you’ll find out how to write games that automatically scale themselves to fit any screen.

A rectangle is also used to give the width and height of the sprite. In Figure 4-14, I am drawing the texture in an area that is 600 pixels wide and 450 pixels high. The good thing about this is that I don’t have worry about the original size of the image; XNA simply scales the image to fit in a rectangle that size. Later, you’ll have some fun modifying the size. The rectangle where Jake is drawn is another item in the game world for the program, as shown here:

// The Game World

Texture2D jakeTexture;
Rectangle jakeRect;

The actual Rectangle you are going to use is created using new:

jakeRect = new Rectangle(30, 20, 600, 450);

This code sets a Rectangle variable to one with the position and dimensions that you need. When the rectangle is created, it is passed the x, y, width, and height values so that these can be held within the rectangle structure. This means that if you ever want to move the image or change its size on the screen, you need to change only one of the values that is held in the rectangle. These values are members of the Rectangle structure. In C#, members that hold values are called fields.

You can think of a field as a variable that has been declared inside a structure or class. In the case of your Game1 class, the game world data that you created (for example, the color intensity values for your mood light) are fields of that class. Later, you’ll see how to get hold of individual fields inside the Rectangle so that you can change its size and position.

The Rectangle needs to be created when the game program starts. You could do this in the LoadContent method, but XNA provides another place where it is more sensible, namely, the Initialize method. This is called when the game starts up. If all these methods are confusing, think about what happens when you organize a party. This takes a number of steps:

1. Set up the tables and chairs.

2. Fetch the food and drink.

3. Repeatedly play music and dance.

4. Tidy up afterward.

When an XNA game runs, it goes through the same process:

1. Set things up: Initialize

2. Load game content: LoadContent

3. Repeatedly update the game and draw the display: Draw and Update

4. Free up all the content: UnloadContent

When the game ends, the XNA system calls the UnloadContent method. You can add statements to that method to release resources explicitly that your game has used, but for now, you can leave this out.

In fact, you need not provide code for all these methods; they are there only so that you can take control at various points of the game’s life cycle. The code that you put in the Initialize method needs to create a Rectangle that describes the destination of the draw operations:

protected override void Initialize()
{
    jakeRect = new Rectangle(30, 20, 600, 450);
    base.Initialize();
}