13. 파라미터와 인스턴스로 모서리가 둥근 사각형 패널 만들기

---

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다.

내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다.

---

1. 파라미터(Parameter)란? 

먼저 파라미터가 무엇인지 알아봅시다. 

보통 매개변수라고 하면, 

시스템이나 '함수의 특정한 성질'을 나타내는 변수라고 말합니다.

 

좀 어렵죠?😅😅

쉽게 말하면 함수에 있는 파라미터 값 A를 늘리면 원이 되고, 줄이면 사각형이 되는, 

특정한 성질을 제어하는 변수를 일컫습니다. 

 

이전에 회전 기능을 만들 때, 파라미터를 사용해 보았어요.

파라미터 θ의 값을 조정해서 '회전'을 제어했습니다.

https://wdnote.tistory.com/211

8. 텍스쳐 다루기 (2) 텍스쳐 회전(Rotate) 구현하기

 

이번에는 파라미터를 만들고, 이 파라미터로 정확히 어떤 일을 할 수 있는지 알아보겠습니다.

모두 콘텐츠 브라우저에서 머티리얼을 만들고 M_RoundRect라고 이름붙여주세요. 

 

그럼 지금부터 시작하겠습니다.

 

---

2. 파라미터와 함수로 조정

오늘 만들 최종 머티리얼의 모습입니다.  파라미터와 함수로 '모퉁이 둥글리기(Border-Radius)'와

선 두께를 지정하고, 색상을 바꿀 수  있는 머티리얼을 만들어 보겠습니다.

 

2-1) OuterRect 만들기

모서리가 둥근 사각형을 만드는 함수 GeneratedRoundRect 를 써서 둥근 사각형을 만들겠습니다.

마우스 오른쪽 버튼 또는 팔레트 패널에서 RoundRect로 검색하면 쉽게 찾으실 수 있습니다.

 

이 때 파라미터 값을 만들 건데, ConstantScala를 만들어서 마우스 오른쪽 버튼 → 파라미터로 전환하기(Convert To Parameter)를 누르면 해당 개체는 파라미터로 변환됩니다. 

 

총 3개의 파라미터 값을 먼저 생성할 것입니다. 

 

전체 크기를 만드는 Scale, 

모퉁이가 둥근 정도를 만드는 CornerRadius,

가장자리 부분이 부드럽고 날카로운 정도를 나타내는 Sharpness 

3개의 값을 만들어 위와 같이 연결해 주세요.

 

그리고나서 값을 설정하겠습니다.

파라미터 값을 누르고 상세설정(Details) 패널에서 

Scale(0.95), CornerRadius(0.05), Sharpness(8)을 입력해 주시면 됩니다.

---

2-2) InnerRect

이번엔 안쪽 영역을 담당할 InnerRect를 제작해보겠습니다.

아래 두 가지만 주의해서 만드시면 됩니다. 

---

A.  Border Parameter

이번에는 '외곽선'을 담당하는 Border 파라미터를 추가하여

OuterRect의 Scale 값보다 Border의 값 만큼 '작은' InnerRect를 생성해 보겠습니다.

이렇게 하면, Outer Scale을 조정하더라도, 자동으로 InnerRect를 작게 만들 수 있어서 편리할 것입니다.

 

---

B.  Border Parameter

(위 이미지는 잘못 조절된 InnerRect의 CornerRadius로, OuterRect의 Corner보다 작아야 어색하지 않습니다.)

 

또한 영역의 크기가 작아진 만큼, CornerRadius값도 일정 수준 작게 만들어야, 

InnerRect의 모서리가 어색하지 않을 수 있습니다.

그래서 곱하기(Multiply)를 0.6 적용하여 보정하였습니다.

---

2-3)InnerRect에서 OuterRect를 빼기(Subtract)

자 이렇게, 큰 쪽에서 작은 쪽을 빼면, 외곽선의 영역'을 구할 수 있게 되었습니다! ㅎㅎ

이제 색상을 부어줄 준비를 하겠습니다.

---

2-4) 파라미터로 색 칠하기 

