
Level: Beginner / Intermediate
Flash Version: MX, MX 2004
Total Time: 1 & 1/2 Hours
Description: This is a "time trial" racing game tutorial. After completing it, you will be able to make your own racing game with custom tracks and cars, smooth collisions, lap records and more.
Next Below: In this part of the tutorial you will learn about collisions.
Not collisions with other cars (not yet) but collisions with the track.
Download racing_part1_step2.fla
1. We all know why collisions are important in a Racing Game... Because we don't want the car to leave the track, because we want to force the player to use a specific way, because we want him/her to avoid collisions in order to get the best time (or win the race).Collisions are a very important part of a racing game and 70% of the game feeling and success depends on good collisions.
We don't want the car to get stuck in the non accessible areas (NAA), we don't want it to lose all speed although it hardly touches those areas and we definitely don't want it to bounce back (by reversing the speed).
In other words we don't want to give the player a hard time, but on the contrary, an enjoyable game. So when the car touches the NAA we must try to correct it's trajectory and of course apply a speed penalty depending on the angle of collision and collision duration.
2. Open the racing_part1_step2.fla file provided with this tutorial.
3. Before we go back to the "step" function, I will explain how the collisions will work.

Using four points to detect collisions
As you can see in the attached picture, we will pick four points, one on every side of the car and check to see if any of them "touches" the NAA.
For example if the Left Side Point is inside the NAA (hits the NAA) then we will have to apply a speed penalty and increase the angle (_rotation) of the car. Why do we do that? Because of what we discussed earlier: we must try to correct the car's trajectory. So what we do here is force the car to steer right.
OK, I guess everything is clear up to this point. And since we are speaking of points, let's see how we calculate their coordinates. To simplify things we will take the Left Side Point as an example.
When the car's rotation is 0 our job is very simple: the LSP coordinates are x=car._x-20 (20 pixels to the left of the car's center point) and y=car._y
But the car will not always have an angle of 0. Well, here comes the tricky part. There are a few ways to calculate the four points even if the angle is not 0 (for example you can use the sine and the cosine functions) and for this tutorial I chose the simple way (I don't know if it's the optimum way, but it's very simple):
We define the Left Side Point as if the car's rotation was 0:
and then we transform the point's coordinated from local (related to the car's clip) to global (related to the _root clip where we will test the collisions):
Now we have our Left Side Point coordinates that we can use to check the collision:
Can it get any simpler? :)
4. And again back to our Actions Window. Click on the first frame of the "actions" layer and if the Actions Window is not open press F9 to display it.
You will notice that I added a few lines to the "step" function and you probably already know what those lines do :) but still I will go into a few details.
Hard? Not so hard :) And the next two steps are even simpler.
© Witchhut LLC All Rights Reserved