Create a flash draw game like Line Rider or others - part 3

February 17, 2007 by Emanuele Feronato
Filed Under Flash •  

March 31st update: part 5 released
March 4th update: part 4 released

In the 3rd part I am going to make the ball bounce.

Read lessons 1 and 2 if you haven't done it already.

Trigonomerty Basics

Let's introduce trigonometry basics and how flash manages trigonometry. I suggest you to give a look at wikipedia, where I found some information I am reporting here.

The shape of a right triangle is completely determined, up to similarity, by the value of either of the other two angles. This means that once one of the other angles is known, the ratios of the various sides are always the same regardless of the size of the triangle. These ratios are traditionally described by the following trigonometric functions of the known angle:

The sine function (sin), defined as the ratio of the leg opposite the angle to the hypotenuse.
The cosine function (cos), defined as the ratio of the adjacent leg to the hypotenuse.
The tangent function (tan), defined as the ratio of the opposite leg to the adjacent leg.
The adjacent leg is the side of the angle that is not the hypotenuse. The hypotenuse is the side opposite to the 90 degree angle in a right triangle; it is the longest side of the triangle.

The reciprocals of these functions are named the cosecant (csc), secant (sec) and cotangent (cot), respectively. The inverse functions are called the arcsine, arccosine, and arctangent, respectively

Trigonomerty

That's all you need to know about trigonometry...

Trigonometry and Flash

Flash determines angles in radians, but we need degrees... so we need to know how to convert degrees to randians and radians to degrees.

PLAIN TEXT
ACTIONSCRIPT:
  1. angle_degrees = angle_radians * 180/Math.PI;
  2. angle_radians = angle_degrees * Math.PI/180;

These are the formulas to convert between degrees and randias. The Math.PI is a constant with the value of pi (3.14...)

Direction theory

The first thing we need to know is the direction of the ball of whatever other thing.
To introduce these concepts, I am showing you a movie where there is a flat ground and an arrow that points from the mouse position to the center of the ground.

Move the mouse over the movie, and you'll see the arrow to rotate keeping the direction from the mouse pointer to the center.

How can we do that? Using trigonometry previously explained.

PLAIN TEXT
ACTIONSCRIPT:
  1. _root.attachMovie("arrow", "arrow", 10001);
  2. arrow._x = 150;
  3. arrow._y = 150;
  4. arrow.onEnterFrame = function() {
  5.     mousex = _xmouse-150;
  6.     mousey = (_ymouse-150)*-1;
  7.     angle = Math.atan(mousey/mousex)/(Math.PI/180);
  8.     if (mousex<0) {
  9.         angle += 180;
  10.     }
  11.     if (mousex>=0 && mousey<0) {
  12.         angle += 360;
  13.     }
  14.     _root.angletext.text = "Angle: "+angle;
  15.     this._rotation = angle*-1;
  16. };

Lines 1-3: the "arrow" movie is attached to the stage and placed at 150,150 (the absolute center of the stage).

Lines 5-6: determining the position of the mouse pointer relatively to the center of the stage.

Now, it's obvious that mousex and mousey values represent respectively the adjacent and the opposite values. We need to determine the angle.

Line 7 Applies a formula based on trigonometry explained above and converts the radians to degrees.

Lines 8-13 Transform angle value from flash angle system to "our" angle system. When I say "our" angle system I mean that 0 degrees is where the clock says "3", 90 degrees where the clock says "12", 180 degrees where the clock says "9" and 270 degrees where the clock says "6".

With this actionscript we determined the angle where the ball comes from.

Now, let's make it bounce.

Bouncing theory

In a real world, bounce is determined from various variables, such as terrain hardness, ball hardness, friction and so on. At the moment, we only need to know that the bouncing ball acts like a ray of light casted on a mirror. The ground is the mirror, and the incoming ball is the ray of light.

Look at this movie: you move the blue arrow (ball) with the mouse while the red arrow is the bouncing direction

The actionscript is very similar to the previous one:

