아이소메트릭 좌표 변환기
타일 격자 좌표와 화면 픽셀 좌표를 서로 변환합니다. 2:1 다이메트릭, 30도 진짜 아이소메트릭 등 타일 크기를 바꿔 가며 게임·타일맵 개발에 바로 쓸 수 있습니다.
px
px
화면 좌표
(32, 80)
타일 중심을 화면 원점(0,0) 기준으로 그릴 위치
screenX = (x−y)×(폭/2), screenY = (x+y)×(높이/2) 로 계산합니다. 마우스 클릭 위치로 타일을 찾을 때는 역변환한 뒤 가장 가까운 정수로 반올림하면 됩니다.
사용 방법
- 1타일의 화면상 폭·높이를 입력하거나 프리셋을 고릅니다.
- 2격자 → 화면 방향으로 타일 좌표를 화면 픽셀 위치로 바꿉니다.
- 3화면 → 격자 방향으로 클릭한 픽셀 위치가 어느 타일인지 구합니다.
자주 묻는 질문
screenX = (x−y) × (타일폭/2), screenY = (x+y) × (타일높이/2) 식으로 계산합니다. x가 늘면 오른쪽 아래로, y가 늘면 왼쪽 아래로 타일이 밀리는 것을 이 식이 그대로 표현합니다.
위 식을 연립방정식으로 풀면 x = (screenX÷(폭/2) + screenY÷(높이/2))÷2, y = (screenY÷(높이/2) − screenX÷(폭/2))÷2가 나옵니다. 마우스 클릭 위치를 타일 인덱스로 바꿀 때 이 역변환을 쓰고, 결과를 가장 가까운 정수로 반올림하면 클릭한 타일이 됩니다.
2:1(폭이 높이의 2배)은 롤러코스터타이쿤류 게임에서 흔히 쓰는 픽셀아트 관례로, 픽셀 격자에 딱 맞아떨어져 안티에일리어싱 없이 그리기 좋습니다. 진짜 아이소메트릭은 30도 각도(폭:높이 ≈ 1.732:1)를 정확히 지켜 실제 기하학적 등각 투영과 일치합니다.
알아두면 좋은 점
- 타일 중심을 기준으로 계산합니다. 타일 좌상단 기준 좌표계를 쓰는 엔진이라면 결과에 타일 크기의 절반을 더하거나 빼야 할 수 있습니다.
- 겹치는 레이어(같은 화면 위치에 여러 높이의 타일)를 그리는 순서(z-order) 계산은 다루지 않습니다.
함께 보면 좋은 도구
마지막 검증: 2026년 9월 4일 · 결과는 참고용 추정치입니다.