Learning ActionScript 3.0

Chapter 7 of the book contains an overview of motion programming techniques. This post expands on some of these techniques.

 

Gravity

We'll start off with a code snippet that can be run in your timeline:

This code shows the implementation of a simple rule that you can use when programming any kind of complex motion: First calculate your position, and then apply it to your graphics. The above code is just a simple velocity example. The ball will move on the y axis at a velocity between -10 and -20 and will move on the x axis at a velocity between -5 and +5. Try running it a few times to get a feel for how it works.

To add some gravity we can just add one line of code right at the beginning of the function (after line 16, in the original code above, for instance):

    yVel += 1;

Because we've forced the starting y velocity to be negative, the above code will cause the ball to move in an arc. You can try tracing out yVel to see the values change.

-6.433345764875412
-5.433345764875412
-4.433345764875412
-3.433345764875412
-2.433345764875412
-1.433345764875412
-0.433345764875412
 0.566654235124588
 1.566654235124588
 2.566654235124588
 3.566654235124588
 4.566654235124588

In this example case, my Output panel shows that the yVelvariable started off at roughly -6.5. By continuously adding 1 to the value we slow the ball's upward motion until eventually yVel becomes positive. At this point the ball will move downward at an increasing rate. If you've read Chapter 7 this concept should be familiar.

The number used to alter y can be thought of as gravity. For organizational purposes, and to allow on-the-fly updates, we can wrap the value 1 up in a variable called grav: You can group the variable initialization with your other variable declarations (after line 13 in the original code above, for example), and then just replace the hard-coded 1 in the line you just added, with the variable name:

// this variable definition can go after your yVel definition
var grav:Number = 1;

// you can replace yVel += 1 with this:
yVel += grav;

 

Collisions

The next step is to prevent the ball from going off the screen. This can be done with a conditional, added in the function, just before the x and y positions of the ball are updated. The new function will look like this:

function onLoop(evt:Event):void {
    yVel += grav;
    xPos += xVel;
    yPos += yVel;

    if (yPos > 390) {
        yPos = 390;
        yVel *= -1;
    }

    ball.x = xPos;
    ball.y = yPos;
}

With this conditional, we're saying that, if the y position is greater than 390, set it back to the "bounce point" of 390 and reverse the y velocity. This will cause the ball to start moving up again until it is pushed back down by gravity. If you run this file, you will see that the effect will simulate a bouncing ball.

The limitation of this example, however, is that the ball keeps bouncing back up to the same point, never losing any velocity when it hits the ground. We can change this behavior by multiplying the y velocity by a negative decimal value instead of by -1. Multiplying by -.7 would cause the ball to lose 30% of its y velocity each time it hits the ground. Give it a try, changing the last line of the new conditional from yVel *= -1 to this:

yVel *= -.7;

The last step is to apply the same technique to xVel. I usually ask my students to try and figure this one out for themselves, because there's a small implementation issue that needs to be discovered. Some try:

xVel *= -.7;

This produces an interesting result. The ball will reverse its x velocity each time it hits the ground causing it to jump back and forth. I could see this being used in a game to create the motion for an enemy. The correct solution is to simply multiply xVel by positive .7 so that eventually xVel will equal 0 and the ball will stop moving on both axis. The final code looks like this:

Next we'll look at two examples that implement these concepts.

 

Basic Gravity Demo

The first example, wall_bounce.fla, is nearly the same. The code has been wrapped in a document class called Gravity and a few additional features have been added. When the screen is clicked the simulation is reset:

  Download Wall Bounce (9 KB, 1,594 hits)

Let's take a closer look at how we manage to bounce the ball off the sides of the screen and how the ball rotation is achieved.

In our constructor we figure out which values to use for the size of the screen, based on the size of our ball graphic and the size of the stage:

_left = _ball.width / 2;
_top = _left;
_right = stage.stageWidth - _left;
_bottom = stage.stageHeight - _left;

In our ENTER_FRAME loop we have a conditional for each side of the screen:

if (_yPos > _bottom) {
    _xVel *= .5;
    _yVel *= -.5;
    _yPos = _bottom;
}
if (_yPos < _top) {
    _yVel *= -1;
    _yPos = _top;
}
if (_xPos < _left) {
    _xVel *= -1;
    _xPos = _left;
}
if (_xPos > _right) {
    _xVel *= -1;
    _xPos = _right;
}

The same technique applied earlier in the post is applied here. The ball only loses velocity when it hits the ground, all other sides reverse the direction of the ball.

Rotation
Our ball sprite has a sprite nested within it called texture that contains red and black stripes. We rotate this sprite in accordance with the x position of the ball. Above the texture in the same sprite is a highlight gradient that does not rotate. These two layers, and a simple line of ActionScript that follows, create the illusion that the ball is rolling in the direction in which it is traveling. Here are the ball layers...

ball sprite elements

...and here is the code:

_ball.texture.rotation = _xPos;

Resetting the Simulation
The ability to reset the simulation is also worth noting. This is achieved with a method called setupGravity. It works in a manner similar to the previous discussion, setting random values for the velocity variables and positioning the ball at the center of the stage:

private function setupGravity():void {
    _xVel  = Math.random() * 20 - 10;
    _yVel = -(Math.random() * 20);
    _ball.x = stage.stageWidth / 2;
    _ball.y = stage.stageHeight / 2;
    _xPos = _ball.x;
    _yPos = _ball.y;
}

The setupGravity method is called from within the constructor to start off the simulation and, to reset the behavior, when the stage is clicked

 

Bouncing Off Platforms

The second demo shows how to bounce a ball off platforms. This demo makes use of the hitTestObject method and the getRect method.

  Download Platform Bounce (9.5 KB, 1,206 hits)

The code is very similar to the previous example. We've added three sprites to the stage with the instance names platform0 platform1 and platform2. To check if the ball is colliding with any of these platforms we've created a method called checkPlatforms.

Here is the complete class. read through the comments to get a better idea of how this works.

The real key here is when to call the checkPlatform method. The trick is to call it last on our ENTER_FRAME, after we've updated the ball's position:

_ball.x = _xPos;
_ball.y = _yPos;

checkPlatforms();

The reason for this is so that the hitTestObject() method has the most up-to-date bounding rectangle for our ball. If there's no collision, checkPlatforms() won't alter the ball's x and y properties. If there is a collision, the same logic used to bounce off the floor is used to bounce off the platform and the x and y properties are change.

That's it for now. We plan on doing more posts about motion so be sure to check back.

 Print This Post

Related Content

• Complex Particles Source