Gravity

I should mention that here Im talking about simple gravity as seen from the earths surface, and as described in Chapter 5. In this case, gravity works pretty much the same in 3D as it does in 2D. All you need to do is choose a number for the force gravity is exerting on the object, and add that number to the objects y velocity on each frame or iteration.

Since gravity in 3D is so simple, I could be tempted to gloss it over and say, Yup, same as 2D. OK, next subject . . . But I decided to throw in a nice example that demonstrates how something so simple can create a really great effect, like 3D fireworks.

To start with, you need a movie clip to represent a single firework, you know, one of those dots of glowing light that can be combined with others to make a big explosion. I made a 10-pixel white circle and converted it to a movie clip symbol named dot , exported for ActionScript, also with the name dot . I also made the background of the movie black.

Since Im sure you can handle it by now, Im going to dump the entire code listing on you ( ch15_06.fla ), and then explain it.

 var numDots:Number = 100; var gravity:Number = .5; var fl:Number = 250; var vpX:Number = Stage.width / 2; var vpY:Number = Stage.height / 2; init(); function init() {       for (var i:Number = 0; i<numDots; i++) {             var dot:MovieClip = attachMovie("dot", "dot" + i, i);             reset();       } } onMouseDown = reset; function reset():Void {       var x:Number = Math.random() * 400 - 200;       var y:Number = Math.random() * 50 - 200;       var z:Number = Math.random() * 100 + 200;       var color:Number = Math.random() * 0xffffff;       for (var i:Number = 0; i<numDots; i++) {             var dot = this["dot" + i];             var dotColor:Color = new Color(dot);             dotColor.setRGB(color);             dot.x = x;             dot.y = -200;             dot.z = 250;             dot.vx = Math.random() * 10 - 5;             dot.vy = Math.random() * 10 - 10;             dot.vz = Math.random() * 10 - 5;       } } function onEnterFrame():Void {       for (var i:Number=0;i<numDots;i++) {             var dot:MovieClip = this["dot" + i];             dot.vy += gravity;             dot.x += dot.vx;             dot.y += dot.vy;             dot.z += dot.vz;             if (dot.z <= -fl) {                   dot._visible = false;             } else {                   dot._visible = true;                   var scale:Number = fl / (fl + dot.z);                   dot._xscale = dot._yscale=scale*100;                   dot._x = vpX + dot.x * scale;                   dot._y = vpY + dot.y * scale;                   dot.swapDepths(-dot.z);             }        } } 

First, you set up your variables : numDots , gravity , fl , vpX , and vpY . If you find that 100 dots are slowing down your computer too much, you can reduce the number to 50 or so.

Then call the init function to attach all the dots. The init function then calls the reset function to set up the properties of each dot. I separated this out because I wanted to be able to reset all the dots (hence the function name) to create another explosion later. You can see that this is done by assigning this function to onMouseDown . So each time you click, reset is called again, and you get a new fireworks display.

The reset function determines a random x, y, z point and color for the explosion. It then loops through each dot, coloring and positioning the dot at that point. It also gives the dot a random velocity on all three axes. The following line causes the dots to tend to have an upward initial velocity, creating a nicer explosion:

 dot.vy = Math.random() * 10 - 10; 

The code for random upward velocity is just something I found through experimenta tion, which I hope youve now learned to do as well. Again, I want to stress that you shouldnt just be copying and pasting this code. Play with it. Change it until you break it, and then put it back together again some new way. And if it works, share the result!

Its funny that the most complex code is all the setup stuff you just went through. The actual 3D and gravity code is pretty simple. You loop through each dot, add gravity to its y velocity, add velocity to its position, and apply perspective to it. The result looks something like Figure 15-6.

Figure 15-6: Fireworks! (Trust me, it looks much better in motion.)

For homework, create a ground and have the dots bounce off it when they hit.