2012-12-03 39 views
3

我創建了一個等距環境,全部使用Javascript和HTML5(2D畫布),大多數都能正常工作。我面臨的問題是如何處理不同高度的瓦片,然後對瓦片上的對象索引進行排序(在這種情況下,在並排移動兩個瓦片的同時)。如何將一個等距對象從一個圖塊過渡到另一個圖塊而不會與其他圖塊重疊

例如,一個對象可能位於它前面的一個圖塊後面,因爲它所在的圖塊的高度爲-1。我想出的解決方案是在繪製瓦片後直接繪製瓦片的每個對象,從0,0開始並從那裏繪製每一行和每列。

這個效果很好,直到我需要在兩個貼圖之間過渡對象。此時,對象必須使用中間圖塊(這是以下圖像中實現的內容),或者當圖塊在對象後面繪製時,圖塊將與對象重疊。使用中間貼圖還會出現問題,同一「行」上的柵欄對象會因爲立方體在1,3處使用更高的Z-index(這在圖像1中略微可見)而被拖動。

http://i.stack.imgur.com/PQJ0H.png

http://i.stack.imgur.com/DupM7.png

我想畫等距環境的久經考驗的方式就是有1層的瓷磚和1層爲對象,然後將對象永遠不能磚後面,但這是隻是我不想堅持的限制。

所以我的問題是,當從上到下繪製整個環境(或任何其他方式,如果它成爲可能),繪製每個瓷磚和它的對象,是否有一個聰明的方法來推遲繪製一個對象或者創建一個以正確順序繪製的對象數組?有沒有其他人遇到過類似的問題,並有其他人找到這方面的解決方案?

所有幫助非常感謝。

我的平鋪代碼示例:

// each column 
for(y=0; y<totalColumns; y++){ 
    // each row 
    for(x=0; x<totalRows; x++){ 
     tile = tiles[y][x]; 
     // draw tile 
     drawTile(tile); 
     objects = objects[y][x]; 
     // draw objects for that tile 
     drawObjects(objects); 
    } 
} 

編輯:

一個解決方案,我已經(讀問題丟回給自己後)認爲是遍歷所有的瓷磚,得到一個數組瓦片高度,排序,然後做傳統的繪圖。像這樣:

var layers = []; 

for(var y=0; y<cols; y++){ 
    for(var x=0; x<rows; x++){ 
     tile = tiles[y][x]; 
     if(!layers.indexOf(tile.height)) layers.push(tile.height); 
    } 
} 

// sort layers 
layers.sort(/*function here to sort layers*/); 

for(l=0; l<layers.length; l++){ 
    // draw tiles for this layer 

    // draw objects for this layer 

} 

其他可能的解決方案?

+2

你已經解決了你自己的問題。高度/ Z值是確定繪圖順序的常用方法。由於HTML5的畫布繪製順序是代碼執行的確切順序,因此您必須自己對繪製順序進行排序。 – Karis

回答

0

您在解決方案中做的確切正確。你想爲沒有alpha的東西做這件事。

至於其他解決方案去,我建議看看使用插入排序,而不是一次又一次地重建列表。在你的情況下,幾乎沒有什麼變化,所以只需更新需要它的那些。

相關問題