아이소 메트릭 타일(마름모 맵) 수학 1/2

아이소 메트릭 타일 수학

 

(역자 : 구글 번역기를 통한 번역 작업 후, 의역 후처리 작업으로 최대한 부드럽게, 그리고 알기 쉽게 번역하였습니다. (그러다 보니 의역이 매우 많습니다.)

번역에 무리가 있지만, 공부함에 있어서 큰 무리가 없는 부분은 번역하지 않았습니다. 도움 주시면 수정토록 하겠습니다.)

 

 아이소 메트릭 타일 작업은 일반 사각형 격자보다 약간 까다롭습니다.

 이 튜토리얼은 아이소 메트릭 수학 때문에, 주위에서 자신의 머리를 감싸고 있는 초보 게임 프로그래머를위한 것입니다.

 Instead of simply handing you formulas, I intend to explain what they do and how they should be used.

 

아이소 메트릭 타일을 처리하는 방법은 여러 가지가 있지만, 우리는 가장 일반적인 방법 하나를 이야기 할 것입니다.

 

등거리 변환방법등을 위해서는 Tiled map editer를 사용하는 것이 가장 확실한 방법입니다

 

 

타일방식

(역자 : Orthographic Projection으로써 직역하면 직교투영 이라고 합니다만, 방식 자체가 사각형의 나열 방식이기 때문에, 타일 방식이라 하겠습니다.)

 

아이소 메트릭 프로젝트에서 작업할 때,

당신은 아마  횡스크롤이나, 탑뷰에서와 같이 단순한 타일의 2차원배열과 같은 모습이 될 것입니다.

 

생성된 맵의 좌표 - 메모리 배열과 같은 모습을 볼 수 있다.

생성된 맵의 좌표 - 메모리 배열과 같은 모습을 볼 수 있다.

(값은 map.x, map.y)

(역자: map.x와 map.y는 포인트위치이다.(메모리 포인터 아니다))

 

만일 당신이 단순히 타일 맵으로 작업을 한다면,  매우 간단한 수학으로 작업할 수 있습니다.

(필자는 개인적으로 아이소 작업을 진행하기 전, 이 방식을 먼저 해보는것을 추천합니다.)

화면상에 타일의 좌표를 먼저 결정한 뒤, 각타일의 크기를 곱하면 해당 타일의 위치를 얻을 수 있게 됩니다.

screen.x = map.x * TILE_WIDTH; 

//타일의 가로 = 가로 시작위치 * 타일의 가로 크기

screen.y = map.y * TILE_HEIGHT;

// 타일의 세로 = 세로 시작위치 * 타일의 세로 크기

 

(역자 : 그리고자 하는 타일의 시작점을 먼저 결정한 후, 해당 위치로 부터 가로던 세로던 각 타일의 크기만큼 곱해주면 시작하고자 하는 타일의 위치를 얻을 수 있다는 설명입니다.

위의 공식을 사용하기 위해서는 해당 타일의 피봇의 위치가 왼쪽상단에 위치하고 있어야 합니다.)

 

예를들어 64 x 64픽셀의 타일이라고 가정하고, 우리가 2, 1의 위치에 타일을 표시할 경우, 우리는 다음의 식으로 값을 생성할 수 있습니다.

 

screen.x = 2 * 64; 

 // 타일의 가로 = 가로 시작위치 * 타일의 가로 크기이며, 128픽셀의 위치

(역자 : 가로 시작위치(포인트 : 2)에다 가로 크기(64px)만큼 이라고 읽는게 편할 것입니다.)

screen.y = 1 * 64;

// 타일의 세로 = 세로 시작위치 * 타일의 세로 크기이며, 64픽셀의 위치

(역자 : 가로 시작위치(포인트 : 1)에다 가로 크기(64px)만큼 이라고 읽는게 편할 것입니다.)

 

 

생성되어야 하는 타일의 화면상 위치를 결정

생성되어야 하는 타일의 화면상 위치를 결정

 

