Invasion Game in XNA for Windows Phone 7
December 13, 2011 Leave a comment
Introduction
Invasion is a UFO-shooter game, originally designed by Mauricio Ritter. This article describes my port of the Invasion game for Windows (in C# and Managed-DirectX) to Windows Phone 7 (C# and XNA 4.0). The full source code is provided.
Please remember to rate this article at the bottom of the page and if you install the XAP from the Marketplace, please rate & review it there too – Thanks!
Background
Back in 2002, Mauricio Ritter posted his “Invasion” UFO-shooter 2D game on CodeProject. It was written in C++ and used the DirectDraw APIs in DirectX 7 that Microsoft removed in DirectX 8. The following year, Steve Maier ported the game to C# with Managed DirectX and also posted it here on CodeProject. Managed DirectX went away after 2005 and was replaced by XNA. Both of those legacy versions ran on Windows XP. This article describes my 2011 week-long port of Steve’s Managed DirectX version to Windows Phone 7 using XNA 4.0.
The articles mentioned above can be found here on CodeProject:
- Invasion – A Computer Game Using DirectDraw (by Mauricio Ritter, 2002)
- Invasion – C# Style (by Steve Maier, 2003)
Using the Code
In order to build the source code, you should use the January 2011 Update of the Windows Phone 7 Developer tools. While WP7 “Mango” beta tools are available, I have not tried compiling the code with them yet.
While XNA can currently be used to make Windows, Xbox 360, and Windows Phone games, this code will currently only work on Windows Phone 7. That limitation is a result of the implemented touch-screen and accelerometer inputs that replaced the mouse and keyboard inputs. To port this back to Windows, the input handlers and screen setup would need to be rewritten.
You can download the XAP file above and use the Application Deployment tool (from the Windows Phone Developer Tools) to install it on your phone, but to get XAP updates automatically, you would need to download and install the free game from the Windows Phone Marketplace.
Restructuring the Code
I had some goals for porting this game beyond “just get it working on Windows Phone 7”. Specifically, they were:
- Redesign the code into more manageable classes
- Make the code more readable so that beginners could understand it
- Simplify the code by using more C# language features and XNA framework classes
- Polish the game so that I could release it on the Windows Phone Marketplace
- Keep it free and Open-Source
- But still finish the port within a week!
Considering my timeframe (which I extended by a few days), I was only somewhat successful. I submitted v1.0 to the Marketplace today and consider it a “work-in-progress”.
The original code has only four source files: Invasion.cs, Ufo.cs, Extra.cs, and Bullet.cs. Ufo.cs defines a UFO class, Extra.cs defines a class for bonuses that the player will acquire, Bullet.cs defines a class for lasers and photon torpedoes, and Invasion.cs contains a class for everything else (which is way too much stuff!). In redesigning the game, I broke down Invasion.cs into multiple classes contained in these files:
- InvasionGame.cs – The main game class for setting up the graphics device, content manager, sprite batch and 2D camera, screen manager, sound effects, music, app-level events, and scoreboard.
- Invasion.cs – Still too big and complicated and should be further broken down into a screen-manager and game-screen subclasses.
- ContentLoader.cs – Intended to use this to load all game content at startup, but currently only using it to load sound effects (it might go away in the next version).
- Scoreboard.cs – A class to manage and display the scoreboard. This replaces the “status bar” from previous game versions and includes some new data items, controls, and features.
- StarShip.cs – A class to represent our starship in the game. If aliens can have their own class, our hero should have one too!
- TextHandler.cs – A class to manage the alpha.png bitmap font. I’ve updated the code here and added some characters to the font. Still, if you’re using bitmap fonts, you’ll find a better way to implement them in the “2D Graphics” (XNA for Windows Phone) sample at create.msdn.com.
- BulletsManager.cs – A class to manage the collection of “bullets” (lasers and photons that have been fired).
- ExtrasManager.cs – A class to manage the bonus items which are dropped by UFOs when they have been destroyed.
- UFOsManager.cs – A class to manage all of the UFOs that are currently on-screen.
Borrowed Open Source Code
There were some features that I wanted to add to the game and fortunately had some already-made code files that made adding them quick and easy. You can find these files in the ImproviSoft namespace’s Diagnostics, Drawing, and System projects. Don’t let the namespace fool you though, this code is free Open-Source and my company (ImproviSoft) didn’t write much of it. The files contain comments with their source indicated – primarily Microsoft’s XNA team, XNAWiki.com, and Elbert Perez of OccasionalGamer.com. So thank them for it! Here’s a list of those files:
- FrameRateCounter.cs – displays the frames/second onscreen for debugging purposes, from Shawn Hargreaves (Microsoft XNA team).
- SimpleShapes.cs – class for drawing 2D primitives (e.g., a
Rectangle), from XNAWiki.com (although probably named something else there). - Accelerometer.cs – class for handling accelerometer input, from create.msdn.com (Microsoft XNA team).
- Camera2D.cs – class for handling a 2D camera (to make the screen shake!), from Elbert Perez of OccasionalGamer.com – thanks, Elbert!
- InputState.cs – class for handling all sorts of input devices, including the touch-screen, from create.msdn.com (Microsoft XNA team).
- MusicManager.cs – class for playing background music, from create.msdn.com (Microsoft XNA team).
- RandomManager.cs – simple class for generating random numbers – OK, I possibly wrote this and it took just two minutes.
- SoundManager.cs – simple class to wrap
SoundEffect.Playcalls for sounds with adjusted maximum-volume. - VibrationManager.cs – class for making the phone vibrate on command (for force-feedback effect), from create.msdn.com (Microsoft XNA team).
The old version of the game did not have music in it, only sound effects. In adding the MusicManager.cs class, I found that Microsoft’s sample code also contained a Music.mp3 file, which is also included in the Visual Studio solution’s InvasionContent project. It loops repeatedly and if you get tired of it, feel free to turn off the music from the Options screen or replace it with your own music since you have the source code!
Code Changes Since the Managed DirectX Version
While Steve’s port to Managed DirectX in C# was a straight port of the original C++ DirectX codebase, I didn’t want to be bound by the design, data-structures, or variable names in this XNA port. So you’ll find that there isn’t a good one-to-one mapping back to the original source. I moved code all around to break out new classes, changed names of nearly all functions and variables (including the UFO class), and went to town on changing and adding data-types and function parameters. For this reason, I don’t recommend trying to decipher what I changed in the code unless you are just interested in seeing how much of it has changed. I now have a wonderful new appreciation for right-click – Refactor – Rename. I also did my best to comment the important stuff in InvasionGame.cs so that an XNA beginner should be able to follow it, and I commented a few other classes too.
Screen Size and the Scoreboard
The earlier Windows versions of Invasion used a 640×480 window-size and placed the scoreboard at the bottom of the window. Because Windows Phone’s screen is 800×480, I decided to move the scoreboard to the right (or left) side of the screen and free up the 20 vertical pixels at the bottom for gameplay use. Doing this kept the gameplay part of the screen at 640×480, which was ideal because many of the UFO sprites have hard-coded screen positions in their movement algorithms that I did not want to change (and mess up). It was also needed because with a phone screen measuring 4″ diagonal, the scoreboard text needed to be resized for readability reasons. I chose the free Neuropol font for the new scoreboard’s text. This is what the scoreboard looks like on each side of the screen. As you can see, the text in the selected weapon display still needs to be resized.
I also had to change the layout of the Main menu screen for the 800×480 screen resolution and in order to become more “touch-friendly”. This is what it looks like now:
New Game Screens and Touch Controls
In porting to Windows Phone, I wanted the ability to pause the game and adjust some basic settings. Microsoft’s game requirements specify how the hardware Back button must behave, so while pressing back at the Main menu should end the game, pressing it during gameplay should open a Pause screen. The Pause screen should provide a way for the user to resume the game in progress (by pressing Back again) and also provide a way for the user to exit the game app. The Pause screen implemented does just that and allows the user the ability to abandon the game and return to the Main menu screen. I updated the Main menu screen to include navigating to an Options screen where the user can adjust the scoreboard position, music on/off, difficulty level (something that was missing in the original Invasion game), and automatic-weapon-selection (AWS – another new feature!). This Options menu screen can also be opened during gameplay by pressing and holding the upper part of the scoreboard (perhaps not a great UI idea of mine – it really should have a button). Toggling AWS can also be done by tapping the AWS icon to the left of the selected weapon display. Tapping the selected weapon will change it to the next weapon if one is available. Because all of the inputs and controls were new, I updated the Help screen:
Future Updates!
While there were many things that I wanted to get into this release, some things got cut in the interest of time. But of course, there is always the next release or the one after that. Here’s a short list of what I’d like to add, and if you’re interested in helping out, please contact me.
- Break down the Invasion.cs code into a
ScreenManagerand separate screen classes - Save the user’s preferences (game settings)
- Save and Resume the game, and Tombstoning
- Better shape-based collision detection – currently using rectangles for everything
- Re-render sprites at higher resolution and without clipping issues (is this a possibility, Mauricio?)
- More UFO types and UFO maneuvers or UFO Artificial Intelligence
- Local/Global high scores
- Allow switching scoreboard position during gameplay
- Replace “holding the scoreboard in order to open the Options screen” with something more obvious
- Use the create.msdn.com SpriteSheet code for the
GameplayScreentextures - Allow starship to get all the way to the left and right edges of the screen
- Allow starship ability to move up and down as well as left and right
- Make the laser’s bounding box narrower
If you have any other ideas for improvements, please add them to the comments below!
Points of Interest
Color Key Transparency in XNA 4.0
Because all of the graphics already existed for this game, I really didn’t want to recreate them. The sprite renders are a little grainy and somewhat awkwardly cropped, but they still look pretty darn good! But because they were originally rendered years ago as BMP files, and bitmap image files don’t have an alpha channel, they used color-key transparency. While Steve had converted the sprite images to PNG format, which does have an alpha channel, they retained the black backgrounds so I had to use color-key transparency anyway. In DirectX (Managed DirectX too), color-keys are set for each texture (graphics image) in code, but in Visual Studio 2010 and XNA 4.0, color-keys are set in the graphic file’s Properties. By default, XNA uses Magenta as a color key, but I wanted to remove the black sprite backgrounds, so I needed to change it. In Visual Studio 2010, click a PNG file in the Solution Explorer to see its properties. Click the little triangle to the left of “Content Processor” and set the “Color Key Color” field to the RGBA color that you want to make transparent. To change it to opaque-black, the color-key must be changed to [ 0, 0, 0, 255 ].
Pinning the Game to the Start Screen without a Tile Title
If you build this project, deploy it to your phone, and try to pin the game tile to your Start screen, you’ll see “Default Title” awkwardly emblazoned across the bottom of the tile. This is because the Tile Title has been removed from the Invasion project’s XNA Game Studio Properties. This isn’t what I really want – I want it to be invisible, so I tried putting a space character in it to resolve the “Default Title” issue. When you do this, you unpin the tile from your Start screen (if it’s there), and then open up the XNA Game Studio Properties page. Put a single space character in the Tile Title textbox and immediately build the game. The resulting XAP file will appear to have a blank Tile Title, but Visual Studio automatically removes the whitespace character from that textbox. So if you build again without reinserting the space character, you get “Default Title” again. So if you want a blank Tile Title on the Start screen, you must put the whitespace character in the textbox right before your final build. If anyone out there knows how to clear the Tile Title permanently, please let me know.
History
- June 30, 2011 – The v1.0 release that I have also published on the Windows Phone Marketplace (as a free game without ads!)
- July 2, 2011 – Article clarifications and fixed typos
- July 10, 2011 – Added additional hyperlinks and replaced the “Comments and Renaming Variables” section title
- December 10, 2011 – v1.1: Updated for Mango SDK, improved scoring, broke levels into waves and sectors, and made the game faster at 30fps
License
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)
hackmyass 