Unity 검색

먼 우주 공간 디자인: Alt Shift에서 제작한 Crying Suns의 시각 효과

2023년 2월 6일 게임 | 8 분 소요
Designing a deeper space: Visual effects in Alt Shift’s Crying Suns | Hero image
Designing a deeper space: Visual effects in Alt Shift’s Crying Suns | Hero image
공유

Is this article helpful for you?

Thank you for your feedback!

이번 게스트 블로그에서는 Alt Shift의 리드 프로그래머 크리스토프 소뵈르 님이 Crying Suns에서 거칠고 깊은 우주 공간에 어떻게 조명을 적용했는지 설명하고, 프로젝트에서 활용할 수 있는 렌더링 팁과 리소스를 소개합니다.

A look at the command center in Crying Suns
Crying Suns의 지휘 본부에서 보이는 광경

Crying Suns를 플레이하면 위 이미지에서 보이는 지휘 본부에서 대부분의 시간을 보내게 됩니다. 실제 캐릭터의 위치뿐만 아니라 이 게임의 주요 무대는 위험이 도사린 깊고 머나먼 우주 공간입니다. Crying Suns의 가장 중요한 작업은 이 우주 공간을 표현해 내는 것이었습니다. 그래서 저희는 이 멀티플랫폼 게임이 정말 만족스러운 수준이 되기까지 다양한 환경의 렌더를 조정하는 데 많은 시간을 할애했습니다.

아트 기반 렌더링

Crying Suns에서 묘사하는 우주가 물리적으로 정확한 모습이 아니라 해도 그리 놀랍지 않으실 겁니다. Crying Suns의 아트 방향성은 매우 특별하고 독특하며, 2D 게임이기에 가독성(플레이어가 화면에서 인지할 수 있는 요소)과 관련해 몇 가지 매우 구체적인 제약을 지닙니다.

우주의 별은 보통 새까만 배경 위에 흰 점이 찍힌 형태로 표현됩니다. 픽션에서든 현실에서든 우주선이 대부분 흰색인 것은 우연이 아닙니다. 화면에서 우주선을 정확하게 볼 수 있어야만 더 괜찮은 그림을 만들어 낼 수 있습니다. 흰색은 빛과 열을 반사하는 데도 도움이 됩니다. 검은색이라면 빛과 열이 흡수될 테니까요.

하지만 Crying Suns에서는 보다 어둡고 암울한 세계를 만들고 싶었습니다. 흰색은 고려 대상이 아니었죠. 게다가 저희 카메라는 다양한 궤도계의 별을 똑바로 바라보게 설정되어 있으므로, 모든 천체가 역광을 받아 대부분 검은색으로 보일 것이었습니다. 그래서 저희는 해결책을 찾아야 했습니다.

우주 레이어

아트 관련 비전은 처음부터 분명했지만 그 비전을 구현하는 과정은 매우 길었고, 반복 작업도 여러 번 거쳐야 했습니다. 렌더 자체가 각각 뚜렷한 목표를 따라 여러 번의 패스를 거칩니다.

우선 불투명 오브젝트를 기본적으로 렌더링합니다. 여기에 보이는 큰 정거장(왼쪽)과 Neo-N 큐브(오른쪽)입니다.

Rendering of opaque objects in Crying Suns, with a big station (left) and Neo-N cube (right).

그런 다음 배경에 스카이박스를 추가합니다. 다른 방식으로 진행할 수도 있었지만 Unity를 사용하면 이렇게 진행하게 됩니다.

Similar rendering to the opaque example but with the skybox added in the background.

다음으로 투명 렌더 대기열 중에서도 별과 행성과 관련된 대기열을 추가합니다.

Continued Crying Suns render example that introduces the transparent render queue, including stars and planets.

이제 일반적인 렌더 작업은 끝났습니다. 남은 작업은 블룸 같은 포스트 프로세싱 효과뿐입니다.

Continued Crying Suns render example showing the post-processing effects, like Bloom, that need to be done.

그러면 보통 프로듀서 겸 내러티브 디자이너를 담당하시는 줄리앙 쿠트레 님이 이렇게 어려움을 토로하곤 했습니다. “블룸이라고요? 진심인가요? 절 괴롭히려는 거죠? 하나만 선택하세요. 블룸이에요, 저예요?” 하지만 게임에 블룸이 있는데 프로듀서는 왜 필요하겠어요?

어쨌든 나중에 벌어질 일이니 일단 넘어가겠습니다. 이제 게임이 근사해졌지만 오른쪽의 Neo-N 큐브는 모양이 정확하게 보이는 반면, 왼쪽의 정거장은 어둠 속에서 길을 잃은 것처럼 잘 보이지 않습니다. 전반적인 분위기에 무언가가 부족합니다.

실제에 가까운 묘사

이 씬을 개선하려면 정거장이 더 잘 보이도록 해야 합니다. 즉 정거장이 뒤에 있는 별보다 플레이어 쪽에 더 가깝게 있다는 사실을 확실하게 표현할 방법이 필요했습니다. 물리적으로 정확하지 않을지 몰라도 우주 공간처럼 보이는 것이 필요했죠. 그래서 소위 ‘우주 안개’라는 것을 추가하게 됩니다.

