XNA Game Studio 3.0 : Playing with Images

Up until now, the image drawing that you performed simply displays a texture on the screen in the same place each time the Draw method is called. It would be really nice to be able to move the picture around the screen and maybe even zoom in on it. You might even find that these abilities give you an idea for a game.

1. Zooming In on an Image

When you wrote your image display program, you created a variable called jakeRect of type Rectangle. This rectangle was the destination of the draw action. The size of the rectangle was set to the full screen in the Initialize method, as follows:

protected override void Initialize()
{
    gameSpriteBatch = new SpriteBatch(graphics.GraphicsDevice);
    jakeRect = new Rectangle(
        0,    // X position of top left hand corner
        0,    // Y position of top left hand corner
        GraphicsDevice.Viewport.Width,   // rectangle width
        GraphicsDevice.Viewport.Height); // rectangle height

    base.Initialize();
}

When the Draw method ran, it drew the image texture in the jakeRect rectangle:

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

    gameSpriteBatch.Begin();
    gameSpriteBatch.Draw(jakeTexture, jakeRect, Color.White);
    gameSpriteBatch.End();

    base.Draw(gameTime);
}

Now you change the way that the picture is drawn by changing the values in jakeRect as the program runs. XNA can resize the picture for you so that you can move and scale your picture very easily. You start by adding the following Update method to the display program:

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

    jakeRect.Height++;
    jakeRect.Width++;

    base.Update(gameTime);
}

					  

Each time the Update method is called, the width and height fields of the rectangle are increased by one. These fields are the data members inside the rectangle that represent the rectangle dimensions. You get a hold of a field in an object by giving the identifier of the variable a period character (.) and then the name of the field you wish to use. Remember that this is the rectangle that describes where you want Jake to be drawn, so changing the size of this rectangle changes the size of the image on the screen.

Microsoft XNA does not care about the fact that you’re "drawing off the screen" and simply shows you the part of the picture that fits on the screen. Figure 1 shows what the screen looks like after a program using this Update method has been running for a few seconds.

If you leave the program running a very long time, it only zooms in on a particular blade of grass, but it does show how you can change the way that images are placed on the screen.

Figure 1. Stretching Jake

Game Idea: Super Zoom Out

You can use this zooming ability to create a game. Rather than starting with a picture and then zooming in on it, you could start with a zoomed image and slowly pull back (zoom out) to reveal more and more of the picture. The first person to correctly identify the picture wins the game. This game is quite fun, particularly if the images are ones that are familiar to the players.