Z 排序
在添加了多个物体后代码中显现出了一个新问题---称为z 排序。Z 排序就像它的名
字一样：物体如何在 z 轴上进行排序，或者说哪个物体在前面。由于物体都使用纯色，所
以看起来不是很明显。为了让效果更加明显，请将 Ball3D 的 init 方法改为以下代码，并
运行刚才那个程序：
public function init():void {
graphics.lineStyle(0);
graphics.beginFill(color);
graphics.drawCircle(0, 0, radius);
graphics.endFill();
}
通过给小球添加轮廓线，我们就可以看出哪个小球在前面了。这几乎毁掉了整个 3D 效
果，因为现在较小的物体出现在了较大物体的前面。Z 排序就是用来解决这个问题的，但
不是自动的。Flash 不知道我们在模拟 3D。它只知道我们在移动和缩放影片。它也不知道
我们到底是使用左手还是右手坐标系。在小球远离时应该将这个小球放在相邻小球的后面。
Flash 只根据在显示列表中的相对索引进行排序。在 AS 2 中，z 排序只需要改变影片剪辑
的深度即可完成。swapDepths(深度)。深度较高的影片剪辑出现在深度较低的影片的前面。
然而在 AS 3 中，操作会稍微有些复杂。对于显示列表没有可以任意修改的深度值。显示列
表的作用更像是与个数组。列表中的每个显示对象都有一个索引。索引从 0 开始，直到列
表中所有对象的个数。例如，假设在类中加入三个影片 A, B, C。它们的索引应该是 0, 1, 2。
无法将其中的一个影片的索引设置为 100，或 -100。如果已经删除了 B 影片，那么这时 A
和 C 影片的索引应该是 0 和 1。明白了吧，在显示列表中永远没有“空间”这个概念
根据深度，索引 0 是最低的，任何深度较高的显示对象都将出现在这个较低对象的前
面。我们可以用几种不同的方法来改变物体的深度：
■ setChildIndex(child:DisplayObject, index:int) 给对象指定索引值（index）。
■ swapChildren(child1:DisplayObject, child2:DisplayObject) 交换两个指定的对象。
■ swapChildrenAt(index1:int, index2:int) 交换两个指定的深度。
使用 setChildIndex 是最简单的。因为我们已经有了一个 balls 数组。可以根据小球的 z 轴
深度从高到低来排序这个数组，然后从 balls 的 0（最远的） 到 49（最近的）为每个小球
设置索引。请看下面这段代码：
private function sortZ():void {
balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
for (var i:uint = 0; i < numBalls; i++) {
var ball:Ball3D = balls[i];
setChildIndex(ball, i);
}
}
根据数组中每个对象的 zpos 属性对该数组进行排序。因为指定了数组的
DESCENDING 和 Array.NUMERIC，则是按数值大小反向排序的——换句话讲，就是从高
到低。结果会使最远的小球（zpos 值最高的）将成为数组中的第一个，最近的将成为最后
一个。
然后循环这个数组，将每个小球在显示列表中的索引值设置为与当前在数组中的索引值
相同。
将这个方法放入类中，只需要在小球移动后调用它即可，将函数调用放在 onEnterFrame
方法的最后：
private function onEnterFrame(event:Event):void {
for (var i:uint = 0; i < numBalls; i++) {
var ball:Ball3D = balls[i];
move(ball);
}
sortZ();
}
剩下的代码与上一个例子中的相同。全部代码可在 Zsort.as 中找到。
重力
这里我们所说的重力就像地球表面上的重力一样，如第五章所讲的。既然这样 3D 的
重力和 2D 的就很像了。我们所需要做的就是选择一个施加在物体上的重力值，并在每帧
中将它加入到物体的速度中。
由于 3D 的重力非常简单，我差点就跳过去说“是的，同 2D 一样。OK，下一话题。”
但是，我决定将它放到一个很好的例子中加以解释，让大家知道即使很简单的东西也可以创
造出非常棒的效果，就像 3D 烟火一样。
首先，我们需要找个物体代表一个单独的“烟火”——我们知道，这些发光的点可以组
合到一起形成巨大的爆炸。我们给忠实的 Ball3D 类一个较小的半径值，就可以完成这个目
的。只要给每个小球一个随机的颜色效果就会非常漂亮。如果将背景色设置为黑色就更好了。
我使用 SWF 元数据来完成这个设置，但如果是在 Flash CS3 IDE 中，只需要简单地改变
一下文档属性的背景色即可。
我确信大家现在一定能够完成。先将所有的代码列出来（Fireworks.as），随后加以解释。
package {
import flash.display.Sprite;
import flash.events.Event;
[SWF(backgroundColor=0x000000)];
public class Fireworks extends Sprite {
private var balls:Array;
private var numBalls:uint = 100;
private var fl:Number = 250;
private var vpX:Number = stage.stageWidth / 2;
private var vpY:Number = stage.stageHeight / 2;
private var gravity:Number = 0.2;
private var floor:Number = 200;
private var bounce:Number = -0.6;
public function Fireworks() {
init();
}
private function init():void {
balls = new Array();
for (var i:uint = 0; i < numBalls; i++) {
var ball:Ball3D = new Ball3D(3, Math.random() * 0xffffff);
balls.push(ball);
ball.ypos = -100;
ball.vx = Math.random() * 6 - 3;
ball.vy = Math.random() * 6 - 6;
ball.vz = Math.random() * 6 - 3;
addChild(ball);
}
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
for (var i:uint = 0; i < numBalls; i++) {
var ball:Ball3D = balls[i];
move(ball);
}
sortZ();
}
private function move(ball:Ball3D):void {
ball.vy += gravity;
ball.xpos += ball.vx;
ball.ypos += ball.vy;
ball.zpos += ball.vz;
if (ball.ypos > floor) {
ball.ypos = floor;
ball.vy *= bounce;
}
if (ball.zpos > -fl) {
var scale:Number = fl / (fl + ball.zpos);
ball.scaleX = ball.scaleY = scale;
ball.x = vpX + ball.xpos * scale;
ball.y = vpY + ball.ypos * scale;
ball.visible = true;
} else {
ball.visible = false;
}
}
private function sortZ():void {
balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
for (var i:uint = 0; i < numBalls; i++) {
var ball:Ball3D = balls[i];
setChildIndex(ball, i);
}
}
}
}
首先加入一些属性：gravity, bounce, floor。前两个大家都见过。Floor 属性就是 --
bottom --也就是物理反弹之前可以运动到的 y 值。除了增加 y 轴速度以及碰撞地
面后的反弹以外，所有的内容我们前面都介绍过，是不是越来越酷了，哈？
运行结果如图 15-6 所示。
图 15-6 烟火（相信我，运动中的效果更好）
屏幕环绕
回忆一下第六章，我们说过三种当物体碰到边界后受到反作用力的可能。目前为
们只介绍了反弹。还有两个：屏幕环绕与重置。对于 3D 而言，我发现屏幕环绕效果是最
为有用的，但只能在 z 轴上使用。
2D 屏幕环绕中，在 x 或 y 轴上判断物体是否出了屏幕。效果非常好，因为当物体超
出了其中一个边界时就看不到它了，因此可以轻松地重新设置物体的位置，不会引起人们的
注意。但是 3D 中就不能这么潇洒了。
在 3D 中，实际上只有两个点可以安全地删除和重置物体。一个就是当物体运动到观
察点的后面。前面例子中，将物体设置为不可见时，就是这个道理。另一个就是当物体的距
离太远和太小时也可以将其设为不可见的。这就意味着我们可以在 z 轴上安全地进行屏幕
包装。当物体走到身后时，就将它放到面前的远方。如果物体离得过远，超出了可见范围，
就可以删除它并将其重置到身后。如果大家喜欢 x, y 轴也可以这样做，但是多数情况下，
这么做会导致一些不自然的忽隐忽现的效果。
还好 z 轴的环绕可以是相当常用的。我曾用它制作出真实的 3D 赛车游戏，下面我们
就来制作其中的一部分。
主体思想是把不同的 3D 物体放到观察点前。然后将这些物体向观察点移动。换句话
讲，给它们一些负的 z 速度。这要看我们如何设置了，可以让物体向我们走来，让眼睛以
为是我们向物体走去。一旦物体走到了观察点后，就将它重置到眼前一段距离。这样就可以
永无止境地掠过这些物体了。
本例中使用的物体是一棵线条化的树。创建一棵带有随机枝叉的树形结构。我确信
能做得更好！
绘制树的代码放在名为 Tree 的类中，下面会看到，用三个位置属性以及随机绘制树枝
的代码来代表一颗树。
package {
import flash.display.Sprite;
public class Tree extends Sprite {
public var xpos:Number = 0;
public var ypos:Number = 0;
public var zpos:Number = 0;
public function Tree() {
init();
}
public function init():void {
graphics.lineStyle(0, 0xffffff);
graphics.lineTo(0, -140 - Math.random() * 20);
graphics.moveTo(0, -30 - Math.random() * 30);
graphics.lineTo(Math.random() * 80 - 40,
-100 - Math.random() * 40);
graphics.moveTo(0, -60 - Math.random() * 40);
graphics.lineTo(Math.random() * 60 - 30,
-110 - Math.random() * 20);
}
}
}
同样，还是使用 SWF 元数据将背景色设置为黑色。大家可以创建任何喜欢的物体，
想要多复杂都可以自行设置。在文档类中创建所有的树（100 左右）。随机分散在 x 轴上，
每个方向 1000 像素。它们同样随机分散到 z 轴上，从 0 到 10000。它们都以 floor 属性
为基础，具有相同的 y 坐标，给人一种地平面的感觉。
以下是代码（可以见 Trees.as）：
Here’s the code (which you can also find in Trees.as):
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
[SWF(backgroundColor=0x000000)];
public class Trees extends Sprite {
private var trees:Array;
private var numTrees:uint = 100;
private var fl:Number = 250;
private var vpX:Number = stage.stageWidth / 2;
private var vpY:Number = stage.stageHeight / 2;
private var floor:Number = 50;
private var vz:Number = 0;
private var friction:Number = 0.98;
public function Trees() {
init();
}
private function init():void {
trees = new Array();
for (var i:uint = 0; i < numTrees; i++) {
var tree:Tree = new Tree();
trees.push(tree);
tree.xpos = Math.random() * 2000 - 1000;
tree.ypos = floor;
tree.zpos = Math.random() * 10000;
addChild(tree);
}
addEventListener(Event.ENTER_FRAME, onEnterFrame);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
}
private function onEnterFrame(event:Event):void {
for (var i:uint = 0; i < numTrees; i++) {
var tree:Tree = trees[i];
move(tree);
}
vz *= friction;
sortZ();
}
private function onKeyDown(event:KeyboardEvent):void {
if (event.keyCode == Keyboard.UP) {
vz -= 1;
} else if (event.keyCode == Keyboard.DOWN) {
vz += 1;
}
}
private function move(tree:Tree):void {
tree.zpos += vz;
if (tree.zpos < -fl) {
tree.zpos += 10000;
}
if (tree.zpos > 10000 - fl) {
tree.zpos -= 10000;
}
var scale:Number = fl / (fl + tree.zpos);
tree.scaleX = tree.scaleY = scale;
tree.x = vpX + tree.xpos * scale;
tree.y = vpY + tree.ypos * scale;
tree.alpha = scale;
}
private function sortZ():void {
trees.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
for (var i:uint = 0; i < numTrees; i++) {
var tree:Tree = trees[i];
setChildIndex(tree, i);
}
}
}
}
请注意，这里只有一个 z 轴速度变量，因为树不需要在 x 或 y 轴上进行移动，所有
的移动都在 z 轴上。在 onEnterFrame 方法中，判断方向键上和下，增加或减少 vz。加入
一点点摩擦力让速度不会增加到无限大，在按键松开时将速度降下来。
代码循环获得每棵树，用当前 z 速度更新该树的 z 坐标。然后判断这棵树是否走到了
我们的身后。如果是，将这个棵树向 z 轴内移动 10000 像素。否则，如果超过了 10000 –
fl，就将该树往回移动 10000 像素。再执行标准透视动作。为了更好地加强立体感我还加
入了一个小小的设计：
tree.alpha = scale;
根据 z 轴的深度设置树的透明度。离得越远颜色越淡。这是大气透视，模拟大气与观察者
和物体之间的效果。这是本例中表现物体远离时一种特殊效果。这个特殊的设计给了我们黑
暗的效果和幽深的夜。大家也许可以试试这种方法：
tree.alpha = scale * .7 + .3;
让树的可见度至少为 30%。看上去不再那么朦胧。这里没有正确或错误可言--只有不同
的数值创造不同的效果。
大家也许注意到了，我仍把 z 排序方法留在这里。在这个特殊的例子中，它没有发挥
本应有的作用，因为树都是由同一颜色的简单线条构成的，但如果绘制的是一些非常复杂的
或重叠的图形，那么它的存在就是至关重要的了。
本文件的运行结果 15-7 所示。
图 15-7 当心小树！
下面我将给大家一个加强的例子，让我们看一下还可以做到什么样的程度。以下是程
（可以在 Trees2.as 中找到）：
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
[SWF(backgroundColor=0x000000)];
public class Trees2 extends Sprite {
private var trees:Array;
private var numTrees:uint = 100;
private var fl:Number = 250;
private var vpX:Number = stage.stageWidth / 2;
private var vpY:Number = stage.stageHeight / 2;
private var floor:Number = 50;
private var ax:Number = 0;
private var ay:Number = 0;
private var az:Number = 0;
private var vx:Number = 0;
private var vy:Number = 0;
private var vz:Number = 0;
private var gravity:Number = 0.3;
private var friction:Number = 0.98;
public function Trees2() {
init();
}
private function init():void {
trees = new Array();
for (var i:uint = 0; i < numTrees; i++) {
var tree:Tree = new Tree();
trees.push(tree);
tree.xpos = Math.random() * 2000 - 1000;
tree.ypos = floor;
tree.zpos = Math.random() * 10000;
addChild(tree);
}
addEventListener(Event.ENTER_FRAME, onEnterFrame);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
}
private function onEnterFrame(event:Event):void {
vx += ax;
vy += ay;
vz += az;
vy -= gravity;
for (var i:uint = 0; i < numTrees; i++) {
var tree:Tree = trees[i];
move(tree);
}
vx *= friction;
vy *= friction;
vz *= friction;
sortZ();
}
private function onKeyDown(event:KeyboardEvent):void {
switch (event.keyCode) {
case Keyboard.UP :
az = -1;
break;
case Keyboard.DOWN :
az = 1;
break;
case Keyboard.LEFT :
ax = 1;
break;
case Keyboard.RIGHT :
ax = -1;
break;
case Keyboard.SPACE :
ay = 1;
break;
default :
break;
}
}
private function onKeyUp(event:KeyboardEvent):void {
switch (event.keyCode) {
case Keyboard.UP :
case Keyboard.DOWN :
az = 0;
break;
case Keyboard.LEFT :
case Keyboard.RIGHT :
ax = 0;
break;
case Keyboard.SPACE :
ay = 0;
break;
default :
break;
}
}
private function move(tree:Tree):void {
tree.xpos += vx;
tree.ypos += vy;
tree.zpos += vz;
if (tree.ypos < floor) {
tree.ypos = floor;
}
if (tree.zpos < -fl) {
tree.zpos += 10000;
}
if (tree.zpos > 10000 - fl) {
tree.zpos -= 10000;
}
var scale:Number = fl / (fl + tree.zpos);
tree.scaleX = tree.scaleY = scale;
tree.x = vpX + tree.xpos * scale;
tree.y = vpY + tree.ypos * scale;
tree.alpha = scale;
}
private function sortZ():void {
trees.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
for (var i:uint = 0; i < numTrees; i++) {
var tree:Tree = trees[i];
setChildIndex(tree, i);
}
}
}
}
这里，我已经加入了 x 和 y 轴的速度，还有重力。还必需要能够捕获多个按键。我唯
一想念 AS 2 的是 Key.isDown() 方法，任何时间都可以调用找出某个键是否被按住。因为
在 AS 3 中我们只能知道最后一次按下或释放的键，所以不得不判断哪个键被按下并设置相
应轴上的加速度为 1 或 -1。随后，当该键被松开时，再将加速度设回 0。在 onEnterFrame
的开始就将每个轴上的加速度加到相应轴的速度中。左键和右键显然就是用于选择 x 轴的
速度，使用空格键操作 y 轴。有趣的一点是我们实际是从 vy 减去了重力。因为我想要一
个类似于观察者落到树林中的效果，如图 15-8 所示。注意我们同样也限定了树的 y 坐标
为 50，看起来就像是站在陆地上一样。
图 15-8 看，我在飞！
这里没有对 x 轴的运动加以任何的限制，也就意味着可以在树林边上行进。要想加入
限制对于大家来说也不是件难事，但是作为一个启发性的例子做到这里已经足够了。
缓动与弹性运动
在 3D 中的缓动与弹性运动不会比 2D 中的难多少（第八章的课题）。我们只需为 z
轴再加入一至两个变量。
缓动
对于缓动的介绍不算很多。在 2D 中，我们用 tx 和 ty 最为目标点。现在只需要再在
z 轴上加入 tz。每帧计算物体每个轴到目标点的距离，并移动一段距离。
让我们来看一个简单的例子，让物体缓动运动到随机的目标点，到达该点后，再选出另
一个目标并让物体移动过去。注意后面两个例子，我们又回到了 Ball3D 这个类上。以下是
代码（可以在 Easing3D.as 中找到）：
package {
import flash.display.Sprite;
import flash.events.Event;
public class Easing3D extends Sprite {
private var ball:Ball3D;
private var tx:Number;
private var ty:Number;
private var tz:Number;
private var easing:Number = .1;
private var fl:Number = 250;
private var vpX:Number = stage.stageWidth / 2;
private var vpY:Number = stage.stageHeight / 2;
public function Easing3D() {
init();
}
private function init():void {
ball = new Ball3D();
addChild(ball);
tx = Math.random() * 500 - 250;
ty = Math.random() * 500 - 250;
tz = Math.random() * 500;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var dx:Number = tx - ball.xpos;
var dy:Number = ty - ball.ypos;
var dz:Number = tz - ball.zpos;
ball.xpos += dx * easing;
ball.ypos += dy * easing;
ball.zpos += dz * easing;
var dist:Number = Math.sqrt(dx*dx + dy*dy + dz*dz);
if (dist < 1) {
tx = Math.random() * 500 - 250;
ty = Math.random() * 500 - 250;
tz = Math.random() * 500;
}
if (ball.zpos > -fl) {
var scale:Number = fl / (fl + ball.zpos);
ball.scaleX = ball.scaleY = scale;
ball.x = vpX + ball.xpos * scale;
ball.y = vpY + ball.ypos * scale;
ball.visible = true;
} else {
ball.visible = false;
}
}
}
}
代码中最有趣的地方是下面这行：
var dist:Number = Math.sqrt(dx * dx + dy * dy + dz * dz);
我们知道，在 2D 中计算两点间距离的方程是：
var dist:Number = Math.sqrt(dx * dx + dy * dy);
在 3D 距离中，只需要将第三个轴距离的平方加入进去。由于这个公式过于简单所以我
常会受到质疑。在加入了一个条件后，似乎应该使用立方根。但是它并不是用在这里的。
弹性运动
弹性运动是缓动的兄弟，需用相似的方法将其调整为 3D 的。我们只使用物体到目标
的距离改变速度，而不是改变位置。给大家一个快速的示例。本例中（Spring3D.as），点击
鼠标将创建出一个随机的目标点。
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class Spring3D extends Sprite {
private var ball:Ball3D;
private var tx:Number;
private var ty:Number;
private var tz:Number;
private var spring:Number = .1;
private var friction:Number = .94;
private var fl:Number = 250;
private var vpX:Number = stage.stageWidth / 2;
private var vpY:Number = stage.stageHeight / 2;
public function Spring3D() {
init();
}
private function init():void {
ball = new Ball3D();
addChild(ball);
tx = Math.random() * 500 - 250;
ty = Math.random() * 500 - 250;
tz = Math.random() * 500;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
private function onEnterFrame(event:Event):void {
var dx:Number = tx - ball.xpos;
var dy:Number = ty - ball.ypos;
var dz:Number = tz - ball.zpos;
ball.vx += dx * spring;
ball.vy += dy * spring;
ball.vz += dz * spring;
ball.xpos += ball.vx;
ball.ypos += ball.vy;
ball.zpos += ball.vz;
ball.vx *= friction;
ball.vy *= friction;
ball.vz *= friction;
if (ball.zpos > -fl) {
var scale:Number = fl / (fl + ball.zpos);
ball.scaleX = ball.scaleY = scale;
ball.x = vpX + ball.xpos * scale;
ball.y = vpY + ball.ypos * scale;
ball.visible = true;
} else {
ball.visible = false;
}
}
private function onMouseDown(event:MouseEvent):void {
tx = Math.random() * 500 - 250;
ty = Math.random() * 500 - 250;
tz = Math.random() * 500;
}
}
}
（如果要转载请注明出处http://blog.sina.com.cn/jooi，谢谢）
