이번에 포스팅할 내용은 2D Outline Shader입니다. 도트도 적용이 가능해서 좋았습니다.
참고한 링크는 이곳입니다.
결과물입니다.
2D또한 3D와 마찬가지로 원래 랜더링 되던 물체의 크기를 조금 늘려서 랜더링하는 방식을 사용합니다. 그려지는건 뒤에 그려지게 하는 것입니다.
전체적인 내용은 2가지로 나뉘게되는데, 서브 그래프와 메인 그래프가 있습니다.
위 사진은 서브 그래프의 내용입니다.
텍스쳐 사이즈를 구하고 width와 height를 reciprocal에 넣어주는데, reciprocal은 UV넣을 수 있도록 작업해주는 것이라 생각하고있습니다. Reciprocal Node를 참고하였습니다.
그리고 out값에 원하는 두께를 곱하고 방향을 곱합니다. 나중에 4개의 방향 각각으로 만들어서 더합니다.
그리고 이렇게 뽑아낸 것을 UV랑 더해준 후에 원하는 텍스쳐의 UV에 넣어주고 이걸 Alpha값으로 뽑아줍니다. Outline을 뽑아낼 때에 색상을 뽑아낼 필요가 없기 때문에 Alpha값을 뽑아줍니다.
다음, 메인 그래프입니다.
그래프 세팅입니다.
필요 프로퍼티입니다.
그래프 완성도입니다.
하나하나 설명해보자면,
첫 번째 부분입니다. 4방향으로 Outline을 뽑아냅니다. 아까 만든 서브 그래프로 뽑아냅니다.
그 값을 모두 더해줍니다. Saturate는 음수값으로 가지 않도록 해주는 친구로, alpha값이 음수가 될 경우에는 색이 반전될 수 있기에 걸러줍니다.
색상을 쪼개 Alpha만 빼고 다 데려와서 Vector4로 합쳐줍니다.
여기가 거의 종결인데, Comparison은 비교 연산자로, GreaterOrEqual을 골라 0.5보다 크거나 같으면 본 색상을, 아니면 Outline을 쓰도록합니다. 우측 부분은 Outline을 껏다켰다할 수 있도록 만든것이고, isOutline 변수에 Not을 넣은 이유는 가독성때문에 추가한 것이므로 빼셔도 무방합니다.
블링크같은 경우에는 적이 맞았을 경우에 잠깐 반짝이는 효과 때문에 넣어둔 것입니다. 타격감때문에 넣어두었지만 이또한 빼도 무방합니다. 만약 코드로 제어할 경우에는 Material을 가져와 mat.SetFloat("_blink_amount", (원하는 값));
이런식으로 사용하시면 됩니다.
위의 값을
이런식으로 연결하면 끝입니다.
Outline Thickness는 int range로 해주는 것이 좋습니다. 그리고 Color는 HDR 사용하시는 것이 좋습니다.
포스팅 마칩니다. 감사합니다.
