머터리얼 구성
다음은 디버프 아이콘에서 사용할 배경 이미지를 만들어주기 위해 머터리얼을 구성하는 단계이다.
1. 둥근 모서리 계산
- UV 좌표계의 중심을 0으로 맞추기 위해 0.5를 빼주고, 4개의 모서리를 동시에 동일하게 계산할 수 있도록 Abs를 적용해 모든 사분면의 좌표를 양수[0.0 ~ 0.5]로 대칭화했다.
- 이후 사각형의 평면 구간과 곡선 구간을 분리해야 하기 때문에 0.5에서 CornerRadius를 뺀 값을 기준점으로 삼고, 절대값 UV에서 이 기준점을 빼주었다.
- 바깥쪽 곡선 거리는 0보다 큰 값들만 추출하여 VectorLength를 구하고, 안쪽 평면 거리는 Min 노드를 활용해 0 이하의 값들을 구해 처리해주었다.
2. 마스크 생성
- 바깥쪽 거리와 안쪽 거리를 더한 뒤 CornerRadius를 빼주면, 경계선이 정확히 0이 되는 값을 얻을 수 있었고 SmoothStep으로 경계선을 기준으로 내부는 0 외부는 1인 마스크를 만들어 주었다. 내부가 1인 것을 원하기 때문에 Oneminus로 반전을 해주었다.
- 외곽선의 경우, EdgeDist와 StrokeWidth 파라미터를 활용해 두께를 정의한 뒤 SmoothStep으로 테두리 안쪽 영역을 구하고 FillMask와 곱해서 밖으로 삐져나가지 않는 외곽선만 남겨주었다.
- 내부 그림자는 EdgeDist를 넓은 범위의 SmoothStep에 통과시켜 안쪽으로 갈수록 부드럽게 변하는 그라데이션을 만들고, InnerShadowStrength 파라미터와 섞어 완성한다.
3. 엠블럼 이미지 UV 스케일링
- 중심을 원점으로 이동시킨 좌표에서 Divide 노드를 통해 EmblemScale 파라미터 값으로 나눠주는데, 이 값이 1보다 작으면 좌표계가 넓어지면서 실제 그려지는 이미지는 축소되는 효과를 얻는다.
마지막으로 다시 0.5를 더해 기존 UV 좌표계[0.0 ~ 1.0]로 복구시킨 뒤 엠블럼 텍스처 노드의 UV에 연결해 주었다.
4. Output 및 최종 색상 합성
- 배경색과 외곽선 색상을 StrokeMask를 알파값으로 삼아 Lerp로 섞어준다. 여기에 앞서 만든 내부 그림자 마스크를 Multiply로 곱해 입체감을 더해주었다.
- 엠블럼의 경우 EmblemTint와 원본 텍스처를 곱해 색상을 지정한 뒤, 엠블럼 텍스처 자체의 알파 채널을 활용해 미리 만들어둔 배경 위에 Lerp로 깔끔하게 절삭해서 얹어준다.
마지막으로 머티리얼의 최종 출력 Opacity에 FillMask를 연결해 주면, 둥근 사각형 밖의 영역은 완전히 투명해져 UI 상에서 깔끔한 디버프 아이콘만 렌더링되게 된다.
아래는 최종 디버프 아이콘 마스터 머터리얼의 결과물이다.
디버프 아이콘 이미지 적용
이제, 디버프 별로 아이콘/배경 색상 등을 머터리얼 인스턴스로 추가해주고
PDDebuffIcon을 상속하는 위젯 블루프린트에 위젯 바인드를 해준 뒤, 적절히 이미지 사이즈를 조절해주었다. 아이콘 이미지를 설정해줄 필요는 없지만 외형이 어떤지 미리 보기 위해 세팅했다.
해당 아이콘을 담을 PDDebuffIconBarWidget을 상속하는 위젯 블루프린트에 Vetical Box반 할당해주고 런타임에서 어떤 디버프에 걸리면 어떠한 이미지를 넣어야 하는지 알려줘야 하므로 태그와 이미지를 매핑해주었다.
이후 HUD에서 디버프 리스트를 보여줄 적절한 위치에 PDDebuffIconBarWidget을 배치해준 뒤 플레이해보면 다음과 같이 디버프가 표기되는 것을 볼 수 있다.
게임 개발 지망생