Be my fan on FacebookCreate a Flash Racing Game Tutorial
- May 15, 2007 by Emanuele Feronato
- Filed under Actionscript 2, Flash, Game design, Users contributions | 252 Comments
In the same series:
- Create a Flash Racing Game Tutorial
- Create a Flash Racing Game Tutorial - AS3 version
- Create a Flash Racing Game Tutorial - Artificial stupidity
- Create a Flash racing game - Flex version
In this tutorial we’ll cover the creation of a flash racing game.
I got the permission from Remus C. from gameSheep to publish this awesome tutorial.
Before we start, I recommend you all to give a look at gameSheep. You will find a lot of games with cute graphics.
Moreover, this tutorial will give the start to another series of tutorials about creating a flash racing game.
Let’s start!
Moving the car
1. Car movement is not the most difficult part of a racing game, but if you want to simulate realistic (almost realistic) movement you have to take in consideration some of the aspects described below.
2. Download and open racing_part1_step1.fla file.
3. Click on the first frame (the only frame) of the “defs” layer and press F9 to display the Actions Window for this frame. Now let’s see what these variables do:
1 2 3 4 5 6 7 8 9 10 11 12 | car1.code = "player"; //this variable will decide if the specified car is controlled by a human player or by the computer (in Part II of this tutorial you will learn how to add opponents and this variable will come in handy) acceleration = 0.4; //the acceleration variable will add to the speed variable on every enterFrame event (in this case 24 times per second); a higher value translates in a faster acceleration of the car speedDecay = 0.96; //when the car is not accelerated (the UP Key is released), the car will have to slow down smoothly; the speed will multiply with this value (less than 1); the lower this value is, the faster the car will slow down rotationStep = 10; //this is the number of degrees that will increase or decrease the car's rotation (angle) when the left or right keys are pressed maxSpeed = 10; //this is the speed limit on our track; increase it if you want the car to go faster backSpeed = 1; //this is the speed limit when going backwards |
4. OK! Now let’s get back to school :) and see what we can do with these variables.
Click on the first frame of the second layer (“actions”) and if the Actions windows is not open, press F9 to display it.
We will discuss this script in a few moments, but first let’s see how Flash “understands” movement and coordinates.
Just a bit of trigonometry and Flash
Flash is using the classic Cartesian Coordinate System (a grid based system with a horizontal axis OX and a vertical axis OY).
You notice in the attached picture that in Flash the Y axis is inverted meaning that the negative side of the Y axis is positioned higher than the positive side. So the lower a coordinate is, the higher it’s value will be.
Because Flash understand only horizontal and vertical vectors we will have to calculate the horizontal and the vertical components of the actual “speed”.
So, from trigonometry we know (in this case) that:
sin(angle) = speedx/speed and
cos(angle) = speedy/speed
so… we know the angle (angle=car._rotation) and we know the speed. That’s all we need know. Is it? No. You need to know one more thing:
The Math class implemented in Macromedia Flash does not work with angles measured in degrees. Instead we will have to provide angles measured in radians (an alternative unit measurement for angles).
The only case in which you will use degrees is when actually rotating the movieclips.
Using the simple equation below you will be able to transform degrees into radians:
angle_radians = angle_degrees * (PI/180)
Now we can easily calculate the X and Y components of the car’s speed:
speedx = Math.sin(_rotation*(Math.PI/180))*speed;
speedy = Math.cos(_rotation*(Math.PI/180))*speed*-1;
Well, you already figured out why the sign of the Y component has to be inverted ;)
And now let’s get back to Flash and our Actions Window. Next I will explain what the “step” function is all about. The “step” function will be executed on every enterFrame event (on the “stepper” layer you will find an empty movieclip the executes the onClipEvent (enterFrame) routine).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | function step(who) {
//check to see if the car in question is controlled by the player or by the computer
if (_root["car"+who].code == "player") {
//we will constantly decrease speed by multiplying it with a number below 1, but only if speed if higher than 0.3; a lower value will only consume resources and movement will not even be noticed so we will set the speed variable to 0
if (this["speed"+who]>0.3) {
this["speed"+who] *= _root.speedDecay;
} else {
this["speed"+who] = 0;
}
//the car will react to certain key presses that we will capture using the Key.isDown method as follows
//accelerate - we add a certain value to the speed variable if the UP key is pressed and the speed is lower than it's maximum alowed value
if (Key.isDown(Key.UP) && this["speed"+who]<_root.maxSpeed) {
this["speed"+who] += _root.acceleration;
}
//brake (reverse) - same thing, but here we subtract
if (Key.isDown(Key.DOWN)) {
this["speed"+who] -= _root.backSpeed;
}
//steer left - well, we could simply add or subtract a fixed angle (in degrees) to/from the car's rotation, but that's not good enough. In order to simulate a natural movement, steering must depend on speed, otherwise you will be able to rotate your car even if it's almost stopped and it will look like a propeller :)
if (Key.isDown(Key.LEFT) && this["speed"+who]>0.3) {
_root["car"+who]._rotation -= _root.rotationStep*(this["speed"+who]/_root.maxSpeed);
}
//steer right - you already know what happens here
if (Key.isDown(Key.RIGHT) && this["speed"+who]>0.3) {
_root["car"+who]._rotation += _root.rotationStep*(this["speed"+who]/_root.maxSpeed);
}
this["rotation"+who] = _root["car"+who]._rotation;
//we calculate the two components of speed (X axis and Y axis) - we have already discussed this part of the function above
this["speedx"+who] = Math.sin(this["rotation"+who]*(Math.PI/180))*this["speed"+who];
this["speedy"+who] = Math.cos(this["rotation"+who]*(Math.PI/180))*this["speed"+who]*-1;
//apply the components on the actual position of the car - we add the X component of the speed to the X coordinate of the car and the Y component of the speed to the Y coordinate
_root["car"+who]._x += this["speedx"+who];
_root["car"+who]._y += this["speedy"+who];
//position the shadow of the car - when the car steers, we want the shadow to keep it X and Y coordinates and always stay on one side of the car (whatever side that would be)
_root["shadow"+who]._x = _root["car"+who]._x-4;
_root["shadow"+who]._y = _root["car"+who]._y+2;
_root["shadow"+who]._rotation = _root["car"+who]._rotation;
}
if (_root["car"+who].code == "computer") {
//in our next tutorial "Racing Game Part II" we will add opponents to make the game more dynamic and interactive
}
} |
That’s it! We already have a moving car. Now we can move on to collisions.
Collisions
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. Download and open the racing_part1_step2.fla file.
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:
car.pointLeft = {x:-20, y:0}; //this is an Object
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):
car.localToGlobal(car.pointLeft);
Now we have our Left Side Point coordinates that we can use to check the collision:
car.pointLeft.x and car.pointLeft.y
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | //the collisions
//define the four collision points
_root["car"+who].pointLeft = {x:-20, y:0};
_root["car"+who].localToGlobal(_root["car"+who].pointLeft);
_root["car"+who].pointRight = {x:20, y:0};
_root["car"+who].localToGlobal(_root["car"+who].pointRight);
_root["car"+who].pointFront = {x:0, y:-25};
_root["car"+who].localToGlobal(_root["car"+who].pointFront);
_root["car"+who].pointBack = {x:0, y:25};
_root["car"+who].localToGlobal(_root["car"+who].pointBack);
//let's use some shorter variable names :) - this is just for better understanding and to simplify the code
this["lpx"+who] = _root["car"+who].pointLeft.x;
this["lpy"+who] = _root["car"+who].pointLeft.y;
this["rpx"+who] = _root["car"+who].pointRight.x;
this["rpy"+who] = _root["car"+who].pointRight.y;
this["fpx"+who] = _root["car"+who].pointFront.x;
this["fpy"+who] = _root["car"+who].pointFront.y;
this["bpx"+who] = _root["car"+who].pointBack.x;
this["bpy"+who] = _root["car"+who].pointBack.y;
//check for collisions - we check the collisions using the Flash built in hitTest method. This methods can be used to compare the x and y coordinates to the shape or bounding box of the specified instance (in our case _root.terrain), according to the shape flag (the third parameter: true-shape / false - bounding box) setting or to check if the bounding boxes of the target and the specified instance overlap. We use the first one.
if (_root.terrain.hitTest(this["lpx"+who], this["lpy"+who], true)) {
//steer right
_root["car"+who]._rotation += 5;
//speed penalty
this["speed"+who] *= 0.85;
}
if (_root.terrain.hitTest(this["rpx"+who], this["rpy"+who], true)) {
//steer left
_root["car"+who]._rotation -= 5;
//speed penalty
this["speed"+who] *= 0.85;
}
if (_root.terrain.hitTest(this["fpx"+who], this["fpy"+who], true)) {
//stop the car
this["speed"+who] = -1;
}
if (_root.terrain.hitTest(this["bpx"+who], this["bpy"+who], true)) {
//stop the car
this["speed"+who] = 1;
} |
Hard? Not so hard :) And the next two steps are even simpler.
Where are we running?
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. Download and open the racing_part1_step3.fla file.
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.
4. 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.
5. 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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();
} |
6. And now one more time (I promise this is the last time) back to the “step” function and let’s analyze the new lines.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | //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;
}
} |
7. That’s it :) Now let’s move on to the final graphic touches and see our completed game.
Finishing the game
1. The final graphic touches… Well, there’s nothing to explain here. You can express yourself in anyway and create graphics after your own taste.
Just remember to set the alpha of the green movie clip and the red movie clips to 0.
2. This is racing_part1_step4.fla file provided with this tutorial. Download it!
3. Remember that this is just a tutorial. You must work on it in order to build a really addicting game. In the next tutorial we will add opponents in the game. Until then, have fun building your Time Trial Racing Game ;)
And by the way my best lap time is 9.84 :D
And here ends Remus tutorial. I learned a lot from this tut and I will use it to improve the gameplay with some additions.
Meanwhile, give feedback to Remus and try to beat that n00b laptime!!
(412 votes, average: 4.72 out of 5)
Loading ...They can be easily customized to meet the unique requirements of your project.
252 Responses
Leave a Reply
TUTORIAL SERIES:
- Una guida completa al gioco del poker online e una selezione dei migliori casino online.
- casino online
- migliori casino online
- BlackJack online
- casinò online
Nice tutorial man ;)
And by the way ;) my best lap is 9;72 :P:P
Awesome!
I really appreciate the work hat goes into these tutorials, and they have definitely helped my development (seeong as I am a n00b).
I’m currently working on a game like Madness Interactive, and I’ just making the firing character move!
Much thanks,
^^
Wow, awesome!
I just love your tutorials, and hosting tutorials of others is just as cool. This tutorial definitely helps for when I will finally have time to pursue Flash!
Love the end result, and just a quick run without even trying I got 9.90 for my best lap.
Definitly a nice tute.. But to all of the above commenters..
This is an exact copy of a gameSheep tutorial.. All credits go to them..
Whoah! I just got 9.57!
9.33…
9.09 ^^
hmmm maybe Remus should play a bit more to his games… ;-)
omg…9;51 but it was like my 20th lap :[
8.51 =|
8.17 :)
cool tut
but I already have this tutorial and my best time is 7.52
I am the winner with 7.52 laptime!!!
I know this is only a tutorial and there are bugs wich you did not solve but if a player goes in a wall in a 90 degrees angle, he’ll enter it slowly and be pushed ouside of the race.
Where I add code for car
amazing :p
Wow, nice tutorial.
One thing, if you were to turn this into a real game, how would you address people going reverse on the track (crossing both check points still applies, but in reverse)?
(I know you mentioned a part II, so if you address it there sorry :/ )
09:03 :)
Please help! I can’t open any of the file with Flash Mx. Why? The error showed was “Unexpected File Format”.
RSVP
MY Best Time Was 9:32
9:76
nice tutorial
I was wondering, whats the action script you would put on the car if you also wanted it to go to next frame when it hits something.
Since FOREVER I wanted to create my own games, and with your excellent tutorials I am finally beginning to understand certain mathematics (a grade I suck at) Flash uses. Your code is very clear and by simple reading, even without the FLA’s, you made me understand so much more. Can’t wait to create games for http://www.hq40k.com! Thanx!
W00p OMFGZORZWTH!11 :D 9:07 BEAT THAT :D
Great tute! (even if its not yours)
To Cecil
to make the car go to the next frame add code like this
if (car.hitTest(terrain)){
car.gotoAndStop(2);
}
Help! Can anyone provide me the same tutorial file compatible with flash Mx( not ver 2004). I couldn’t open the file given here as it says “Unexpected file format”.
Nice tutorial!! This is what I was looking for, specially because I starting with flash, specifically with Flash 9.
After to check it and convert it to AS3, I could not find a way to predict a collision using localToGlobal method, which is very easy, So, I followed your advice to use trigonometry, and this what I got:
function newPos(point:String,x0:Number,y0:Number,sign:Number):void{
var hypotenuse:Number = Math.sqrt( Math.pow(x0,2) Math.pow(y0,2));
var angle:Number = Math.PI-(this.car1.rotation*Math.PI/180)- Math.acos(sign*x0/hypotenuse);
this[point].x = this.car1.x – sign*hypotenuse * Math.cos(angle);
this[point].y = this.car1.y sign*hypotenuse * Math.sin(angle);
}
newPos (“ref1″,-15,-20,-1);
newPos (“ref2″,15,-20,-1);
newPos (“ref3″,15,20,1);
newPos (“ref4″,-15,20,1);
where ref 1,2,3, and 4 are a circle movieClips I am using to see if positions are correct. In my case, I am putting four points in the corners of the car.
I hope it can be useful for someone else.
I forgot, just change car.x for car.x xSpeed and car.y for car.y ySpeed and you can check if there will be a collision.
This is the same code but with little changes
function newPos(point:Point,carRot:Number,sign:Number){
var hypotenuse:Number = Math.sqrt( Math.pow(point.x,2) Math.pow(point.y,2));
var angle:Number = Math.PI-(carRot*Math.PI/180)- Math.acos(sign*point.x/hypotenuse);
point.x = -sign*hypotenuse * Math.cos(angle);
point.y = sign*hypotenuse * Math.sin(angle);
}
var newPoint:Point = new Point(-15,-20);
newPos (newPoint,myRot,-1);
newPoint.x = myCar.x;
newPoint.y = myCar.y;
myCar.point1 = newPoint;
ref1.x = newPoint.x;
ref1.y = newPoint.y;
newPoint = new Point(15,-20);
newPos (newPoint,myRot,-1);
newPoint.x = myCar.x;
newPoint.y = myCar.y;
myCar.point2 = newPoint;
ref2.x = newPoint.x;
ref2.y = newPoint.y;
newPoint = new Point(15,20);
newPos (newPoint,myRot,1);
newPoint.x = myCar.x;
newPoint.y = myCar.y;
myCar.point3 = newPoint;
ref3.x = newPoint.x;
ref3.y = newPoint.y;
newPoint = new Point(-15,20);
newPos (newPoint,myRot,1);
newPoint.x = myCar.x;
newPoint.y = myCar.y;
myCar.point4 = newPoint;
ref4.x = newPoint.x;
ref4.y = newPoint.y;
Remember ref 1,2,3, and 4 are just to see the collision points.
very nice tutorial friend
its really very helpful and very interesting
thank you thank you very much
7:43 :)
nice tutorial , thanks
8.87 n_n
hi, this is a wonderful tutorial, however, I am really a beginner exploring actionscripts, could anyone advise me what IDE/compiler do I need to develop a flash game/program or do I need to purchase macromedia flash to do this?
Thanks!!!
tonius
Hi tonius. Yes, you need macromedia flash. I’m not sure about it, but i think that there excists programs to write actionscript. But as i said, im not sure about it. Anyway, you can du it with macromedia flash :)
9:36
1.02
there is a secret passage :O
i started using action script last week and started making games etc, i used to be a keen programer in ‘basic’ (well dated now lol) i found your site very very usefull to learn new code and put it into practice. i keep stumbling accross really difficult math problems then i look on your site and realise that the 30 lines of code i have written, can be swapped for 1 line of correct code lol. thanks
if you have time take a look at my first game, there are glitches i know about lol, but its my first one. http://www.geocities.com/ardscore
Brilliant, but how can you change the amount of steer depending on the amount of time that the player has kept down the left /right keys
nice tutorial, but i had a question. i have an older version of flash and whenever i try to download the files it always says, “unexpected file type.” does anyone know how to see it or anything, cause it doesnt really work without it. nice tutorial though!
oh yeah, and also i am trying to make a game where you are constantly going but when you click the person turns. im not sure how and any help would be great. or, you could make a tutorial on it. here is my inspiration:
http://www.gtds.net/Hamster/
its a fairly simple game, but i would still love to know how to make it. thanks!
Someone actually stole this game. They only changed on thing.
http://www.newgrounds.com/portal/view/397860
and the second version that the guy made:
http://www.newgrounds.com/portal/view/398157
The tutorial is awesome but does anyone know how I create a duplicate car & give the PC controlls to it so instead of a time trail its a vs PC game?
A great tute, thanks!
I’ve been trying for the past three days to add a new hit test object.
For example: A barrel and when you hit it, it plays a movieclip or sound.
I’ve tried something similar to
if (car.hitTest(barrel)){
car.gotoAndStop(2);
And created a clip and instance called barrel but it’s not working.
Please help, it’s driving me crazy (pun intended)
Thanks
}
Hi
Can you try to add nos for the next tutorial?
Im trying to make and underground racing game.
thanks.
hey nice tuterials….
but i can’t open the download files on flash mx and i don’t know why ???
8.16 ;)
Hey I am 5.67.
HI…….It’s fantastic….
I really enjoyed…
& this is also very good tutorial.. for students or any other person.
i am really thankful to the peron..
who make this coding..
I want these types codings & tutorial..
plz send me more tutorial or scriptings on my ID..which is
Beautythief1@yahoo.com..
plz peoples join me..
& communicate about these types of softwares…
thanks. Fantasticccc…….!
HI… friends…
I wil tel u..
IDE means (Integrated development Enviroment)
which we used in C++, fortron language…
IDE can be say as.. that it is a working place where we write the scripts…
C++ (blue screen) are also called IDE.
and remaining… Compiler..
it’s use for tranlation..
compliler.. is a translator.
can translate the program… machine language to human language…
A common example of compiler is…
If a person knows Arabic.. and another person knowz English…
So here we use the compiler as a person..
that knowz both language Arabic and English.
and make conversion easy..
so friend.. it’s ur question reply.
i hope u will.. understand these topics now..thanks.. if u want contact so..my ID is
Beautythief1@yahoo.com.
ome online from 6:30pm to 9:00pm regularly..tc..have fun.
Hello….Sir,
If i want a openent player..
or a computer handed player..
So what i use or what I add in this scriting?
Ig someone have any answer of my Question..
So plz send me scripting on.. My Id which is..
Beautythief1@yahoo.com.. thanks
i will be waiting for kind response.
YAY!!! I got 1.44 for one lap!!!
WHEN WILL PART 2 COME OUT! This tutorial came out over a year ago!!! How much longer will we have to wait before we know how to use computer AI in this tut!
How come whenever i try to download you files and open them in flash mx it says unexcepted file? Please Answer.
I agree with Gregory!! I want to see some AI!
sir this game very nice and good.pls tell me how to build AI for this game.
5/5, I actually also think AI is a fairly important subject to cover.
yh its all good and well but what software do u use to make it on
My best lap is 9.14. Also, I love your tutorials.
hey emmanuelle.i like the result of this tutorial but my flash cant load the file cuz its not the right format.i would be nice if you could make the same tutorial but beggining at the really start.and when will we know how to add ai to our games.im making one and poeple dont like it becuz theres no cpu.please help me.
http://www.newgrounds.com/portal/view/455996
hello everyone !
I’m trying to make a racing game with your example, i have the solution for an Ai but i can’t :
- skid the car in a turning point
- know in live what is the place of the car (1st, second, etc.)
- have a realistic collision with other cars…..
You can find the begin of my job here :
http://www.benz.be/forum/racing/course3.php
If someone can help me !
Manu (sorry for my bad english)
having trouble with the “PLAY AGIAN” button can you help me thanks copper
Saved my Day :D
Thanks man!
7.34 :)
nice one it heplped me a lot!!! :D
This is great, i was wondering how to add more maps to select to play…
cool! I wish you could make a tutorial on how to make racing games where the backround rotates instead of the car…
my mannnnn… ouhh, greatt.. cool man. thanks for this tutorial.. I take it home okay.. :)
best 9:27 wicked game used tutorilal to make wicked game go to http://mostplays.com/play/Super_Racer_30989
can someone email me some script i can use for cars because i cant copy this one.
7.30 :P
Thanks very much. I can’t say more. You’re AWESOME!
My best lap was 7.17
Thanks for this tutorial.. although I am a noob and only get some of it… I just need to learn the ariables and how to code haha.
great tutorial .. & hehe i guess i take the gold , best lap so far: 6.26
This is great, I used it to make my own racing game. I deleted a lot of code – especially about collision with the ground – it’s not correct, I just wrote to slow you down when you are on the ground.
Hey…
this is a really nice tutorial.
Well, i need a version in AS3. Is there somebody, who can help me or is there sombody, who rewrite the program already?
It would be very nice!!
Thanks,
Verena
sorry, I forgot to place my adress for sending results :)
haase.verena@googlemail.com
i got 8.91 second RECORD!!!!
It Was Just what i was looking for, i love it. But there are some loop holes which can be fixed once you get off from computer and think about it, You know when you sit on computer there are too many distractions, right? Anyway nice new site’s layout. Congrulation,
Please Make New Site address instead of http://www.emanueleferonato.com, it’s hard to remember and your site is even harder to be searched it just doesn’t showup in search list. So have another domain name Like Geektutorials.com or something like that SInce you are always bragging about it so i figured that would suit your site, huh.
This is great and all but i want to make my own racing game not somebosy else’s.
Ha 8.70 Beat you all!
Proof:
http://img14.imageshack.us/img14/6329/77650639gx9.png
On another note, Can I make this game then put my sponsor page infront of it and distribute it?
7.10 secs. *SNAP*
nice i like it!
I really like this, its help me understand AS2 so much more. I am trying to work on additional elements to this game like places were you can speed up faster then the max speed and other things like going smaller and larger and so on. Could you guys help me with this??
7.47 :P
hey Verena are you still looking for a AS3 version?
i started making a racing game using this tutorial, but i’ve since added oppenents and gears and a vertical panning course.
its more like a drag racing game at the moment, but i’ll add in some corners later on :P
regards,
Grelek
hey..tnx for your tutorial 8 helps a lot..
can you make it drifting ? coz i want to make a drifting flash game. thx for your tutorial. :D
how about a as3 version. i tried to make one on my own with limited success. what is getting passed with “who”? there’s no variable called it and .code i don’t think applies to as3 either.
Hi, nice game only i can’t download de 4th file
can someone send it to my mail?
thnks
my score 8.54
Hi i can’t download file 4 can someone send it to my mail please
DennisvGerwen@hotmail.com
(my score is 8.54) :P
Thnks
is there any certain reason for not post my messages ?
Artificial Inteligent Code here : gamenetwork.gr
hello.
I tried to download your carTableDetail.rar file at this address >> http://gamenetwork.gr/carTableDetail.rar file on your website but all I get is un-readable code which seems to have the extension file type of a .RAR (compressed) file. It looks like the binary source code but how do i use it please?
Because you’ve managed to solve the AI issue, I think virtually everyone here would be grateful. It’ll also make the original tutorial complete since no one can find the “GameSheep Car Racing Game – PART 2 – Adding Opponent Cars”. Please re-upload the FLA sourse file(s) for the version with opponent cars on your website (please post link here).
Cheers mate.
The Atomic Robo Kid
my best lap was 9.15
6.87
OH YEAH 7.09 WOOO!
i got a 6:52 on the game
.99 Sec take that!
is there AS3 version of code of this game anywhere????
please help!!!!
[...] 18. Flash Racing Game Tutorial [...]
gracias me sirvio muchoooo y aprendi muchooo
Would it be possible if you could make an extension for this tutorial that tels us how to add a CPU?
My best lap time is 5:98
7.40 ladies and gentlemen beat that
Tal vez no entiendan porque hablo español, pero sólo querÃa aportar que el juego tiene un bug, para que el programador lo tenga en cuenta.
Si doy la vuelta completa en reversa me la cuenta como una vuelta normal.
——————————
English:
I’m from Colombia, however i will try to explain in english:
Only for information to the developer:
If i drive in reverse one complete lap, it will count too.
7:24
6.89 bitches
6.89 beat that
i’m the best. my time is 6.80 seconds
How might I modify the game so that you don’t have to continually press the up arrow to maintain forward motion? I’d like to be able to press the up arrow once, have it start moving slowly, then with each successive press, the forward motion would accellerate; same for the slowing down using the down arrow.
Any help is appreciated.
Tom
I’m interested to know how to add a second player.
@Tom: just change this line
if (Key.isDown(Key.UP) && this["speed"+who]<_root.maxSpeed)
into this
if (this["speed"+who]<_root.maxSpeed)
5:51 secs!
5:48 secs, try to beat that one!
Gracias amigo… Que buen tutorial!
Thank u!
8.09
9.06
4:84 beat that. :)
why there’s no link for download, racing part1 step4???
i cant make my own game,,,huaaa,,,help me,,
8.95 :D :D
NaN, it glitched
[...] Read The Tutorial [...]
Thanks for your tutorial. I really appreciate it! XD.
wooo!!! 7.56
8.22
Very nice tutorial btw. all of them are!
7.54
oh yeah i’m awesome
Não consigo fazer download do arquivo Parte 2.
Pode me eviar?
realy it will be a good game reaaaaaaaaaaly
Great Work!
Very cool tutorial though I got a question! How simple is it to apply items into the game? such as oil slick? turbo bottles and such? :) Been racking me brains out to have item drops on such a simulation…
8.20
Wow, you guys must suck if you can’t get under 8.00. FTW 6.73!
Hi nice tutorial thank u so much..
i’ve always wondered how to make one of those side veiw dirt bike games were you travel through
inclines and declines trying not to fall over, I
mean it’s so complicated, if you have one wheel on
a higher or lower level the whole movieclip rotates to a certain degree dependant on the y and x axis of both wheels.
Nice tut! i got 8.73 on 2nd lap, but can’t beat it now :p
yea 7.57 =)
why can’t run fla file?
why i cant run fla file?
My best time is 8.50 :)
9.90 :P
Great tutorial, this is very helpful!
lol. great tutorial. i’m working on it. btw, my best is 08:53. lol :D
Hey can anyone email an AS3 version of this tutorial? niven.r@hotmail.com
hi i want to ask u how did u create the stepper and by the way good tutorial
@Niven: Download > Open with..
Couldnt be easier.. Atleast, works for me.
8.11
Good tute!
Just did a lap in 7:49
Hello, what program do you use to create this game?
I’ve done 8.44! xD
best game ever
7.33 ;)
It is the best tutorial I’ve ever seen :) I mean the style is consistent and the explanations given for the math behind it are easily comprehensible :)
I sort of imagine, how to put together some AI cars that follow waypoints on the map, but I would surely appreciate it, if you could make and post the second part of this tutorial. I really want to see, how it can be done in a neat and fluent coding style :)
Really nice tutorial – Thanks!…
I would love to learn about adding a multi player option or a play against the computer option :-)
where can I find Part 2 of this Tutorial?
Nice tutorial. My best 7.27..
Thanks for the Tut.. very interesting and helpful
where is step1 part4?
can u send me on my email garyjuano@yahoo.com
hopefully i can build my own games!!
plz tell me how can i add text like START GO GO etc
http://www.emanueleferonato.com/downloads/racing_part1_step4.zip
this is the best game ever
how can i change the race track background pls need help!!i need tutorial
hey! man, what a very nice tutorial, i rily liked it.
Is there a part 2 please link please???
@60.Van meerhaeghe on October 15th, 2008 2:55 pm
[quote]hello everyone !
I’m trying to make a racing game with your example, i have the solution for an Ai but i can’t :
- skid the car in a turning point
- know in live what is the place of the car (1st, second, etc.)
- have a realistic collision with other cars…..
You can find the begin of my job here :
http://www.benz.be/forum/racing/course3.php
If someone can help me !
Manu (sorry for my bad english)
[/quote]
How do you make your circuit move whit te car???
awesome tutorial.. thanks very much.. i’m not newbie now :))
8.71s very good tut
7.04 =D
Lol, just got 6.69 after that
my best is 00.08.20 :P
my best time is 00.07.77
only
4.81 seconds got
thanks man………ur information was use full to me…to complete my project…….
if u have any other small tutorial for creating some other mobile games ..plzz send an mail to my ID plzzzzzz
this is an awesome tutorial 5*
i am trying to put this game into my own project now for college presentation but i cannot find where to put the stop() code in to make the game continue and not go to the next scene. the game starts by ready, set, go and after go, it continues to the next scene… this is very frustrating! please would you assist me as soon as possible. im sure other people are suffering from the same issue.
thanks alot!
cam
Maximum speed only 4.81 seconds.
You can try.
This was amazing! Thank you so much!
[...] 8. )Racing Game [...]
how do we make same things about hit part with actionscrtip 3.0 using trigonometry !!
Cool, but my best lap time 10.34 :(
iflipante…. gracias amigo :)
hi
i m do in project regard highway codes.
this is project outline its game based learning, therefore user can learn by enter game.
game outline function…….
user login.
user progress level(progress will show 5 different section in highway code
example like motorway section score 2 out of 5.
game like when car move near sign code question will pop up and answer with in certain time or it will skip to another question
do have an idea to improve and development help for this project
[...] Create a Flash Racing Game Tutorial [...]
where can i find part 2?
9:16 =p
ok i have made a new track and when i play it i can drive through the actual track and it doesnt push me back could someone help me find where abouts in the code i have to change so my second track doesnt let you drive through it as if it is invisible.
plz mail me at hazza0999@gmail.com
or post a repley
Good Tutorial :) I got 7:30 exactly ;)
fixed it lol
[...] 8. )Racing Game [...]
[...] Yar?? Oyunu – demo – [...]
Great Tutorial :) Keep up the good work .
Thanks a lot!
Awesome tutorial, quite useful
Hey, nice tutorial, I just have one basic question, what kind of flash player/editor do you use? I want to get one but I don’t know which one would be best for making games, suggestions would be greatly appreciated.
Btw, I also got exactly 7:30 for best lap
[...] 8. )Racing Game [...]
todo es super vacano pero ¿como se llamas el programa????
8.10 Oh Yeah!!! :D :D
Nice, very good post thanks admin.
[...] Flash Racing Game Tutorial [...]
You are al slow, i got 7 : 15
7.04!!!
6.87 fracos –’
6.10 :-)
[...] 8. )Racing Game [...]
How about the 2 players? the key control of the arrow keys and using w,a,s,d control? plss answer
This tutorial looks interesting, but is there a way you could revise it to make it compatible with Flash CS4?
[...] of the first websites was http://www.emanueleferonato.com/2007/05/15/create-a-flash-racing-game-tutorial/. This showed how to create a racing game along with boundaries. But one problem I had was coming to [...]
how would you make it like the game driftrunners instead of top-down?
I Can’t Download racing_part1_step4.fla and WHERE’S PART 2!?
wheres step 4 download? cant seem to find it anywhere -.-”
[...] 8. )Racing Game [...]
1.53.46 :)
thats it im the king yay-1st place time-0.26
no bullshit, 7.47! i’ve been doing it for like 10 minutes
i just got 8.02 :)
wat program do you use?
Which flash is this for?
and would it work in flash mx??
how to create a lan connection in flash?
7.17))))))))))
my best lap time is 00.08.87
5.68 omg :)))
Thanks…………
Nice tutorial…….. Hope u’ll keep same work goin in future and provide lots of such stuffs
God bless u…………. keep coding
Enjoy n take care………… once again thanks for guidance and for great tutorial
Thanks…………
What a way to start and complete this game!!!!
Nice tutorial…….. Hope u’ll keep same work going in future and provide lots of such stuffs
God bless u…………. keep coding
Enjoy n take care………… once again thanks for guidance and for great tutorial
By any chance… have you worked with Game Maker before?
but lap finished same if car go forward and car go back
Nice tutorials with easy steps thank you.
[...] 8.) Racing Game [...]
Were is defs
I like to create a game but are no were is defs and wath is it
Hello all. This particular tut originally made by GameSheep is fantastic. Much enjoyed. It’s very intuitive if you’re quite comfortable with Flash.
My only concern is how to add AI opponents. of course I know it’s been done and some of the results are equally as fantastic. Did you lot see these?
http://gamenetwork.gr/ and
http://www.benz.be/forum/racing/course3.php
by others users. Amazing. I was impressed because I would like to implement something like that. HOW????
Please help me.
THANKS IN ADVACE!!!
:-)
@ gamenetwork
hello. I tried to download your carTableDetail.rar file at this address >> http://gamenetwork.gr/carTableDetail.rar file on your website but all I get is un-readable code which seems to have the extension file type of a .RAR (compressed) file. It looks like the binary source code but how do i use it please?
Because you’ve managed to solve the AI issue, I think virtually everyone here would be grateful. It’ll also make the original tutorial complete since no one can find the “GameSheep Car Racing Game – PART 2 – Adding Opponent Cars”. Please re-upload the FLA sourse file(s) for the version with opponent cars on your website (please post link here).
Cheers mate.
The Atomic Robo Kid
Can you make an AS3 tutorial like this? :)
Thanks!! such a nice tutorial……
[...] Create a Lightbox effect only with CSS – no javascript neededFlash game creation tutorial – part 1Create a Flash Racing Game TutorialFlash game creation tutorial – part 2Make a Flash game like Flash Element Tower Defense – Part [...]
Nice tutorial!!! You´re a master!
thanks this for good tutorial dude.
howwwwwwwwwwwwwwwwwwwwwwwwwwwww do i move my car
i cant play what tutorial goes in witch??????????????????????
[...] PDRTJS_settings_2036579_post_68 = { "id" : "2036579", "unique_id" : "wp-post-68", "title" : "tutorial+%3A+making+game+flash+%22racing+game%22", "item_id" : "_post_68", "permalink" : "http%3A%2F%2Frahmandinus.wordpress.com%2F2010%2F06%2F24%2Ftutorial-making-game-flash-racing-game%2F" } this tutorial explain about how to make racing game : tutorial : click me [...]
When i downloaded first fla file and open it. I got format error. Do anybody know how to fix it? Please.
Well, I’ve watched a lot of your tuts and I have to say you’re great. They’re all really helpfull. So is this one!
Thanks@NL!
7.73 is my best lap time. thanks for the tutorial!
PLEASE HELP!!!!!!!!!How do i set the alpha to zero?\
& when i customize the graphics of the symbol it slows my car down!
Cuando le doy al boton “Play Again” no hace nada, es como si el boton no tubiera acciones. ¿que hago?
My time was 00:08:27 :P
Hi
Great tutorial, im needed some help im a propper noob at this, i’ve followed the tutorial tested the game and got it working but what i need to know is how to save the game to be play on a website and how to put the game on my website?
forgot to mention i haved saved the game as .swf but when i open the game i doesnt work??
Guys, how can i get more real physics? For example, drifts, normal acceleraton, braking, etc.
idk….thats exactly what i need too
and how can i make other cars racing me and adding the position?
lol my best lap : 0.00 :O , :)) 8:50 ^^
now 8:33 :D
7:90
7:43
[...] Create a Lightbox effect only with CSS – no javascript neededFlash game creation tutorial – part 1Create a Flash Racing Game TutorialFlash game creation tutorial – part 2Triqui MochiAds Arcade plugin for WordPress official pageMake a [...]
I would recommend a wall at the edge of the map because otherwise (although it is a little difficult) the car can leave the map completely…
This game tutorial is the best, thnx for deatailed lesson.
2 questions..
1) how to change the code into 1 player.. without “check to see if the car in question is controlled by the player or by the computer”
2) how to change the lap from 10 laps to only 1 lap??
helppp pls… pls pls pls~~ :(
6.94!