아이소 메트릭 타일 맵의 Z 축

Question

자바 스크립트와 HTML5 캔버스의 아이소 메트릭 타일 맵을 실험하고 있습니다. 타일 맵 데이터를 JavaScript 2D Array에 저장하려고합니다.

// 0 - Grass 
// 1 - Dirt 
// ... 
var mapData = [ 
    [0, 0, 0, 0, 0], 
    [0, 0, 1, 0, 0, 
    ... 
] 

및 그릴

for(var i = 0; i < mapData.length; i++) { 
    for(var j = 0; j < mapData[i].length; j++) { 
     var p = iso2screen(i, j, 0); // X, Y, Z 
     context.drawImage(tileArray[mapData[i][j]], p.x, p.y); 
    } 
} 

되지만이 기능은 모든 의미 타일 Z 축이 0 인이다.

var p = iso2screen(i, j, 0); 

어쩌면 누군가 아이디어를 가지고 3 동일한 mapData[0][0] Z 축과 같은 작업을 수행하는 방법; mapData[5][5] Z 축은 5와 같습니다. ?

나는 Grass, Dirt 함수를 작성하고이 함수를 2D Array에 저장하고 나중에 mapData[0][0].setZ(3);을 그립니다. 그러나 각 타일에 대한 함수를 작성하는 것이 좋습니다.

Answer 1

Z가 타일의 위치에 미치는 영향을 모른 채 대답하기가 어렵습니다. Z가 단순히 그리기 순서를 의미하는 경우 (HTML5 Canvas는 Z 인덱스를 지원하지 않기 때문에) 단일 타일을 그리는 동안 반복 할 수 있도록 정렬 된 배열에 타일 데이터를 저장해야합니다. 아이소 타일

는 ((0,0)에 위치) 최상부 타일 (- mapWidth - mapHeight)의 Z 오더 및 (x,y)에 위치하는 임의의 타일을 갖는 것이 일반적이다은 ((-mapWidth + x) + (-mapHeight + y))있다.

등각 투영 타일 맵의 또 다른 개념은 레이어입니다. 레이어에는 다른 레이어 위로 이동하는 높이 속성이 지정 될 수 있습니다.