평평한 캔버스 위의 4분의 3 시점

15.0 버전까지 TUNL의 배는 위에서 내려다본 모습으로 그려졌지만, 주변 동굴은 옆에서 자른 단면이었습니다. 이를 고치려면 작은 3D 모델, 그림이 넘어서면 안 되는 히트박스, 그리고 무엇을 움직여야 하는지에 대한 많은 절제가 필요했습니다.

개발 일지 · 2026년 9월 20일 · 모든 글

불일치

TUNL의 동굴은 옆 단면입니다. 중력은 아래로 당기고, 종유석은 천장에 매달려 있으며, 매 런의 시작 진입부는 황혼의 스카이라인입니다. 그 안에서 유일하게 바로 위에서 내려다본 모습으로 그려진 것이 배였습니다. 마치 산의 옆면 그림 속을 나는 비행기의 평면도처럼요. 플레이어들이 보통 그렇게 말로 표현하지는 않지만, 이는 배가 약간 붙여넣어진 것처럼 느껴지게 만듭니다.

명백한 해결책인 단순한 측면도를 그리는 것은 배를 알아보게 해주는 위에서 본 실루엣을 버리는 것이 될 것이고, 배의 형태는 위에서 볼 때 가장 잘 보입니다. 절충안은 4분의 3 시점입니다. 동일한 선체의 3D 모델을 위에서 본 시점에서 긴 축을 중심으로 회전시켜 평평하게 투영합니다.

아주 작은 렌더러

TUNL에는 3D 라이브러리도 없고 빌드 단계도 없어서, 렌더러는 작습니다. 선체는 이미 위에서 조명을 받는 평평한 면들의 집합으로 존재했고, 윗부분은 흰색 쪽으로, 아랫부분은 거의 검정에 가깝게 섞여 있었습니다. 3D 버전은 각 면에 세 번째 좌표를 부여하고, 모델을 긴 축 중심으로 회전시키며, 직교 투영을 하고, 각 면을 동일한 평평하고 위에서 조명받는 스타일로 채웁니다. 평평한 선체의 약 40번 채우기와 비교해, 이는 프레임당 약 90개의 보이는 면을 채우게 됩니다. 흐림 효과는 없는데, 이는 중요합니다. 흐림 효과는 휴대폰 웹뷰에서 비용이 큰 호출이고, 발광은 단일 방사형 채우기이기 때문입니다. 만약 약한 기기가 언젠가 어려움을 겪는다면, 명백한 절감책은 롤 각도별로 선체를 오프스크린 캔버스에 캐싱하는 것입니다.

히트박스가 대장이다

가장 중요한 제약은 충돌이 변하지 않는다는 것입니다. 배의 히트박스는 원이고, 게임 전체의 난이도가 그것에 맞춰 조정되어 있습니다. 그래서 3D 그림은 그 원보다 커 보여서는 안 되고, 날개가 눈에 띄게 무언가에 닿기도 전에 배가 "죽을" 만큼 훨씬 작아 보여서도 안 됩니다.

이로 인해 롤 각도는 취향의 문제가 아니라 측정의 문제가 되었습니다. 위에서 본 시점에서 45도 기울이면 가까운 쪽 날개만 읽히고, 그림은 원 높이의 절반을 조금 넘는 정도부터 약 5분의 4 정도만 덮습니다. 90도에서는 그냥 다시 예전의 위에서 본 시점입니다. 60도에서는 양쪽 날개가 모두 읽히고 날개폭은 다시 원의 약 85%가 됩니다. 저는 다섯 개의 후보 시점과 커버리지 곡선을 가진 작은 실험실을 만들어서 60을 선택했습니다. 이제 테스트는 어떤 롤 각도와 어떤 날개 후퇴각에서도, 그려진 선체가 원을 절대 넘어서지 않고, 평평한 기수도 넘어서지 않으며, 비행 중에도 원의 건강한 비율을 여전히 채우는지 확인합니다.

무엇이 움직이고, 무엇이 의도적으로 움직이지 않는가

배가 3D 객체가 되자, 모든 것을 애니메이션화하고 싶은 유혹이 생겼습니다. 그 대부분은 잘려나갔습니다. 살아남은 것은 정보를 전달해야 합니다.

살아남지 못한 것은 자유롭게 흔들리는 요동입니다. 배가 움직임 "이후에 흔들리는" 이전 버전은 생동감 있어 보였지만, 그것은 소음이었습니다. 오직 거리를 읽는 것이 유일한 기술인 게임에서, 그 자체를 위해 진동하는 선체는 당신이 필요로 하는 정보와 경쟁합니다. 이는 추가된 바로 그날 제거된, 멀리 있는 바위 실루엣의 시차 배경과 같은 논리입니다. 벽이 어디 있는지 읽는 것이 전부인 게임에서, 다른 속도로 움직이는 두 번째 형태 집합은 낮은 대비에서도 방해가 됩니다.

3D 선체 위의 도색

배의 여섯 가지 도색 마감은 평면도 좌표에서 평평한 선체를 위해 설계되었습니다. 그것들을 다시 그리는 대신, 저는 작은 기하학적 트릭을 사용했습니다. 주어진 롤 각도에서, 선체 윗면은 롤 각도의 사인 값만큼 수직으로 눌린 평면도에 정확히 투영됩니다. 그래서 기존의 도색 로직은 그 눌림 아래에서 실행되고 3D 실루엣에 맞춰 잘립니다. 이런 식으로 표현할 수 없는 두 가지, 즉 면의 이음매와 테두리는 화면 공간에서 별도로 그려집니다.

3D 버전을 위해 한 가지 보정이 필요했습니다. 평평한 선체는 일곱 개의 면을 가지고 있고 3D 버전은 약 아흔 개를 가지고 있는데, 각각에 밝은 이음매를 그리는 것은 STEALTH 마감을 램프처럼 만들어버렸습니다. 그래서 3D에서는 이음매가 절반 강도로 나타나고 작은 면은 건너뛰며, 배럴 롤 도중 선체가 거의 옆면만 보일 때는 그 몇 프레임 동안 패턴이 생략됩니다.

평평하게 남은 것

오직 비행 중인 배만 새 시점을 받았습니다. 격납고, 상점, 공유 카드는 여전히 배를 위에서 본 모습으로 보여주는데, 그것들은 비행의 그림이 아니라 배의 초상이며, 위에서 본 시점이야말로 전체 평면도를 보여주는 시점이기 때문입니다. 앱 아이콘과 스토어 그래픽 역시 위에서 본 초상이며, 그것들이 언젠가 비행 중 시점을 따라야 하는지는 여전히 열린 질문입니다.

배가 어떻게 만들어지고 도색되는지에 대한 전체 그림은 우주선 페이지에 있으며, 오늘의 동굴에서 그것이 나는 모습을 볼 수 있습니다.

오늘의 동굴 플레이