dougherty distilled

Mobile Pac-Man: Part 2 - A little action

Introduction

So now that we've figured out how to deploy a simple app to the phone, let's move on to something more interesting: animation.  I'm going to walk through a second proof of concept in this post.  It will be pretty simple, but I want to test out a few things need to get our Pac-Man around the screen.

Game Form

I've created a new form in my Pacman project, just like the splash screen form that was created in Part 1.  This form, called frmGame, will serve as our game board.  It's just a basic form with a black background.  We're not going to want a menu on this Form, though.  To get rid of it, I've overridden the OnLoad method of the Form and set the WindowState property.

private void frmGame_Load(object sender, System.EventArgs e)
{
   this.WindowState = FormWindowState.Maximized;
   ...
}

private void menuItemNew_Click(object sender, System.EventArgs e)
{
    frmGame gameBoard = new frmGame();
    gameBoard.Show();
}

The game will operate on a timer.  We'll initialize a System.Windows.Forms.Timer called _Timer in our OnLoad method.  In that method we'll also hook the Tick event to a method called AdvanceGame.  This method will control the flow of the game.  Using a timer is a very simple way to keep consistent speed in our game.  There are more complicated techniques that better address the amount of time used to do work and won't rely on the accuracy of the system timer that we may visit later.  For now, however, this should suffice.

Our Hero

Before we go any further, we need to design the star of our game, Pac-Man.  We could draw all the graphics in code if we wanted to.  Or we could draw bitmaps in an image editor and draw them on to the screen as needed.  Since we have a basic 2-D game, I plan on drawing bitmaps in MS Paint, and using some custom objects in code to house state (image, coordinates, etc.) of each character (Pac-Man, Ghosts, Fruit bonuses, etc.).  I will define an object model for these Sprite objects in a future step, but for the time being we'll just work with an image directly. 

I've drawn up a test image seen below:

The Pac-Man image has a magenta background, because we'll use that as the color key for painting.  The image is added to the project as an Embedded Resource.  When the game Form loads, the image is loaded from the assembly. 

Painting

We're going to do to control the painting of this Form by overriding the OnPaint method of the form.  Unlike most overrides, we don't want to call the base implementation.  We'll handle it all.

protected override void OnPaint(PaintEventArgs e)
{
   e.Graphics.DrawImage(_BmpPacmanOpenRight, new Rectangle(_X, _Y, _BmpPacmanOpenRight.Width, _BmpPacmanOpenRight.Height), 0, 0, _BmpPacmanOpenRight.Width, _BmpPacmanOpenRight.Height, GraphicsUnit.Pixel, _ImageAttributes);
}

_X and _Y are member variables I'm temporarily using to store the current x and y coordinates of the image.  _ImageAttributes is created with a color key of magenta.  This causes the magenta in the image to be treated as if it were transparent. 

At the end of every pass through the AdvanceGame method, the Invalidate method is called.  This will force the repainting of the gameForm and thus the OnPaint method.

User Input

Obviously we'll need the player to tell us where to move Pac-Man.  To do this, we'll need to capture the directional pad key presses.  This is done just like a regular WinForm app.  The OnKeyDown method is overridden to listen for the Up, Down, Left and Right directional presses.

protected override void OnKeyDown(KeyEventArgs e)
{
   base.OnKeyDown (e);
   if(e.KeyCode == Keys.Right || e.KeyCode == Keys.Left || e.KeyCode == Keys.Up || e.KeyCode == Keys.Down)
      {
      _LastKeyDown = e.KeyCode;

   }

 }

So now we know we can get Pac-Man to move around.  Next will come some of the more complication interaction between the game board and Pac-Man and some ghosts.  That should take a bit of work.  I'll let you know how it goes.