(역자 : 필자가 설명하고자 하는 부분은 타일이 생성되어야 하는 위치를 찾는 방식에 대한 로직이며, 실제로 우리가 흔히 사용하는 for문을 이용한 생성방식도 사실 위와 같은 로직을 반복적으로 따라 만들어 주고 있는 것 뿐입니다.)

 

 

아이소 방식

(역자 : Isometric Projection으로써 직역하면 등각투영 이라고 합니다)

 

다음그림은 우리가 만든 메모리 상의 타일을 아이소뷰로 출력하는 것을 보여 줍니다.

 

가) 

타일방식을 다음과 같이 만들 어야 한다

타일방식을 다음과 같이 만들 어야 한다

 

이 예제에서 만들고자 하는 아이소의 타일은  128x64픽셀입니다.

(역자 : 아이소는 기본적으로 가로가 더 길어야 합니다.)

그러면 이번에도 타일 2, 1번을 아이소로 그려 보겠습니다.

 

먼저 2, 1의 타일의 시작점을 화면위치에서 확인하기 위해 해당위치의 픽셀을 측정하도록 합니다.

잠깐 생각해보면 쉽게 알 수 있습니다.

일단 회전과, y의 스케일을 계산하는 방법이 가능하긴하겠지만 가단한 방법이 있습니다.

 

요령은 x와 y를 별도로 생각하는 것입니다. 위의 아이소를 잘 보면, 다음과 같은것을 알 수 있습니다.

 

(중심이 되는 어떠한 타일에서 오른쪽으로 이동 할 때 마다) 타일의 위치가 x축으로 증가할 때 마다, 다음 타일의 위치는 x와 y가 모두 "절반만큼" 증가합니다.

(화면 좌표에서 "오른쪽 + 아래쪽"으로 "절반만큼" 증가시키는 것을 알 수 있습니다.)

 

 

map.x가 증가할수록(map.x++) x축으로는 64만큼, y는 32만큼의 증가됨을 알 수 있다.

map.x가 증가할수록(map.x++) x축으로는 64만큼, y는 32만큼의 증가됨을 알 수 있다.

 

마찬가지로, 좌표상에서 아래로 이동할때 역시 y가 증가할 경우 x는 감소, y는 증가됩니다.

 

*1) 코드는 다음과 같은 형태로 변경하여 표현이 가능하다.

 

screen.x = map.x * TITLE_WIDTH_HALF - map.y * TILE_WIDTH_HALF;

screen.y = map.y * TITLE_HEIGHT_HALF + map.y * TILE_HEIGHT_HALF;

 

(역자 : 해당 공식이 이해가 안된다면 반드시 모눈종이를 준비하시고, 손으로 그려 보시기 바랍니다. 이 두줄이 매우 중요합니다.)

 

 

그리고 해당 공식을 단순화와 하면 다음과 같이 표현이 가능하다.

 

screen.x = (map.x - map.y) * TILE_WIDTH_HALF;

screen.y = (map.x + map.y) * TILE_HEIGHT_HALF;

 

 

다음으로, 예상할 수 있는 결과를 얻을 수 있는지 확인하기 위해 타일 2, 1에 식을 대입해 보도록 하겠습니다.

(역자 : 완벽히 이해가 될 때까지 가)이미지에 대입하여 반복적으로 연습해 보도록 하시기 바랍니다.) 

screen.x = (2 - 1) * 64;    // 64

screen.y = (2 + 1) * 32;   // 96

 

 

 

 

 

역주 : 여기까지가 아이소 피봇의 위치를 구하는 공식입니다. 구조체에 임의의 숫자를 넣고 아이소의 좌표의 위치 마다 해당 숫자를 출력해 주는 for문을 만들어 보시기 바랍니다.

해당 포인트의 좌표를 출력할 수 있어도 좋습니다.

 

아이소를 출력하는 방법은 다음 시간에 알아 보도록 하겠습니다.

 

 

 

 

출처 : https://clintbellanger.net/articles/isometric_math