PLAIN TEXT
ACTIONSCRIPT:
  1. _root.attachMovie("arrow", "arrow", 10001);
  2. _root.attachMovie("bounce", "bounce", 1000);
  3. arrow._x = 150;
  4. arrow._y = 150;
  5. bounce._x = 150;
  6. bounce._y = 150;
  7. arrow.onEnterFrame = function() {
  8.     mousex = _xmouse-150;
  9.     mousey = (_ymouse-150)*-1;
  10.     angle = Math.atan(mousey/mousex)/(Math.PI/180);
  11.     if (mousex<0) {
  12.         angle += 180;
  13.     }
  14.     if (mousex>=0 && mousey<0) {
  15.         angle += 360;
  16.     }
  17.     bounce_angle = 180-angle;
  18.     if (bounce_angle<0) {
  19.         bounce_angle += 360;
  20.     }
  21.     _root.angletext.text = "Angle: "+angle;
  22.     _root.bouncetext.text = "Angle: "+bounce_angle;
  23.     this._rotation = angle*-1;
  24.     bounce._rotation = -bounce_angle;
  25. };

The only important lines here are lines 17-20 where I get the bounce angle starting from the incoming angle and convert the value to the "clock" values explained before.

Now we know almost all about bouncing... I say "almost" because we assumed the ground to be plain. What if the ground itself should have an angle?

Bouncing on angled ground

In next example, you move the ball angle with the mouse and the ground with left and right arrow keys

Look: even if the ground has its angle, the bounce still works.

PLAIN TEXT
ACTIONSCRIPT:
  1. _root.attachMovie("arrow", "arrow", 10001);
  2. _root.attachMovie("bounce", "bounce", 1000);
  3. arrow._x = 150;
  4. arrow._y = 150;
  5. bounce._x = 150;
  6. bounce._y = 150;
  7. arrow.onEnterFrame = function() {
  8.     if (Key.isDown(Key.LEFT)) {
  9.         ground._rotation--;
  10.     }
  11.     if (Key.isDown(Key.RIGHT)) {
  12.         ground._rotation++;
  13.     }
  14.     mousex = _xmouse-150;
  15.     mousey = (_ymouse-150)*-1;
  16.     angle = Math.atan(mousey/mousex)/(Math.PI/180);
  17.     if (mousex<0) {
  18.         angle += 180;
  19.     }
  20.     if (mousex>=0 && mousey<0) {
  21.         angle += 360;
  22.     }
  23.     bounce_angle = 180-angle-2*(ground._rotation);
  24.     if (bounce_angle<0) {
  25.         bounce_angle += 360;
  26.     }
  27.     _root.angletext.text = "Angle: "+angle;
  28.     _root.bouncetext.text = "Angle: "+bounce_angle;
  29.     _root.groundtext.text = "Angle: "+ground._rotation;
  30.     this._rotation = angle*-1;
  31.     bounce._rotation = -bounce_angle;
  32. };

Lines 8-13 manage the routine to pan the ground according to left and right arrow keys

Line 23 determines the bounce angle almost the same way as before but I considered the ground rotation too. The 2* multiplier is there because in this examples ground rotation does not go from 0 to 359 but from -179 to 180.

Now we know how to determine the angle of impact, the ground rotation and the ball bounce... time to do something serious.

Putting all together

