Unity3D 에서 당신의 Pixel Art 게임을 Pixel Perfect 하게 만들기

2D 게임 개발을 하던 중 도트 그래픽을 사용할 경우 Pixel Perfect 하게 하기 위한 작업이 필요하다는 것을 파악하고
잘 정리된 글을 찾아 번역기의 힘을 빌려 번역해봄…ㅎㅎ;;

Making your Pixel Art Game look Pixel Perfect in Unity3D

원글 작성자 : ResistanceStdio
원글 작성일자 :  2018-03-26

---

Unity3D 에서 당신의 Pixel Art 게임을 Pixel Perfect 하게 만들기

얼마 전 게임을 Pixel Perfect 하게 만들기 위해 시간을 어느 정도 써야 한다고 언급했었죠.
아름다운 2D Pixel Art 게임을 어떤 해상도에서도 보기 좋게 하기 위해 이 작업을 해야만 합니다.
또한 우리는 오브젝트를 움직이거나 픽셀이 절반으로 내려앉는 것을 원치 않습니다.
Unity는 기본적으로 Pixel Art를 완전하게 보여주지 않기 때문에 이곳 저곳을 바꾸거나 작은 수정사항을 구현하여 바꿀 필요가 있습니다.
하지만 걱정 마세요, 별로 어렵지 않습니다.

Disclaimer (알려둘 사항)

모든 튜토리얼은 몇몇 소스를 기반으로 했지만 메인은 이 유용한 트위터 스레드에 기반했습니다.
더 좋거나 최적화된 다른 방법이 있다는 것을 알고 있지만 이것이 내가 많은 연구 끝에 사용하는 방법입니다.
자 그럼 Pixel Perfect한 모습을 달성하기 위한 단계를 살펴 봅시다.

흐릿한(기본) 이미지에서 Pixel Perfect 로

Turn off Anti Aliasing (안티앨리어싱 끄기)

안티앨리어싱은 비디오게임들의 텍스처 테두리를 부드럽게 하기 위해 사용됩니다.
보통은 이것은 텍스처가 “너무 픽셀스럽게” 표시되지 않도록 하고 화면이 부드럽게 보이게 합니다.
여기 안티앨리어싱이 어떤 일을 하는지에 대한 예시가 하나 있습니다.

안티앨리어싱 예시

아래쪽 선이 부드럽고 흐릿합니다.
이것은 우리가 더 작은 해상도로 보게 되면 좀 더 괜찮은 모습을 보일 것입니다.
안티앨리어싱을 활성화 시키지 않으면 픽셀로 된 테두리가 눈에 띌 것입니다.
우리의 경우 정확히 반대를 원하기 때문에 안티앨리어싱을 비활성화 할 필요가 있습니다.
Unity에서 기본적으로 이것은 활성화 되어 있습니다.
[Edit -> Project Settings -> Quality] 메뉴로 가서 [Anti Aliasing] 을 사용안함으로 설정하세요.

품질 설정

여기에 다양한 품질 레벨이 있다는 것을 유의하세요.
이 그림엔 [Very Low, Low, Medium, High, Very High, Ultra] 가 있습니다.
각각을 클릭하여 안티앨리어싱 설정을 모두 사용안함으로 바꾸세요.

Sprite Import Settings (스프라이트 가져오기 설정)

이미지/텍스처를 가져올때 Unity는 기본적으로 화면에 부드럽게 보이기 위한 필터를 설정합니다.
다시 한번 말하지만 다른 종류의 게임들에서는 좋은 생각이지만 Pixel Art에서는 그렇지 않습니다.
프로젝트가 가진 각각의 스프라이트로 이동하고 인스팩터 창에서 다음 셋팅들을 변경하세요.

스프라이트 가져오기 설정 변경

[Filter Mode] 를 [Point(no filter)] 로 바꾸고 [Compression] 을 끄세요(이미지 처럼 None 으로 변경).
게임안의 모든 스프라이트에 이 작업을 적용해야 합니다.

Pixels Per Unit (PPU)

이 셋팅을 스프라이트 가져오기에서 찾을 수 있습니다.
100이 기본값입니다.
이 값을 당신의 타일 픽셀 사이즈로 변경하세요. (예시는 19x19 타일인 경우)

Pixels Per Unit

이것은 다음작업과 관련이 있는 변경입니다.

Camera Orthographic Size

이제 PPU를 셋팅했으니 카메라에게 PPU 기반으로 하여 화면상의 한 픽셀과 일치하는 게임상의 한 픽셀이 어떤 크기를 갖기 원하는지 알려줘야 합니다.
그 사이즈를 위해 간단한 공식이 필요합니다.

Camera orthographic size = vertical resolution / PPU / 2

[Main Camera] 오브젝트 클릭하면 [Size] 값이 있고 계산된 값을 [Size] 에 설정합니다.

Camera Orthographic Size

우리의 경우 180픽셀의 수직 해상도와 19픽셀의 PPU를 가지고 있습니다.

180 / 19 / 2 = 4.73684

중요한 점을 언급하자면 우리의 경우는 모든 것을 매우 작은 해상도에 렌더링하고 나중에 스케일 업 한다는 점입니다.
원하는 수직 해상도(우리의 경우 720픽셀)를 넣지 말고 당신이 렌더링하는 해상도를 넣으세요.

Snap To Grid Script

이것이 Pixel Perfect한 모습을 위한 마지막 스텝입니다.
그 동안은 모든 작업은 흐리게 보이지 않게 하지 않게 했지만 문제가 있는데 바로 오브젝트의 해상도를 스케일업하는 동안 “절반” 픽셀들이 배치 되는것입니다.
이것을 피하기 위한 다른 방법들은 특정한 2D카메라 플러그인 또는 쉐이더를 사용하는 것입니다.
내가 사용하는 것보다 아마 좀 더 효과적일 수 있지만 이 방법보다 좀 더 복잡한 방법일겁니다.
이 아이디어는 당신의 “tile grid” 오브젝트의 [LastUpdate()]에 스크립트를 작성하는 것입니다.
그것을 위해 당신의 스프라이트 렌더러를 자식 오브젝트로 옮기고 다음과 같은 스크립트를 추가해야 합니다.
제가 사용중인 스크립트는 다음과 같습니다.

using UnityEngine;

public class SnapToGrid : MonoBehaviour {
 public float PPU = 19; // pixels per unit (your tile size)

 private void LateUpdate() {
  Vector3 position = transform.localPosition;

  position.x = (Mathf.Round(transform.parent.position.x * PPU) / PPU) - transform.parent.position.x;
  position.y = (Mathf.Round(transform.parent.position.y * PPU) / PPU) - transform.parent.position.y;

  transform.localPosition = position;
 }
}

부모의 위치를 체크하고 반올림하여 그리드에 배치합니다.
따라서 더 이상 절반필셀 움직임이 없게 됩니다!
이 모든 설정을 통해 당신의 게임은 이제 보기 좋아 졌을 것입니다.
이 글이 Unity Pixel Art 게임을 튜닝하는 누군가에게 도움이 되었으면 합니다.

---

처음 해봐서 시간이 많이 걸렸다는것 말고는 의미있었음...