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排序： [對象形狀]，[對象形狀]，[對象形狀]，[對象形狀]「完全沒有幫助。

您可以使用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」設置爲不帶引號，而它需要引號。