목표
만들어보자 하는 마스터 머터리얼은 원형 ProgressBar이다.
Fab에서 제공되는 무료 원형 ProgressBar는 질이 좀 떨어지는 편이어서 퀄리티는 조금 신경 쓰면서 과하지 않은 ProgressBar 머터리얼을 만들고 싶었다.
그럼 왜 원형으로 ProgressBar를 만드는 것인가 하면, 선형 ProgressBar는 가로로 UI 화면을 너무 잡아먹어서, 배치 경우의 수가 한정적이기 때문에 해당 방향을 선택했다.
머터리얼 제작
1. Polar Coordinate 세팅
먼저, 원형 ProgressBar는 Percent에 따라 원형으로 진행률을 나타내주는 특징을 지닌다.
즉, 특정 지점까지 시계방향으로 그릴 수 있어야 하는데 직교 좌표계에서는 곧바로 적용하기가 까다롭다.
평면 상의 위치를 거리와 각도로 지정하는 좌표계인 극 좌표계로 변환하려고 한다.
X, Y좌표를 추출한 후 아크탄젠트(Y/X)를 적용하면 특정 지점의 각도 값을 얻을 수 있다.
아래는 [-1,1] 좌표 범위로 만들어준 뒤, 각도를 얻는 과정이다.
2. Norm Angle & Progress Mask
해당 부분은 각도 데이터를 Percent로 변환하는 과정이다.
- 아크탄젠트는 라디안 값(- ~ )을 반환하기 때문에 이를 정규화해서 (-0.5 ~ 0.5)형식의 비율로 변환
- UV 좌표계는 V가 아래로 향하기 때문에, 시계 방향이 양의 방향을 지닌다. 다만, 3시 방향부터 시작점을 잡기 때문에 0.25를 더해줘서 12시 방향에서부터 시작하도록 만들어줘야 한다.
- Frac의 경우 값이 음수면 1.0에서 뺀 값을 반환하기 때문에 기존에 10시 방향은 -0.15로 음수 였던 부분이 0.85로 바뀌게 된다.
- 이후 If 노드로 Progress에 따라서 값을 표현할 수 있도록 세팅한다.
(만약 Progress가 0.3이라면 0.0 ~ 0.3까지의 부분만 색을 표현할 수 있도록)
3. Ring Mask
해당 부분은 링의 형태로 데이터를 표현하는 방법이다.
- Dist 값은 원점으로부터 점점 커지는 방향으로 되어있는데, 원하는 건 원의 둘레를 따라 선을 그리는 것이 목표이므로 원의 둘레를 빼서 원점을 조절한다.
- 이렇게 되면 변경된 원점 기준으로 위는 양수, 아래는 음수가 되는데 두께감 있게 색칠하기 위해 거리 기준으로 판단하도록 Abs를 연결해준다.
(즉, 그림을 그릴 때, -0.02보다 크고, 동시에 +0.02보다 작은 곳을 칠하라고 말하는 게 아닌 거리가 0.02보다 작은 곳을 전부 칠하라고 말하기 위함) - SmoothStep으로 두께보다 작은 값은 0으로, 두께와 두께 + 부드러움 사이는 0.0 ~ 1.0 사이 값으로, 그 이상은 1로 색칠하도록 해준다. 원하는 부분은 0으로 색칠된 부분이므로 OneMinus로 반전을 해준다.
4. Outer Glow & Final Mask
해당 부분은 발광 효과와 링의 최종 색상을 결정하는 방법이다.
- 처음에 RingMask 부분과 유사하게, 거리가 0부터 발광 두께보다 작은 곳을 0.0 ~ 1.0으로 채우도록 만들어주고 바깥으로 갈 수록 발광이 약해져야 하므로 OneMinus로 반전을 해준다.
- Power 노드를 통해 발광 효과의 변화가 급격하게 변하도록 만들어줌과 동시에 밝기를 증폭시켜서 강한 빛을 내뿜도록 만들어준다.
- 이후 Ring과 Glow Mask를 더해줌으로써 최종 링의 표현을 만들어주고 Progress Mask를 곱해서 진행도에 따라서 표현을 할 수 있도록 만들어준다.
5. Shimmer
해당 부분은 단순히 밝기만 하면 심심할 것 같아 약간의 Panner 애니메이션을 추가한 결과이다.
- 텍스처 이미지를 띄우려면 좌표계가 필요하므로, 위에서 정의한 극 좌표계와 Dist를 Append해서 시계 방향으로 돌때 점점 값이 증가하는 좌표계를 세팅한다.
- 여기서 Panner의 Speed를 가로로만 세팅했는데, 세팅한 극 좌표계에서 U는 각도를 의미하기 때문에 시계 방향으로 흐르게 된다.
- 노이즈의 검은 부분이 링에 표기되면 0이 되기 때문에 링에 구멍이 뚫려버리는 현상이 생겨난다. 이를 방지하기 위해 [1.0 - ShimmerAmount, 1.0 + ShimmerAmount]로 재조정해서 약간의 무늬를 준다.
6. Empty Track Ring
해당 부분은 링이 그려지지 않은 부분은 검은색 링으로 그리도록 만들어주는 과정이다.
RingMask 부분과 유사하고 ProgressMask에 표기되지 않은 부분은 반전해서 그리는 부분이 차이점이다.
7. Empty Track Ring
해당 부분은 링 내부에 검은색 원을 그리도록 만들어주는 과정이다.
Dist를 기준으로 원을 그리는 점이 특징이다.
8. Output
색상과 FinalMask를 결합해서 Final Color를 결정하고 FinalMask와 위의 두 트랙을 결합해서 Opacity Override를 결정한다.
결과
이를 기반으로 머터리얼 인스턴스를 만들고, 팀 프로젝트에 쓰이는 스탯을 다음과 같이 표현해주었다.
