외곽선 이펙트를 위한 쉐이더 그래프 맛보기

던전 앤 파이터에는 히트 박스의 상태가 일반 상태, 슈퍼 아머 상태, 무적 상태 총 세 가지 존재한다. 또 캐릭터의 히트 박스가 어떤 상태인지 시각적으로 쉽게 파악할 수 있도록 외곽선 이펙트가 존재한다. 일반 상태의 경우 외곽선 이펙트가 없고, 슈퍼 아머 상태의 경우 노란색과 빨간색의 외곽선 이펙트가, 무적 상태일 경우 흰색 외곽선 이펙트가 존재한다. 이번 글에선 이를 어떻게 구현했는지에 대해 작성하고자 한다.

순서대로 일반 상태, 슈퍼 아머 상태, 무적 상태

 

외곽선만 그리면 될까?

외곽선 이펙트를 구현하기 위한 방법으로 총 두 가지를 생각해봤다. 

1. 캐릭터 스프라이트에 외곽선을 추가로 렌더링한다.
2. 캐릭터 스프라이트보다 살짝 큰 스프라이트를 캐릭터 뒤에 배치한다.

우선 던전 앤 파이터에서 슈퍼 아머 이펙트가 적용되는 모습을 확인해보자. 캐릭터가 슈퍼 아머 상태가 될 경우 캐릭터와 같은 모양의 노란색 오브젝트가 생긴 뒤, 점점 작아져 외곽선의 형태로 변한다. 즉, 1번 방법이 아닌 2번 방법을 사용한 것을 추측할 수 있다.

슈퍼 아머 이펙트가 적용되는 모습

 

그럼 캐릭터 스프라이트 뒤에 추가될 오브젝트를 위한 쉐이더 그래프를 작성해보자. 텍스쳐의 알파값을 추출한 뒤 외곽선 색을 곱한 뒤 출력해주면 캐릭터의 모양을 한 단색 스프라이트가 완성된다.

캐릭터 텍스쳐를 단색으로 변환해주는 쉐이더 그래프

 

하지만 이를 적용해보면 원본 스프라이트의 Pivot 위치에 따라 외곽선이 고르게 표현되지 않는다. Fire Knight의 스프라이트들의 Pivot은 Bottom-Center로 설정되어있어 각 픽셀의 Up 방향으로의 외곽선은 두껍게, Down 방향으로의 외곽선은 거의 없다 싶이 출력됬다.

쉐이더를 적용한 오브젝트를 추가한 결과

 

UV가 뭐예요?

이를 해결하기 위해 UV Coordinate을 활용하였다. UV Coordinate이란 간단하게 설명하면 텍스쳐를 0과 1 사이로 정규화한 좌표계이다. Unity의 경우 좌측 하단이 $(0, 0)$인 좌표계를 사용한다. 그래서 왼쪽 하단의 색이 검은색이 출력되고 오른쪽 상단의 좌표는 $(1, 1)$이므로 노란색이 출력되는 것을 확인할 수 있다.

 

이전의 문제점은 캐릭터 스프라이트의 Pivot이 Bottom-Center로 설정되어 있어 외곽선이 고르게 표현되지 않는 문제점이 존재했으며, Pivot이 Center여도 바깥쪽의 외곽선만 표현되는 문제점이 발생했다. 그래서 모든 부분에 외곽선이 고르게 출력될 수 있도록 UV 좌표에 4방향으로 Offset을 추가하였다. 

UV 좌표계를 왼쪽으로 약간 이동시키는 쉐이더 그래프

 

다만, 외곽선을 두껍게 표현하기 위해 Scale을 키운 것이 아닌 Offset의 값을 키웠기 때문에 값이 너무 커질 경우 옳바른 형태의 외곽선이 아닌 그림자 분신술같은 효과가 출력됬다. 

Offset이 커질수록 외곽선이 아니게 된다.

 

완성된 외곽선 효과

던전 앤 파이터와 같은 효과를 적용하기 위해서 외곽선의 두께를 조절하는 것이 아닌, 외곽선 오브젝트의 Local Scale을 수정하여 구현할 수 있었다. 

 

슈퍼 아머가 적용될 때만 처음 커지는 효과가 발생하며 슈퍼 아머는 노란색에서 빨간색으로 변하는 외곽선, 무적 상태는 흰색 외곽선이 적용된다.

외곽선의 색을 결정하는 쉐이더 그래프

 

슈퍼 아머 이펙트