Random Movement in AS3
- Page 4
by
kirupa | 24 December 2010
Have questions? Discuss this Flash / ActionScript
tutorial with others on the forums.
In the
previous page,
you started to get a feel for the things the BlueCircle
class does. In this page, let's take a detailed look at the
approach used for moving our circles from one position to
another. Otherwise, the rest of the code will make no sense.
At the very
beginning (between the 4th and 5th day of Creation), the circle gets placed in a random location on
the stage:
Once its initial position has been set, the next thing to
calculate is where its random destination is going to be.
Let's represent the random destination by a gray, dotted
circle:
We are almost half way there now! With the start and
destination picked, the next step is to
calculate how far we have to go. That is done by
calculating not only the straight line distance but also the
horizontal and vertical distance the circle needs to
traverse:
The goal is to have, at each frame tick, our circle get
one step closer to reaching the destination that is
represented by the dotted circle. The path the circle would
take in our example is shown below:
To elaborate a bit more on our goal, we need to ensure that after a specified
period of time, the circle does reach its destination. That
is done by simultaneously moving our circle both
horizontally as well as vertically. The only tricky part is
figuring out by how much to move/increment our circle in
each of the horizontal and vertical directions.
The level of incrementing cannot be equal. The reason is
that, as shown in this example, your circle may have a
greater horizontal distance to cover as opposed to a
vertical distance. This means that we need to calculate by
how much to move horizontally and vertically so that, in the
end, our circle has reached its destination.
Surprisingly, calculating that is fairly straightforward.
It just requires some simple manipulation of ratios and a
very basic understanding of physics. First, let's figure out
the time it will take to travel in a straight line from your
origin to the destination.
If you recall from Physics, when everything is
linear like it is in our example, the value for time is
distance divided by the speed:
time = distance / speed
This means that, no mattter what happens, we will need
to ensure that our circle hits its destination in the
alotted time. Once you have this figured out, everything
else falls into place. If the equation for time is what is
shown above, the equation for speed is basically:
speed = distance / time
I just moved some stuff in the equation around to get
that. For the horizontal speed, the equation can be elaborated
as follows:
speedX = (startXPosition - endXPosition) / time
The distance you have to travel horizontally is the
circle's current horizontal position subtracted by the
circle's final horizontal position. The time is something
you calculated earlier. Divide those numbers up, and what you have in the end
is the horizontal speed that you need to travel at each time
tick. If you had to visualize it, what you will see is little
segments whose width is a representation of the horizontal
speed:
At each frame tick, we will need to move our circle by
that amount.
Let's look at the vertical side of things next. The way
you calculate the vertical speed is almost identical to what
you did for calculating the horizontal speed. Continuing the earlier logic, the vertical speed
can be found by:
speedY = (startYPosition - endYPosition) / time
The equivalent visualization would look as follows for
the vertical movement:
Putting it all together, at each frame tick (which is 24 times a second by default),
our circle will move a unit of horizontal and vertical
distance that corresponds to the speedX and speedY values.
In the
next page, you will see how the code we've written
corresponds to the behavior described in this page.
Onwards to the
next page!
|
