Windows 8 Game Development using C#, XNA and MonoGame 3.0: Building a Shooter Game Walkthrough – Part 3: Updating Graphics using Content Pipeline with MonoGame
MonoGame currently does not have a Content Pipeline as a part of the framework therefore we will need another way to create the XNB files from our graphic and sounds assets. That is where the Windows Phone SDK comes in with Visual Studio 2012 (WP 8.0 SDK) and/or Visual Studio 2010 (WP 7.1 SDK) comes in. You can use the XNA Windows Phone Game project under Visual Studio 2012 or Visual Studio 2010 to compile your graphics assets and then add them to your Visual Studio 2012 MonoGame project. Please note: The graphics shown in this blog post may either depict usage of VS 2012 OR VS 2010 for the Content Pipeline but the steps for completion are the same no matter which product (VS 2012 or VS 2010) is used.
Creating a Content Pipeline for MonoGame
To create a Content Pipeline for MonoGame we must leverage the XNA Game Studio inside of Visual Studio 2012 or Visual Studio 2010 which is installed with Windows Phone 8 SDK (VS 2012) or Windows Phone 7.1 (VS 2010). So the first step in creating a Content Pipeline for your game is to start Visual Studio (2010/2012), and select XNA Game Studio from the Templates.
Step 1 – Opening and Registering Visual Studio 2012/2010 Express (First Time Users)
However, if this is your first time using Visual Studio 2012 or 2010 Express for Windows Phone, you will get a dialog box prompting for you to get a Registration Key. Click the Obtain a registration key online button.
Figure 1 Visual Studio 2010 Express registration
This will open up a Sign in screen, Log in with your email address and password associated with your Windows Live ID (Microsoft Account) or associate your email address with Window Live by registering your email address as a Windows Live ID and login. Fill out information require (if any) and then click the Submit button. If you are successful, a Thank You for registering message should come up displaying your registration key. See Fig. 2 below.
Figure 2 Visual Studio Registration Confirmation Dialog Box
Copy the registration key displayed, and paste it into the registration dialog shown previously in Figure 1. The Register Now button should now become available, therefore, Click the Register Now button.
Step 2 – Creating the XNA Game Project
Once Visual Studio starts, select New Project. Select Windows Phone Game, Windows Game or XBOX Game as appropriate to the version of Visual Studio you are using. Name the project ShooterContent and click OK. See Fig 1a and Fig 1b.
Figure 1a Visual Studio 2012 XNA Game 4.0 Project
Figure 1b Visual Studio 2010 XNA Game 4.0 Project
Now obtain the graphics for the Shooter game. I have provided these graphics for you. Click on the link: http://sdrv.ms/RBzIAh and Click on the Shooter Graphics and Sound files folder. Download all of the files contained within that folder and subfolders to an accessible location on your computer.
Step 3 – Creating a Content Manager for the Graphic, Font, and Sound Files using XNA Content Pipeline
Now that your XNA Windows Game project (ShooterContent) has been created, we can create a content manager. In the Solution Explorer, right click on the ShooterContentContent (Content) project and add two (2) new folders. Name the folders Graphics and Sound respectively. Add all the graphic files (.png files) and font files (.spritefont) from the location in which you downloaded the files provided above into the Graphics folder. Add the sound files (.wav) from the location in which you downloaded the files provided above the Sound folder. See Figure 1 below.
Figure 1 Visual Studio 2010 Express - Adding Content files to the Content Pipeline
Once all the files are added into your XNA Game solution and your XNA Game Studio project Solution Explorer resembles the graphic shown in Figure 1 above. Compile/Build the Entire ShooterContent Solution. Once you have successfully compiled without error, you can close the ShooterContent XNA Game Studio project.
Step 4 – Creating a Content Manager for the Graphic, Font, and Sound Files using XNA Content Pipeline
Now Reopen your MonoGame Project . If you have followed along with Part 1 and Part 2 of this MonoGame blog series, in the Solution Explorer you will see a Graphics folder with an .xnb file once the project has opened. For clarity and to ensure there no conflicts with our next steps. Delete the Graphics folder and all its contents from your project. Clean and rebuild the solution.
Inside the Solution Explorer, go to Win8ShooterGame project root and add a folder named Content by right-clicking and choosing Add, New Folder. Underneath this new folder, add two new folders named Graphics and Sound by right-click on Content Folder and choosing Add, New Folder. See graphic in Figure 1 shown below.
Figure 1 Adding Content Folders to the Project
Now Right click on Graphics Folder and select Add, Existing Item. Navigate to C:\Users\ [you] \Documents\Visual Studio 2012\Projects\ShooterContent\ShooterContent\ShooterContent\bin\x86\Debug\Content\Graphics or C:\Users\\Documents\Visual Studio 2010\Projects\ [you] \ShooterContent\ShooterContent\ShooterContent\bin\x86\Debug\Content\Graphics
Select all the files located in this folder and Click Add.
Select the Sound Folder and select Add, Existing Item. Navigate to C:\Users\ [you] \Documents\Visual Studio 2012\Projects\ShooterContent\ShooterContent\ShooterContent\bin\x86\Debug\Content\Sound or C:\Users\\Documents\Visual Studio 2010\Projects\ [you] \ShooterContent\ShooterContent\ShooterContent\bin\x86\Debug\Content\Sound
Select all the files located in this folder and Click Add.
Figure 2 Adding Graphics files to MonoGame project folders
Once files have been added within your MonoGame project, select add the files in the Graphics folder. With the files selected, right-click and select Properties.
Figure 3 Select the Properties option for files
Under properties, set Build Action to property to Content and Copy to Output Directory property to Copy Always. Repeat these same steps with the files in the Sound folder.
Figure 4 Change Properties options of the files
You've written enough code for now - let's see it in action! Build and run your game by either via Local Device or and the Windows Simulator. If successful, you will see the Cornflower Blue background with the Ship (player) shown on the screen.
Figure 5 Ship/Player Drawn on the Screen
In this walkthrough, we went through the step to create and leverage the Content Pipeline for graphics and sound. Now have created your Content pipeline and added the needed graphic and sound files, these files can be leveraged for the Shooter game. The Shooter player graphic is loaded and displayed on the screen from the Content Pipeline generated graphic files. In Part 4 of this series, we will add input logic and code to respond to various types of user input and control the player (ship) within the game. The input logic should respond to the user input in using mouse, keyboard and gestures.