샘플 프로젝트 소개

Tutorial

foundational

+10XP

15 mins

Unity Technologies

샘플 프로젝트 소개

픽셀 아트를 위한 2D 라이팅 실습을 위해 준비된 샘플 프로젝트를 다운로드하고 파악하는 차시입니다.

1. 샘플 프로젝트 다운로드

이 튜토리얼을 보다 원활히 학습하실 수 있도록 샘플 프로젝트를 미리 준비해두었습니다. 해당 페이지 위쪽의 링크 혹은 아래 링크를 클릭하여 깃 허브 페이지에 접속합니다. 이후 녹색 Code 버튼을 누르고 Download ZIP 메뉴를 클릭하여 샘플 프로젝트를 다운로드합니다.

용량이 매우 가벼우므로 금새 다운로드 받을 수 있을 것입니다. ZIP 압축을 풀면 폴더가 나타나는데 유니티 허브에서 추가 > 디스크에서 프로젝트 추가.. 를 통해 해당 폴더를 선택하여 열어줍니다.

2. 샘플 프로젝트 구성 소개

이 프로젝트의 대부분 에셋은 Assets 폴더 안의 2D_Pixel_Light 폴더에 포함되어 있습니다. 먼저 Scenes 폴더로 들어간 다음 Basic 장면 에셋을 더블 클릭하여 열어봅니다.

이미 어느정도 지형과 캐릭터, 사물이 배치된 픽셀아트 스타일의 2D 장면을 볼 수 있을 것입니다. 바로 플레이 모드로 진입하여 기본적인 플랫포머 장르의 조작을 경험하실 수 있습니다. 이 프로젝트가 포함하고 있는 요소들은 아래와 같습니다.

  • 픽셀 아트 스타일 타일맵 스프라이트
  • 타일맵 스프라이트를 사용한 타일 팔레트와 타일
  • 픽셀 아트 스타일 캐릭터 및 사물 스프라이트
  • 캐릭터 및 사물의 마스크 텍스쳐 및 노멀맵, 이미션맵 스프라이트
  • 캐릭터를 위한 셀 애니메이션
  • 이미션 (부분적으로 밝게 빛나는)을 위한 스프라이트 Lit 셰이더 그래프
  • 이미션이 적용된 머티리얼
  • 플랫포머 조작 및 간단한 제어를 위한 비주얼 스크립팅 그래프
  • 위의 모든 것을 종합하여 제작된 라이팅 비적용 Basic과 라이팅이 완성된 Complete 장면

Complete 장면을 더블클릭해서 앞으로 우리가 학습할 내용을 미리 확인할 수 있습니다.

3. 픽셀아트 사전 설정

픽셀아트는 일반적인 이미지에 비해 해상도가 매우 작은 것이 특징입니다. 그렇기 때문에 유니티 에디터에서 지정하는 기본 설정 값으로는 픽셀아트 고유의 느낌을 내기 어렵습니다. 해당 프로젝트는 모든 스프라이트에 픽셀 아트에 맞도록 스프라이트 속성이 설정되어 있습니다.

유니티 프로젝트에서 새로운 픽셀아트 스프라이트를 임포트하고 에셋으로서 사용하기 위해서는 3가지 속성을 필히 수정해야 합니다.

  • Pixel Per Unit : 개발자 혹은 기획에서 정한 픽셀 크기 (ex: 16 - 1칸에 16개 픽셀)
  • Filter Mode : Point (not filter)
  • Comporession : None

Pixel Per Unit는 생소한 개념이다보니 이해가 어려울 수 있습니다. 간단히 유니티 Scene에 보이는 격자 혹은 Transform에서 사용하는 1 값이라는 크기에 지정된 픽셀 개수가 들어가도록 설정하는 것입니다. 그렇기 때문에 Pixel Per Unit이 적을 수록 픽셀은 더욱 커지므로 스프라이트가 커보이는 효과를 얻게 됩니다. 물리적으로 매우 작은 픽셀 아트 이미지가 유니티에서는 잘 보이도록 크게 보이는 이유가 여기에 있습니다.

Filter Mode는 3D 텍스처와 관련된 속성으로 카메라와 거리가 가까울수록 어떻게 보일지 결정하는 부분입니다. 기본 값은 Bilinear로서 가까울수록 번져보이는 방식인데 이 때문에 픽셀 아트 스프라이트를 곧바로 Scene에 놓으면 번져보이게 됩니다. 그렇기 때문에 Filter Mode는 꼭 Point (no filter)로 지정해야 합니다.

Comporession은 의미 그대로 색상을 압축하는 속성입니다. 기본 값은 Normal로 되어있는데 큰 해상도의 일러스트 형식 스프라이트는 큰 차이를 느끼기 어렵지만 해상도와 색상 수가 비교적 적은 픽셀 아트에서는 색상 손상이 눈에 띄게 나타납니다. None으로 설정하여 색상 손상이 없도록 합니다.

4. 비주얼 스크립트 로직 소개

유니티는 기본적으로 C# 언어를 통한 MonoBehaviour 기반의 스크립트로 게임 로직을 작성하지만 이러한 프로그래밍 언어라는 높은 허들을 비선호하는 사용자를 위해 시각적 로직 개발 도구인 비주얼 스크립팅 기능을 제공하고 있습니다. Unity Learn에서도 비주얼 스크립팅 소개 튜토리얼이 있으니 관심있으시다면 방문을 추천드립니다.

플레이어 역할인 Witch 객체를 선택하면 Script Machine 컴포넌트와 Variables 컴포넌트를 가지고 있다는 것을 파악할 수 있습니다. 여기서 게임 로직이 담긴 비주얼 스크립트 Graph를 사용하고 있습니다.

Graph 에셋을 더블 클릭하여 열면 Script Graph 창과 함께 플랫포머 플레이어 조작을 위한 몇가지 작은 그래프가 나열되어 있는 모습을 볼 수 있습니다. 이미 유니티에 대해 어느정도 알고 있다면 각 노드들이 어떠한 로직을 소화하고 있는지 금방 이해하실 수 있을겁니다. 물론 빠른 이해를 돕기 위해 그룹으로 묶어 제목을 달아두었습니다.

프로그래밍 언어의 사전 지식이 없는 개발자도 이렇게 비주얼 스크립팅을 사용하면 간단한 게임 로직을 쉽게 작성할 수 있다는 점 알려드립니다.

5. 캐릭터 배경 소개

이 프로젝트의 스프라이트들은 유니티 공식 URP 2D 데모 에셋 Dragon Crashers를 픽셀 아트로 재해석한 에셋입니다. 캐릭터는 강력한 마법을 구사하는 Witch Giorgia 이라고 합니다.

이들의 원본이 궁금하다면 아래 에셋스토어 에셋아티스트를 위한 2D 아트 E-Book을 받아보세요. 이 리소스들 또한 Universial 2D를 학습하는데 매우 뛰어난 자료입니다.

Complete this Tutorial