Game Development Tutorials: July 2009

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! :)