dougherty distilled

Mobile Pac-Man: Part 1 – A plan and a proof

Introduction

I’ve always loved mobile technology.  Small, cool, cutting-edge.  That’s why I bought a Smartphone.  I bought the Motorola MPX220, in case you’re interested.  It’s pretty darn cool all on its own, plus it offers me the opportunity to try my hand at mobile development. 

So what’s the plan?  Pac-Man. 

Sure, there are plenty of good use cases for a mobile application.  But which one is the most fun?  A game, of course.  Actually it’s probably one of the biggest use cases, too.  Maybe I’ll try to dig up some real numbers in the future. 

Here are some of the elements of Smartphone development I’d like to explore with this project.  Working on basic game play I’d like to incorporate:

• UI development (obviously)
• 2D - Graphics (animation, collision detection…)
• Managing a small footprint 
• Working with the local file system
• Deployment – how to build an installer and transfer to the phone

I’d also like to add web-based tracking of High Scores that will incorporate:

• Interacting with ActiveSync
• Building web sites targeted at Smartphones
• Calling web services from a device
• Interacting with the camera for capturing you mug along with your score

So this little endeavor could go a long way.  Of course it has to start somewhere first.  Time for a little proof of concept. 

Setup

To get my development environment set up, I have installed the following:
• Visual Studio .NET 2003
• ActiveSync Version 3.7.1
• Mobile Application Toolkit
• SDK for Windows Mobile 2003-based Smartphones

Note: When I installed the Smartphone SDK, I ignored the warning about not having C++ installed because I don’t plan on doing any C++ dev at this time

Development

Once that was complete, I fired up Visual Studio and went through the following steps to setup my Pac-man project.

Under File menu select New Project.  Select a new Smart Device Application project.

 Selecting the correct project type step 1

The Smart Device Application Wizard then appears.  Select Smartphone and Windows Application.  If Smartphone doesn’t appear, check to be sure you have installed the Smartphone SDK.

From this point on, it’s pretty much like developing any other Winform application – just a little smaller.  Notice that the Toolbox contains all of the supported Device Tools.  Because Windows Application was selected, a form is created for you.  A main menu is also setup on the form.

I went ahead renamed the form, added a few a few panels to build out a simple splash screen.  I also used the designer to set up two menu items, New Game and Exit.  Since this is just a first POC, I left New Game alone for now.  I did hook up the Click event of the Exit menu item.  This can be done by double clicking the menu item, setting via the properties page, or writing the code yourself.  For now, we’ll use this to simply end the application.

private void menuItemExit_Click(object sender, System.EventArgs e)
{
     Application.Exit();
}
Code: Exit MenuItem’s Click event handler

The designer now looks like this:

Splash screen Form in the Designer

Now all that’s left is to test it out.  When you start the application, you’re prompted for the Device to deploy to.

Selecting Smartphone 2003 Emulator (Virtual Radio) will start the emulator, deploy the application to it, and start it.  The first time the app is loaded, a message will appear stating that the System_SR_ENU.phone.cab file will be loaded.  I haven’t looked to deep in to what this is all about, but my basic understanding is that it is used for debugging.  Again, maybe I’ll post more on that at a later date.

Let’s check out the application.

There it is!  I think the emulator is really cool.  It acts like a normal phone.  You use the mouse to click on the buttons.  You could even play Jawbreaker if you wanted to.  Hey…wait.  Pac-man is cooler, of course.  Okay, unfortunately our app is a little lame, right now.  All we can do is click on the right soft-key to shut down the game, but hey, it works!

Now for the really cool step.  Let’s move this app to a real phone.  First, let’s setup where the app is going to deploy to.   Bring up the Property Pages for the project by right clicking on the project node in the Solution Explorer and clicking Properties.  Under the Device section, you can setup where the exe will be copied to on the phone’s file system.  If the folder does not exist, it will be created.
 
Specifying the location on the phone to copy the application to

Make sure your phone is connected to your PC.  When we run the app again, the Deploy screen comes up, as expected.  This time, though, we’re going to select Smartphone Device.    Keep an eye on your phone.   Several prompts must be accepted, and then finally there it is for real. 

So here’s why even this early version of Pac-man is cooler than Jawbreaker.  With the app still running on your phone, go back to the code and into the method that handles the Click event from the Exit MenuItem.  Add a breakpoint in the method.  Now press the soft key on your phone to exit the app and check it out – you hit the breakpoint!  Pretty sweet.  Okay, it’s only cooler in a really geeky way, but this will certainly come in handy when testing.

So there we have it: proof…and lots of work left to do.  Stay tuned if you’re interested in following along with this project.  Next I plan to move on proving out basic animation and handling the key pad input to move a test Pac-man around the screen.