# 종이 접기의 마스터 - 2.5d 생존기

신작게임 그레이 테일은 3D 지형의 배경에 2D 픽셀로 된 캐릭터와 오브젝트가 배치되는 2.5D의 게임입니다. 하지만 직교 좌표계 카메라를 사용해서, 언뜻 보기엔 그냥 픽셀 2D 게임인 것처럼 보이게 만들고 있습니다.

### 2.5D의 장점

이런 방식을 사용하면, 높이 축을 사용할 수 있기 때문에 좀 높낮이가 적극적으로 들어간 맵을 디자인 할 수 있고, 자연스러운 그림자와 같이 3D에서만 가능한 여러가지 시각 효과들을 사용 할 수 있다는 장점이 있습니다. 

캐릭터와 오브젝트는 여전히 2D 방식을 사용하고 있기 때문에, 2D 게임을 만들 때와 동일하게 Aseprite만으로 작업 하고 있습니다. 저희 같은 2인의 작은 스튜디오에서 따로 모델링, 리깅, 애니메이션 작업이 필요 없이 일을 쳐낼 수 있다는 것이 장점입니다.

### 2.5D의 문제

하지만 이런 방식도 몇가지 치명적인 문제들이 있습니다. 겪었던 문제를 나열해 보자면..

너무 높이 판단에 정직합니다. 이펙트가 땅속을 파고 듭니다. 이런 문제는 이펙트를 캐릭터 스프라이트에서 분리시키고, 바닥을 향하는 Quad를 만들어 해결할 수 있습니다. 

