Share via

How to create your first XNA Game Studio 4.0 app for Windows Phone 8

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

This topic provides step-by-step instructions to help you create your first XNA Game Studio 4.0 app for Windows Phone. You can also download the complete Hello XNA Framework sample.

XNA Game Studio 4.0 apps that target Windows Phone OS 7.1 remain fully supported and continue to run on Windows Phone 8 devices. However you cannot compile or upgrade XNA Framework apps to target Windows Phone OS 8.0. For more information about support for XNA Framework apps in Windows Phone 8, see XNA Framework and app development for Windows Phone 8.

Note

The steps in the following procedure are for Visual Studio Express 2012 for Windows Phone. You may see some variations in menu commands or window layouts if you have already customized the layout or menus in Visual Studio, or if you are using Visual Studio Professional or higher.

This topic contains the following sections.

Create the project

The first step in creating an XNA Game Studio 4.0 app for Windows Phone is to create a new project.

To create the project

  1. Make sure you have downloaded and installed the Windows Phone SDK. For more information, see Get the SDK.

  2. Launch Visual Studio from the Windows Start screen. If the Registration window appears, you can register the product, or you can temporarily dismiss the prompt.

  3. Create a new project by selecting the FILE | New Project menu command. The New Project window appears.

  4. In the list of Visual C# templates, in the XNA Game Studio 4.0 group, select the Windows Phone Game (4.0) template. At the bottom of the New Project window, you can leave WindowsPhoneGame1 as the project’s Name.

  5. Click OK. The Windows Phone platform selection dialog box doesn’t appear because you can only create XNA Framework apps that target Windows Phone OS 7.1.

  6. A new project is created, and Game1.cs opens in the Visual Studio designer.

Add the content

The next step is to add a graphic object and a sound file to your solution.

To add the content

  1. Make sure Solution Explorer is visible in Visual Studio. If it’s not visible, select VIEW | Solution Explorer to make it appear.

  2. In Solution Explorer, notice the second project that was created to hold content for the app. If you kept the default project name, this content project appears as WindowsPhoneGame1Content (Content). In this procedure you add content files to this project.

  3. The first item to add is a graphic file. You can use PhoneGameThumb.png, which was added to the new project by default, or you can use your own graphic file. For best results, the graphic object should be approximately 64 x 64 pixels in size.

    In Solution Explorer, right-click the project node for the content project, and select Add | Existing Item. In the Add Existing Item dialog box, select Image Files in the list of file types. Browse to your graphic file, select it, and click Add. The graphic object is added to the project.

    Select the graphic file in Solution Explorer. Then look at the file properties in the Properties window. Note that the Asset Name of the graphic object is PhoneGameThumb.

  4. The next item to add is a sound file. This example uses the Windows Ding.wav sound file that ships with Windows. You can also use your own sound file. A very short sound about 1 second long is preferred.

    In Solution Explorer, right-click the project node for the content project, and select Add | Existing Item. In the Add Existing Item dialog box, select Audio Files in the list of file types. Browse to C:\Windows\Media, select Windows Ding.wav, and click Add. The sound file is added to the project.

    Select the sound file in Solution Explorer. Then look at the file properties in the Properties window. Note that the Asset Name of the sound file is Windows Ding.

    The following illustration shows the content project with the graphic file and sound file.

Add the code

In this step, you add the code that moves two graphic objects around the screen, detects when the graphic objects collide, and plays a sound when the graphic objects collide. The framework of a game app has been provided for you by default in the new project. In the next steps you’ll complete the following tasks:

  • Add some variables.

  • Load the graphic objects and sound assets in the LoadContent method.

  • Draw the graphic objects on the screen in the Draw loop.

  • Update the position of the graphic objects and detect collisions in the Update loop.

