[📜일지] Frostory 문짝 개선 작업

[특수한발가락(seobyeongky2)]

안녕하세요!

오늘은 저희 게임의 맵의 요소 중 하나인 문이나 창문을 설치하는 방법을 개선했던 경험을 공유하고자 합니다.

저희 게임에는 벽을 뚫어서 배치한 오브젝트들이 존재하는데 통칭해서 문짝이라고 표현하겠습니다.

기존에 문짝을 설치하던 방법은 다음과 같습니다.

타일맵에 구멍을 내고 여기에 문짝을 붙이는 방식입니다.

문짝이 그리드에 맞게 표현되어야 빈틈없이 매워지게 됩니다.

이 방식은 단순하지만 몇가지 문제가 있었습니다.

먼저, 타일맵 패턴이 벽과 이어져야하기 때문에 타일의 가운데 위치시키기 위해서는 문짝을 2가지 버전으로 그려야 했습니다.

그리고 타일 텍스쳐를 수정할 때마다 거기에 대응해서 문짝의 그림도 모두 고쳐줘야하는 번거로움도 있었습니다.

이렇듯 불편한 점들이 있지만 큰 문제는 아니라고 생각했고 한동안 작업해왔습니다.

개선의 계기가 된 것은 매쉬 렌더러로 된 배경이 게임에 등장하면서였습니다.

타일맵은 그리드 단위로 구멍을 낼 수 있었지만 매쉬의 경우 커팅해서 구멍을 만드려면 복잡한 계산이 필요하게 됩니다.

그래서 좀 더 쉬운 방법을 찾아보게 됐습니다.

인터넷을 찾아보니 이런 용도로서 스탠실 버퍼를 사용한다는 글들이 많았습니다.

스탠실 버퍼란 마스킹할 때 주로 쓰는 특수한 버퍼로, 렌더링시 특정 영역을 끄거나 켜는 기능이 존재합니다.

예시 그림에서는 스탠실 버퍼에 1로 된 부분만 렌더링하는 옵션을 적용한 것입니다.

유니티의 ShaderLab도 스탠실 기능을 지원했고 이를 활용해서 다음과 같이 간단한 형태로 문짝을 수정하였습니다.

구멍 텍스쳐가 스탠실 마스킹을 해서 그 부분의 벽이 렌더링되지 않도록 해줍니다.

그리고 프레임은 벽에서 살짝 띄워서 z-fighting을 방지합니다.

편리한 방식이라 생각했고 한동안 잘 써왔지만 이 방법도 문제가 발생했습니다.

이런 현상이 발생하는 이유는 프레임과 벽 사이에 공간이 존재하기 때문입니다.

그렇다고 프레임을 벽에 붙이면 z-fighting이 일어나기 때문에 딜레마였습니다.

그래서 고민 끝에 다음의 방식을 계획했습니다.

프레임 + 구멍 + 마스크로 구성하고 마스크 텍스쳐가 마스킹을 해주는 방식입니다.

이렇게 하면 프레임을 z-fighting 문제 없이 벽에 딱 붙일 수 있게 되어 아까와 같은 문제가 발생하지 않게 됩니다.

하지만 아트 작업시 마스크 텍스쳐를 따로 그리는 게 번거롭다는 점이 남아있었습니다.

그래서 프레임 텍스쳐를 마스크 텍스쳐로 사용하고, 알파1의 투명한 픽셀로 구멍을 채워넣자는 아이디어가 나오게 됐습니다.

좀 이상하긴 했지만 마스크 텍스쳐를 그리지 않아도 된다는 점이 의미가 있는 것 같아서 이 방식을 최종적으로 선택하게 됐습니다.

다만 방법은 괜찮지만 구현할 때 문제가 있었습니다.

이런 특수한 기능이 구현되려면, 전용 쉐이더 코드가 필요했고, 문짝으로 사용되는 쉐이더마다 이런 특수 코드가 들어가면 기능을 쓰는 버전, 안쓰는 버전으로 메테리얼 갯수가 2배가 되는 문제가 있었습니다.

