Game Development Tutorial

The last and, in my oppinion, the coolest part of this tutorial is making our doggy splash water from his fire-hose. There are a lot of ways to do this… My first idea was to make him splash a stream of water in a horizontal line… But I wasn't satisfied. Then, i figured out how to make him splash wather at an angle… But that didn't make me satisfied either. Then I decided to renew my high school math knowlege, and to force this dog to splash water to the exact point where the player would click the mouse… And, how does this look in theory? Here's a drawing…

 

Here's a little legend: Point B is the point where player clicked. Point A is the starting point of the splash. So, that makes the blue line c our splash. Angle alpha is the angle of the splash. It can be positive, or negative. So, how can we figure out the lenght of the splash (c), and it's angle (alpha)??? Just a little math. Our points are defined with x and y coordinates. So, if we know the horizontal coordinate for B, and the width of our game field, then we know the lenght of the red line b. And on the same priciple, we can find the lenght of the red line a. Calculating splash lenght c is just a matter of Pythagoras. Remember that jibberish your math teacher filled your hed with? I hate to admit it, but, it came useful. So, here's the equation:

(Pythagoras' theorem):

That's how we would write it on a peace of paper. And to make our C# understand it, we can write it like this:

int c = (int)Math.Sqrt(a * a + b * b); 

And if we have two sides of the triangle calculated, we can determine the angle with another math operation… Uff… Here's the equation:

Again, translated into C# il would look like this:

float alpha = (float)Math.Atan
((double)a / (double)b); 

To rotate an image, we'll use matrix translations… More math… Ah well… So, now when we finally have everything, we can write the code. Here it is. Enjoy it, it's your last peace of code in this tutorial. 

private void Splash(int MouseY, int MouseX)
{
  // Point A:
  Point pStart = new Point
  (picGameField.Width - 1, 195);

  // Calculating the lenght of the splash,
  // and other sides of the triangle:
  int a = (picGameField.Height - MouseX
  - (picGameField.Height - 215));
  int b = (picGameField.Width - MouseY);
  int c = (int)Math.Sqrt(a * a + b * b);
  
  // Calculating the angle of the splash:
  float alpha = (float)Math.Atan
  ((double)a / (double)b);
  
  // Convert from Radians to Degrees
  alpha = alpha * (float)(180.0 / Math.PI);
  
  int x = picGameField.Width - c;
  int y = 195;

  // Defining the position of our splash image:
  Rectangle rSplash = new Rectangle(x,y,c,50);
  Graphics gSplash = picGameField.CreateGraphics();

  // Matrix rotations:
  Matrix X = new Matrix();
  X.RotateAt(alpha, pStart, MatrixOrder.Append);
  gSplash.Transform = X;
  
  // Drawing our image to the screen:
  gSplash.DrawImage(picSplash.Image, rSplash);
  // Pause for a moment:
  System.Threading.Thread.Sleep(100);
  // Getting rid of our splash image:
  gSplash.Dispose();
}

Obviously, we need some mouse coordinates for this code to work... In the next (probably the last) post - I'll post the whole source code for the project. With a download link... :) I know I skipped a few parts of the code, so, you'll be able to 'grab' them from actual project files! :)

Right, before we add all that fancy graphics, we have to prepare our form first. We'll add some additional picture boxes to hold our images. Like the one to hold the firefighter dalmatian doggy, etc… So, add the controls, and modify their properties as shown in the following tables.

PictureBox

• (name):picDoggy
• BackColor:  Web > Transparent
• Image:  [Load firefighter doggy image]
• Location: 477; 186
• Size: 131; 201

PictureBox

• (name):picSplash
• Anchor:Right
• BackColor:  Web > Transparent
• Image:  [Load water splash image]
• Location: 45; 81
• Size: 407; 50
• SizeMode: StretchImage
• Visible: False

And now, adjust your form's properties so it'll show the background image:

Form - frmMain

• BackgroundImage: [Load background image]

If you did everything correctly, you should get your game looking quite similar to the one I've made. But we still have to replace our regular buttons with some fancy ones. If you're really going for the 'wow' effect, you can use pictureboxes combined with labels to replace the buttons. So, remove your buttons (select them and click 'Delete') add some more controls to your form: 

Note: Our new picture boxes that'll replace the buttons will be called same as the buttons we're replacing. That way, we won't have to change our old code.

