[Unity] 2D Sprite에 Outline 입히기

 

 

Background

2D UI에 outline을 간단하게 입히려는 상황에서, 이미지 자체에 outline을 박아버리는 것이 가장 간단하지만 상황에 따라 해상도가 달라지거나 깔끔한 외곽선으로 나오지 않을 수 있다. 그래서 엔진 안에서 outline을 처리하는 방향으로 찾아보았다. 여러 방법이 있겠지만 이번에는 Shader를 사용해보려 한다.

 

 

---

Search

화려한 이펙트가 아니라 말 그대로 외곽선만 표시하고 간단한 그라디언트 정도만 추가하려는 것이라서 혹시나 무료 에셋이나 기본 지원하는 기능이 있나 찾아보았다. 더 좋은 다른 리소스도 어딘가에 있겠지만 가장 빨리 찾을 수 있었던 아래 에셋을 임포트했다. SpriteOutline.shader라는 셰이더 파일만 있어도 된다.

2D Sprite Outline | 시각 효과 셰이더 | Unity Asset Store

 

 

---

Usage

(참고로 해당 에셋은 2019년 마지막 릴리스 되었으며, 내 프로젝트 환경은 2022.3.11f1 URP, Windows 빌드임.)

사용만 하는 것은 간단하다. SpriteOutline.shader가 적용된 새 Material을 만들고 그것을 내 Sprite Renderer의 Material에 넣어주면 된다. Demo에 원하는 것과 비슷한 옵션으로 설정된 Material이 있다면 참고하는 것도 좋다.

 

1. 새 Material을 만들어, 추가한 Outline Shader를 적용한다.

2. Outline을 입히려는 Sprite에, 새로 만든 Material을 적용한다.

3. 원하는 효과에 맞게 Material 옵션을 조정한다.

- General Settings의 Outline mode에 따라 이하 Settings가 별도로 적용된다.
(위 사진대로라면 GeneralSettings와 Gradient Settings의 내용만 적용된다.)
- 옵션의 자세한 설명은 에셋의 Overview에도 나와 있다.

4. 3 옵션에서는 (사진)같은 느낌의 결과가 나온다.

 

 

---

Etc.

문서 작업 툴에서 이미지를 수정할 때 흔히 사용하는 기본 기능이 포함된 셰이더 코드라 생각보다 유용하다. 이 정도 기능만 있어도 간단한 효과는 이리저리 넣을 수 있으니까. 그리고 셰이더 맛보기 공부하는 용도로 참고하기에도 좋은듯.

단순히 선만 그린다면 아래 포스트 참고하여, 아웃라인을 그리는 부분의 코드만 사용해도 된다.

[UNITY] 2018.2. 2d 캐릭터 외각선 그리기. 2d Sprite outline