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

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

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

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

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.

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.

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:

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.

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

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

• miffy

ccooooollll

• miffy

fun

• miffy

rilly cool

• Woow! Thanks alot man!

• abhilash

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

Thanx

• abhilash

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

• abhilash

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

• mousey

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

*****/*****

• Emanuele Feronato

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

• abhilash

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

• abhilash

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

• 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”.

• 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

• make the button!

• abhilash

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

• abhilash

@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”.

• abhilash

abhilash2863@indiatimes.com

• Alex

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.

• abhilash

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

• i cant wait
for the next one

• Alex

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

• question

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?

• question

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)

• Emanuele Feronato

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…

• 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

• abhilash

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

• abhilash

@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

• 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.

• abhilash

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

• abhilash

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

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

• IEF

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

• abhilash

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

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

• Aaron

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

• bLaf

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

• 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. :).

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

• 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?

• u need to make it eazer to make a flash game

• X-99

Tutorial 2 and 3 don’t work!

• Riccardo

i can’t understand these 2 lines:

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?

• mare

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

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

• Maximum

I did everything. It all works, except one thing: The ball goes right through the floor. Here’s .fla project: http://gymonster.googlepages.com/shootsnap.fla

Oh, and could you possibly do a tutorial on how to make a “smart bullet” that could hit an object based on the rotation of the mouse, without using any hittest code? Like, the bullet would find the surface of the object using parameters sent to the root by the object? Good example: Portal: The Flash Version. Bet ya he didn’t use a hittest code.

• suman

xllent
and useful tutorial

• Pingback: Drawing arcs with AS3 : Emanuele Feronato()

• thom

These tutorials have helped me very much in the past few weeks in jump-starting my hopeful game designing career. I was wondering if I could give credit to you in the credits section of my flash game.

• A.K.Meena

wow! greattttttttttt!

• T

thanks!(a lot)
you don’t know happy i am!
if there’s away i can help or repay you, let me know.

• T

thanks!(a lot)

• Emanuelle, i would like to ask for permission to translate and publish this tutorial to portuguese, and to make the code AS3. really loved how you treat the Trigonometry. Waiting for your answer. Victor Nascimento

• Emanuele Feronato

Sure Victor! Just provide a link back to this blog

• Dear Emanuele,
here is the link to the tutorial:

http://blenderapprentice.blogspot.com/2011/10/trigonometria-no-flash.html

if you see something wrong please just notice me. As you requested there’s the link back to your blog and all credits is yours. I’ve just transported the codes to AS3 and changed a few things(personal programming costumes).

Att,
Victor Nascimento