AI 아이소메트릭 게임 메이커 — 브라우저에서 걸어 다닐 수 있는 2.5D 세계 만들기

AI 아이소메트릭 게임 메이커는 글로 쓴 장면 묘사를 받아 플레이 가능한 2.5D 세계를 돌려줍니다: 다이아몬드 타일 그리드, 45도 요에 고정된 카메라, 뒤에서 앞으로 정렬된 소품, 그리고 클릭 한 번으로 어디든 보낼 수 있는 캐릭터입니다. Neta Studio는 이 모든 것을 브라우저에서 해냅니다. 문장을 입력하면 컴포저가 그리드 위에 지형과 소품을 배치하고, 재생을 누르면 됩니다. 엔진 설치도, 내보내기 단계도, 빌드 파이프라인도 없습니다.

보통 주말을 통째로 잡아먹는 부분들은 이미 연결되어 있습니다: 2:1 투영, 깊이 정렬, 그리고 클릭 이동 뒤에 있는 화면-타일 역변환입니다. 실제로 당신이 제어하는 것은 배치, 타일셋, 캐릭터, 이동 규칙, 그리고 카메라가 움직일 수 있는 범위입니다.

문장 하나 → 아이소메트릭 세계

컴포저는 첫 화면입니다. 텍스트 입력란 하나, 타일 단위의 맵 크기, 그리고 타일 크기입니다. 레벨 디자이너에게 설명하듯 장면을 묘사하고 생성하면, 다이아몬드 그리드 세계가 이미 조립된 상태로 에디터에 들어서게 됩니다. 기본값은 64×64 타일, 타일당 64×32 픽셀이며, 이는 확대 없이 하나의 직교 카메라 안에 화면 한 가득의 세계를 담습니다.

돌아오는 것은 네 개의 레이어입니다. 지면은 타일마다 지형 식별자 하나를 저장하고 하나의 메시로 병합되며, 타일마다 메시를 만들지 않습니다. 소품은 등록된 점유 영역 위에 놓입니다: 1×1 통, 3×3 집, 물가에 닿아야 하는 2×4 부두 같은 식입니다. 엔티티는 소품과 분리해 두는데, 움직이고 경로 탐색 데이터가 필요하기 때문입니다. 조명과 안개는 맨 위에 놓이며 정렬 순서에 영향을 주지 않습니다.

카메라는 45도 요와 2:1 다이아몬드에 정확히 맞는 피치로 설정되며, 그 값은 atan(0.5), 약 26.57도입니다. 대부분의 튜토리얼이 말하는 30도가 아닙니다. 투영은 직교이므로 원근 나눗셈이 없고, 맵 먼 가장자리의 타일이 가까운 가장자리의 타일과 같은 픽셀 크기입니다. 깊이 정렬은 재생을 누르기도 전에 이미 작동합니다.

지형 분포, 바이옴별 소품 밀도, 그리고 하나의 아틀라스 안에 머무는 팔레트를 고릅니다. 더 중요하게는 점유 영역을 등록하는데, 이것이 나중에 가림 처리를 올바르게 유지하는 핵심입니다. 항구 마을을 요청하면 부두, 상자, 물가를 만들어 주지만, 부두가 물에 닿아야 한다는 것은 말해 주지 않으면 알지 못합니다.

브러시로 지형을 다시 칠하고, 라이브러리에서 소품을 끌어다 놓고, 스폰 지점을 설정합니다. 강을 가로질러야 하는 다리처럼 규칙이 붙은 것은 직접 배치합니다. 컴포저는 시작 배치를 주는 것이지, 완성된 레벨을 주는 것이 아닙니다.

다이아몬드 그리드와 깊이 정렬, 이미 처리됨

아이소메트릭 타일은 45도 회전하고 높이가 절반으로 눌린 정사각형입니다. tileW = 64, tileH = 32이면 세계-화면 변환은 sx = (x - y) * 32, sy = (x + y) * 16입니다. 이것이 투영의 전부입니다. 이것은 진정한 아이소메트릭 투영이 아니라 약 26.57도의 이등각이며, 바로 그래서 2:1 다이아몬드는 정수 픽셀에 안착하고 진정한 30도 아이소메트릭 그리드는 그렇지 않습니다. 2:1 비율을 고르는 이유는 두 축을 똑같이 단축시켜 모든 스프라이트를 단일 카메라 각도용으로 그릴 수 있게 하기 때문입니다.

이 투영에서 깊이 순서는 화가 알고리즘입니다: tileX + tileY가 더 작은 객체를 먼저 그립니다. 두 객체가 대각선을 공유하기 전까지는 이 규칙이 유지됩니다. (5, 3)의 울타리와 (4, 4)의 캐릭터는 둘 다 키 8을 만듭니다. 정렬이 반환하는 순서대로 위에 그려지는데, 정렬이 안정적이지 않으면 프레임마다 순서가 뒤집혀 그 쌍이 이음새에서 깜빡입니다. 두 번째로 깨지는 곳은 높이입니다. 가운데에 앵커된 스프라이트는 중간 픽셀을 기준으로 정렬되므로, 96픽셀 등불이 그 밑동 앞에 서 있는 캐릭터 위에 그려집니다. 앵커는 스프라이트의 하단 중앙, 즉 객체가 차지한 타일 위에 있어야 합니다.

세 번째로 깨지는 곳은 크기입니다. 키 20으로 하나의 객체로 정렬된 3×3 건물은 (9, 12)의 키 21인 캐릭터 위에 그려집니다. 그 캐릭터가 건물의 왼쪽 기둥 앞에 서 있더라도 말입니다. 엔진은 등록된 점유 영역을 읽고 1×1보다 큰 것은 무엇이든 열 단위 조각으로 잘라, 캐릭터가 한 기둥 앞을 지나 다음 기둥 뒤로 사라지게 합니다. 긴 벽이 하나의 스프라이트가 될 수 없는 것도 같은 이유입니다.