PictureBox

• (name):butGame
• BackColor:  Web > Transparent
• Image:  [Load cloud image]
• Location: 12; 6
• Size: 126; 53
• SizeMode: StretchImage

PictureBox

• (name):butHighScores
• BackColor:  Web > Transparent
• Image:  [Load cloud image]
• Location: 144; 6
• Size: 126; 53
• SizeMode: StretchImage

PictureBox

• (name):butNG
• BackColor:  Web > Transparent
• Image:  [Load cloud image]
• Location: 276; 6
• Size: 126; 53
• SizeMode: StretchImage

Now, we'll add some labels to our clouds:

Label

• (name): lblGameCloud
• BackColor:  Web >White
• Location: 23; 26
• Size: 107; 20
• Text: New Game
• TextAlign: MiddleCenter

Label

• (name): lblHighScore
• BackColor:  Web >White
• Location: 155; 26
• Size: 107; 20
• Text: High Scores
• TextAlign: MiddleCenter

Label

• (name): lblNG
• BackColor:  Web >White
• Location: 286; 26
• Size: 107; 20
• Text: New Game
• TextAlign: MiddleCenter

It would be cool if the label inside the picture box would pop-up when the player moves the mouse over the picture box… Here's the code for all three buttons:

private void butGame_MouseEnter
(object sender, EventArgs e)
{
  // Set label font to bold:
  lblGameCloud.Font = new Font
  (lblGameCloud.Font, FontStyle.Bold);
}

private void butGame_MouseLeave
(object sender, EventArgs e)
{
  // Set label font to normal:
  lblGameCloud.Font = new Font
  (lblGameCloud.Font, FontStyle.Regular);
}

private void butHighScores_MouseEnter
(object sender, EventArgs e)
{
  // Set label font to bold:
  lblHighScore.Font = new Font
  (lblHighScore.Font, FontStyle.Bold);
}

private void butHighScores_MouseLeave
(object sender, EventArgs e)
{
  // Set label font to normal:
  lblHighScore.Font = new Font
  (lblHighScore.Font, FontStyle.Regular);
}

private void butNG_MouseEnter
(object sender, EventArgs e)
{
  // Set label font to bold:
  lblNG.Font = new Font
  (lblNG.Font, FontStyle.Bold);
}

private void butNG_MouseLeave(
object sender, EventArgs e)
{
  // Set label font to normal:
  lblNG.Font = new Font
  (lblNG.Font, FontStyle.Regular);
}

To make this code work, go to your form designer window, then go to your properties window, and click on the 'Events' icon (lightning) on the top of the box. Select your new controls, one by one and find events called MouseEnter and MouseLeave. Click on the little dropdown arrow and you'll see our new code method names in the list. I hope you can find and match the right ones… If not, here's a list that shows you how to match the righ stuff.

• Control - Event - EventName
• butGame - Click - butGame_Click
• butGame - MouseEnter - butGame_MouseEnter
• butGame - MouseLeave- butGame_MouseLeave
• butHighScores - Click - butHighScores_Click
• butHighScores - MouseEnter - butHighScores_MouseEnter
• butHighScores - MouseLeave- butHighScores_MouseLeave
• butNG - Click - butNG_Click
• butNG - MouseEnter - butNG_MouseEnter
• butNG- MouseLeave- butNG_MouseLeave
• lblGameCloud - Click - butGame_Click
• lblGameCloud- MouseEnter - butGame_MouseEnter
• lblGameCloud- MouseLeave- butGame_MouseLeave
• lblHighScore - Click - butHighScores_Click
• lblHighScore - MouseEnter - butHighScores_MouseEnter
• lblHighScore - MouseLeave- butHighScores_MouseLeave
• lblNG - Click - butNG_Click
• lblNG - MouseEnter - butNG_MouseEnter
• lblNG- MouseLeave- butNG_MouseLeave

You probably noticed in the table that we added the 'Click' event to our old button code… That's a nice touch in VS.net, that spares us from retyping the code… (or c/p-ing ;) Nice… Hope you did everything right… And one other cool thing is, that we added the same code to our labels and pictureboxes... Before you try the stuff, let's finally add some graphics.

Ok, what next? Obviously, we have to replace those blocks with that nice, round bubbles… So, that's next on our agenda.