Wrapping

If you can remember back to Chapter 5, I talked about three possible reactions when an object hit a boundary. I just covered bouncing. There was also wrapping and regeneration. For 3D, I have found wrapping to be pretty useful, but really only on the z axis.

In 2D wrapping, you check if the object went off the screen on the x or y axes. This works pretty well, because when the object goes beyond one of those boundaries, you cant see it anymore, so you can easily reposition it without jarring the viewers attention. You dont have that luxury in 3D.

With 3D, there are really only two points where its safe to remove and reposition an object. One is when the object has gone behind the viewpoint. The previous examples test for this and turn the object invisible in such a case. The other is when the object is so far in the distance and shrunk to such a small size that its invisible or nearly so. This means that you can safely wrap on the z axis. When something goes behind you, you toss it way out in front of you, and let it come at you again. Or, if something has gone so far out that you can barely see it, remove it and replace it behind you. If you want, you can try wrapping on the x or y axis as well, but in most cases, youre going to wind up with an unnatural popping in and out of existence effect.

The good news is that z-axis wrapping can be pretty useful. Ive used it to create a realistic 3D racing-type game, which Ill partially re-create here.

The idea is to place various 3D objects out in front of the viewpoint. Then you move those objects toward the viewpoint. In other words, you give them some negative z velocity. Depending on how you set it up, this can either look like a lot of objects coming towards you or it can trick the eye to look like youre moving towards them. Once an object has gone behind the viewpoint, youll replace it way out in the distance. That way, there is a never-ending supply of objects to drive past.

The objects I used in ch15_07.fla are simple stylized trees, as you can see in Figure 15-7.

image from book
Figure 15-7: My tree. (By now you know why I became a programmer instead of a designer.)

The tree symbol is named tree and exported with the same name . Again, I went with white on a black background. But you can make any kind of objects you want, and make them as complex as you want. The code merely attaches a whole bunch (100 to be exact) of these trees. They are spread out randomly on the x axis, 1,000 pixels in either direction. They are also spread out on the z axis, from 0 to 10,000. They all have the same y position though, forming the impression of a ground plane.

Heres the code ( ch15_07.fla ):

 var numTrees:Number = 100; var fl:Number = 250; var vz:Number = 0; var friction:Number = .98; var vpX:Number = Stage.width / 2; var vpY:Number = Stage.height / 2; init(); function init() {       for (var i:Number = 0; i<numTrees; i++) {             var tree:MovieClip = attachMovie("tree", "tree" + i, i);             tree.x = Math.random() * 2000 - 1000;             tree.y = 50;             tree.z = Math.random() * 10000;       } } function onEnterFrame():Void {       if(Key.isDown(Key.UP))       {             vz -= 1;       }       else if(Key.isDown(Key.DOWN))       {             vz += 1;       }       vz *= friction;       for (var i:Number=0;i<numTrees;i++) {             var tree:MovieClip = this["tree" + i];             tree.z += vz;             if (tree.z <= -fl) {                   tree.z += 10000;             }             else if(tree.z > 10000 - fl)             {                   tree.z -= 10000;             }             var scale:Number = fl / (fl + tree.z);             tree._xscale = tree._yscale=scale*100;             tree._x = vpX + tree.x * scale;             tree._y = vpY + tree.y * scale;             tree._alpha = scale * 60 + 40;             tree.swapDepths(-tree.z);       } } 

Notice that now there is only a single variable for z velocity, as the trees wont be moving on the x or y axis, and all will be moving in unison on the z axis. In the onEnterFrame function, you check for the up or down cursor key being pressed and increment or decrement vz accordingly . A little friction keeps the speed from increasing infinitely, and slows you down if no key is being pressed.

The code then loops through each tree, updating its z position with the current z velocity. Then it checks if a tree has gone behind you. If so, rather than turning it invisible, it moves it 10,000 pixels into the z axis. Likewise, if it has gone past 10,000 ˆ fl , it moves it back 10,000.

You then do the standard perspective actions. Here, I also added another little tidbit to further enhance the illusion of depth:

 tree._alpha = scale * 60 + 40; 

This sets the transparency of the clip in relation to its depth on the z axis. The farther away it goes, the more it fades out. This is atmospheric perspective, simulating the effect of the atmosphere between the viewer and the object. This is particularly effective when you have objects moving way out in the distance, as in this example. I could have simply written:

 tree._alpha = scale * 100; 

But I found that made the trees too faded. Doing it as scale * 60 + 40 makes them anywhere from 40% transparent to 100% transparent, which looked about right to me. You can see how this comes out in Figure 15-8.

image from book
Figure 15-8: Watch out for the trees!

Again, Im just showing you what you can do. Please try all kinds of combinations. You can even try something like this:

 tree._alpha = scale * 40; 

This gives the effect of a dark, spooky night. There are no right or wrong values for most of this stuffjust different values that create different effects.

I liked this example so much that I added a few enhancements beyond the scope of the subject of wrapping, just to give you an idea of where this could go. Here is the result ( ch15_08.fla ):

 var numTrees:Number = 100; var fl:Number = 250;  var gravity:Number = .5;   var vx:Number = 0;   var vy:Number = 0;  var vz:Number = 0; var friction:Number = .98; var vpX:Number = Stage.width / 2; var vpY:Number = Stage.height / 2; init(); function init() {       for (var i:Number = 0; i<numTrees; i++) {             var tree:MovieClip = attachMovie("tree", "tree" + i, i);             tree.x = Math.random() * 2000 - 1000;             tree.y = 50;             tree.z = Math.random() * 10000;       } } function onEnterFrame():Void {       if(Key.isDown(Key.UP))       {             vz -= 1;       }       else if(Key.isDown(Key.DOWN))       {             vz += 1;       }  if(Key.isDown(Key.LEFT))   {   vx += 1;   }   else if(Key.isDown(Key.RIGHT))   {   vx -= 1;   }   if(Key.isDown(Key.SPACE))   {   vy += 1;   }   vy -= gravity;   vx *= friction;   vy *= friction;  vz *= friction;       for (var i:Number=0;i<numTrees;i++) {             var tree:MovieClip = this["tree" + i];  tree.x += vx;   tree.y += vy;  tree.z += vz;  if(tree.y < 50)   {   tree.y = 50;   vy = 0;   }  if (tree.z <= -fl) {                   tree.z += 10000;             }             else if(tree.z > 10000 - fl)             {                   tree.z -= 10000;             }             var scale:Number = fl / (fl + tree.z);             tree._xscale = tree._yscale=scale*100;             tree._x = vpX + tree.x * scale;             tree._y = vpY + tree.y * scale;             tree._alpha = scale * 60 + 40;             tree.swapDepths(-tree.z);       } } 

Here, Ive added velocity for the x and y axes, as well as some gravity. The left and right cursor keys were obvious choices for the x velocity, and I used the spacebar for y. One interesting point is that I am actually subtracting gravity from vy . This is because I want it to seem like the viewer is the one who is falling down to where the trees are, as shown in Figure 15-9. Really, the trees are falling up to where the viewpoint is, but it winds up looking the same. Notice also that I limit the trees y position to 50, which makes it look like youve landed on the ground.

image from book
Figure 15-9: Look, Im flying!

I didnt do anything to limit movement on the x axis, which means you can go way off to the side of the forest if you want. It wouldnt be too hard for you to set up some limitation, but I think Ive done enough here to get you started.



Foundation ActionScript. Animation. Making Things Move
Foundation Actionscript 3.0 Animation: Making Things Move!
ISBN: 1590597915
EAN: 2147483647
Year: 2005
Pages: 137
Authors: Keith Peters

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net