|
by
kirupa | 10 February 2009
In the
previous page, we wrapped up our theoretical discussion
on the math behind falling and bouncing objects. In this and
the next page, we will look at the the code that actually
implements all of this.
Downloading the Application
The following source file contains a working copy of the
bouncing ball animation:
Once you have downloaded, extracted, and opened the
source file in Flash CS4 (or Flash CS3), open the
BlueBall.as file to see the code that makes this all work.
The next section will cover the code in greater detail.
You
now have a high-level overview of the physics involved with
a falling object, and you have a copy of the project open.
All that is left is to look at the code and how it maps
with the theory you saw before. While the mapping is not
exact, I hope it strikes a good balance between realism and
simplicity.
The code is broken up into two parts. The first part is
the falling action. The second part is the rising action. By
breaking up our bounce into these two parts, it allows me to
have much simpler code. The connection between these two
parts is the initial velocity of the ball as I am bouncing.
As long as I know (and can manipulate) that initial
velocity, I am set!
Let's
look at the code in the order in which things get executed.
Coincidentally, this code also sets off the ball's falling
motion.
- function
BlueBall()
{
- startFallingBall();
-
- setupResetFunctionality();
- }
The above code represents my constructor, and it gets
called only when my BlueBall object gets created. This
constructor is responsible for calling my
startFallingBall and
setupResetFunctionality
methods. Let's look at
startFallingBall next, for the
setupResetFunctionality method is just for resetting the
ball's position when you click on it. That's not really that
important for this tutorial.
- function
startFallingBall()
{
- timer=0;
- initialPos=this.y;
- this.addEventListener(Event.ENTER_FRAME,
moveBallDown);
- }
As this method's name implies, the code here is
responsible for starting the ball's fall. I initialize two
variables first. I set the timer
to 0, and I set my initialPos
to the current position. The final thing I do is set up my
ENTER_FRAME event and have
it call my moveBallDown
event handler...which we will look at next!
- // Responsible for moving the
ball down
- function
moveBallDown(e:Event)
{
- timer+=1;
- this.y
=
initialPos + .5*gravity*(timer
*
timer);
- checkBottomBoundary();
- }
The moveBallDown event handler is what is responsible for
actually moving your ball down. I first increment the value
of my timer value, the one I
set to zero in the startFallingBall method, to
indicate a clock tick has occurred. Once I do that, I set
the position of our ball using the equation you saw earlier:
That equation translated into our code can be seen as:
- this.y
=
initialPos + .5*gravity*(timer
*
timer);
Finally, each time this method gets called, I call the
checkBottomBoundary method
to figure out what to do next. So, let's look at that method
in greater detail.
- function
checkBottomBoundary()
{
- if
(this.y+this.height>stage.stageHeight)
{
- finalPos=this.y;
-
- stopFallingBall();
- }
- }
This method checks to see if your ball's current position
is below that of your ground which is represented by your
stage's height. I can't simply compare the Y position and
call it a day. Because the ball has some height as well, I
want to stop the falling when the bottom of the ball hits
the ground. That is why I am including the height of the
ball in my calculation for height.
When the ball hits the ground, I call
stopFallingBall, so let's
look at what it does next.
- function
stopFallingBall()
{
- this.removeEventListener(Event.ENTER_FRAME,
moveBallDown);
- // If the bounce is a 10%
of the ball's height, just stop
- // the bounce
- if
(finalPos-initialPos<.1*this.height)
{
- stopRisingBall();
- }
else
{
- startRisingBall();
- }
- }
The stopFallingBall method does two things. First, it
kills the event listener for moveBallDown as shown by the
call to removeEventListener. This means that your ball will
no longer keep falling.
The second, equally important, task this method does is
check whether we are done with the bouncing permanently. The
way I measure that is by comparing where my final position
will be compared to where my initial position is. If they
are very close to each other, that means the bounce is
coming to an end.
The "very close" in the code is 10% of the ball's height.
If your ball's bounce is going to be less than 10% of its
height, then it's time to call it a day:
-
function
stopFallingBall()
{
-
this.removeEventListener(Event.ENTER_FRAME,
moveBallDown);
- //
If the bounce is a 10% of the ball's height, just
stop
- //
the bounce
- if
(finalPos-initialPos<.1*this.height)
{
- stopRisingBall();
- }
else
{
- startRisingBall();
- }
- }
The call to stopRisingBall
ends your sequence of bounces, but if your final bounce
position is greater than 10% of your ball's height, then
your code lives another day. The
startRisingBall method gets called. Since we just
wrapped up what happens when your ball is falling, let's go
ahead and look at what happens when your ball starts to
rise....on the
next page!
Onwards to the
next page!
|
Physics-Based Bounce Effect - Page 3
