Tutorial Info

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.

Table of Contents:

Step 1: Car movement

Step 2: Collisions

Step 3: Laps and Timing

Step 4: Final Graphic Touches

Step Info

Next Below: In step 3 the game becomes more dynamic and interactive.

We add laps, best lap time and total time for 10 laps.

Flash Racing Game Tutorial - Part I Car Movement & Collisions - Step 3

Download racing_part1_step3.fla

1. Up to now we have a 100% functional game engine but no game. We don't have a goal. So we'll have to add one and because this tutorial is about a time trial racing game we will add laps and timers.

2. Open the racing_part1_step3.fla file provided with this tutorial.

3. You notice that I added two frames on every layer and I labeled them "ready set", "go" and "finish". In the first frame a movie clip will play saying "ready, set, go". When "go" is displayed _root will move to the frame labeled "go" where the car can move.

Why the car will not move in the first frame? Well, that's because the "stepper" movieClip only exists in the second frame, so that's where the "step" function will be executed.

On the second frame of the "actions" layer you will also find two new variables. Those variables will be used to store the exact time when the race started (initialTime|) and the exact time when the current lap started (lapTime).

When the game is over, after the player finishes ten laps, _root will move to the "finish" frame where an information movieClip will be displayed.

3. OK! What we need to do next is determine whether the player has finished a lap or not, so we will add two movieClip (the red line on the right side) and check if the car "touched" this movieClip, and if it did, than you know that a lap is finished... hmm... not really :)

First of all the car will "touch" this movieClip for more than one frame. Maybe for two, maybe for ten, maybe for one hundred frames, you cannot determine this number because it depends on the car's speed. And instead of increasing the number of laps with one, you will increase it with two, ten or one hundred laps, so the race will be ready quite fast.

The second problem, assuming that you solved the first one is that one player will go past the finish line (the red line on the right) and then return immediately to the same line and "touch" it again, increasing the number of laps even though the lap is not completed. This problem can be solved in a few ways but we will chose the solution that fixes both our problems: we will add a checkpoint (the red line to the left). This checkpoint will be placed somewhere around the middle of the race so that the player will lose more time returning to the finish line than he will lose by completing the lap. Of course if you want a more secured race you will add more than one checkpoint. You will be able to easily add more checkpoints after finishing this tutorial.

4. Open the actions window for the first frame of the "actions" layer. We have to new functions both related to timing the race - setTimes (calculates and sets the total race time) and setBestLap (calculates and sets the best lap time). We'll take them one at a time and see what they do.

function setTimes() {
//we calculate the time elapsed from the moment the race started in millisecond timeElapsed = getTimer()-_root.initialTime; //we calculate the minutes, seconds and tens of seconds and set them to their respective variables milliseconds = timeElapsed;
seconds = Math.floor(milliseconds/1000);
minutes = Math.floor(seconds/60);
minutesTXT = minutes;
secondsTXT = seconds-minutes*60;
tensTXT = Math.round((milliseconds-seconds*1000)/10); //if the minutes, seconds or the tens of seconds number has only one character we add a "0" before it - that's just because we want the time to look good ;) if (minutesTXT<10) {
minutesTXT = "0"+minutesTXT;
}
if (secondsTXT<10) {
secondsTXT = "0"+secondsTXT;
}
if (tensTXT<10) {
tensTXT = "0"+tensTXT;
} //we put all three variables in one that will be used in the timers tables _root.totalTimeTXT = minutesTXT+"."+secondsTXT+"."+tensTXT;
}

//and the second function function setBestLap() {
//this function does the exact same thing as the first one, only here we will use the time elapsed from the last time the car has passed the finish line bestTime = getTimer()-_root.lapTime;
milliseconds = bestTime; //we don't calculate the lap time if the car passes the finish/start line for the first time if (oldMilliseconds>milliseconds || oldMilliseconds==null) {
oldMilliseconds = milliseconds;
seconds = Math.floor(milliseconds/1000);
minutes = Math.floor(seconds/60);
minutesTXT = minutes;
secondsTXT = seconds-minutes*60;
tensTXT = Math.round((milliseconds-seconds*1000)/10); if (minutesTXT<10) {
minutesTXT = "0"+minutesTXT;
}
if (secondsTXT<10) {
secondsTXT = "0"+secondsTXT;
}
if (tensTXT<10) {
tensTXT = "0"+tensTXT;
}
_root.bestLapTXT = minutesTXT+"."+secondsTXT+"."+tensTXT;
} //we set the initial time to the moment the car passed the finish line _root.lapTime = getTimer();
}

5. And now one more time (I promise this is the last time) back to the "step" function and let's analyze the new lines.

//checkpoints //we check to see if the car "touches" the current checkpoint (the current checkpoint, in this case, can be checkpoint1 or checkpoint2 because we only have two checkpoints; checkpoint1 is the start/finish line) if (_root["car"+who].hitTest(_root["checkpoint"+_root["currentCheckpoint"+who]])) {
//if the current checkpoint is the start line - increase the lap number if (_root["currentCheckpoint"+who] == 1) {
//if the current lap is not 0 we check if this is the best lap if (_root["currentLap"+who] != 0) {
_root.setBestLap();
} //if this is the final lap, _root will move to the "finish" frame if (_root["currentLap"+who] == _root.totalLaps){
_root.gotoAndStop("finish");
}else{
_root["currentLap"+who]++;
} _root.currentLapTXT = _root["currentLap"+who]+"/10";
}

//we set to checkpoint to be checked to the next checkpoint _root["currentCheckpoint"+who]++; //if the current checkpoint is the last checkpoint - set the next checkpoint to the start line if (_root["currentCheckpoint"+who]>_root.checkpoints) {
_root["currentCheckpoint"+who] = 1;
}
}

6. That's it :) Now let's move on to the final graphic touches and see our completed game.

« Previous Step   Next Step »
© Witchhut LLC All Rights Reserved