[📜일지] [개발일지] [엑스 인베이더] #6 - 2D 탑다운 게임 렌더링 방식

[올라프게임즈(allaughgames)]

안녕하세요 올라프 게임즈입니다.

이번 개발일지에서는 게임 이름 변경에 대한 이야기, 2D 탑다운 게임에서의 렌더링에 대한 고민과 나름의 해결방법에 대해서 말해보겠습니다.

게임의 이름을 ‘엑스 이퀄 - 핵 더 자이언트’에서 ‘엑스 인베이더’로 변경하였습니다.

이름을 바꾸게 된 계기는 오프라인 테스트를 진행했을 때 플레이해주셨던 분들이 이름을 제대로 읽지 못하는 것이었습니다.

X = OO 이라는 형태는 유지하고 싶어서 여러 방향으로 고민한 결과 타이틀 화면 등에서 표기할 때는 X = Invader라 표기하고 제목은 엑스 인베이더(X Invader)라 표기하기로 결정했습니다.

엑스 인베이더를 개발하면서 비주얼적으로 가장 고민을 한 부분이 있었는데 바로 물체 간의 레이어(특히 플레이어 캐릭터와 배경 오브젝트)를 어떻게 처리할 것인가였습니다.

2D 탑다운 게임은 ‘Hotline Miami’와 같이 완전히 위에서 바라보는 구도가 아닌 이상 플레이어가 물체의 앞에 있으면 보이고 뒤로 가면 가려지는 등의 공간감을 표현해야 했습니다.

<완전히 위에서 바라보는 구도 예시> <공간감이 느껴지는 구도 예시>

저희는 그 해결책을 물체의 스프라이트를 2등분 하고 각각 레이어를 다르게 설정하여 물체의 아래 부분은 플레이어에 가려지고 윗 부분은 플레이어를 덮게끔 설정하였었습니다.

<얼핏 잘 되는 것처럼 보입니다.>

하지만 이 방법에는 다음과 같은 문제점들이 있었습니다.

1. 모든 물체를 다 2등분하여 배치해야 한다. = 즉 일은 한 번 더 해야 한다.

2. 캐릭터의 레이어에 종속된 파티클이 아래 부분에서는 보이고 윗 부분에서는 가려지는 현상이 생긴다.

3. 결국에는 삐져나오는 부분이 생긴다.

문제점들을 해결하기 위해 고민해봤지만 당시 마땅한 해결책이 떠오르지 않았던 저희는 일단 눈 앞의 문제점에서 눈을 돌리고 우선적으로 중요한 게임로직 구현에 집중하였습니다.

사실 조금만 더 검색해보면 해결법에 대해서 알았을 것 같은데 당장은 중요하지 않다고 생각해서인지 아니면 개발자로써의 자존심인지 몰라도 좀 더 깊게 검색하지 않았던 것 같습니다.

시간이 지나고 게임의 완성도를 올려야 하는 상황이 된 지금 위의 문제점들이 중요하게 다가오자 해결법에 대해서 심층적으로 검색을 하였고, 그 결과 2D 탑다운 게임에서는 물체의 위치에 따른 렌더링 순서를 커스텀하게 조정하여 사용한다는 것을 알게 되었습니다.

많은 2D 탑다운 게임에서 물체의 y 위치값이 위에 있을 수록 먼저 렌더링하게끔 세팅하여 상대적으로 위에 있는 물체(y값이 더 큰 물체)는 아래에 있는 물체(y값이 아래에 있는 물체)에 가려지게 하고 있었습니다.

<y위치값에 따라서 렌더링 순서를 조절하여 위치에 따라 자연스럽게 물체가 가려지게 되었습니다.>

이번 일을 통해 아직 유니티 기능에 대해서 모르고 있는 게 많다는 것을 다시 한 번 느끼게 되었습니다.

여기 계신 개발자분들은 다 알고 계셨을 사실일지도 모르나 혹시나 저와 같은 고민을 가지고 계셨던 분들에게 도움이 됐으면 좋겠네요.

봐주셔서 감사합니다!

참고했던 자료 :

유튜브 자료

티스토리 글

SNS, 커뮤니티 :

트위터

인스타그램

유튜브

페이스북

패트리온

[익명(115.22)]

[올라프게임즈(allaughgames)]

[익명(1.226)]

ysort 물어보면 금방 알려줬을텐데

[올라프게임즈(allaughgames)]

그때는 뭐에 씌었는지 어디에 물어본다는 생각은 안 나고 제가 아는 지식 내에서 해결하려고 했던 거 같아요 ㅋㅋㅋㅋ

[스크롤러(jo7294)]

추가로 캐릭터나 사물 하나에 스프라이트가 여러개일때 Sorting Group 쓰면 같은 피벗 위치에 같은 레이어로 정렬됨 저도 저거랑 같이 겁나 삽질했던 기억이 ㅋㅋ

[올라프게임즈(allaughgames)]

맞아요 ㅋㅋㅋ. 제가 글에 썼던 파티클 문제가 Sorting Group으로 인해서 일어났더라고요.

[dd(14.36)]

그럼 오브젝트에 속한 스크립트의 update에 tranform.position = new Vector3(xpos, ypos, ypos / 1000.0f)ㅇ ㅣ런식으로 해줘야함?

[dd(14.36)]

스크립트를 붙일 수 없는 예를들어 타일맵 같은 경우에는 어떻게함?

[올라프게임즈(allaughgames)]

글에 올려 놓은 참고자료에 자세히 나와있는데 스크립트로 조절하는 게 아니라 Edit->Project Setting->Graphics->Transparency Sort Mode를 Custom Axis로 바꾸고 Transparency Sort Axis를 조절하시면 됩니다.