AS3 根据 y 位置和静止物体改变深度

Question

这有点难以描述。

我正在开发一款游戏，该游戏通过根据对象的 y 位置排列对象来模拟某些景深。

有一个静态的背景舞台，角色会生成和消失并四处移动。

这些字符在彼此前面时应正确排序。

我还需要能够使用条件检查来确定角色应该位于某些静态对象的后面还是前面。

我已经尝试通过制作一个与游戏分开的文件来说明我的问题，从而将问题分解为最基本的问题。

---

在这个例子中，我在舞台上有两个movieclip，bgBox和fgBox，分别是黑色和黄色。

在我的代码中，我创建了另外 4 个框，每个框位于不同的 y 位置。其中 3 个旨在整齐地分层在 bgBox 和 fgBox 之间，而第四个是紫色的，旨在位于其他所有内容之上。

当我导出它时会发生以下情况： http://www.fileize.com/files/32d824d3/992/sorting_test.swf

这是我的代码：

var boxList:Array = new Array();
var unsortedBoxList:Array = new Array();
var initialSort:Boolean = true;

var blue_box:Shape = new Shape();
var red_box:Shape = new Shape();
var green_box:Shape = new Shape();
var purple_box:Shape = new Shape();

blue_box.graphics.lineStyle(1);
blue_box.graphics.beginFill(0x0000FF, 1);
blue_box.graphics.drawRect(200,150,100,100);
red_box.graphics.lineStyle(1);
red_box.graphics.beginFill(0xFF0000, 1);
red_box.graphics.drawRect(220,170,100,100);
green_box.graphics.lineStyle(1);
green_box.graphics.beginFill(0x00FF00, 1);
green_box.graphics.drawRect(240,190,100,100);
purple_box.graphics.lineStyle(1);
purple_box.graphics.beginFill(0xFF00FF, 1);
purple_box.graphics.drawRect(220,230,100,100);

trace("adding boxes----");
addChild(green_box);
trace("green: "+green_box.name);
boxList.push(green_box);
addChild(blue_box);
trace("blue: "+blue_box.name);
boxList.push(blue_box);
addChild(purple_box);
trace("purple: "+purple_box.name);
boxList.push(purple_box);
addChild(red_box);
trace("red: "+red_box.name);
boxList.push(red_box);
trace("-----------------");

addEventListener(Event.ENTER_FRAME, loop, false, 0, true);

function loop(e:Event):void
{
    sortObjects();
}

function sortObjects():void {
    if(initialSort == true){
        setChildIndex(bgBox,0);
        setChildIndex(fgBox,1);

        trace("initial sort----"); 
        trace("   - bgBox index: "+getChildIndex(bgBox));
        trace("   - fgBox index: "+getChildIndex(fgBox));
        trace("----------------");

        initialSort = false;
    }

    boxList.sortOn(y, Array.NUMERIC);
    trace("----------");
    trace("boxList sorted: ");
    for each(var j:Shape in boxList){
        trace(j.name);
    }
    trace("-----");

    trace("   - bgBox index: "+getChildIndex(bgBox));
    for each(var i:Shape in boxList){
        if(i.y > 220){
            trace("y > 220; purple box"); //never triggers? the purple box should be on top of everything.
            setChildIndex(i,(getChildIndex(fgBox)+1));
        }
        else 
        {
            setChildIndex(i,getChildIndex(fgBox));
            //all other boxes should be arranged neatly inbetween the black and yellow boxes.
        }

        trace(i.name+" index: "+getChildIndex(i));
    }
    trace("   - fgBox index: "+getChildIndex(fgBox));
}

这是我在输出中得到的，很奇怪：

adding boxes----
green: instance5
blue: instance3
purple: instance6
red: instance4
-----------------
initial sort----
      - bgBox index: 0
      - fgBox index: 1
----------------
----------
boxList sorted: 
instance6
instance3
instance5
instance4
-----
      - bgBox index: 0
instance6 index: 1
instance3 index: 2
instance5 index: 3
instance4 index: 4
      - fgBox index: 5
----------
boxList sorted: 
instance5
instance3
instance6
instance4
-----
      - bgBox index: 0
instance5 index: 5
instance3 index: 4
instance6 index: 3
instance4 index: 2
      - fgBox index: 1
----------
boxList sorted: 
instance6
instance3
instance5
instance4
-----
      - bgBox index: 0
instance6 index: 1
instance3 index: 2
instance5 index: 3
instance4 index: 4
      - fgBox index: 5

正如您现在所看到的（感谢用户 Marty Wallace 的想法），对象未按 Y 值正确排序。

这是源文件的链接，以防万一： http://www.fileize.com/files/edc632f3/2e6/sorting_test.fla

---

谁能向我解释为什么会这样？谁能提供这个问题的解决方案？

提前致谢。这让我难倒了好几天。

Answer 1

对于初学者，您可以尝试一下，只是为了让基于 y 的分层工作正常：

boxList.sortOn("y" Array.NUMERIC);

for each(var i:Shape in boxList)
{
    // Bring to front.
    i.parent && i.parent.addChild(i);
}

至于这个：

此外，输出：“boxList sorted: [object Shape],[object Shape],[object Shape],[object Shape]”完全没有帮助。

您可以使用toString() 方法创建自己的类。无论此方法返回什么，都将是您在上面看到的。例如，如果你制作这个类：

class Test extends Shape
{
     public function toString():String
     {
         return name;
     }
}

然后你会得到一些更有用/更有代表性的东西：

var ar:Array = [];

for(var i:int = 0; i < 3; i++)
{
    var test:Test = new Test();
    ar.push(test);
}

trace(ar); // instance1,instance2,instance3

Answer 2

您没有将 bgBox 和 fgBox 推入该数组以使它们正确排序。而且您错过了正确的 sortOn 参数 - 您设置的 "y" 不带引号，而它需要引号。