픽셀 아트는 도트 그래픽이라고도 불리며 많은 사람에게 사랑을 받고 있는 스타일입니다. 유니티에서 픽셀 아트로 2D 게임을 만들 때 스프라이트를 활용합니다. 그런데 유니티에서 픽셀 아트를 적용할 때 스프라이트에 대한 이해가 없으면 도트 크기가 뒤죽박죽되는 등 내가 원하는 대로 화면에 픽셀 아트가 그려지지 않습니다. 픽셀 아트를 위한 초기 세팅이 중요합니다. 이번 글에서는 픽셀 아트 스타일의 게임을 만들 때 스프라이트에 대해 알아야 할 것들을 정리해보겠습니다. 글의 내용은 유니티 공식 블로그 글을 참고하였습니다.
설정하기 전에 알아야 할 유니티 스프라이트
픽셀 아트 파일을 씬에서 "픽셀 아트처럼" 배치하고 보이기 위해서 먼저 설정해두어야 할 것이 있습니다. "픽셀 아트처럼"이라고 하면 선명하고 안정적으로 화면에서 픽셀이 보이는 것입니다. 아트 파일에서 Texture Type을 Sprite(2D and UI)로 설정하면 Sprite Mode가 생깁니다. Sprite Mode는 세 가지가 있습니다.
- Single : 한 개의 파일에 하나의 스프라이트가 있다는 것을 뜻합니다.
- Multiple : 한 개의 파일에 여러 개의 스프라이트가 있는 경우에 설정하면 됩니다. 아래 예시와 같이 애니메이션을 위한 파일이나 비슷한 종류의 스프라이트를 묶어 두거나 게임에서 사용되는 모든 스프라이트를 하나의 파일에 두기도 합니다.
- Polygon : Single과 Multiple은 사각형 스프라이트입니다. Polygon의 경우 삼각형, 오각형, 원 등의 모양을 스프라이트로 지원합니다. 예를 들어 사각형이 아니라 원 모양의 버튼을 만들고 싶다면 Polygon을 사용할 수 있습니다.
Pixels Per Unit에서 pixel은 우리가 알고 있는 컴퓨터 그래픽에서 사용되는 화면을 구성하는 작은 단위입니다. 위 사진에서 예시를 든 코인 픽셀 아트는 투명한 칸까지 포함해서 32픽셀x32픽셀 사이즈입니다. Unit은 유니티에서 사용되는 크기 단위로 씬에서 보이는 격자 한 칸이 1 유닛입니다. 즉, Pixels Per Unit은 1 Unit이 몇 픽셀과 길이가 같게 되는가입니다. 2 Pixels Per Unit이라면 씬에서 보이는 격자 한 칸(정사각형)에 2x2로 총 4픽셀이 들어갈 수 있게 됩니다. 만약 여러 파일의 픽셀 아트를 사용한다면 이 Pixels Per Unit 값을 잘 설정해야 픽셀 크기가 서로 맞지 않는 현상이 일어나지 않습니다.
Mesh Type에서는 Tight를 선택합니다. 두 옵션의 차이를 알기 위해서는 스프라이트가 매쉬 기반으로 어떻게 화면에 그려지는지 컴퓨터 그래픽스에 대한 이해가 필요합니다. Tight는 단어처럼 빡빡하게 투명한 부분을 최대한 빼고 불투명한 부분만 화면에 렌더링 하게 만들어줍니다. Full Rect를 써야 하는 특수한 상황(아주 많은 스프라이트가 화면에 있어서 게임 성능이 vertex-bound거나 overdraw 문제가 있거나)이 아니고는 Tight가 일반적으로 좋습니다.
픽셀 아트를 위한 설정 5가지
- Filter Mode에서는 Point(No Filter)를 선택해줍니다. Filter Mode는 텍스쳐가 가장 가까운 픽셀과 block pixelated 되게 보여주게 하는 옵션으로 픽셀 아트를 위해서 반드시 해주어야 하는 설정입니다.
- 일반적으로 픽셀 아트의 파일은 그 특성상 사이즈가 매우 작습니다. 따라서 Compression을 None으로 바꾸어야 이미지가 압축되어 흐릿해지지 않습니다.
- Sprite Editor에 들어가서 Pivot Unit Mode도 Pixels로 바꾸어 아래 사진처럼 pivot의 좌표가 픽셀 단위로 설정되게 만들어줍니다.
- 2D pixel perfect package 설치하기. 설정에 따라 이미 설치되어 있을 수도 있습니다. package manager에서 해당 패키지를 설치해줍니다.
- main 카메라에 pixel perfect camera 라는 컴포넌트를 추가해줍니다. 만약 그런 컴포넌트가 검색되지 않는다면 4번에서 패키지가 제대로 설치되었는지 다시 확인하고 프로젝트에 import 해야 합니다.
다음글에서 픽셀 아트에 필요한 세팅을 이어 작성하겠습니다.
아랫글을 참고하였습니다.
https://docs.unity.cn/Packages/com.unity.2d.pixel-perfect@5.0/manual/index.html
'Unity' 카테고리의 다른 글
[Unity] 클래시 로얄처럼 모바일 해상도 대응하는 방법 (0) | 2022.10.02 |
---|---|
[Unity] 픽셀 아트에 필요한 세팅 (2) 폰트 설정 (0) | 2022.10.01 |
[Unity] VSCode에서 Debugger 사용하기(Deprecated 되었지만 사용 가능!) (0) | 2022.09.29 |
[Unity] 모바일 해상도 대응을 위한 UI 레이아웃 (2) (1) | 2022.09.28 |
[Unity] 모바일 해상도 대응을 위한 UI 레이아웃 (1) (0) | 2022.09.27 |
최근댓글