![제발 정신차려 이펙트야 ㅠ](https://upload.cafenono.com/image/slashpagePost/20240831/141646_ezOmcaZr0YTynxWFT5?q=80&s=1280x180&t=outside&f=webp)

![오히려 좋아! 그림자까지 자연스럽잖아!](https://upload.cafenono.com/image/slashpagePost/20240831/141850_PULQ6b1SlhpkHkv0II?q=80&s=1280x180&t=outside&f=webp)

하지만 분리하기 애매하거나 작업이 몹시 번거로은 오브젝트들도 있습니다. 그래서 이번엔 스프라이트를 접어보기로 했습니다.  Aseprite 에서는 그냥 전개도만을 그려주면 되고, 코드로 메시를 동적으로 생성해서 큐브를 생성합니다. 이런 식으로 제작하면 높이가 있는 오브젝트 위로 올라가거나 할때 오더링 문제로 부터 자유로워 집니다. 

![Image](https://upload.cafenono.com/image/slashpagePost/20240831/142625_jhgRwJ7b3uXV9UVyGx?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20240831/142746_lJPdudFrKlODdgkwJa?q=80&s=1280x180&t=outside&f=webp)

박스 Sprite 스크립트는 다음과 같은 인자를 통해 이미지만 넣으면 알아서 메시와 텍스쳐의 uv를 구성해주게 했습니다. 디자이너가 따로 모델링과 텍스쳐 매핑 작업을 할 필요가 없으니 작업이 훨씬 쉬워집니다. 하지만 모든 오브젝트가 Box 형태일 수는 없는 법.. 그렇게 스프라이트 종이접기가 하나씩 늘어나게 되고..

![스크립트만 붙이면 간단하게 큐브 생성!](https://upload.cafenono.com/image/slashpagePost/20240831/143231_77tNzpMo8ZctKV7hi9?q=80&s=1280x180&t=outside&f=webp)

![무한 확장중인 종이접기 시스템](https://upload.cafenono.com/image/slashpagePost/20240831/143157_K1T6Q07lbAVjyNeZnE?q=80&s=1280x180&t=outside&f=webp)

지금 까지 대부분의 물체들은 종이접기로 대충 해결해오고 있었습니다. 하지만 종이접기로는 도저히 불가능해 보이는 것들이 생기기 시작하는데.. 

### 점프대 

게임의 던전이 아닌 넓은 필드 지대에서 "바이크"를 탈 수 있게 하면서, 바이크를 위한 점프대를 넣기로 했습니다. 그래서 만든 점프대의 스트럭쳐가 왼쪽인데.. 이건 도저히 접어서 어떻게 해결이.. 

![아.. 이걸 접어서 해결할 수 있을까?](https://upload.cafenono.com/image/slashpagePost/20240831/150109_KyQqexhqBdbjpRQqMJ?q=80&s=1280x180&t=outside&f=webp)

![시원하게 점프!](https://upload.cafenono.com/image/slashpagePost/20240831/144551_tIy4RVY8sdyfl2NKew)

그래서 블랜더와 같은 툴을 써볼까 하고 시도해봤지만, 3D로 모델링하게되면 텍스쳐링에서 문제가 생깁니다. 텍스쳐는 직교지만, 각을 틀어 배치하게되면 투시에 의해 픽셀이 어긋나게 됩니다. 예를 들면 아래와 같이.. 그냥 무시하고 이렇게 쓰는 게임도 꽤 있지만, 가능하면 최대한 2D로 보이게 하고 싶었습니다.

![Image](https://upload.cafenono.com/image/slashpagePost/20240831/150615_JJYvVscVhdhqhVefqY?q=80&s=1280x180&t=outside&f=webp)

그래서 생각해보니.. 점프대 케이스를 보면, 사격형 또는 삼각형의 조합이고, 각점의 위치는 계산할수 있고 각점에서 텍스쳐의 uv 위치도 계산할 수 있습니다. 그래서 그냥 버텍스의 위치를 계산해서 넣고 uv의 위치도 계산하면 되지 않을까 생각이 들었습니다. 

![위에서 보면 늘려져서 찌그려져 보이지만](https://upload.cafenono.com/image/slashpagePost/20240831/151436_GPz1sNhgWgIo9Ln2F2?q=80&s=1280x180&t=outside&f=webp)

![게임에서 보면 픽셀이 제대로 보이게 됩니다.](https://upload.cafenono.com/image/slashpagePost/20240831/151410_qsko3LQYe3fsaBKybt?q=80&s=1280x180&t=outside&f=webp)

world 좌표계와 screen 좌표계를 이미 계산할수 있게 그렸기 때문에, 역으로 screen 좌표를 world 에다 넣으면 픽셀이 비스듬해지지 않고 제대로 나온다는 것을 알게되었습니다. 

드디어 종이접기가 드디어 한단계 진화 했습니다!

### 8각 스프라이트

네모 반듯한 오브젝트만 있을 수는 없는 법, 라운딩이 되어 있는 형태의 오브젝트들 역시 접어서 해결하기 몹시 힘듭니다. 특히나 물에 빠지거나 하면 어색함이 두배가 됩니다. 그래서 이 경우엔 코너를 여러번 접어서 문제를 해결했습니다.

![판넬이잖아!](https://upload.cafenono.com/image/slashpagePost/20240831/140715_yxcJBo3Lx0EcSXlnfE?q=80&s=1280x180&t=outside&f=webp)

![여러번 접으면 되지!](https://upload.cafenono.com/image/slashpagePost/20240831/152254_2jxfgrrb04AHpuatzB?q=80&s=1280x180&t=outside&f=webp)

하지만 큰 오브젝트의 경우엔 접기를 너무 여러번 해야하고, 성능에 문제가 생길 수 있습니다. 그래서 점프대를 만들며 배우게된 종이접기 기술을 활용해서 8각 스프라이트를 만들었습니다.

![8각 기둥 오브젝트 ](https://upload.cafenono.com/image/slashpagePost/20240831/153946_B8KQE6H5LciOx5NomC?q=80&s=1280x180&t=outside&f=webp)

![그냥 이렇게 편집하면 됩니다.](https://upload.cafenono.com/image/slashpagePost/20240831/154018_nYs1NxBqdWDJmyLrJb?q=80&s=1280x180&t=outside&f=webp)

### 8각 기둥을 스프라이트를 이용해 나무를 만들어 보자

만들어진 8각 기둥을 이용해 볼륨감 있는 나무를 넣어보고 싶었습니다. 이 나무는 바닥의 뿌리 부분도 라운딩이 필요하고, 잎사귀 부분도 필요합니다. 그래서 이미지를 2파트로 나누고, 반사를 위한 나무의 아랫면까지 해서 3개의 이미지를 분리한 후, 8각기둥으로 접는 방식으로 오브젝트를 만들었습니다.

![Image](https://upload.cafenono.com/image/slashpagePost/20240831/154457_rL4nNLyAF0pX6VzhMC?q=80&s=1280x180&t=outside&f=webp)

![기둥과 잎 부분이 각각 8각 오브젝트](https://upload.cafenono.com/image/slashpagePost/20240831/154732_nd4mowJWAPLhOmhDbQ?q=80&s=1280x180&t=outside&f=webp)

![하단도 막아서 그렸습니다. 이친구는 그냥 심플한 Quad 오브젝트 입니다.](https://upload.cafenono.com/image/slashpagePost/20240831/154812_AaD1QS6XkDt7AExQ1q?q=80&s=1280x180&t=outside&f=webp)

바닥까지 그려넣은 이유는 물에 반사 시키기 위해서 입니다. 게임내에 배치해 보면 다음과 같이 표시 됩니다. 

![Image](https://upload.cafenono.com/image/slashpagePost/20240831/154926_utKBCo9gIb4bHYmsQb?q=80&s=1280x180&t=outside&f=webp)

일반적인 빌보드 형태의 오른쪽도 나쁘진 않지만, 8각 스프라이트로 처리한 나무의 바닥이 보이는 자연스러운 형태로 오브젝트가 반사됩니다. 또한 뿌리의 라운딩의 끝부분에서 depth 문제가 생기지 않습니다. 

![뿌리 부분이 접혀서 바닥으로 향해 있기 때문에, depth 문제에서 자유롭습니다.](https://upload.cafenono.com/image/slashpagePost/20240831/155103_hI0tcwtpqUkHj8fqAS?q=80&s=1280x180&t=outside&f=webp)

이렇게 저는 종이접기의 달인이 되었습니다! 영상으로 보실까요? 에디터 → 플레이어 순서 입니다.

2.5d 를 고려하는 분들께 참고가 되었으면 합니다! 개발에 정신이 없어지면서 1년 넘게 개발기는 안쓴 거 같은데, 그럼에도 BIC에서 기억해 주시는 분들이 있어 깜짝 놀랐습니다. 시간이 되는 대로 종종 더 써보도록 하겠습니다.

Graytail도 많이 응원해 주세요. 🤠 감사합니다!

For the site tree, see the [root Markdown](https://slashpage.com/concode.md).