[Unity]ShaderGraph로 2D 흙타일 표현하기

 

시작

2D 플랫포머에 기능을 테스트 하려는데 준비한 이미지 리소스가없거나, 타일맵 찍기가 귀찮거나하는 등의 문제로 단색 스프라이트만으로 테스트하면 밋밋해서 재미가 없어 의욕이 없어지는 경우가 있습니다. 이때 빠르게 적용할 수 있고, 별도의 이미지 리소스, 텍스쳐 없이 적용 가능하도록, 심플 노이즈를 활용하여 플랫폼을 표현할만한 머테리얼을 제작해보겠습니다.

먼저 흙에 느낌을 내줄 기본 색상 노드를 준비합니다.

아직은 단색 머테리얼과 다를게 없습니다. Simple Noise 노드를 통해 불규칙적인 노이즈 패턴을 섞어봅니다.

적용된 2D오브젝트의 Scale에 따라 노이즈 효과가 늘어나고, 색이 너무 어둡게 나옵니다.
Scale에 따라 노이즈맵이 늘어나는 대신 타일링(반복)되도록하고, 노이즈를 전체적으로 밝게 조정하겠습니다.
타일링으로 변경하면 노이즈가 너무 잘게 보일 것이기에 노이즈 스케일도 줄이겠습니다

Power노드는 값을 거듭제곱(A^B)하는 노드입니다. 노이즈 맵의 점들은 (0-1)범위의 값을 가지기 때문에 1보다 작은 양수를 지수(B)로 해주면 값이 커집니다.

단조로운 단색보다는 흙 타일 같은 느낌이지만 윗부분에 풀을 심어보면 어떨까요?
풀이 그려질 영역과 흙이 그려질 영역을 구분할 마스크를 먼저 만들어보겠습니다. 풀이 그려질 영역은 (1), 흙이 그려질 영역은(0)으로 그려지게 하겠습니다.
오브젝트의 높이를 기준으로 Step 노드를 사용하겠습니다.

Edge를 기준으로 위 아래가 (1)과 (0)으로 명확히 구분된 마스크가 준비되었습니다
Edge의 값을 조절하여 영역의 범위를 조절할 수 있습니다.
이 값을 Lerp 노드의 T로 사용하면 두개의 색을 구분하여 표현할 수 있습니다.

Lerp의 Out은 A*(1-T) + B*T

따라서 0과 1로만 이루어진 마스크(T)에서는 A와 B만 출력됩니다.

경계가 칼같이 잘리니 딱딱한 느낌입니다. 경계에도 노이즈를 적용할 수 있을까요?

노이즈를 더하니 마치 난수처럼 불규칙적인 경계가 그려졌내요
편차가 너무 큰것 같아 노이즈에 0.2를 곱해 (0-0.2)범위만 더해지도록하겠습니다.

Simple Noise를 활용하여 단조롭지 않은 머테리얼을 만들었습니다.

마치며

Simple Noise를 통해 Shader에 불규칙적인 효과를 적용하는 법을 익힐 수 있었습니다. Simple Noise 대신 다른 노이즈 텍스쳐를 사용하면 상황에 맞는 적절한 연출 효과를 낼 수 있다고 합니다. 이런 노이즈 효과는 색상뿐만 아니라 알파에 연결하여 독특한 패턴으로 사라지는 듯한 연출도 표현할 수 있겠내요.