What makes a game great aside from the interesting game play, are the static data that makes the game dynamically fun.  Pictures, fonts, sounds are all important elements that can make or break a game.  These static data are called assets and are used by importers, processors, content loaders. 

  1. Importers – Applied at compile time, they convert assets from their original formats to a small set of predefined formats.
  2. Processors – Applied after importers and also at compile time.  Purpose is to convert the standardized data supplied by the importers into managed objects. 
  3. Content Loaders – Applied at run time and finalizes the object connection.

These steps will help with reducing the game’s loading time as the content is serialized at compile time. 


XNA Game studio supports 2D asset formats .bmp, .dds, .dib, .hdr, .jpg, .pfm, .png, .ppm, and .tga. 

PNG is the recommended format as many content generation tools support this. 


Game assets are stored in the Content project when a XNA Game Studio 4.0 project is created.  

Adding an asset is a simple process: right-click Content, select Add, click Existing Item, and then select an existing image file (for instance, hills.png).

With the assets in place, now load the asset into the game. 

The asset needs to be stored in a variable there first we define a field to store the asset in the game class.  The asset is serialized as Texture2D object and therefore the variable type should be Texture2D as well.

Texture2D hills;

The base class in the game project has a LoadContent virtual method which provides a location to load the assets and initialize the fields.  By staging where you wish to load the assets in a game, able to save on initialization times and create a better experience. 

loads the given asset, and stores the corresponding managed object in the class field.


protected override void LoadContent()


    // Create a new SpriteBatch, which can be used to draw textures.

    spriteBatch = new SpriteBatch(GraphicsDevice);


    // TODO: use this.Content to load your game content here

    hills = this.Content.Load<Texture2D>("hills");


Images need to be incorporated to their correct hardware display resolution.  In the XNA framework, the back buffer allows the scaling to be done by the hardware of the target device. 

Configuring the back buffer for maximum resolution support by Windows Phone 7


if (this.Window.CurrentOrientation == DisplayOrientation.Portrait)


    graphics.PreferredBackBufferWidth = 480;

    graphics.PreferredBackBufferHeight = 800;




    graphics.PreferredBackBufferWidth = 800;

    graphics.PreferredBackBufferHeight = 480;


The ability to support all types of device orientation is set by this piece of code:


graphics.SupportedOrientations = DisplayOrientation.LandscapeLeft | DisplayOrientation.LandscapeRight | DisplayOrientation.Portrait;


Drawing the picture onto the device


float scale = Math.Min(graphics.GraphicsDevice.Viewport.Width / hills.Width, graphics.GraphicsDevice.Viewport.Height / hills.Height);






this.spriteBatch.Draw(hills, // Texture to render

                      new Vector2(0, 0), // Destination left top position


                      Color.White, // Texture tint color

                      0, new Vector2(0, 0), // Origin left top position

                      scale, // Scale





Notice how we calculate the "scale" value at the top of the code sample. We want to scale the image as much as possible while keeping the entire image within the display bounds.


Windows Phone 7 includes a hardware image scaler. This allows XNA games to be written for any desired back buffer resolution without considering the physical screen size. The scaler automatically fits the drawing into the target display. It is worth mentioning that the hardware image scaler's work does not consume CPU time.

As previously indicated, we intend to show our image in full-screen mode with the best possible quality and without distortion. The following code fragment shows how we can implicitly use the hardware image scaler.


if (this.Window.CurrentOrientation == DisplayOrientation.Portrait)


    graphics.PreferredBackBufferWidth = 480 / 2;

    graphics.PreferredBackBufferHeight = 800 / 2;




    graphics.PreferredBackBufferWidth = 800 / 2;

    graphics.PreferredBackBufferHeight = 480 / 2;


While we have halved each of the back buffer’s dimensions, the size of the rendered image is unaffected because the scaler resizes it to fit the device's display.