Getting Started with XNA : Your First XNA Project (part 1)

1. Creating the Project

To get things started, fire up Visual Studio 2010 and select to create a new XNA Game Studio 4 Windows Phone Game project, as shown in Figure 1. Give it a name and optionally uncheck the "Create directory for solution" box (Visual Studio creates a lot of nested directories if this is checked); then click OK to create the project.

Figure 1. Creating a new Windows Phone Game XNA project

The project will be created by Visual Studio and opened in the IDE. The initial window that you will be presented with after this is completed is the code window for the Game1.cs file, which, as you will see, already contains a fair amount of code.

You can, in fact, run the project without doing anything more. The emulator will launch, and after its initialization is complete (you may need to be a little patient), the game will start. It doesn't do very much; it just displays an empty blue screen.

The blue screen is actually of some use, though: seeing the screen turn blue tells you that the program actually is running and is managing to render to the screen. Having a default that isn't black lets you know that the project is operating normally and hasn't just crashed with a blank screen.

Now let's put something on the screen other than just a solid color.

2. Adding Some Content

Click the Stop Debugging button in Visual Studio to return your project to edit mode. Right-click the Content project node; select Add and then Existing Item, as shown in Figure 2.

Figure 2. Adding an existing item to the Content project

In the file browser window that appears, choose a graphic file that you wish to display on the screen. Try to pick something that will actually fit on the screen.

Once this has been done, the graphic file will appear within the Content project inside Solution Explorer, as shown in Figure 3.

Figure 3. The Content project with a graphic file added

3. Displaying the Graphic

With our graphic in place, we can now amend the code to display it on the screen. This is very simple and consists only of modifications to Game1.cs, so ensure that it is open in the code editor.

First of all, we need to add a class-level object into which our graphic image will be stored. The object type for this is Texture2D, and so we declare it, as shown in Listing 1, just below the existing spriteBatch declaration.

Example 1. Declaring the Texture2D object for the graphic

private Texture2D _smileyTexture;

The next step required is to load the graphic into the variable that we have created. This is performed in the class's LoadContent procedure, which you'll find about halfway through the source code. In addition to the existing code, we load the texture by calling the Content.Load function, as shown in Listing 2.

Example 2. Loading the graphic file into the Texture2D object

/// <summary>
    /// LoadContent will be called once per game and is the place to load
    /// all of your content.
    /// </summary>
    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);

        // Use this.Content to load your game content here
        _smileyTexture = Content.Load<Texture2D>("SmileyFace");
    }

The Content.Load function uses .NET's generics feature to allow us to specify its return type. In this case, we want it to return a Texture2D object, and so we specify this type in the angle brackets in the function call. We then pass the parameter SmileyFace. Note that this doesn't exactly match the file name that we added to the Content project because the file extension is missing. The reason for this is that the Content project automatically assigns an asset name to each file that is added, defaulting this to the file name without its extension. You can see this by selecting the graphic file in the Content project and examining its properties, as shown in Figure 4. The Asset Name property is editable and can be modified if you wish.

Figure 4. The properties for the graphic file in the Content project

The project is now loading the graphic, and so the final step is to display it on the screen. This is achieved by adding a few new lines of code to the Draw function at the bottom of the source listing. The modified function is shown in Listing 3.

Example 3. Drawing the graphic file to the screen

/// <summary>
    /// This is called when the game should draw itself.
    /// </summary>
    /// <param name="gameTime">Provides a snapshot of timing values.</param>
    protected override void Draw(GameTime gameTime)
    {
        // Clear the background
        GraphicsDevice.Clear(Color.CornflowerBlue);

        // Set the position for the sprite
        Vector2 position = new Vector2(100, 100);

        // Begin a sprite batch
        spriteBatch.Begin();
        // Draw the sprite
        spriteBatch.Draw(_smileyTexture, position, Color.White);
        // End the sprite batch
        spriteBatch.End();

        // Let the base class do its work
        base.Draw(gameTime);
    }

					  

We first declare a position for the graphic using a Vector2 structure. This structure is very important in XNA and we'll look at it in more detail later on. Then we use the spriteBatch object that the default code created for us to begin drawing a series of graphics to the screen. The spriteBatch object is then used once again to actually draw the graphic, specifying the graphic that we wish to draw, the position to draw it at, and the color to draw. The color is specified as white in this case; we will look at the behavior of this parameter shortly. Once the image is drawn, we call the spriteBatch.End method to tell XNA that we have finished drawing.

You may also notice the call to GraphicsDevice.Clear in this listing, passing in the parameter Color.CornflourBlue. It is this line of code that is responsible for the blue background when the project is running. You can change this color to anything you wish if you tire of the default color.

Example 4. Setting the back buffer size and orientation

// Set backbuffer size and orientation
        graphics.PreferredBackBufferWidth = 480;
        graphics.PreferredBackBufferHeight = 800;

Once the code has been added to your project, run it; if all is well you should see your graphic presented on the screen, as shown in Figure 5.

Figure 5. Displaying the graphic on the phone screen

This is obviously a trivial example (although one we will build on), but it hopefully demonstrates the tiny amount of effort required to get a graphic to display on the screen.