그림자 표현하기

2D 공간에서도 사실적인 경험을 위해 그림자가 필요한 경우가 있습니다. 그럴 때 필요한 컴포넌트가 바로 Shadow Caster 2D 입니다. 이미 조명을 배치하는 순간 눈치채신 분도 계실텐데요. 사실 Witch 와 Block 객체는 이미 이 컴포넌트를 가지고 있으며 선택하여 인스펙터를 보면 어떻게 설정되어 있는지 확인할 수 있습니다.

Shadow Caster 2D는 Casting Source 속성으로 그림자 영역을 만드는데 여러가지 방식이 있습니다.

• Sprite Renderer : 스프라이트 에셋이 가진 고유의 Custom Outline으로 영역 생성
• Collider 2D : 동일한 객체가 가진 Collider 2D의 모양대로 영역 생성
• Shape Editor : Scene에서 직접 편집 가능한 모양으로 영역 생성
• None : 그림자를 생성하지 않음

보다 세밀한 그림자 모양을 얻고 싶다면 Sprite Renderer 혹은 Shape Editor 방식을 사용하고 물리적인 모양을 그대로 활용하려면 Collider 2D 방식을 사용하시길 바랍니다.

2D 그림자의 또 다른 중요한 속성은 Casting Option입니다. 이것은 그림자가 어떤 형태로 드리우는지 결정하는 속성인데 크게 2가지로 나누어집니다.

• Self Shadow : 영역 및 자신의 스프라이트 내부에 그림자 생성
• Cast Shadow : 조명의 방향을 기준으로 방사형 그림자 생성

대부분은 Cast Shadow를 사용하기 위해 Shadow Caster 2D를 사용하지만 두터운 벽이나 사물같이 빛이 도달하지 못하는 객체에는 Self Shadow 혹은 두 가지를 혼합한 Cast and Self Shadow을 사용합니다. Witch 와 Block은 움직이는 작은 객체이므로 Cast Shadow로 지정되어 있습니다.

그리고 Shadow Caster 2D 또한 Light 2D와 같이 대상 정렬 레이어를 지정해서 부분적으로 그림자를 그릴 수 있다는 점 참고바랍니다.

그렇다면 아직 그림자가 없는 Mineral 객체에 그림자를 만들어보겠습니다. Add Component > Rendering > 2D > Shadow Caster 2D를 선택하여 컴포넌트를 추가합니다.

기본 타입이 Sprite Renderer인데 영역 모습은 직사각형인 것을 볼 수 있습니다. Mineral 스프라이트는 아직 Custom Outline가 설정되어 있지 않기 때문입니다. 학습 차원에서 잠시 Custom Outline을 지정하여 그림자 모습을 세밀하게 바꾸어보겠습니다. 먼저 Mineral 스프라이트를 선택하고 인스펙터 창의 Open Sprite Editor 버튼을 눌러 스프라이트 에디터 창을 엽니다. 그리고 좌측 상단의 Sprite Editor 드롭박스를 눌러 Custom Outline으로 변경합니다.

이후 우측 하단에 나타난 Outline Tool에서 Generate 버튼을 누르면 어느정도 스프라이트를 따라가는 Outline이 형성됩니다만 픽셀 아트는 해상도가 작기 때문에 세밀한 모양을 얻기가 어렵습니다. 그래서 Outline이 형성된 이후 마우스로 직접 정점을 옮기거나 선 가운데를 클릭하여 정점을 추가해서 스프라이트와 어느정도 일치하는 Outline으로 편집하는 작업이 필요합니다. 작업이 완료되었다면 우측 위쪽의 Apply 버튼을 눌러 적용합니다.

Scene에서도 Shadow Caster 2D 모습이 Custom Outline과 동일한 형태로 바뀐 것을 볼 수 있습니다. 이와 마찬가지로 Shape Editor 방식은 스프라이트와 상관없이 Shadow Caster 2D 컴포넌트 자체적으로 Scene에서 자유롭게 편집한 모양 데이터를 활용합니다. 그렇기 때문에 Shape Editor 방식은 생략하겠습니다.

Mineral 객체는 플레이어블 객체인 Witch가 자유롭게 올라설 수 있는 플랫폼 역할을 합니다. 그렇기 때문에 Box Collider 2D를 가지고 있으며 우리는 이것을 활용하여 그림자를 만들 것입니다. Shadow Caster 2D의 Casting Source를 Box Collider 2D로 변경합니다.

플랫폼 부분인 Box Collider2D가 얇은 직사각형 형태로 되어있는데 형성된 그림자 영역은 거의 직선의 모습입니다. 이것은 Trim Edge 속성의 값이 0.09로 되어 있기 때문인데, 0에 가까울수록 Casting Source에서 활용하는 모양과 가까워집니다. Offset과 같은 개념이므로 프로젝트 취향껏 조절하시길 바랍니다.

Universial 2D 프로젝트를 새롭게 시작하면 렌더링 설정 데이터를 담고 있는 Renderer2D 에셋에서 Light Render Scale 값이 0.5로 설정되어 있습니다. 이대로 픽셀 아트 스타일의 2D 라이팅 작업을 한다면 아래와 같은 결과를 얻게 됩니다. (실습 프로젝트는 미리 1로 설정되어 있습니다.)

일단 모든 Light 2D의 경계가 번져보입니다. 또한 그림자와 실제 영역 사이에 틈새가 생기는 점도 볼 수 있습니다. 이런 문제가 생긴 이유는 2D 조명 그래픽을 위해 내부적으로 제작된 텍스쳐의 크기가 화면의 절반 밖에 되지 않기 때문입니다. 작은 텍스쳐를 다시 원래 화면 크기로 늘려서 사용하다보니 번져보이고 그림자 영역도 일치하지 않게 되는 것이죠. 이것은 유니티 엔진의 분석 도구인 Frame Debugger에서도 확인할 수 있습니다. Game 창 위쪽의 버그 아이콘 버튼 혹은 Window > Analysis > Frame Debugger를 눌러봅니다.

Render Scale 0.5 상태에서는 이렇게 Light 2D 렌더링 단계에서 정말 작은 텍스쳐를 만들어집니다. 그렇다면 Render Scale을 1로 늘리면 어떻게 될까요?

텍스쳐 크기는 더욱 커지고 그만큼 정교한 Light 2D 그래픽을 얻을 수 있습니다. 물론 크기가 커진 만큼 사용해야할 메모리도 늘어나지만, 픽셀 아트 스타일 특성상 참조 화면 해상도가 작기 때문에 성능에 영향을 거의 주지 않습니다. 그러므로 픽셀 아트 라이팅을 사용한다면 정교한 라이팅을 위해서 Light Render Scale을 1로 올려야 한다는 점, 꼭 기억하시길 바랍니다.