스스로 빛을 내는 스프라이트 제작하기

지금까지 Light 2D 와 Shadow Caster 2D만으로도 꽤 훌륭한 2D 장면을 만들어냈습니다. 하지만 여기서 더욱 고급화된 그래픽을 얻기 위해, 더욱 기획한 아트와 가까워지기 위해서 특별한 에셋을 활용할 것입니다.

Universial 2D의 기본 셰이더는 Sprite-Lit-Default 이며 2D Renderer 컴포넌트에 할당되어있는 머티리얼을 살펴보면 바로 알 수 있습니다. 이 기본 셰이더는 Light 2D는 물론 여러가지 그래픽 기능을 가지고 있습니다. 하지만 아쉽게도 스스로 빛을 내는 Emission은 없습니다. 그렇기 때문에 직접 셰이더를 제작해야 합니다.

하지만 셰이더는 진입장벽이 높은 분야라서 그래픽스에 대해 학습하지 않으면 쉽게 제작할 수 없는 것 또한 사실입니다. 그래서 유니티는 더욱 손쉬운 셰이더 제작을 위해 Shader Graph 도구를 제공하고 있습니다. Package Manager에서 확인 가능하며 Universial RP 템플릿을 사용한다면 기본을 설치되어 있습니다.

프로젝트 에셋 창에서 Shader Graph > URP > Sprite Lit Shader Graph 메뉴를 통해 그래프 에셋을 생성할 수 있습니다. 하지만 이 튜토리얼은 셰이더를 제작하는 것이 아닌 픽셀 아트 라이팅에 대해 다루는 내용이므로 해당 프로젝트에서 미리 Emission 셰이더 그래프가 포함되어 있으므로 직접 작성하는 단계는 생략하겠습니다.

에셋 폴더의 Shaders 폴더에 Sprite-Lit-Emission 에셋이 있습니다. 이것을 더블클릭하면 셰이더 그래프 창이 열리면서 그래프를 볼 수 있습니다.

이 셰이더 그래프는 Sprite Lit 기반이며 Main, Mask, Normal, Emission 각각 텍스쳐 정보를 샘플링해서 사용하고 있는 매우 간단한 구조입니다. 이번 시간에 우리가 주목해야 할 부분은 EmissionMap 과 EmissionColor 입니다.

• EmissionMap : 빛을 내는 부분을 가라키는 텍스쳐
• EmissionColor : 빛의 색상 및 밝기

이 두 속성은 아래 단계의 머티리얼 부분에서 한번 더 다루겠습니다.

셰이더가 준비되었다면 2D Renderer에 적용하기 위해 중간 매개체인 머티리얼을 만들어야 합니다. 친절하게도 해당 프로젝트는 머티리얼도 미리 준비되어 있는데, 에셋 폴더의 Materials 폴더로 들어가면 Mineral-Glow 및 Witch-Glow 머티리얼이 있습니다. 각 객체에 맞게 머티리얼을 적용해봅니다. 머티리얼 에셋을 Scene에 보이는 객체 쪽으로 드래그 드롭하여 빠르게 적용할 수 있습니다.

Mineral 객체는 수정 외곽 부분이 밝아지고 Witch 객체는 마법 지팡이의 수정구 부분이 밝아지는 것을 볼 수 있습니다. 머티리얼을 살펴보면 4개의 텍스쳐 속성은 모두 비어있고 오직 EmissionColor 속성만 값을 가지고 있습니다. 해당 색상 타입은 HDR로서 일반적인 RGBA 뿐만 아니라 밝기 역할을 하는 Intensity까지 포함되어 있습니다. RGBA를 지정하고 Intensity를 늘리거나 아래의 +1, +2 버튼을 눌러 더욱 밝게 조절할 수 있습니다.

그런데 어떻게 Mineral 과 Witch의 일부분에서만 이러한 EmissionColor가 적용되고 있는걸까요? 그 해답은 EmissionMap에 있습니다.

유니티에서는 스프라이트가 자신과 연계된 추가 정보를 가진 스프라이트와 묶을 수 있는 Secondary Texture 기능을 지원하고 있습니다. 이에 대해서는 유니티 공식 영상을 참고하시면 많은 도움이 됩니다.

위에서 언급한 EmissionMap 또한 Secondarty Texture 중 하나이며 이것은 Sprite Editor에서 설정된 상태입니다. 지금 바로 Mineral 스프라이트를 선택하고 Open Sprite Editor 버튼을 눌러 들어가봅시다. Sprite Editor 창 좌측 상단 드롭박스를 누르고 Secondary Texture를 선택합니다.

여기서는 해당 스프라이트의 추가 정보를 담은 텍스쳐를 연결할 수 있습니다. 이미 _EmissionMap 이라는 이름으로 Mineral_Emission이라는 스프라이트가 추가되어 있는데 이런 것처럼 셰이더 활용을 위한 다른 텍스쳐를 연결할 수 있습니다. 여기서 중요한 점은 Name에 적어야 할 이름은 2D Renderer가 사용하는 셰이더에 명시된 Reference와 일치해야 하는 것입니다.

이렇게 일치해두면 머티리얼에서 직접 텍스쳐를 할당하지 않아도 2D Renderer에서 자동으로 Secondary Texture에 있는 텍스쳐를 활용하게 됩니다. 이것이 유니티 2D 셰이더의 핵심입니다.

한가지 중요한 팁을 말씀드리면, 셀 애니메이션이 필요한 객체일 경우 여러 스프라이트가 하나로 합쳐진 형태의 아틀라스로 이러한 Secondary Texture를 적용할 수 있다는 점입니다.

이 프로젝트는 Witch 객체의 스프라이트를 멋지게 만들어낼 수 있도록 EmissionMap 아틀라스는 물론 NormalMap, MaskTex 아틀라스도 함께 포함되어있습니다. 스프라이트 아틀라스를 사용할 때는 Slice가 동일하게 적용될 수 있도록 이미지 크기 및 각 스프라이트의 위치가 정확하게 일치하도록 아트 리소스를 제작하는 것이 중요합니다.

그렇다면 Emission 텍스쳐를 어떻게 제작해야 할까요? 이것 또한 꽤 간단합니다. 결론부터 말씀드리면 빛나는 부분을 흰색으로, 아닌 부분은 검은색으로 칠하면 됩니다.

픽셀 아트는 여러 그래픽 툴 프로그램에서 제작할 수 있지만 여기서는 게임 개발 세계에서는 매우 인지도가 높은 Aseprite를 사용했습니다. 이 도구는 Steam 플랫폼에서 구입할 수 있습니다.

Aseprite 프로그램을 기준으로 설명드리자면, Emission을 위해서 원본 레이어를 복사하고 순서를 위로 올리는 것으로 시작합니다. 그리고 명도를 최대한 낮추어 모두 검은색으로 만들고 레이어 속성의 투명도를 80%로 하여 원본이 살짝 보이게 합니다. 이후 빛을 내야 하는 부분만 흰색으로 그리면 됩니다.

물론 흰색 뿐만 아니라 빛의 세기에 따라 회색 및 어두운 회색으로 바꾸어 칠하여 세밀한 EmissionMap을 제작할 수 있으니 참고하시길 바랍니다.