Hands-On Lab

2D Game Development with XNAFramework

Lab version:1.0.0

Last updated:9/12/2018

Contents

Overview

Exercise 1: Basic XNA Game Studio Game with game state management

Task 1 – Basic game project with game state management

Task 2 – First game screens and menus

Exercise 2: Game rendering and logic

Task 1 – Basic game rendering

Task 2 – Game logic

Task 3 – Polishing the game – Sounds and animations

Exercise 3: Adding Tombstoning

Task 1 – Utilize Tombstoning and Isolated storage to store the game state

Task 2 – Utilize Chooser and Launcher to run another application from the game

Summary

Overview

This lab introduces you to XNA Game Studio game development on Windows Phone 7™, as well as to the basics of game development using the XNA Game Studio.

During the course of this lab you will build a simple 2D game using the XNA Game Studio, while getting familiar with thekey concepts of theXNA Game Studio game development, and learn how to use Microsoft Visual 2010 Express with theWindows Phone 7™ SDK to build and design your XNA games for phone based on Windows Phone 7™.

Objectives

At the end of the lab you will have:

  • A high-level understanding of the XNA Game Studio game engine model within Windows Phone 7™ applications
  • Learned how to use resources (images, fonts, etc.) in your XNA Game Studio game
  • Learned how to add game logic
  • Learned about the drawing mechanism for Windows Phone 7™ XNAGame Studio games
  • Learned how to use touch and gesture input to control your game
  • Learned how to use the phone tombstoning, isolated storage and choosers and launcher capabilities

Prerequisites

The following is required in order to complete this hands-on lab:

  • Microsoft Visual Studio 2010 Express for Windows Phone or Microsoft Visual Studio 2010 with Windows Phone 7™ Add-In for Visual Studio 2010 installed

Tasks

This hands-on lab includes two excercises built from the following tasks:

  1. Basic game project with game state management
  2. First game screens and menus
  3. Basic game rendering
  4. Game logic
  5. Polishing the game – Sound and animation
  6. Enriching the game with background music

Estimated time to complete this lab: 100minutes.

Exercise 1: Basic XNA Game Studio Game with game state management

If you have ever wanted to make your own games, Microsoft® XNA™ Game Studio 4.0 (installed as a part of installed prerequisites) is for you.

Whether you are a student, hobbyist or an independent game developer — actually anybody can create and share great games usingthe XNA Game Studio.
XNA Game Studio 4.0 is a game development product from Microsoft that is built on top of Microsoft Visual Studio 2010 Express for Windows Phone 7™, giving game developers the power and simplicity of .NET based languages such as C# as a programming language. XNA Game Studio 4.0 includes the XNA Framework and the XNA Framework Content Pipeline, which provide an easy and flexible way to import three-dimensional (3D) models, textures, sounds, and other assets into your game, and a game-focused Application Programming Interface (API) that simplifies development for the Xbox 360™, Windows® based PC'sand now for theWindows Phone 7™ Series®.

The XNA Framework is an Application Programming Interface (API),thusa framework developed by Microsoft to help you make games faster and easier.
However, thisis not a drag and drop game maker and you are going tohaveto learn how to program before you can use it. It is easy to use, but you will have to be own a fewtechnical skills to develop games with it.

The XNA Framework is not a game engine. It does not include physics, collision detection,or other things often found in game engines. It is a game development framework, meaning thatthe way your game works depends solely on your programming.

During this lab, you will build a full XNA Game Studio game for the Windows Phone 7™. The game you will build is the “Catapult Wars” which issingle player game for Windows Phone 7™where the player controls a catapult and attempts to destroy the computer's catapult in a race to five points. The first who achieves five points win the game.[A1]

XNA Game StudioGame Basics

While this game will be composed of a single game screen, other games might be composed of several screens, each fora different level, or from a combination of both. Different levels often reuse game screens while slightly altering the game logic. It is possible to logicallyrelate to each screen or level as a whole game.

A game (whether actual or logical) usually havethreestates:

  • Loading – In this state, the system loads resources, initializesgame-related variables, and performs any other tasks thathave tobe performed before the game actually begins. This state occurs only once in the game’s life cycle.
  • Update – In this state, the system needs to update the game-world state. Usually this means calculating new positions of the acting entities, updating health, ammo, and other statuses, recalculating the score, and performing other game logic according to the game. This state occurs throughout the time that the game engine is active.
  • Draw – In this state, the system draws the changes calculated in the update state to the output graphics device. This state occurs throughout the time that the game engine is active.[A2]

