Pointy-Top 육각형 외형 맵 생성 (with Unity Tilemap + 사각형 타일)

내일배움캠프 57일차 TIL

 

프로젝트에서 필요한 육각형 맵을 유니티에 구현하는 걸 시도했다! 신기하게도 사각형 타일을 그대로 사용하면서도, 맵 전체의 외형이 위아래가 뾰족한 Pointy-Top 육각형처럼 보이도록 배치하는 절차적 생성 방식을 테스트하고 구현해봤다.

 

📌 이 작업을 왜 했냐면? (배경)

우리 게임 맵은 육각형 모양으로 만들고 싶었는데, 유니티의 기본 Tilemap은 사각형 격자(Rectangular Grid)로 되어있고, 내가 가진 타일 스프라이트들도 전부 사각형이었다. 처음엔 '이걸 어떻게 육각형으로 만들지?' 고민이 많았는데, 결국 '사각형 타일을 똑똑하게 배치해서 육각형처럼 보이게 하자!'는 결론에 도달했다.

그 첫 시도로, 육각형 중에서 위아래가 뾰족한 Pointy-Top 형태를 먼저 구현해봤다!

 

🧩 어떻게 만들었는지 기록!

핵심은 바로 '좌표 변환'이었다! 육각형 맵을 수학적으로 다루는 큐브 좌표계(q, r, s)를 사용해서 육각형 형태를 만든 다음, 이걸 유니티의 사각형 Tilemap 좌표로 바꿔주는 방식이었다.

1. 중심에서부터 육각형 모양으로 타일 배치하기

for (int q = -radius; q <= radius; q++)
{
    // 각 열(q)에서 r이 가질 수 있는 유효한 범위를 계산해서 육각형 외형을 만들어줌!
    int r1 = Mathf.Max(-radius, -q - radius);
    int r2 = Mathf.Min(radius, -q + radius);

    for (int r = r1; r <= r2; r++)
    {
        // 육각형 좌표 (q, r)를 유니티 Tilemap 좌표로 변환!
        Vector2Int offset = HexToOffset(q, r);
        Vector3Int pos = new Vector3Int(offset.x, offset.y, 0);
        tilemap.SetTile(pos, tile); // 계산된 위치에 타일 찍기!
    }
}

 

여기서 q와 r은 우리가 흔히 아는 x, y 좌표가 아니라, 육각형 그리드를 다룰 때 사용하는 큐브 좌표계의 열(q)과 행(r)이라고 생각하면 된다. (원래 s축도 있지만, q + r + s = 0이라서 q, r만 있어도 충분!)
r1, r2 계산이 처음엔 좀 헷갈렸는데, 생각해보니 이 부분이 바로 맵의 외곽선을 육각형 모양으로 깔끔하게 잘라주는 핵심이었다! 이 덕분에 맵이 동그랗게 퍼지는 게 아니라, 우리가 원하는 육각형처럼 각지게 잘린다.

2. 육각형 좌표를 Unity 사각형 Tilemap 위치로 바꾸는 마법!

Vector2Int HexToOffset(int q, int r)
{
    int col = q; // 열(x축)은 q를 그대로 사용
    // 행(y축)은 r에 q값을 보정해서 짝수/홀수 열이 엇갈리게 만들어줌!
    int row = r + (q - (q & 1)) / 2; // Even-Q 오프셋 방식
    return new Vector2Int(col, row);
}

 

유니티의 Tilemap은 철저하게 x, y로 이루어진 사각형 격자라서, 아까 만든 육각형 좌표(q, r)를 여기에 딱 맞게 변환해줘야 한다.
이 변환 방식이 바로 Even-Q 오프셋 방식이라고 불리는 건데, 쉽게 말해 짝수 열은 그대로 두고, 홀수 열만 한 칸 아래로 살짝 내려서 배치하는 거다.
이 덕분에 사각형 타일들이 마치 육각형처럼 자연스럽게 엇갈려 배치되고, 특히 Pointy-Top(위아래 뾰족한) 형태의 육각형 맵을 만드는 데 아주 적합하다!
🧭 실제 좌표 변환 예시 (반지름 2 기준)
내가 큐브 좌표 기준으로 타일을 찍었다고 상상해보자

		(0,-2)
	(-1,-1) (0,-1) (1,-1)
(-2,0) (-1,0) (0,0) (1,0) (2,0)
	(-1,1) (0,1) (1,1)
		(0,2)

 

이걸 HexToOffset 마법으로 유니티 사각형 Tilemap 좌표로 바꾸면 이렇게 된다!

		(0,0)   <- (0,-2)가 변환된 위치
  	(-1,1) (0,1) (1,1)
(-2,2) (-1,2) (0,2) (1,2) (2,2)
	(-1,3) (0,3) (1,3)
		(0,4)   <- (0,2)가 변환된 위치

보다시피 짝수 열(x=0, x=2, x=-2)은 같은 행에 위치하고, 홀수 열(x=1, x=-1)은 한 줄 아래로 내려가면서 자연스럽게 위아래가 뾰족한 육각형 외형이 만들어지는 걸 볼 수 있다!

 

생성된 맵!

 

✍️ 정리 & 내가 느낀 점

결론적으로, 타일 자체는 사각형이지만 좌표 변환 마법을 통해 맵 전체를 육각형 외형으로 보이게 만드는 게 이번 작업의 핵심이었다!

r1, r2 계산이랑 Even-Q 오프셋 변환 개념이 처음엔 좀 어려웠지만, 직접 코드를 짜보고 결과물을 보니까 '아, 이게 육각형을 잘라주고 엇갈리게 배치하는 거였구나!' 했다.
유니티의 사각형 Tilemap 위에서도 이렇게 복잡한 육각형 구조를 표현할 수 있다는 게 정말 흥미로웠다.
이 방식이라면 나중에 Flat-Top(좌우 뾰족한) 육각형 맵도 충분히 구현할 수 있을 것 같다! (오프셋 변환 방식만 바꾸면 될 듯?)