실제 타일 그리드 위의 클릭 이동

이것은 투영의 역변환에서 시작합니다. 포인터 위치를 잡아 카메라 원점과 레터박스 오프셋을 빼고, tileX = (sx / 32 + sy / 16) / 2 와 tileY = (sy / 16 - sx / 32) / 2 를 계산한 뒤 둘 다 내림합니다. 두 번째 항의 부호를 틀리면 캐릭터가 다이아몬드 중심을 가로질러 거울 타일로 걸어갑니다. 오후 한나절을 잡아먹게 될 그 버그입니다.

카메라가 회전하거나 자유롭게 움직일 수 있다면 그 역변환을 캐시하지 마세요. 카메라에서 포인터를 통과하는 광선을 쏘아 지면 평면과 교차시키고, 세계 좌표 충돌 지점을 같은 공식으로 타일로 변환합니다. 광선 판정 방식은 몇 줄이면 되고 어떤 카메라 변화에도 견딥니다.

그런 다음 검증합니다. 클릭한 타일에는 소품 점유 영역이 있을 수도, 물일 수도, 맵 밖일 수도, 도달할 수 없을 수도 있습니다. 범위를 벗어난 좌표를 제한하고, 점유 그리드를 확인하고, 대각선 비용 1.414, 막힌 두 타일 사이의 모서리 자르기 없이 8방향 이웃에 대해 A*를 실행합니다. 초당 픽셀이 아니라 초당 타일로 이동해야 타일 크기를 바꿔도 속도가 일정하게 유지됩니다. 약 0.05타일의 도착 반경을 둔 매끄러운 스플라인을 따라 타일 중심을 지나 걷지 않으면, 캐릭터가 경유 지점마다 덜컹거립니다.

만들 수 있는 아이소메트릭 장르

네 가지 장르가 대부분의 아이소메트릭 프로젝트를 포괄하며, 이들은 투영이 아니라 점유 규칙과 시간에서 차이가 납니다. 도시 건설 게임은 여러 타일을 차지하는 점유 영역, 연결되어야 하는 도로망, 배치 전에 점유 영역을 미리 보여 주는 건설 모드 위에서 돌아갑니다. 전술 게임은 턴 기반이라 여러 유닛의 경로 탐색이 한꺼번에 돌아가고 사거리 강조가 다이아몬드 그리드 위에 바로 그려집니다. 던전 크롤러는 작은 맵과 좁은 복도를 사용하며, 카메라가 절대 움직이지 않기 때문에 열 단위 벽 분할이 가장 중요합니다. 액션 RPG는 실시간이라 조향, 공격 상태, 애니메이션 블렌딩이 경로 탐색의 우아함보다 더 중요합니다.

네 장르 모두에서 똑같이 유지되는 것: 2:1 다이아몬드, 정렬 키, 발 위치 앵커, 그리고 클릭 시의 역변환입니다. 프로젝트 도중 장르를 바꾸면 점유 규칙과 갱신 루프가 바뀔 뿐, 렌더러는 바뀌지 않습니다.

지금 플레이하세요 — 브라우저에서

여기 모든 세계는 설치도 내보내기도 없이 브라우저에서 실행됩니다. 씬 그래프는 Three.js, 렌더러는 WebGL1 폴백을 갖춘 WebGL2이며, 맵은 병합된 지면 지오메트리와 인스턴싱된 소품으로 로드됩니다. 재생을 누르면 걷기 시작합니다. 세계를 공유하면 다른 누군가가 자기 기기에서 같은 45도 요로 그 안을 걷습니다.

휴대폰에서는 같은 클릭 경로가 포인터 이벤트를 통해 실행되므로, 탭이 곧 클릭입니다. 탭 대상은 타일이라, 1타일 소품을 조금 부정확하게 탭해도 올바른 타일로 귀결됩니다. 가로 32타일 미만의 맵에서는 핀치 확대/축소가 기본적으로 꺼져 있는데, 휴대폰 너비에서 2:1 다이아몬드가 이미 읽히기 때문입니다. 프레임 속도가 떨어지면 맵 크기를 줄이기 전에 소품 수를 줄이세요. 인스턴싱이 지형을 지우는 것보다 더 도움이 됩니다.

Mini World는 작은 맵의 경우입니다: 아담한 다이아몬드 섬, 몇 안 되는 소품, 캐릭터 하나, 전체를 가로지르는 클릭 이동입니다. 지면 병합과 타일별 정렬이 어떻게 동작하는지 가장 빠르게 볼 수 있는 방법인데, 맵 전체를 한눈에 볼 수 있어 잘못된 정렬 키가 숨을 곳이 없기 때문입니다.

The Cyclops' Island는 가림 처리가 실제로 중요한 경우입니다: 키 큰 소품, 벽 기둥, 그리고 그 뒤로 걸어가는 캐릭터입니다. 캐릭터가 건물 모서리를 지날 때를 지켜보세요. 앞쪽 조각은 캐릭터 위에, 뒤쪽 조각은 캐릭터 아래에 그려지며, 어느 순간에도 캐릭터가 벽을 뚫고 나오지 않습니다.

Agent Sprite Forge는 아이소메트릭 각도에 맞춰 그린 캐릭터 시트를 만들어 내며, 피벗이 이미 하단 중앙에 있고 프레임 높이가 타일 높이에 맞춰져 있습니다. 카메라를 기본 요에 두면 시트 하나로 충분합니다. 카메라 회전을 켜면 요 단계마다 시트가 필요한데, 45도용으로 그린 스프라이트는 90도에서 잘못 보이기 때문입니다.

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

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

FAQ