UMG 리테이너 박스 애니메이션 제어

UMG 리테이너 박스 제어

목차

1. 리테이너 박스를 쓰는 이유

2. 위젯 생성, UI 구조짜기

3. 디졸브 머티리얼 제작

4. 리테이너 박스에 머티리얼 추가

5. 플레이 시 보이게 세팅

6. Material Parameter Collection 추가 및 설정

7.  위젯 애니메이션에서 MPC 애니메이션 추가

8. 블루프린트에서 애니메이션 세팅

 

---

 

 

UI 전체에 연출을 하기 위해 리테이너 박스를 사용하는 방법. 일본의 UI 디자이너 블로그에서 참고해 만들어보았습니다.

2020년에 작성된 글(https://limesode.hatenablog.com/entry/2020/07/14/002543)이라 현재 언리얼5에는 조금 다를수도 있습니다. 관련해서 추후에 시간이 날 때 추가해보도록 하겠습니다. 실제 업무에서 사용해본 적은 없습니다.

구현은 되지만 최적화에 관한 부분은 확인하지 못한 방법입니다. 혹시 최적화 관련해 아는 분 계시면 댓글로 달아주세요. (적합한 방법이 아니라던지..!!)

 

 

---

1. 리테이너 박스를 쓰는 이유

https://docs.unrealengine.com/4.26/ko/InteractiveExperiences/UMG/UserGuide/WidgetTypeReference/
언리얼 도큐먼트 발췌

렌더 타깃에 자손 위젯을 먼저 렌더링한 후 나중에 그 렌더 타깃을 화면에 렌더링합니다. 이를 통해 UI 가 메인 게임 렌더 빈도보다 실제로 적게 렌더할 수 있도록 빈도와 단계(phase) 모두 제어할 수 있습니다. 위젯을 그린 후 머티리얼을 렌더 타깃에 적용시켜 단순 포스트 프로세스를 적용하는 부가 효과도 있습니다.

요약

원래 한번에 불러 최적화를 위해 사용하는 용도이지만 머티리얼을 적용시켜 하위 컴포넌트 전체에 포스트 프로세스 효과를 주는데 사용할 수도 있다.

 

 

2. 위젯 생성, UI 구조짜기

우선 샘플로 쓸 위젯을 만들어보았다. 팝업이라는 가정하에 최상위에 리테이너박스를 추가해 묶어준다.

 

 

3. 디졸브 머티리얼 제작

원하는 연출의 머티리얼을 제작해준다. 현재 구글링 시 머티리얼에 관련된 많은 자료들이 있으니 하나하나 만들어보며 익혀보는 것이 좋다. 아래의 머티리얼은 메인 텍스처를 디졸브 텍스처의 알파값에 따라 표현해주는 구조이다.
텍스쳐가 Dissolve Amount(Scalar Parameter)값보다 작거나 같으면 0(표시안함), 크면 1(표시함). 그래서 Dissolve Amount의 값이 바뀜에 따라 마스크 머티리얼의 모양대로 표현이 됨. 그러므로 디졸브 표현을 해주기 위해선 Dissolve Amount의 값이 애니메이션으로 제어되어야 한다.

 

 

 

4. 리테이너 박스에 머티리얼 추가

일단 원하는 모양으로 머티리얼을 만들었으니 리테이너 박스에 추가해 보자. Effect 항목에 만든 머티리얼을 넣어주고(인스턴스화 해 사용하자) 메인텍스쳐 이름을 입력해주자.

 

 

5. 플레이 시 보이게 세팅 하면 이렇게만 보임

플레이 시 보이게 세팅하는 방법은 인터넷에 찾으면 많이나오니 생략! 플레이를 하면 이렇게 T_Dissolve 모양대로 마스킹된 이미지만 나온다. 현재는 애니메이션과 관련된 세팅을 한것이 아무것도 없으므로 움직이지 않는다. 이제 이걸 움직여주어야 한다.

 

6. 애니메이션 추가하기위해 Material Parameter Collection 추가 및 설정

원래 UMG에서 이미지로 들어간 머티리얼은 스칼라 파라미터로 설정해놓기만 해도 애니메이션에서 제어가 가능하다. 파라미터를 직접 선택해 제어하는 경우이다. 하지만 리테이너박스에 들어간 머티리얼은 불가능한데, 이걸 파라미터 컬렉션으로 만들어주면 제어가 가능하다!! 바로 이 글을 작성한 이유.

일단 UI용 파라미터 컬렉션을 만든다. UI는 많은 종류의 컬렉션이 필요하지 않으니 공용으로 쓸 용도로 하나 만들면 된다(고 한다).

생성한 MPC_UI_Common을 열면 이렇게 보이는데, 여기에 제어하길 원하는 파라미터 항목들을 추가해주면 된다. 우린 3번에서 설명했든 Dissolve Amount를 제어하길 원하므로 하나 추가해주자.

파라미터값 추가

다시 머티리얼로 돌아가, 기존의 스칼라 파라미터를 Collection Parameter로 교체해준다. Collection Parameter를 검색한 다음, Collection에 MPC_UI_Common을 넣고 파라미터 네임을 선택해준다.

 

 

7.  위젯 애니메이션에서 MPC로 애니메이션 추가

이렇게 세팅하면 UMG에서 애니메이션으로 제어가 가능해진다! 원하는 모양으로 애니메이션을 만들어준다. 이렇게 세팅할 경우의 단점은 게임을 플레이 해야지만 확인 가능하다는 것이다. UI용 테스트 레벨을 만들어 두는 것이 편하다.

 

 

8. 블루프린트에서 애니메이션 세팅

만든 애니메이션이 플레이시 보일수 있도록 간단하게 세팅해준다.

 

 

9. 그리고 플레이하면 움직인다!

10. 마무리

머티리얼 인스턴스화 했다면 디졸브 텍스쳐를 바꿀때마다 알아서 적용된다.

이렇게도 됩니다.

 

문제점

1. 파라미터가 매번 늘어나는 것
2. 파라미터를 공용으로 쓰기때문에 관리에 신경써야함
등등..

실제 업무에서 써본적은 없지만 리테이너박스를 제어하는 경우는 크~게 많지 않은 것 같아서, 필요한 경우에 한번 활용해보는 것도 좋을 듯 하다.

참고 링크

UMGでマテリアルアニメーション制御 2020 - みつまめ杏仁