총 두 군데에 색상을 칠해야 합니다. 첫 번째는 InnerRect, 두 번째는 Border 영역입니다. 

하나하나 만들어 보겠습니다.

 

해당 연산에는  합성 시에는 주로 LinearInterpolate를 이용하시기를 권합니다.
곱하기나 블렌드 효과를 쓰면 색상이 변경될 우려가 있기 때문입니다.

 

A.  InnerRect에 색상 칠하기

InnerRect의 GeneratedRoundRect의 Result Output을 끌고 와서 

LinearInterpolate의 Alpha Input Pin에 연결합니다.

 

이렇게 되면 RoundRect의 사각형을 기준으로 검은 영역은 A색으로 표시되고, 흰 색은 B 색상으로 생성됩니다.

위의 경우는 A 입력핀에 아무것도 연결되어 있지 않으므로 검은색으로 그대로 출력되고, 

B 입력핀 연결된 FillColor 파라미터 값이 흰색 영역에 채워집니다.

 

B.  Border에 색상 칠하기

이번엔 조금 어렵습니다. 외곽선 영역에 BorderColor 파라미터 색상을 칠하고,

나머지 영역을 InnerRect로 채워야 합니다.

 

새로 LinearInterplate를 만들고, 그러면 외곽선 영역을 Alpha에 연결시킵니다.

아까와 마찬가지로 B는 흰색 영역을 채우고, A는 검은 색영역을 채웁니다. 

 

그렇다면  InnerRect색상을 만든 Linear Interpolate 값을 가져와서

A에 연결하고, B는 Border 컬러를 채우면 외곽선 색상과 안의 사각형 색상이 채워질 수 있습니다.

 

3. 출력 준비

그런데 외곽에 있는 검은 색이 거슬리는군요.

 

이 부분은 알파 채널로 해결합시다.

현재 제작된 영역은 OuterRect의 출력 영역 안을 잘라서 만든것이므로 

OuterRect가 표시된 영역의 나머지는 투명하게 처리해서 깔끔한 모서리가 둥근 사각형을 만들 수 있습니다.

 

OuterRect의 GeneratedRoundRect의 Result 출력값을 가져와 Opacity에 연결합시다.

그러면 0인 부분은 출력되지 않습니다.

 

그리고 방금 제작했던 Linear Interpolate를 Emissive Color로 출력하면

모서리가 둥근 사각형에 외곽선을 적용한 머티리얼을 제작했습니다!

---

4. 파라미터의 출력 순서와 그룹핑

파라미터 패널로 가시면 현재 제작된 머티리얼의 파라미터값을 제어할 수 있습니다.

이 부분도 정리를 하면 편한데요, 개별 파라미터를 아래와 같이 설정하시면 됩니다.

 

저희는 현재 총 6개의 파라미터를 가지고 있고, 

각각의 파라미터에는 Sort Priority 과 Group 값이 있습니다.

아래의 표를 보시고, 값을 입력해 주세요.

파라미터 이름	그룹()	정렬 우선순위(Sort Priority)
Scale	Foundation	0
Border	Foundation	1
CornerRadius	Foundation	2
Sharpness	Foundation	3
FillColor	Color	0
BorderColor	Color	1

 

다 되었으면 저장을 누르고, 파라미터 패널을 보고 확인하시면 아래와 같은 구성으로 되어 있을 것입니다.

 

자 이제 완성입니다.

---

5. 머티리얼 인스턴스 만들기(Creatre Material Instance)

마지막으로 머티리얼로 머티리얼 인스턴스를 제작해 보겠습니다.

이전 과정 모두 머티리얼을 만드는 '원리'를 제작한 것입니다.

 

이제 머티리얼에 마우스 오른쪽 버튼 → 머티리얼 인스턴스 만들기(Create Material Instance)를 누르면

해당 머티리얼의 제작 원리를 바탕으로 결과값을 여러가지로 바꿔 다양한 인스턴스를 제작하실 수 있습니다.

 

다음 포스팅부터는 머티리얼을 제작한 것을 바탕으로, 

언리얼에서 UI를 제작해 보겠습니다 😊😊😊