Time to pick the last example we left in part 2 and add all these little tricks

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (load) {
  2.     yspeed = 0;
  3.     xspeed = 0;
  4.     gravity = 0.2;
  5.     radius = 25;
  6.     friction = 0.90;
  7.     precision = 360;
  8.     bounces = 0;
  9. }
  10. onClipEvent (enterFrame) {
  11.     if (_root.go == true) {
  12.         collisions = 0;
  13.         sum_x = 0;
  14.         sum_y = 0;
  15.         yspeed = yspeed+gravity;
  16.         for (x=1; x<precision; x++) {
  17.             spot_x = _x+radius*Math.sin(x*360/precision);
  18.             spot_y = _y-radius*Math.cos(x*360/precision);
  19.             if (_root.terrain.hitTest(spot_x, spot_y, true)) {
  20.                 collisions++;
  21.                 sum_x += spot_x;
  22.                 sum_y += spot_y;
  23.             }
  24.         }
  25.         if (collisions>0) {
  26.             bounces++;
  27.             _root.collisions.text = "Bounces: "+bounces;
  28.             ball_dir = Math.atan(yspeed/(xspeed*-1))/(Math.PI/180);
  29.             if ((xspeed*-1)<0) {
  30.                 ball_dir += 180;
  31.             }
  32.             if ((xspeed*-1)>=0 && yspeed<0) {
  33.                 ball_dir += 360;
  34.             }
  35.             spot_x = sum_x/collisions;
  36.             spot_y = sum_y/collisions;
  37.             x_cat = spot_x-_x;
  38.             y_cat = spot_y-_y;
  39.             ball_coll = Math.atan(y_cat/x_cat)/(Math.PI/180);
  40.             if (x_cat<0) {
  41.                 ball_coll += 180;
  42.             }
  43.             if (x_cat>=0 && y_cat<0) {
  44.                 ball_coll += 360;
  45.             }
  46.             ground_rotation = ball_coll-90;
  47.             if (ground_rotation<0) {
  48.                 ground_rotation += 180;
  49.             }
  50.             bounce_angle = 180-ball_dir-2*(ground_rotation);
  51.             if (bounce_angle<0) {
  52.                 bounce_angle += 360;
  53.             }
  54.             speed = Math.sqrt((yspeed*yspeed)+(xspeed*xspeed));
  55.             xspeed = speed*Math.cos(bounce_angle*Math.PI/180)*friction;
  56.             yspeed = (speed*Math.sin(bounce_angle*Math.PI/180))*-1*friction;
  57.         }
  58.         _y = _y+yspeed;
  59.         _x = _x+xspeed;
  60.     }
  61. }

Let's examine the lines not previously explained:

Line 6: introducing the friction... to know how to apply friction to a ball, refer to flash game creation tutorial part 1

Line 8: I set a bounce counter to zero. This will become useful later.

Line 26: If a collision is detected, then increase the bounce counter.

Lines 28-34: Determining ball direction angle starting from its xspeed and yspeed (opposite and adjacent). The xspeed is multiplied by -1 because, unlike previous examples, when xspeed is greater than zero means I am moving from left to right, and when xspeed is less than zero means I am moving from right to left.

Lines 37-38: Once I determined the average spot of collision as explained in step 2, now I calculate its x and y position relatively to the ball center. These are the opposite and adjacent needed to determine ball angle of impact.

Lines 39-45: Determining ball angle of collision

Lines 46-49: From the angle of collision, I am determining the ground angle

Lines 50-53: Now that I have ball direction and ground angle, with the same formula explained before I determine the bounce angle.

Line 54: With the Pythagorean theorem I calculate the ball speed starting from xspeed and yspeed

Lines 55-56: Now that I have the speed (hypotenuse) and the angle (A), with the trigonometry formulas I calculate new xspeed (adjacent) and yspeed (opposite)

Test the movie and you will see a pretty accurate bouncing, with only two issues:

1) Sometimes the ball seems to bounce "twice" as necessary

2) The ball never stops

We will fix these issues later on this tutorial, that is way to be finished, but you should be able to create your own raw draw game. If you create something playable sent it to me and I will publish it, meanwhile download the full sources of these examples and give me feedback.

Then, proceed to part 4

Related Item: casino game

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5 out of 5)
Loading ... Loading ...

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