관리적 측면에서 메테리얼 갯수가 늘어나지 않는 것을 원했기 때문에 시스템을 단순한 형태로 유지하는 방법을 고민하였습니다.

 

결론적으로 렌더러 자식에 특수한 메테리얼의 추가 렌더러를 붙이자는 아이디어가 떠올랐습니다.

HolePunch라는 이름의 스크립트를 렌더러에 붙이면 자동으로 스텐실 메테리얼의 렌더러가 복제돼서 자식에 추가됩니다.

오른쪽 움짤이 자식 렌더러만 이동시켰을 때의 모습입니다.

다음은 이를 구현한 쉐이더 코드입니다.

4번 비트(16)를 벽 마스킹 비트로 설정하였습니다.

Hole-Wall 쉐이더로 먼저 스탠실 버퍼의 문짝 부분을 16으로 세팅하고, Background-Default-Wall 쉐이더로 배경을 렌더링 할 때 16이 세팅된 영역은 그리지 않는다는 뜻입니다.

이 방식으로 특수 메테리얼 몇개만 추가하면서 기존 메테리얼 체계는 유지하였습니다.

이렇게 세팅을 하고 한시름 놨는데 얼마지나지 않아 또다른 문제가 발생했습니다.

저희가 반투명한 캐릭터를 처리할 때 유니티 마스크 기능을 썼는데, 0이 아니면 무조건 마스크로 처리되는 방식이었기 때문에 그림이 잘리게 됐습니다.

스탠실 버퍼가 렌더러간에 공유되고, 유니티 마스크 기능에서 특정 비트는 무시하는 옵션이 있으면 좋겠지만 그런 기능이 없기 때문에 다른 방법을 고민해보았습니다.

고민 끝에 세팅한 스탠실 버퍼를 다시 꺼주는 기능의 렌더러를 추가하는 식으로 해결하였습니다. 

HolePunch가 렌더링되고, 모든 배경을 렌더링하고, HolePunch-Revert가 스탠실 버퍼를 깨끗하게 초기화시켜줍니다.

 

새 시스템 적용으로 좀 더 자유롭고 편리하게 문짝을 배치할 수 있게 됐습니다.

읽어주셔서 감사합니다.

[개발 일지 링크 모음]

[잠둥이(fcrow)]

[mansu3(mansu382)]

항상 잘보고 있습니다! URP 쓰시면 Renderer Feature에서 Render Object 기능을 사용하면 별도로 스크립트 단에서 Renderer 추가없이도 편리하게 같은 동작을 할 수 있습니다. Material이나 Depth, Stencil 값 등 전부 컨트롤도 가능해서 굉장히 유용하니 꼭 한번 시도해보세요!

[특수한발가락(seobyeongky2)]

오호 편리한 기능 같네요. 지금은 빌트인 파이프라인 기반이다보니 다음 프로젝트 때 고려해보면 좋을 것 같네요. 정보 감사합니다!

[에뚜(ssss4610)]

[카퍠인(happys96)]

[뚜시(2oclocksoft)]

기술적으론 맞긴한데.. 그냥 그리는게 빠르진 않은가요?

[특수한발가락(seobyeongky2)]

통짜로 그리는 방법도 옵션 중 하나인 것 같습니다. 하이퍼 라이트 드리프터처럼 잘 한 케이스도 있구요. 다만 저희는 맵을 수정하는 경우가 많고, 기존 지형 시스템과의 호환성적 측면에서 이런 식으로 처리했다고 이해해주시면 될 것 같습니다.

[태보미(taebomi)]

[게임조아(signal5127)]

예뻐

[witn331ss(witn331ss)]

고수

[MandU(snowman5893)]

매번 일지를 찾아서 보는데 볼 때마다 감탄발싸합니다 항상 응원합니다!