Creating Dynamic Terrain

Creating the dynamic terrain is actually quite easy. I have included the background as sky.jpg on the CD. You can use this to create your image. Once you have created your image you just need to set the first two points to 0 and 450. This will put the first coordinate at the bottom left of the graphic.

Once you have placed the very first coordinate at the bottom left of the graphic you need to start at the next pixel you would like to put your next point on and traverse the entire width of the image. While you are traversing the entire width of the image you will be generating two points. One is the x portion that should just be your loop counter, and the other is a randomly generated y coordinate.

After you have traversed the whole width of the image you will want to set the last two points. The last two points need to be the lower right corner of the image. In this case it is (700, 450). Now you are all set to generate a filled polygon with all of the points that you have just generated.

All of these procedures should go into the GameInit() function. Take a look at the follow-ing code example to see the new GameInit() function:

function GameInit()
{
    global $gGameState;
    global $gLeftTankLocation;
    global $gRightTankLocation;

    $terrain = ImageCreateFromJpeg(“images/sky.jpg“);

    $points[0] = 0;
    $points[1] = 450;
    $i = 2;
    for($x = 10; $x < 710; $x = $x + 20)
    {
        $points[$i] = $x;
        $points[$i+1] = rand(150, 350);

        $i = $i + 2;
    }

    $points[count($points)-1] = 700;
    $points[count($points)] = 450;

    $brown = ImageColorAllocate($terrain, 139, 164, 125);

    ImageFilledPolygon($terrain, $points, sizeof($points)/2, $brown);

    ImageJpeg($terrain, “images/temp.jpg”);
    ImageDestroy($terrain);

    $leftY = (($points[3] + $points[5])/2) - (($points[2] + $points[4])/2) - 10;
    $rightY = (($points[count($points)-4] + $points[count($points)-3])/2) -
        $points[count($points)-4];

    // Set the tank locations
    $gLeftTankLocation = array(“x” => 42, “y” => $leftY);
    $gRightTankLocation = array(“x” => 628, “y” => $rightY);

    $_SESSION[‘gLeftTankLocation’] = $gLeftTankLocation;
    $_SESSION[‘gRightTankLocation’] = $gRightTankLocation;

    $gGameState = GAME_PLAY;
}
The very first event that occurs in the GameInit() function is a new image is generated
from the existing sky background by using:
    $terrain = ImageCreateFromJpeg(“images/sky.jpg“);
Next you set the first set of coordinates.
$points[0] = 0;
$points[1] = 450;
Now that you are starting in the lower left corner of the image you need to start 10
pixels into the width of the image and traverse all the way across the image to 700.
$i = 2;
for($x = 10; $x < 710; $x = $x + 20)
{
    $points[$i] = $x;
    $points[$i+1] = rand(150, 350);
    $i = $i + 2;
}

This loop generates a random number every 20 pixels between 150 pixels and 350 pixels. This is what gives you the x and y points for the next logical coordinate.

Now that you have traversed all the way across the image you need to set the final point. Since you want the polygon to fill all the way to the bottom, you need to set the final point to (700, 450).

$points[count($points)-1] = 700;
$points[count($points)] = 450;

Now you simply draw your polygon onto the canvas by using the ImageFilledPolygon() function. After you have drawn the polygon you need to save the image to disk. The reason you save the image to disk is because you only want to generate new terrain when you first start a game. You don’t want the terrain to be changing every time someone fires his cannon.

$brown = ImageColorAllocate($terrain, 139, 164, 125);

ImageFilledPolygon($terrain, $points, sizeof($points)/2, $brown);

ImageJpeg($terrain, “images/temp.jpg”);
ImageDestroy($terrain);

Now all that is left is to position the tanks. In this example, the tank’s x coordinate is always the same and the y coordinate is calculated with the average of two of the y points. This is not a totally accurate way to position the tank, but it does get the tank close enough. If you want a more accurate method you need to take three or four points and reposition the tank based on the x coordinate also.

$leftY = (($points[3] + $points[5])/2) - (($points[2] + $points[4])/2) - 10;
$rightY = (($points[count($points)-4] + $points[count($points)-3])/2) -
$points[count($points)-4];

// Set the tank locations
$gLeftTankLocation = array(“x” => 42, “y” => $leftY);
$gRightTankLocation = array(“x” => 628, “y” => $rightY);

Now that you’ve calculated the x and y coordinates for your tank positions you need to save that information to the session.

$_SESSION[‘gLeftTankLocation’] = $gLeftTankLocation;

$_SESSION[‘gRightTankLocation’] = $gRightTankLocation;

After the coordinates are saved to the session all that is left to do is to start the game by switching the game state.

$gGameState = GAME_PLAY;

Figure 9.3 shows a screen shot of the game with some dynamic terrain being generated.