다른 타일과 겹치지 않고 하나의 타일에서 다른 타일로 다른 타일을 변환하는 방법

Question

자바 스크립트와 HTML5 (모두 2D 캔버스)로 등각 투영 환경을 만들었습니다. 필자가 직면 한 문제는 서로 다른 높이의 타일을 사용하고 타일에있는 객체의 인덱스를 정렬하는 것입니다 (이 경우 두 타일을 나란히 이동하면서).

예를 들어 타일의 높이가 -1이기 때문에 하나의 오브젝트가 앞에있는 타일 뒤에있을 수 있습니다. 필자가 생각해 낸 해결책은 타일을 그린 후 타일의 각 객체를 직접 그려서 0,0에서 시작하여 거기에서 각 행과 열을 그립니다.

두 타일 사이에서 오브젝트를 전환해야 할 때까지 제대로 작동합니다. 이 시점에서 객체는 중간 타일을 사용해야하며 (아래 이미지에서 구현되는 것입니다) 타일이 객체 뒤에 그려지면서 객체와 오버랩됩니다. 중간 타일을 사용하면 큐브가 1,3에서 타일에서 훨씬 높은 z- 인덱스를 사용하기 때문에 동일한 "행"의 펜스 객체가 그려지는 문제가 발생합니다 (이미지 1에서 약간 볼 수 있음).

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

http://i.stack.imgur.com/PQJ0H.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 

} 

다른 해결책이 있습니까?

Answer 1

당신의 솔루션에서 정확한 것을하는 것. 알파가없는 모든 작업에이 작업을 수행하려고합니다.

다른 해결책으로는 목록 시간과 시간을 다시 다시 작성하는 대신 삽입 정렬을 사용하는 것이 좋습니다. 귀하의 경우에는 변경 사항이 거의 없으므로 변경이 필요합니다.