This Lesson picks up where Lesson 10 left off.

Source code after completing this lesson: http://www.bluerosegames.com/brg/XnaLesson11.zip

In all of the lessons so far, when drawing sprites, we're drawing them at the same scale as the original image. There are many cases where this is not desirable. Let's say you want it to look like one object is farther way than another, or you want to do some animation effects that involve an object getting smaller or larger. Textures use a lot of system resources, and it's not desirable to have to have the same texture loaded at a few different sizes in order to produce this effect.

Or maybe you want to draw a background image for your game and stretch it to fit the window. This is the example we'll focus on for this lesson.

First we need to add the background image to the solution. Save the image below as xna101_background.png and add it to your solution. Please forgive the free advertising message :)

The background image, even though it takes up the whole game surface, is still a sprite, and will be loaded and drawn exactly like our other sprites, except for a slight change to scale the sprite to fit the screen. So add a declaration for the background Texture2D object immediately after the declaration for the ball2 object in the Game1 class. The declaration will look like this:

Texture2D background;

Now we need to load the image file into the Texture2D object. To do this, add the following line after the other content.Load() call in Game1.LoadGraphicsContent():

background = content.Load<Texture2D>("xna101_background");

Now to draw it. The background needs to be drawn first, or you won't be able to see the other sprites. In order to scale the sprite as we draw it, we need to use a different version of the SpriteBatch.Draw method, which instead of taking a Vector which specifies the X and Y location of the destination's upper right corner, it takes a Rectangle object which specifies X, Y, Width and Height of the bounding rectangle of the destination sprite. By specifying the width and height, the SpriteBatch object knows to scale the sprite from its original size to the size specified. So in the Game1, declare a Rectangle object which will hold the destination information.

Rectangle backgroundRectangle;

and in the Game1.LoadGraphicsContent() method, after the content.Load() calls, add the following:

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

Now in Draw() method, immediately after the spriteBatch.Begin() call, add the following:

spriteBatch.Draw(background, backgroundRectangle, Color.White);

Now run the program again. The background should be scaled to fit the game surface.

You'll notice that it's pretty blurry. This is a side effect of scaling the image to a size larger than the original. Typically when scaling sprites, I like to start with an image that is equal to or larger than the largest size it will have on the screen, and scale it smaller. This will make for a better looking image.

Note that the width and the height of the destination rectangle don't need to be proportional to the original image. You can stretch the image's proportions by any amount vertically or horizontally.