[2d] 아이소 메트릭 게임 세계 그리기

업데이트 : 맵 렌더링 알고리즘 수정, 더 많은 일러스트레이션 추가, 형식 변경

타일을 화면에 매핑하는 “지그재그”기술의 이점은 타일 x과 y좌표가 세로 및 가로 축에 있다고 할 수 있습니다 .

“다이아몬드로 그리기”접근 방식 :

“다이아몬드로 그리기”를 사용하여 등각지도를 그리면 for이 예제와 같이 2 차원 배열에 중첩 된 루프를 사용하여지도를 렌더링하는 것입니다 .

tile_map[][] = [[...],...]

for (cellY = 0; cellY < tile_map.size; cellY++):
    for (cellX = 0; cellX < tile_map[cellY].size cellX++):
        draw(
            tile_map[cellX][cellY],
            screenX = (cellX * tile_width  / 2) + (cellY * tile_width  / 2)
            screenY = (cellY * tile_height / 2) - (cellX * tile_height / 2)
        )

이점:

이 접근법의 장점은 for모든 타일에서 일관되게 작동하는 상당히 직진 논리를 가진 단순한 중첩 루프 라는 것입니다 .

불리:

그 방법에 대한 한 단점은이다 x및 y지도 타일의 좌표가 더 어려워 시각적 배열로서 표시되는지도 화면의 위치를 매핑 할 수있는 대각선으로 증가한다 :

그러나 위의 예제 코드를 구현하는 데는 함정이있을 것입니다. 렌더링 순서는 특정 타일 뒤에있는 타일이 타일의 맨 앞에 그려지게합니다.

이 문제를 수정하려면, 내부 for루프의 순서는 가장 높은 값에서 시작하여 더 낮은 값으로 렌더링되어야합니다.

tile_map[][] = [[...],...]

for (i = 0; i < tile_map.size; i++):
    for (j = tile_map[i].size; j >= 0; j--):  // Changed loop condition here.
        draw(
            tile_map[i][j],
            x = (j * tile_width / 2) + (i * tile_width / 2)
            y = (i * tile_height / 2) - (j * tile_height / 2)
        )

위 수정으로 맵 렌더링을 수정해야합니다.

“지그재그”접근 방식 :

이점:

“지그재그”접근 방식의 장점은 렌더링 된 맵이 “다이아몬드”접근 방식보다 약간 더 수직적으로 작게 보일 수 있다는 것입니다.

불리:

지그재그 기술을 구현하려는 시도의 단점은 렌더링 코드를 작성하는 것이 조금 어렵다는 것입니다. 렌더링 코드 for는 배열의 각 요소에 대해 중첩 루프 처럼 간단하게 작성할 수 없기 때문입니다 .

tile_map[][] = [[...],...]

for (i = 0; i < tile_map.size; i++):
    if i is odd:
        offset_x = tile_width / 2
    else:
        offset_x = 0

    for (j = 0; j < tile_map[i].size; j++):
        draw(
            tile_map[i][j],
            x = (j * tile_width) + offset_x,
            y = i * tile_height / 2
        )

또한 렌더링 순서의 지그재그 특성으로 인해 타일의 좌표를 알아내는 것이 약간 어려울 수 있습니다.

참고 :이 답변에 포함 된 그림은 다음과 같은 int배열을 맵으로 사용하여 제시된 타일 렌더링 코드의 Java 구현으로 작성되었습니다 .

tileMap = new int[][] {
    {0, 1, 2, 3},
    {3, 2, 1, 0},
    {0, 0, 1, 1},
    {2, 2, 3, 3}
};

타일 ​​이미지는 다음과 같습니다.

• tileImage[0] -> 안에 상자가있는 상자.
• tileImage[1] -> 블랙 박스.
• tileImage[2] -> 흰색 상자.
• tileImage[3] -> 키가 큰 회색 물체가 들어있는 상자입니다.

타일 ​​너비 및 높이에 대한 참고 사항

변수 tile_width와 tile_height상기 코드 예에서 사용 된 타일을 나타내는 이미지의 바닥 타일의 폭과 높이를 참조 :

이미지 크기와 타일 크기가 일치하는 한 이미지의 크기를 사용하면 효과가 있습니다. 그렇지 않으면, 타일 맵은 타일 사이에 간격을두고 렌더링 될 수 있습니다.

답변

..  ..  01  ..  ..
  ..  06  02  ..
..  11  07  03  ..
  16  12  08  04
21  17  13  09  05
  22  18  14  10
..  23  19  15  ..
  ..  24  20  ..
..  ..  25  ..  ..

..  ..  ..  ..  ..
  01  02  03  04
..  05  06  07  ..
  08  09  10  11
..  12  13  14  ..
  15  16  17  18
..  19  20  21  ..
  22  23  24  25
..  ..  ..  ..  ..

...1...
..234..
.56789.
..abc..
...d...

typedef struct ASIntCell {  // like CGPoint, but with int-s vice float-s
    int x;
    int y;
} ASIntCell;

// Cell-math helper here:
//      http://gamedevelopment.tutsplus.com/tutorials/creating-isometric-worlds-a-primer-for-game-developers--gamedev-6511
// Although we had to rotate the coordinates because...
// X increases NE (not SE)
// Y increases SE (not SW)
+ (ASIntCell) cellForPoint: (CGPoint) point
{
    const float halfHeight = rfcRowHeight / 2.;

    ASIntCell cell;
    cell.x = ((point.x / rfcColWidth) - ((point.y - halfHeight) / rfcRowHeight));
    cell.y = ((point.x / rfcColWidth) + ((point.y + halfHeight) / rfcRowHeight));

    return cell;
}


// Cell-math helper here:
//      http://stackoverflow.com/questions/892811/drawing-isometric-game-worlds/893063
// X increases NE,
// Y increases SE
+ (CGPoint) centerForCell: (ASIntCell) cell
{
    CGPoint result;

    result.x = (cell.x * rfcColWidth  / 2) + (cell.y * rfcColWidth  / 2);
    result.y = (cell.y * rfcRowHeight / 2) - (cell.x * rfcRowHeight / 2);

    return result;
}