Game Development Tutorial

Up to now, we displayed the blocks as squares filled with color. From now on, we'll display little icon images instead. If you remember, we used rectangles to define the size, and the position for each field. And that suits us just fine! So, here's a part of our code that we wrote in chapter 7:

(This is a part of the code from chapter 7, method DrawField())

We'll replace that FillRectangle statement with a new one: DrawImage. But before we do that, we have to store our images somewhere. And, lucky us, there is a control made just for that. Go to your toolbox, and find the Components group. In there you'll find the ImageList control. Double-click it, and it will apear next to your timers. Nice. Set the properties like this:

ImageList

• (name):ilTiles
• ColorDepth:  Depth32Bit
• TransparencyColor:  Web > Transparent
• Images:  [Load 10 different bubble images]
• ImageSize:  32; 32

Now, add add our bubble graphics files into the list. You can reorder them however you want. After all, we'll display the right picture by calling it's index number. Ready? Ok… Here is the revised code for the Switch in the 'DrawField()' method. See the difference? Nice… How about trying it out?

switch (Field[v, s])
{
  case 0:
    //Draw empty field...
    break;
  case 1:
    gField.DrawImage    (ilTiles.Images[0], rtgField);
    break;
  case 2:
    gField.DrawImage    (ilTiles.Images[1], rtgField);
    break;
  case 3:
    gField.DrawImage    (ilTiles.Images[2], rtgField);
    break;
  case 4:
    gField.DrawImage    (ilTiles.Images[3], rtgField);
    break;
  case 5:
    gField.DrawImage    (ilTiles.Images[4], rtgField);
    break;
  case 6:
    gField.DrawImage    (ilTiles.Images[5], rtgField);
    break;
  case 7:
    gField.DrawImage    (ilTiles.Images[6], rtgField);
    break;
  case 8:
    gField.DrawImage    (ilTiles.Images[7], rtgField);
    break;
  case 9:
    gField.DrawImage    (ilTiles.Images[8], rtgField);
    break;
  case 10:
    gField.DrawImage    (ilTiles.Images[9], rtgField);
    break;
  default:
    break;
}

It looks a lot like the screenshot from chapter 1, doesn't it? Great! So, in the next chapter, we'll add one more extremly cool feature, to complete our game. We'll make our doggy splash water. And that's it. The game will be complete, and this tutorial will be almost over. As the last topc, I'll cover packaging and distribution of your game. And that's it… ;) Finally…

Uhm, I admit – I lost a whole day to figure this stupid stuff out. And in the end, i ended up with just a few lines of code. It's true that simplicity is the best way. And after writing, like, fifty lines of code that didn't work, i decided to delete it, and to start over. Basically, I took every single block in the game, and checked if it's floating. If it was, I moved it down… This would be the result:

This is the code that goes in the GoGravity() method:

// So, bassicaly, i just use 
// a couple of loops to go trough 
// all the fields.

// Looping through columns:
for (int s = 0; s < iWidth; s++)
{
  // Looping through rows:
  for (int l = 0; l < iHeight; l++)
  {
    for (int v = iHeight - 1; v > 0; v--)
    {
      // In every column, I start  
      // checking from the bottom.
      if (Field[v, s] == 0)
      {
        // If the field is empty, I  
        // drop the field above it 
        // down one block.
        Field[v, s] = Field[v - 1, s];
        Field[v - 1, s] = 0;
      }
    }
  }
}
// And to show the changes, 
// I call the Redraw() method:
Redraw();

And this is the code that goes into the Redraw() method:

//Drawing our field and grid:
DrawGrid()
DrawField()

If you would buy a game of Monopoly in the 'real' world, you'd probably get a box, some playing figures, dice, bonus cards,property cards, game money, rule book and a game board. A lot of the similar stuff, like dice and game board, can be found in other 'regular' games. So, it would be logical to assume that computer games need similar 'components' to work. Yes, we'll make some of this stuff in our PC game. The first thing is to make a game board, or a game field, as I call it. Our game will use a big game field made of small fields. We'll create a field 15x10 in size. 15 columns and 10 rows. Each of the small game field blocks will hold one Block, Bubble, Baloon, whatever...

Here's the idea:

Ok, you probably get the idea now. Our game field is, basically, a bunch of blocks. Each block is defined with it's coordinates and a value (in this case, representing a speific color). So, how to make our empty form show something like this?

First add the next controls to the form:
(You can drag them from the tool box onto the empty form)

1. Picture Box
2. Button

Now we'll fine-tune some properties for our new controls. In the Properties window, on the left, there is a huge list of properties you can adjust. Click on your Form and and tweak the properties to the values shown in the next list:

Form - frmMain

• FormBorderStyle: FixedSingle
• MaximizeBox: False
• Size: 630; 470
• StartPosition: CenterScreen
• Text: My First Game

This will disable resizing of your form, set it's size and start position, and write 'My First Game' in the title bar. Ok, moving on - select the button, and set it's properties:

Button

• (name): butGame
• Location: 12; 6
• Size: 126; 53
• Text: New Game

Picture Box

• (name): picGameField
• BackColor: Web>Transparent
• Location: 0; 65
• Size: 480; 320