61 Responses to “Create a flash draw game like Line Rider or others - part 3”

  1. Create a flash draw game like Line Rider or others - part 1 at Emanuele Feronato on February 17th, 2007 5:53 pm

    [...] February 17th update: part 3 released February 3rd update: part 2 released [...]

  2. Create a flash draw game like Line Rider or others - part 2 at Emanuele Feronato on February 17th, 2007 5:54 pm

    [...] February 17th update: part 3 released [...]

  3. miffy on February 17th, 2007 6:01 pm

    ccooooollll

  4. miffy on February 17th, 2007 6:03 pm

    fun

  5. miffy on February 17th, 2007 6:06 pm

    rilly cool

  6. V34 on February 17th, 2007 6:30 pm

    Woow! Thanks alot man!

  7. abhilash on February 18th, 2007 10:48 am

    It was a good one.
    When will be ‘game creation -6′ will be out?

    Thanx

  8. abhilash on February 18th, 2007 10:55 am

    where’s the ‘game submit’ option?
    Iam searching the whole website but I didn’t find it.

  9. abhilash on February 18th, 2007 12:22 pm

    there is a small problem
    when I draw iam able to draw but when I click to release the ball nothing happens.

  10. mousey on February 18th, 2007 2:45 pm

    Amazing, when will we lern how to draw a line then a ball follow it?

    *****/*****

  11. Emanuele Feronato on February 19th, 2007 1:42 am

    abhilash: you’re right, there is not a “game submit” option.
    I’ll make one soon, meanwhile send me your work at info AT emanueleferonato.com

  12. abhilash on February 19th, 2007 12:26 pm

    the gravity function of the ball is not working.Can u tell me whats the problem?
    Is this tutorial only for flash 8, I am using flash mx 7 pro

  13. abhilash on February 19th, 2007 12:32 pm

    I am trying all day long for making this game work.

  14. smartz on February 19th, 2007 3:11 pm

    Hey great tutorial! I think I’m the same age as you? 13? Well, i made a game and its pretty cool! Can’t wait for the next one to come out!
    @Abhilash~ Try making a button that makes go = true; …The button will make the ball “go”.

  15. hmms on February 20th, 2007 1:27 am

    i put them together.

    the problem is,

    whenever i am drawing the ball drops as soon as i start, and i can’t STOP drawing even though the code for it to stop on release is still there

  16. smartz on February 20th, 2007 4:02 am

    make the button!

  17. abhilash on February 20th, 2007 9:52 am

    @smartz: thanks, by the you guessed my age and you are right.Thanks for the help.

  18. abhilash on February 20th, 2007 11:01 am

    @smartz: please can u tell me in more detail because when i tried it, still it was not working.The thing I did was that I made a button instance name “go”.

  19. abhilash on February 20th, 2007 11:05 am

    if anyone knows this in more detail please help me. my email
    abhilash2863@indiatimes.com

  20. Alex on February 21st, 2007 12:17 am

    None of these worked for me, i copied the code directly, i am using flash MX 2004, its really annoying especially seeing these are so cool and i want to use them.

  21. abhilash on February 21st, 2007 11:39 am

    @alex: I think u have same problem as I have. The gravity function is not working.Right?

  22. cool on February 22nd, 2007 6:18 am

    i cant wait
    for the next one

  23. Alex on February 22nd, 2007 2:07 pm

    I CANT DO ANYTHING not even the thing that tells the angle of the mouse!!!
    its frustrating!!!!!!!!!

  24. question on February 22nd, 2007 3:11 pm

    Are you going to combine drawing lines and everything else together next?

    But they both use the mouse…?

    Are you going to use the enter button or something?

  25. question on February 22nd, 2007 3:37 pm

    I dont know if anybody noticed this, but if you make the terrian slightly more inventive like this (sorry about the pic.)

    | O * *
    | ——-*
    | | * * *
    ————————————–

    Say the O is the ball and that it follows the * path, as soon as it hits the terrain above the last *, it gets stuck and goes crazy in bounces, right now im at 22000 bounces (running for about 5 mins)

    Please help me.

  26. Emanuele Feronato on February 22nd, 2007 3:45 pm

    I reported that issue when I wrote “1) Sometimes the ball seems to bounce ‘twice’ as necessary”.

    I’ll cover how to fix that very soon. Meanwhile, if you have a clue…

  27. xeronar on February 22nd, 2007 4:19 pm

    for everyone who can’t get the button to make it go working… use this

    on (release) {
    _root.go = true;
    }

    before i was using == instead of = so it wasn’t working… try this and it should work

  28. abhilash on February 23rd, 2007 11:27 am

    @xeronar:thanx for the solution now iam giong to try it out.

  29. abhilash on February 23rd, 2007 2:09 pm

    @xeronar: Thanx now my ball is working,but there is one little problem, the ball is bouncing back before touching the line.How can I fix it?
    But
    Again a loads of thanks!

  30. smartz on February 27th, 2007 10:55 pm

    I WANT THE NEXT TUT!!!! WAHHHH! lol
    @abilash~make sure your ball’s radius is correct in the ccode…if not, the ball will think that its bigger than it really is, so it will bounce early.

  31. abhilash on February 28th, 2007 8:16 am

    @smartz: thanx for the help but I figured it before ur reply

  32. abhilash on March 2nd, 2007 11:56 am

    emanuele: uumm… please post line rider part 4 or game creation part 6b

  33. siki on March 2nd, 2007 10:30 pm

    i tried puttin this thing on but it didnt work it just put loads of letters. Why

  34. IEF on March 3rd, 2007 10:20 pm

    i dont understand… i followed ur steps word by word. my actionscript does work, i can draw, but the ball doesnt move, plz help!

  35. abhilash on March 4th, 2007 11:16 am

    @IEF: I know ur problem
    solution
    make a button assign the following actions in it
    on (release) {
    _root.go = true;
    }

  36. cool on March 11th, 2007 6:31 am

    you should add all the line riders tut so then it wont be so confusing when you make part 4 of course : )

  37. Aaron on April 7th, 2007 2:02 am

    Where do we put all the codes that you are teaching us, i download the content and what do i do with it

  38. Create a flash draw game like Line Rider or others - A different approach at Emanuele Feronato on April 8th, 2007 6:22 pm

    [...] I was reviewing parts three and four of your line rider tutorials today because I had never tried out your collision and reaction techniques for myself, when I found some things I didn’t like. [...]

  39. Create a flash artillery game - step 1 at Emanuele Feronato on April 28th, 2007 6:01 pm

    [...] Lines 11-17 determine the angle with trigonometry. This concept is explained in the tutorial called Create a flash draw game like Line Rider or others - part 3. [...]

  40. bLaf on May 16th, 2007 11:32 pm

    A very helpful tutorial! :)

    i should’ve listened more in math classes.:)

  41. A strange way to move the player with Flash at Emanuele Feronato on May 30th, 2007 8:13 pm

    [...] Lines 24-25: ball speed x and y are calculated according to rotation and power using trigonometry as explained in this tutorial [...]

  42. Evan on June 13th, 2007 11:31 pm

    Hey Emmanuele,

    I was just wondering if you could explain why flash has a “different angle system.” I can’t see any practical purpose for using one other than our own.

    Thankyou, your tutorials are the best. :).

  43. Evan on June 13th, 2007 11:42 pm

    O wait, I get it now…. The coordinate system is off to begin with. Stupid me. :).

  44. Mitch on June 19th, 2007 5:20 pm

    Hey, I’m having a problem with changing the ball with a character i made that is on a skateboard. All i do is swap the Movie Clips and i play it, then when the line is drawn at an angle and the skateboard goes down, the skateboard goes on the line, but not the same angle on the line as the flat part of the skate board. You are using a ball witch has no flat side, and I’m using a flat sided character? how do i fix this? plus how do you get rid of those black balls that pop up when you bounce?

  45. Nicholas Archambault on July 5th, 2007 7:32 pm

    u need to make it eazer to make a flash game

  46. Creation of a game like String Avoider tutorial at Emanuele Feronato on July 12th, 2007 4:14 pm

    [...] Line 17: Obtaining the angle between the xth and the (x-1)th node. This is done using trigonometry. I wrote a tutorial about it here. You may notice that is a bit different than the atan formulas used in that tutorial, but I discovered atan2 is often more useful than atan in applications involving rotation by a specified amount, because it returns a positive beta for all angles between 0 and 180 degrees (even when x is negative). Thus it eliminates the need for extra code to deal with different values in different quadrants of the circle. [...]

  47. Create a flash game like Security - part 2 at Emanuele Feronato on July 27th, 2007 11:23 pm

    [...] Lines 2-10: Determine the angle between the cop and the player using trigonomerty basics as explained in Create a flash draw game like Line Rider or others - part 3 tutorial. [...]

  48. Throw a ball with a sling physics Flash tutorial at Emanuele Feronato on August 13th, 2007 4:09 pm

    [...] Line 20: Determining the angle between the ball and the left sling point as seen a million times with trigonometry. Refer to Create a flash draw game like Line Rider or others - part 3 tutorial for some trigonometry hints. [...]

  49. Managing ball vs ball collision with Flash at Emanuele Feronato on August 19th, 2007 12:31 pm

    [...] Line 45: Calculating the collision angle using trigonometry as explained in Create a flash draw game like Line Rider or others - part 3 [...]

  50. Creation of a Ragdoll with Flash part 2: Constraints at Emanuele Feronato on August 26th, 2007 8:46 pm

    [...] Line 5: Calculating the angle between particles using Trigonometry. You can find more information about trigonometry in this tutorial [...]

  51. Controlling a ball like in Flash Elasticity game tutorial at Emanuele Feronato on September 1st, 2007 9:11 pm

    [...] Line 21: Determining the angle between the centre of the circle and the centre of the crosshair using trigonometry. Some basics of Flash trigonometry are explained in this tutorial. [...]

  52. Make a Flash game like Flash Element Tower Defense - Part 1 : Emanuele Feronato - blog of an italian geek on October 6th, 2007 9:37 pm

    [...] Line 23: Determining the angle of the minion according to its direction using trigonometry. If you have troubles with trigonometry, I recommend you to read this tutorial [...]

  53. Make a Flash game like Flash Element Tower Defense - Part 2 : Emanuele Feronato - italian geek and PROgrammer on November 6th, 2007 9:34 pm

    [...] Lines 47-48: Moving the bullet using trigonometry. If you don’t know what is trigonometry, then head to this tutorial [...]

  54. A Gem of Flash Game Tutorials | Newbie Game Programmers on December 17th, 2007 4:23 pm

    [...] a flash draw game like Line Rider or others - Part 1 :: Part 2 :: Part 3 :: Part 4 :: Part [...]

  55. X-99 on December 20th, 2007 7:21 pm

    Tutorial 2 and 3 don’t work!

  56. Riccardo on January 3rd, 2008 7:43 pm

    i can’t understand these 2 lines:

    spot_x = _x+radius*Math.sin(x*360/precision);
    spot_y = _y-radius*Math.cos(x*360/precision);

    1- shouldn’t the sin and cos be in radians and not in degrees??

    2- why are you using the sin for the _x spot and the cos for the _y spot?

  57. Create a Flash game like Metro Siberia Underground : Emanuele Feronato - italian geek and PROgrammer on January 19th, 2008 7:34 pm

    [...] Line 20: Calculating the angle of the ship using trigonometry. Some hints about trig at Create a flash draw game like Line Rider or others - part 3 [...]

  58. Create a Flash game like Metro Siberia Underground - Part 2 : Emanuele Feronato - italian geek and PROgrammer on January 25th, 2008 2:20 pm

    [...] position of the points, I call some trigonometry functions. More information about trigonometry at Create a flash draw game like Line Rider or others - part 3 Line 56: Reset y [...]

  59. Create a Flash game like Metro Siberia Underground - Part 5 : Emanuele Feronato - italian geek and PROgrammer on February 12th, 2008 9:36 pm

    [...] Line 81: Setting the drawing style for the laser beam. For more information about drawing styles refer to Create a flash draw game like Line Rider or others - part 1 Line 82: Moving the pen that will draw the laser beam in front of the spaceship using trigonometry. More information about Flash and trigonometry at Create a flash draw game like Line Rider or others - part 3 [...]

  60. mare on April 24th, 2008 2:33 pm

    How to make a ball that isn’t bouncing so much and just rolls on the line?

  61. william on June 14th, 2008 2:21 pm

    this tower defence game is going to be a good game pease man

Leave a Reply