In the XNA Framework, the Update and Draw stages can occur up to 60 times per second on a PC or Xbox 360™ and up to 30 times per second on a Zune™, Zune HD™ or Windows Phone 7™ device.

General Architecture

"Catapult Wars" game uses the game screen management architecture from the Game State Management sample (originally found at which provides some of the assets for this lab. The game includes the followingmodes:

  • Main menu (MainMenuScreen class)
  • Instructions screen (InstructionScreenclass)
  • Playing the game (GameplayScreen class)
  • Paused (PauseScreen class)

The Game performs game-specific content loading during the GameplayScreen class’s initialization.

When launched, the game’s first action is to load and display the background screen and then the main menu screen. Once the main menuscreen is loaded,the menus animate onto the screen and the user can then access the game itself.

We will talk more about the GameplayScreen class in the next exercise, where it will be implemented.

The completed game will look as follows:

Figure 1

Finished Catapult Wars Game

Task 1 – Basic game project with game state management

During this task, you will create anXNA Game Studio game project for the Windows Phone 7™platform and add game state management capabilities to it by incorporatingcode which is supplied with this lab.

  1. Start Visual Studio 2010 Express for the Windows Phone or Visual Studio 2010.

Note: The steps in this hands-on lab illustrate procedures using Microsoft Visual Studio 2010 with the Windows Phone Developer Tools, but they are equally applicable to Microsoft Visual Phone Developer 2010 Express. Instructions that refer generically to Visual Studio apply to both products.

  1. Open Microsoft Visual Phone Developer 2010 Express from Start | All Programs | Microsoft Visual Studio 2010 Express.

Visual Studio 2010: Open Visual Studio 2010 from Start | All Programs | Microsoft Visual Studio 2010.

  1. In theFilemenu, chooseNew Project.

Visual Studio 2010: In the File menu, point to New and then select Project.

  1. In theNew Projectdialog, select the XNA Game Studio 4.0 category and, from the list of installed templates, select Windows Phone Game (4.0); then set the name to CatapultGame and click OK.

Figure 2

Creating a new Windows PhoneGame application project in Microsoft Visual Studio 2010

  1. In Solution Explorer, review the structure of the solution generated by the Windows Phone Application template. A Visual Studio solution is a container for related projects; in this case, it contains an XNA Game Studio game for Windows Phone project named CatapultGame and a related game resource project named CatapultGameContent.

Figure 3

Solution Explorer showing the CatapultGame application

Note: Solution Explorer allows you to view items and perform item management tasks in a solution or a project. To show Solution Explorer, press CTRL + W, S or in the View menu, select Other Windows | Solution Explorer.

  1. The generated project includes a default game implementation that contains the basic XNA Game Studio game loop. It is located in the Game1.cs file.
  2. Open the Game1.cs file. We recommend that you change the default name to the name that reflects your game.
  3. Rename the main game class (default name "Game1") to "CatapultGame". To rename it, right click on the class name, select Refactor -> Rename

Figure 4

Renaming the main game class

  1. In the Rename dialog window's New name field, enter CatapultGame and click OK.

Figure 5

Giving the name to the main game class

  1. Review changes suggested by Visual Studio and click Apply.

Figure 6

Apply changes to main game class

  1. Rename[A3] the [A4]filename to match the new class name. Right-click on Game1.cs in Solution Explorer and choose Rename. Give the class the new name CatapultGame.cs

Figure 7

Rename main game class file

  1. A XNA Game Studio game for Windows Phone application typically takes advantage of services provided by the underlying platform or by other libraries. To use this functionality, the application needs to reference the corresponding assemblies that implement these services.
    To display the assemblies referenced by the project, expand the References node in Solution Explorer and examine the list. It contains regular XNA Framework assemblies as well as assemblies specific to the Windows Phone platform.

Figure 8

Solution Explorer showing the assemblies referenced by the project

Currently, the application does not do much, but it is ready for its first test run. In this step, you build the application, deploy it to the Windows Phone Emulator, and then execute it to understand the typical development cycle.

  1. In the View menu, select Output to open the Output window.
  2. Select Build Solution in the Debug menu or press the SHIFT + F6 key combination to compile the projects in the solution.

Visual Studio 2010: Select Build Solution in the Build menu or press CTRL + SHIFT + B to compile the projects in the solution.

  1. Observe the Output window and review the trace messages generated during the build process, including a final message with its outcome.

Figure 9

Building the application in Visual Studio

You should not observe any errors at this stage but, if the project were to contain compilation errors, these would appear in the Output window. To deal with these kinds of errors, you can take advantage of the Error List window. This window displays errors, warnings, and messages produced by the compiler in a list that you can sort and filter based on the severity of the error. Moreover, you can double-click an item in the list to automatically open the relevant source code file and navigate to the source of the error.

  1. To open the Error List window, in the View menu, point to Other Windows and select Error List.

Visual Studio 2010: To open the Error List window, in the View menu select Error List.

Figure 10

Error[A5] List [A6]window shows errors during the build process

  1. Verify that the target of the deployment is the Windows Phone Emulator. To do this, ensure that Windows Phone 7™ Emulator is selected in the Select Device drop down next to the Start Debugging button on the toolbar.

Figure 11

Choosing the target device to deploy the application

Note: When you deploy your application from Visual Studio, you have the option to deploy it to a real device or to the Windows Phone Emulator.

  1. Press F5 to launch the application in the Windows Phone 7™ Emulator. Notice that a device emulator window appears and there is a pause while Visual Studio sets up the emulator environment and deploys the image. Once it is ready, the emulator shows the Start page and shortly thereafter, your application appears in the emulator window.

The application will display a simple blue screen with nothing else shown. This is normal for an application in such an early stage.

Figure 12

Running the application in the Windows Phone 7™ Emulator

Before you create the user interface and program the application logic, there is very little that you can do with the application.

  1. Press SHIFT + F5 or click the Stop button in the toolbar to detach the debugger and end the debugging session. Do not close the emulator window.

Figure 13

Ending the debugging session

Tip: When you start a debugging session, it takes a perceptible amount of time to set up the emulator environment and launch the application. To streamline your debugging experience, avoid closing the emulator while you work with the source code in Visual Studio. Once the emulator is running, it takes very little time to stop the current session, edit the source code, and then build and deploy a new image of your application to start a new debugging session.

Now that our initial game is capable of running, it is time to add game state management capabilities to it. This will help us in the next task when we start adding screens and menus to the game.

  1. Add a new project folder to contain all game state management code. In the solution explorer, right-click the CatapultGame node and select Add | New folderfrom the context menu.

Figure 14

Adding a new project folder

  1. Name the newly created folder ScreenManager.
  2. Select the ScreenManager folder and add all existing files from the lab install folder under Assets\Code\ScreenManager. To add existing items, right-click the ScreenManager folder in the solution explorer and select Add | Existing items:

Figure 15

Adding existing items to the project

  1. A file selection dialog will appear. Navigate to the path specified in the previous step, select all source files, and click the Add button:

Figure 16

Adding the ScreenManager source files to the project

Note: All the game resources and sample code are provided in the lab install folder under the following locations:

{LAB_PATH}\Assets\Code – all CSharp code files

{LAB_PATH}\Assets\Media – all graphics, fonts and sounds

Note:The code added in this step implements the standard approach for creating XNA Game Studio menus and screens. It is recommended that you review the sample discussing this code, in order to better understand it. The complete sample can be found at:

Note that the code has been slightly altered to better fit to this lab.

  1. Review the solution explorer after performing the last few steps, it should now look like this:

=

Figure 17

The solution explorer after adding the ScreenManager folder and code

  1. Build the solution again, it should compile without any errors. There is no point in running the application again as we have not yet altered it in any perceptible way.

Task 2 – First game screens and menus

Having laid the groundwork for adding screens in the previous task, we can now focus on actually drawing several kinds of screens with which the user may interact. The screens you will add in this task are relatively simple. They will introduce you to the use of resources and the ScreenManager class.

Resources are used by many games to present the game and enhance the game experience. Resources can be such as: images, textures, sounds, and so on. This lab provides you with a number of such resources to make the game development process easier.

  1. Add the lab’s resources to the game resource project. All resources are located in the lab installation folder under Assets\Media. While it is possible to add the resources using the technique seen in the previous task, the resource files for this lab are prearranged in a directory tree structure that we would like to preserve and therefore we will use a different approach in order to add them to our project.
  2. Navigate to the folder specified in the previous step using Windows Explorer, select all three folders and then drag & drop them into the CatapultGameContent project node in the solution explorer:

Figure 18

Adding the resource folders into the content project

Note: This last drag & drop action is to be performed between applications, while the drag operation has to begin from and over the "Windows Explorer" application window and the concluding drop operation should be perform over the CatapultGameContent project node in the "Visual Studio" application window.