To add the code

  1. Copy and paste the following variables into the Game1 class. Place the variables after the existing SpriteBatch spriteBatch variable declaration. There are pairs of variables to track each graphic object, its position, its speed, its height, and its width. There is also one variable to reference the sound effect.

            Texture2D texture1;
        Texture2D texture2;
        Vector2 spritePosition1;
        Vector2 spritePosition2;
        Vector2 spriteSpeed1 = new Vector2(50.0f, 50.0f);
        Vector2 spriteSpeed2 = new Vector2(100.0f, 100.0f);
        int sprite1Height;
        int sprite1Width;
        int sprite2Height;
        int sprite2Width;

        SoundEffect soundEffect;

  2. Replace the LoadContent method with the following lines of code. This code loads the graphic object twice. The graphic objects get their initial positions on the screen, and their height and width are calculated.

    protected override void LoadContent()
{
    // Create a new SpriteBatch, which can be used to draw textures.
    spriteBatch = new SpriteBatch(GraphicsDevice);

    texture1 = Content.Load<Texture2D>("PhoneGameThumb");
    texture2 = Content.Load<Texture2D>("PhoneGameThumb");

    soundEffect = Content.Load<SoundEffect>("Windows Ding");

    spritePosition1.X = 0;
    spritePosition1.Y = 0;

    spritePosition2.X = graphics.GraphicsDevice.Viewport.Width - texture1.Width;
    spritePosition2.Y = graphics.GraphicsDevice.Viewport.Height - texture1.Height;

    sprite1Height = texture1.Bounds.Height;
    sprite1Width = texture1.Bounds.Width;

    sprite2Height = texture2.Bounds.Height;
    sprite2Width = texture2.Bounds.Width;
}

  3. Replace the Draw method with the following lines of code. This code draws each graphic object on the screen at its current position. Each graphic object gets a different BlendState so that they appear different.

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

    // Draw the sprite.
    spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend);
    spriteBatch.Draw(texture1, spritePosition1, Color.White);
    spriteBatch.End();

    spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.Opaque);
    spriteBatch.Draw(texture2, spritePosition2, Color.Gray);
    spriteBatch.End();

    base.Draw(gameTime);

}

  4. Replace the Update method with the following lines of code. This code also adds the UpdateSprite and CheckForCollision methods. The new code in the Update method updates the position of each sprite in the UpdateSprite method. The UpdateSprite method also checks to see whether the sprite has hit the side of the screen. If the sprite has hit the side of the screen, the code changes direction of the sprite’s movement. Finally, the Update method calls the CheckForCollision method, which checks to see whether the bounds of the two graphic objects intersect with each other. If their bounds intersect, the sound file is played.

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

    // Move the sprite around.
    UpdateSprite(gameTime, ref spritePosition1, ref spriteSpeed1);
    UpdateSprite(gameTime, ref spritePosition2, ref spriteSpeed2);
    CheckForCollision();

    base.Update(gameTime);
}

void UpdateSprite(GameTime gameTime, ref Vector2 spritePosition, ref Vector2 spriteSpeed)
{
    // Move the sprite by speed, scaled by elapsed time.
    spritePosition +=
        spriteSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;

    int MaxX =
        graphics.GraphicsDevice.Viewport.Width - texture1.Width;
    int MinX = 0;
    int MaxY =
        graphics.GraphicsDevice.Viewport.Height - texture1.Height;
    int MinY = 0;

    // Check for bounce.
    if (spritePosition.X > MaxX)
    {
        spriteSpeed.X *= -1;
        spritePosition.X = MaxX;
    }

    else if (spritePosition.X < MinX)
    {
        spriteSpeed.X *= -1;
        spritePosition.X = MinX;
    }

    if (spritePosition.Y > MaxY)
    {
        spriteSpeed.Y *= -1;
        spritePosition.Y = MaxY;
    }

    else if (spritePosition.Y < MinY)
    {
        spriteSpeed.Y *= -1;
        spritePosition.Y = MinY;
    }

}

void CheckForCollision()
{
    BoundingBox bb1 = new BoundingBox(
        new Vector3(spritePosition1.X - (sprite1Width / 2), spritePosition1.Y - (sprite1Height / 2), 0),
        new Vector3(spritePosition1.X + (sprite1Width / 2), spritePosition1.Y + (sprite1Height / 2), 0));

    BoundingBox bb2 = new BoundingBox(
        new Vector3(spritePosition2.X - (sprite2Width / 2), spritePosition2.Y - (sprite2Height / 2), 0),
        new Vector3(spritePosition2.X + (sprite2Width / 2), spritePosition2.Y + (sprite2Height / 2), 0));

    if (bb1.Intersects(bb2))
    {
        soundEffect.Play();
    }

}

Run the app

The app is now complete. Next you’ll build, run, and debug the app.

To run the app

  1. Build the solution by selecting the BUILD | Build Solution menu command.

    If any errors occur, they’re listed in the Error List window. You can open the Error List window, if it’s not already open, by selecting the VIEW | Error List menu command. If there are errors, review the steps above, correct any errors, and then build the solution again.

  2. On the standard toolbar, make sure the deployment target for the app is set to one of the values for the Windows Phone Emulator, for example, Emulator WVGA.

  3. Run the app by pressing F5 or by selecting the DEBUG | Start Debugging menu command. This opens the emulator window and launches the app. You see two graphics bounce around the screen and you hear a sound when they intersect.

  4. If the lock screen engages, you can unlock the emulator by clicking at the bottom of the screen and swiping upward with the mouse.

  5. To stop debugging, you can select the DEBUG | Stop Debugging menu command.

You have now created a basic XNA Game Studio 4.0 app for Windows Phone. For more information about XNA Game Studio development, see the following topics: