아이소메트릭 픽셀 아트 가이드 — 타일, 스프라이트, 캐릭터

아이소메트릭 픽셀 아트는 2:1 다이아몬드 그리드 위에 그립니다. 모든 타일은 가로가 세로의 정확히 두 배이며, 높이는 원근 카메라로 흉내 내는 대신 수직 방향의 픽셀 열로 그립니다. 32×16이 가장 널리 쓰이는 타일 크기이고, 큰 장면에는 64×32, 작은 소품과 캐릭터에는 16×8을 씁니다. 2:1 비율만 받아들이면 스프라이트 발자국, 걷기 동작, 이음새, 깊이 정렬 같은 나머지 모든 결정이 여기서 따라 나옵니다.

이 페이지는 실제로 만드는 순서대로 그리드, 타일, 스프라이트, 4방향과 8방향 캐릭터 세트를 다룹니다. 그다음에는 대부분의 튜토리얼이 건너뛰는 단계, 즉 같은 다이아몬드 그리드를 브라우저에서 실제로 걸어 다닐 수 있는 3D 세계로 바꾸는 방법을 설명합니다. 카메라 기울기를 아트에 맞춰 고정하고 타일이 곧 지오메트리가 되죠. Neta Studio의 3D 게임 빌더는 그 마지막 단계에 쓰는 도구이며, 여기서 투영 세부 사항을 정확히 맞춰야 하는 이유이기도 합니다.

빠른 답변: 픽셀 아트를 '아이소메트릭'으로 만드는 것은 무엇인가?

아이소메트릭 픽셀 아트는 원근 투영이 아니라 회전 투영입니다. 세계의 가로축과 세로축은 화면에서 모두 대각선으로 뻗고(하나는 오른쪽 아래로, 다른 하나는 왼쪽 아래로), 수직축은 픽셀 하나 폭으로 곧게 위로 향합니다. 아무것도 한 점으로 모이지 않고 소실점도 없으며, 깊이는 손으로 유지하는 관습입니다. 화면에서 아래에 있을수록 가깝고, 픽셀 열이 높을수록 더 높은 것입니다.

두 지면 축 모두 가로 2, 세로 1의 비율이라 모든 지면 모서리가 수평에서 약 26.57° 기울어집니다. 엄밀히 말하면 이는 이원측 투영입니다. 진짜 아이소메트릭은 세 축이 모두 같은 비율로 단축되어 지평선 위 약 35.264°를 이루고, 지면 타일이 약 1.732:1이 됩니다. 그래도 '아이소메트릭'이라는 이름이 굳어진 것은 사람들이 그렇게 부르기 때문이며, 실제로 찾을 수 있는 거의 모든 타일셋은 2:1로 그려집니다.

2:1 그리드

2:1이 존재하는 이유는 정사각 픽셀에 맞아떨어지기 때문입니다. 가로 2, 세로 1의 모서리는 깔끔한 계단, 즉 오른쪽으로 두 픽셀, 아래로 한 픽셀을 반복하는 형태라 타일을 찍을 때 모든 모서리 픽셀이 정수 픽셀에 놓입니다. 진짜 30° 투영은 약 1.732 대 1의 비율이라 가로로 2픽셀 이동할 때 아래로 1.155픽셀 내려갑니다. 이는 픽셀 격자에 놓이지 않아 모서리가 한 픽셀과 두 픽셀 구간을 번갈아 가며 선이 흔들립니다. 영웅 소품 하나라면 그 픽셀을 손으로 배치할 수 있겠지만, 수천 개를 찍어야 하는 타일셋에서는 불가능합니다.

사람들이 실제로 겪는 실패는 정사각 캔버스를 45° 회전해서 그 결과를 아이소메트릭이라고 부르는 경우입니다. 45° 회전한 정사각형은 여전히 정사각형입니다. 다이아몬드의 가로와 세로가 같아지고, 윗면과 옆면의 실루엣이 같아지며, 인접한 깊이 행이 깔끔하게 분리되지 않습니다. 첫 픽셀부터 2:1로 다이아몬드를 그리세요. 16×16이나 32×32 스프라이트를 회전시켜 타일을 만들지 마세요.

타일 간격을 오프셋으로 기억하세요. 32×16에서 한 타일 동쪽으로 이동하면 화면 공간에서 가로 +32, 세로 +16입니다. 한 타일 북쪽으로 이동하면 가로 +32, 세로 -16입니다. 이 한 쌍의 오프셋이 배치, 스프라이트 이동, 깊이 정렬에 모두 쓰입니다.

첫 아이소메트릭 타일 그리기

타일셋을 그리기 전에 타일 하나를 먼저 그리세요. 목표는 고치지 않고 그대로 찍을 수 있는 타일이며, 모든 모서리 픽셀이 2:1 간격을 유지하고 세 개의 보이는 면이 하나의 명암 단계를 공유해야 합니다. 윗면은 기준 밝기, 한쪽 면은 한 단계 어둡게, 다른 쪽 면은 두 단계 어둡게요.

두 옆면이 있어야 아이소메트릭으로 읽힙니다. 양쪽 면이 같은 밝기면 정육면체가 납작해져 육각형처럼 보이고 눈은 높이를 읽지 못합니다. 빛의 방향을 정하고(관례상 왼쪽 위) 프로젝트 안에서는 절대 바꾸지 마세요. 그러면 모든 타일과 스프라이트가 빛의 위치에 대해 일치합니다.

아이소메트릭 스프라이트와 스프라이트 시트

옆모습 스프라이트는 발자국이 직사각형이고 수평으로 걷습니다. 아이소메트릭 스프라이트는 발자국이 다이아몬드 모양이고 발이 그 다이아몬드 안에 놓입니다. 시트의 모든 것이 여기서 따라 나옵니다. 기준점은 다이아몬드의 중심이며, 발을 기준으로 생각하고 싶다면 다이아몬드의 아래쪽 꼭짓점입니다. 그리고 스프라이트는 서 있는 지면 타일과 같은 타일 원점에 붙여 그립니다.

화면에서의 움직임은 대각선입니다. 맵 타일 하나 동쪽으로 이동하면 오른쪽 +32, 아래 +16입니다. 한 타일 북쪽은 오른쪽 +32, 아래 -16입니다. 따라서 동쪽을 향한 걷기 동작은 수평 반복이 아니라, 다리가 돌아가는 동안 몸이 2:1 기울기를 따라 흐르는 것입니다. 프레임별 오프셋을 수평선 위에 그리면 캐릭터가 타일 위를 미끄러집니다. 대각선을 따라 네 개를 놓고 발이 타일 중심을 따라가는지 확인해 시험하세요.

시트는 방향을 행으로, 프레임을 열로 하여 균일한 칸에 배치하세요. 32×16 발자국에 키 32픽셀 캐릭터는 가로 32, 세로 48 칸에 맞습니다. 16픽셀은 다이아몬드, 그 위 32픽셀은 몸입니다. 알파는 0 또는 255의 이진값으로 유지하세요. 반투명 가장자리 픽셀은 시트를 묶거나 크기를 조정하면 뒤에 있는 무엇이든 비쳐, 어두운 타일 위의 모든 캐릭터 주위에 밝은 테두리가 생깁니다.

아이소메트릭 캐릭터 (4방향/8방향)

4방향이 표준인 이유는 지면 그리드에 대각선이 네 개 있기 때문입니다. 남동, 남서, 북동, 북서입니다. 이 방향들이 맵 축을 따른 모든 이동을 담당합니다. 8방향은 화면 정방향, 즉 북, 남, 동, 서를 추가하는데, 이는 캐릭터가 두 축을 동시에 따라 그리드를 대각선으로 걸을 때만 나타납니다. 아트가 두 배로 늘고, 추가된 네 행은 플레이어가 키를 두 개 누르는 동안에만 보입니다.

엔진에는 결정론적 조회가 필요합니다. 행이 방향 인덱스이고 열이 프레임이거나, 방향인덱스 × 방향당프레임수 + 프레임의 평탄 인덱스입니다. 순서를 시트 옆 텍스트 파일에 적어 두세요. 전형적인 버그는 동쪽 우선으로 만든 시트를 남쪽 우선으로 불러와서 한 방향이 뒤로 향하고, 보고가 '걷기 애니메이션이 이상해 보인다'로 돌아오는 것입니다.

프레임 수와 타이밍

걷기 동작은 초당 8~12프레임에서 잘 읽힙니다. 초당 8프레임에서 4프레임은 프레임당 125밀리초입니다. 6프레임이면 접지 자세와 통과 자세를 그릴 수 있고 큰 추가 작업 없이 2:1 대각선을 따라 더 매끄럽게 움직입니다. 메타데이터가 방향별 프레임 수를 저장하지 않는 한 모든 방향 행의 프레임 수를 동일하게 유지하세요. 4프레임 행 옆에 6프레임 행을 두면 코드가 균일한 격자를 가정하는 순간 속도가 어긋납니다. 대기 동작은 느린 반복의 한두 프레임입니다. 공격과 상호작용은 피벗이 바뀌지 않도록 같은 칸 크기의 별도 시트에 넣으세요.

뒤집기는 더 저렴하고 대개 틀렸다

동쪽을 서쪽으로 반전하면 그림 작업이 절반으로 줄어듭니다. 하지만 빛도 함께 반전됩니다. 빛이 왼쪽 위에서 온다면 뒤집힌 스프라이트는 오른쪽 위에서 빛을 받고, 방패를 든 팔, 칼집, 가방 끈 같은 비대칭 디테일이 반대쪽에 놓입니다. 캐릭터가 대칭이고 음영이 평평해 아무도 눈치채지 못할 때만 반전하고, 강한 방향성 하이라이트가 있는 스프라이트는 절대 반전하지 마세요.

오브젝트, 소품, 높이

소품의 아트 상자는 발자국보다 높습니다. 발자국이 1×1(32×16)이고 위로 40픽셀의 수관이 있는 나무는 가로 32, 세로 약 56의 칸이 필요합니다. 16은 다이아몬드, 40은 그 위로 솟는 부분입니다. 그 칸 크기를 한 번 정하고 모든 소품을 같은 모듈 안에 유지하세요. 그렇지 않으면 불러오기 도구가 소품마다 개별 오프셋을 필요로 합니다.

여러 타일을 차지하는 소품은 더 큰 다이아몬드 위에 그립니다. 2×2 건물은 네 타일을 덮으므로, 아트가 위로 48이나 64픽셀 솟아도 지면 발자국은 64×32 다이아몬드입니다. 원점은 스프라이트 경계 상자의 중심이 아니라 발자국의 중심, 즉 2×2 소품에서는 네 타일이 만나는 지점에 두세요. 경계 상자 중심에 두면 바닥이 반 타일 어긋나 건물이 자기 부지의 한 모서리 위에 떠 있는 것처럼 보입니다.

2D 아이소메트릭 렌더러의 깊이 정렬은 화가 알고리즘입니다. 타일가로 + 타일세로로 정렬하고, 동률이면 오브젝트별 우선순위로 결정합니다. 높은 소품이 이를 깨뜨립니다. 2행에 놓인 여섯 타일 높이의 탑은 가려야 할 5행의 벽 위에 그려집니다. 해결책은 두 가지입니다. 높은 소품을 바닥과 상단 부분으로 나누어 실제로 덮는 행에 따라 각각 정렬하거나, 모든 스프라이트에 타일별 점유 마스크를 주어 렌더러가 어떤 행과 겹치는지 알게 하는 것입니다.

반복되지 않는 타일셋

아이소메트릭 세트에는 두 가지 이음새가 있고 각각 다른 해법이 필요합니다. 값 이음새는 옆면이 아래 타일의 윗면과 만나는 곳입니다. 벽 바닥이 지면 윗면보다 밝으면 맵의 모든 벽을 따라 밝은 선이 생깁니다. 무늬 이음새는 동일한 지면 타일이 연속으로 반복되는 곳입니다. 2:1 간격이 충분히 규칙적이라 눈은 세 타일쯤 지나면 리듬을 붙잡습니다.

가장자리 변형이 무늬를 숨깁니다. 최소로 쓸모 있는 세트는 아홉 개입니다. 중심 타일 하나, 한쪽 가장자리에 전환이 있는 타일 네 개, 인접한 두 가장자리에 전환이 있는 타일 네 개입니다. 전환은 직선이 아니라 두세 픽셀의 부드럽고 끊긴 띠로 그리세요. 그렇지 않으면 이음새를 없앤 게 아니라 옮긴 것입니다. 배치는 연속 난수 생성기가 아니라 타일 좌표의 해시로 무작위화하세요. 그래야 같은 세계가 매번 똑같이 재생성됩니다. 세계를 글로 된 설명에서 다시 만들 때 이 점이 중요합니다.

인접 그래프는 직교 타일셋과 같습니다. 타일마다 네 개의 변 이웃과 네 개의 대각 이웃이 있습니다. 그래서 47타일 블롭 세트가 직교 작업에서 그대로 옮겨집니다. 아트만 다를 뿐입니다. 대각 전용 경우를 그려 두지 않았다면 활성화하지 마세요. 그렇지 않으면 모서리 결함이나 두 지면 타일이 어긋나는 1픽셀 틈이 생깁니다.

• 47타일 블롭 세트네 이웃과 여덟 이웃의 모든 조합을 포괄하며, 9타일 세트가 빼놓는 대각 전용 경우까지 포함합니다. 직교 블롭 세트와 타일 수가 같고 아트만 달라집니다.
• 9타일 세트중심, 단일 가장자리 타일 네 개, 모서리 타일 네 개입니다. 그리기 저렴하고 대부분의 지면 전환을 포괄하며, 배치 규칙이 대각 전용 경우 생성을 막는다면 거기서만 실패합니다.
• 반전 변형지면 타일을 수평으로 뒤집는 것은 빛 단서가 없는 타일이라면 공짜 변형입니다. 벽이나 빛을 받는 소품은 절대 반전하지 마세요. 빛 방향이 함께 뒤집혀 타일이 이웃과 어울리지 않게 됩니다.

2D 아이소에서 플레이 가능한 3D 아이소 세계로

2:1 다이아몬드는 요 45°, 기울기 30°의 직교 카메라에서 나옵니다. 30°에서 수직 축소는 정확히 사인 30° = 0.5이므로, 정사각 지면 타일은 가로가 세로의 두 배인 다이아몬드로 투영됩니다. 그리는 픽셀과 같은 비율입니다. 진짜 아이소메트릭 기울기 35.264°는 1.732:1이 되어 2:1 타일셋과 맞지 않습니다. 그래서 32×16 타일이 1×1 세계 단위에 깔끔하게 대응하고, 아무것도 다시 그리지 않고 2D 세트 전체를 평면 사각형의 텍스처로 쓰거나 상자로 돌출시킬 수 있습니다.

카메라가 움직이면 두 가지가 깨집니다. 첫째, 자유 회전입니다. 요 37°에서는 타일 모서리가 픽셀 사이에 놓여 맵 전체가 일렁입니다. 기울기를 30°로 고정하고 요를 90° 단위로 스냅하며, 회전을 애니메이션한다면 멈추기 전에 스냅해 되돌리세요. 둘째, 조명입니다. 아트에는 왼쪽 위 빛이 구워져 있습니다. 키 라이트가 세계 공간에 고정된 채 카메라가 90° 회전하면 아트의 음영이 장면과 어긋납니다. 키 라이트를 카메라에 부모로 두거나, 음영을 텍스처에 굽고 빛을 화면 기준으로 유지하세요.

WebGL에서 픽셀 느낌을 그대로 유지하려면 낮은 내부 해상도로 렌더링한 뒤 최근접 이웃 필터링으로 확대하고, 카메라 위치를 화면 픽셀 단위로 스냅하세요. 그렇지 않으면 텍셀 중심이 프래그먼트 사이에 놓여 캐릭터가 걸을 때 아트가 일렁이는데, 이는 아트가 멀쩡해도 텍스처 버그처럼 보입니다.

Neta Studio의 3D 게임 빌더는 글로 된 설명을 받아 브라우저에서 고정 기울기의 직교 카메라를 사용하는 실제 Three.js 세계를 만듭니다. 걸어 다닐 수 있고 로컬 툴체인도 필요 없습니다. Mini World는 이를 소규모로 만든 버전이며, 큰 맵에 투자하기 전에 타일셋과 캐릭터 세트가 제대로 읽히는지 시험하는 가장 빠른 방법입니다. The Cyclops' Island는 투영이 작동하는 모습을 걸어 보며 볼 수 있는 완성된 예시 세계입니다. 캐릭터라면 Agent Sprite Forge가 선택한 칸 크기로 스프라이트 시트를 생성해 방향 간 피벗을 일관되게 유지합니다.

아이소메트릭 픽셀 아트 소프트웨어

그리드만 있으면 래스터 편집기로도 이 페이지의 모든 것을 할 수 있습니다. 전용 도구가 더해 주는 것은 타일 인식입니다. 즉 그리고 있는 타일을 이웃과 함께 보여 주는 타일 맵 모드가 있어, 이음새를 수백 번 찍은 뒤가 아니라 칠하는 동안 볼 수 있습니다.

기능 목록이 아니라 만들어야 하는 결과물로 도구를 고르세요. 타일에는 그리드, 타일 미리보기, 안정적인 팔레트가 필요합니다. 캐릭터에는 어니언 스킨, 균일한 칸, 피벗을 담은 시트 내보내기가 필요합니다. 맵에는 타일 좌표를 저장하는 도구가 필요합니다. PNG는 맵이 아니니까요.

• Aseprite타일 맵 모드, 타일 그리드, 어니언 스킨, 그리고 프레임 태그와 피벗 정보를 담은 내보내기를 지원하는 래스터 편집기입니다. 타일 미리보기 덕분에 타일셋에 쓰입니다. 칠하는 동안 이음새를 볼 수 있습니다.
• LibreSprite같은 코드베이스에서 나온 오픈 소스 편집기입니다. 타일 작업 흐름은 대체로 같지만 이후 기능은 더 적다고 보면 됩니다.
• Krita와 Photoshop범용 래스터 편집기입니다. 격자 안내선과 대칭 기능으로 다이아몬드를 얻을 수 있지만 둘 다 타일 맵 모드가 없어 손으로 찍어야 합니다. 오프셋 필터, 즉 캔버스를 타일 크기의 절반만큼 이동해 가운데를 살피는 방법은 여전히 값 이음새를 찾는 가장 빠른 길입니다.
• Tiled아트 도구가 아니라 맵 편집기입니다. 타일 좌표를 저장하고, 2:1 타일 크기의 아이소메트릭 방향을 지원하며, 레이어 데이터를 내보냅니다. 한 도구에서 그리고 다른 도구에서 배치하세요.
• Neta Studio의 3D 게임 빌더브라우저 기반입니다. 글로 된 설명이 Three.js의 플레이 가능한 아이소메트릭 세계가 되므로 로컬 툴체인과 불러오기 단계를 통째로 건너뛰고, 아트가 올바른 카메라 기울기에서 제대로 읽히는지 시험할 수 있습니다.
• Agent Sprite Forge캐릭터용 스프라이트 시트를 생성하며, 보통 아이소메트릭 세트에서 가장 오래 걸리는 부분입니다. 생성하기 전에 칸 크기와 방향 수를 정하세요. 다른 칸 크기로 만든 시트는 타일에 맞지 않습니다.

그것이 속한 세계로 걸어 들어가기

스프라이트는 설 곳 없는 캐릭터입니다. 마지막 단계는 다른 누구도 제공하지 않는 것입니다. 방금 만든 시트를 누군가 걸어 다닐 수 있는 세계, 작은 섬, 행성, 비 내리는 거리 모퉁이에 넣는 것이죠. 이 사이트의 모든 세계는 하나의 글로 된 설명에서 만들어져 플레이할 수 있는 페이지로 공개되었습니다.

FAQ