Example of hazelike (fog) effect created for Crying Suns applied to the rendered scene.

기본적으로 광원이 미세한 파티클과 충돌할 때 산란하여 안개와 같은 효과를 내는 빛의 유형을 설계했습니다. 우주 안개가 실제로 존재하지 않는 것으로 알지만, 게임에서는 근사해 보이고 이미지 구성에도 상당히 유용합니다. 정거장에 상당한 깊이감을 더하기도 합니다.

같은 효과를 더 먼 시점에서 보면 아래와 같이 보입니다.

Example of hazelike effect created for Crying Suns from far away.

전운이 감도는 우주 안개

우주 안개는 어떻게 만들었을까요? 이름에서 알 수 있듯 이 효과는 화면 공간에 낀 안개처럼 작용하지만, 화면이 별의 상대적 중심에서 멀어질수록 안개의 양은 감소합니다.

이 솔루션은 개발 후반에 도입되었습니다. 처음에는 빛을 시뮬레이션하기 위해 주요 별에 부착된 대형 빌보드 스프라이트를 사용했지만 그다지 효과적이지 않았고, 별 오브젝트 자체에 아무런 영향을 주지 못했습니다.

Capture of an early build of the game
게임 초기 빌드의 캡처 화면

위 이미지를 보면 별 주위의 빛이 그 뒤에 있는 스카이박스에 영향을 주는 것이 확인되지만, 우주선과 정거장이 실제로 그 빛의 영향을 받지는 않습니다. 별을 바라보는 면은 더 붉지만, 빛이 닿지 않는 표면은 대부분 검은색입니다.

반면 아래 이미지에서는 우주 안개 효과가 배경과 오브젝트 자체에 주는 영향을 확인할 수 있습니다.

Example of the rendered scene in Crying Suns before and after the space haze is applied.
우주 안개를 적용하기 전과 후 비교

물론 게임에는 태양 근처, 별에서 멀리 떨어진 곳, 전투가 펼쳐지는 곳, 보스와 마주치는 장소 등 다양한 유형의 위치가 있기 때문에, 플레이어가 한 위치에서 다른 위치로 이동하는 동안 각 위치마다 다른 설정을 처리하고 그 사이를 매끄럽게 보간해야 했습니다.

The Crying Suns team's custom Inspector to adjust the fog settings between our various layouts
다양한 레이아웃 간의 안개 설정을 조정하기 위한 커스텀 인스펙터

해당 효과를 재현하는 구체적 과정

여러분의 프로젝트에서 유사한 효과를 재현하려면 주로 뎁스 텍스처와 포스트 프로세싱 패스가 필요합니다. URP(유니버설 렌더 파이프라인)와 빌트인 렌더 파이프라인을 사용할 때의 프로세스를 각각 자세히 설명하겠습니다.

Before and after example of applying the fog effect to a scene. (Notice how the cube pops out thanks to the fog.)
씬에 효과를 적용하기 전(왼쪽)과 후(오른쪽). 안개 덕분에 큐브가 더 두드러져 보입니다.

빌트인 렌더 파이프라인

  1. 해당 효과에 커스텀 셰이더를 사용하여 OnRenderImage 메서드가 포함된 MonoBehaviour를 생성하고 이 스크립트를 카메라에 연결합니다.
  2. 스크립트의 Start 메서드에서 카메라의 depthTextureModeDepthTextureMode.Depth로 변경합니다.
  3. 뎁스 텍스처는 해당 값을 기반으로 계산되므로 카메라의 근거리 및 원거리 클리핑 평면을 조정합니다.
  4. 셰이더를 작성합니다.

URP

  1. URP 에셋을 선택하고 렌더링 설정에서 Depth Texture를 선택합니다.
  2. 렌더러 기능과 렌더 패스가 포함된 C# 스크립트를 생성하고, Universal Renderer Data 파일에 새로운 렌더러 기능으로 연결합니다.
  3. 뎁스 텍스처는 해당 값을 기반으로 계산되므로 카메라의 근거리 및 원거리 클리핑 평면을 조정합니다.
  4. 해당 셰이더를 작성합니다.
  5. 이 셰이더를 기반으로 머티리얼을 생성하고 렌더러 기능에 할당합니다.
  6. 렌더러 기능에서 안개 컬러를 선택합니다.

다 됐습니다.

Alt Shift의 Crying Suns는 현재 Android, iOS, Nintendo Switch™, PC, MacOS에서 플레이할 수 있습니다. Crying Suns 활용 사례에서 Alt Shift가 Unity를 사용하여 어떻게 모바일, 데스크톱, 콘솔 플랫폼에서 프리미엄 게임을 제작하고 100만 명이 넘는 플레이어에게 도달했는지 알아보세요.

Nintendo Switch는 Nintendo의 등록상표입니다.

2023년 2월 6일 게임 | 8 분 소요

Is this article helpful for you?

Thank you for your feedback!

포럼에서 토론에 참여하기
관련 게시물