UI아트를 하며 언리얼엔진4 UMG의 기초 사용법과 R&D를하며 느낀 장단점 및 생각을 정리하였습니다.

1. UI아트 작업자를 위한
언리얼 엔진4
UMG #1
2018. 03. 24
데브루키 조홍기(고기님)

2. <사용 주의점>
>Unity3D처럼 직관적인 부분이 생각보다 없다
당혹스럽다
>기능을 위해 노드스크립팅이 필요한 경우가 많고
문제해결을 위한 전담 클라팀이 필요할 수 있다
>UMG 위젯유형의 기능과 그래프기능이 밀접하다
협업하는 아트, 클라팀의 제작구조 공유가 필수다

3. <순서>
<1> 기본 UI 작업을 위한 세팅
<2> 위젯 블루프린트(WBP) 사용
<3> 위젯 블루프린트 버튼의 간단한 그래프
<4> UI아트의 WBP사용 범위 예측

4. <1>
기본 UI 작업을 위한 세팅

5. <1> 기본 UI 작업을 위한 세팅
1.에픽게임즈 런처 실행
2.버전설치 후 실행
3.새 프로젝트 생성
4.기본폴더 생성 완료

6. <1> 기본 UI 작업을 위한 세팅
5.기본폴더엔 UE4프로젝트
실행파일이 생김
6.주로 Content 폴더 아래에
작업물을 배치

7. <1> 기본 UI 작업을 위한 세팅
1.편집-프로젝트세팅-맵&모드
2.기본 게임모드클래스 선택 가능
3.그 중 HUD Class 변경
4.내가 만든 HUD Class 필요
<HUD 연결하기>

8. <1> 기본 UI 작업을 위한 세팅
5.콘텐츠 브라우저상
우클릭-블루프린트 클래스 생성
6.모든 클래스에서 HUD형 생성
7.세팅-맵&모드에서
생성한 HUD Class 선택
8.실행시 HUD Class 연동완료
<HUD 연결하기>

9. <1> 기본 UI 작업을 위한 세팅
1.콘텐츠 브라우저에서 우클릭
User Interface-위젯블루프린트 생성
2.이름을 정하고 저장
3.위젯 블루프린트(WBP)는
Unity3D의 프리팹개념과 유사함
<위젯블루프린트(WBP) 만들고 뷰포트에 띄우기>

10. <위젯블루프린트(WBP) 만들고 뷰포트에 띄우기>
<1> 기본 UI 작업을 위한 세팅
4.만들어둔 HUD Class의
이벤트그래프 탭-BeginPlay
5.Create Widget을 찾고 연결 후
Class에 HUD위젯BP 등록
6.Return Value는 변수승격 후
변수패널에서 연결을 끌어와
Add to Viewport 생성

11. <위젯블루프린트(WBP) 만들고 뷰포트에 띄우기>
<1> 기본 UI 작업을 위한 세팅
*그냥 검색되는 패널과 연결에서 당겨 검색되는 패널이 서로 다르다
그냥 검색에 없다면 연결검색에서 찾아야 한다
내가 쓰려는 함수이름을
잘 모르는 아트팀 으로선
아주 당황스러운 부분..

12. <위젯블루프린트(WBP) 만들고 뷰포트에 띄우기>
<1> 기본 UI 작업을 위한 세팅
1. WBP생성
2. HUD클래스와 WBP연결
3. 게임HUD모드 변경
완료 후 게임상 띄워진 HUD

13. <1> 기본 UI 작업을 위한 세팅
>여기까지의 작업으로 가능해야 하는 것들
>위젯블루프린트(WBP)와 HUD블루프린트 클래스(BPC)를
만들고 프로젝트 세팅에 기본HUD로 등록
>HUD BPC에서 WBP를 뷰포트에 표시하도록 노드제작
>게임실행하여 HUD가 뜨는지 확인

14. <2>
위젯 블루프린트(WBP) 사용

15. < 위젯 블루프린트(WBP) 디자이너 기본메뉴 >
<2> 위젯 블루프린트(WBP) 사용

16. < 위젯 블루프린트(WBP) 그래프 기본메뉴 >
<2> 위젯 블루프린트(WBP) 사용

17. WBP디자이너에서 모양을 배치하고
그래프에서 노드로 기능연결을 만드는 방식
그래프노드는 프로그래밍 함수와 수식등을 연결하는 형태이므로
사용을 위해선 기본 프로그래밍 개념 공부가 필요
UI아트의 주 작업은 디자이너로 한다
디자이너 패널과 구성요소 사용에 대한 개념은
익혀두는 것이 좋다.
<2> 위젯 블루프린트(WBP) 사용

18. http://api.unrealengine.com/latest/KOR/Engine/UMG
/index.html
UMG전체 항목들은 언리얼 메뉴얼 참조
Google 검색 : 위젯 유형 참고서
<2> 위젯 블루프린트(WBP) 사용

19. <디자이너에서 자주 쓰이는 항목>
계층을 쌓는 구조는 Unity3D와 유사하나
자식을 갖는 개수가 위젯 유형마다 달라서
이 부분을 알고 작업이 필요
자식 개수 제한으로 패널 유형의
사용빈도가 매우 높다
이 부분을 잘 신경쓰며 작업해야
좋은구조로 디자이너를 사용가능
<2> 위젯 블루프린트(WBP) 사용

20. Draw As Box:
이미지 유형들은 Draw As설정을
이용해 Sliced(나인패치) 가능
하지만 이미지에 일일히 넣어주는
방식밖에 찾지 못하겠음
<2> 위젯 블루프린트(WBP) 사용

21. Canvas Panel:
Unity3D의 Canvas Panel과 유사하다
자손들의 앵커를 받아주고 Z Order를 갖게 해주며,
Drawcall을 새로 생성하고 Batching 한다
실질적인 앵커가 가능한 패널은 이것 하나이며 나머지 요소들은
Alignment만 가능하다
<2> 위젯 블루프린트(WBP) 사용
Overlay:
여러자손을 갖는 패널이지만
Z Order조절이 불가능, 계층순서 드로우로
같은 Atlas에서도 Batching이 안돼 Drawcall이 계속 늘어난다
사용상 분명히 알아두며 작업해야 하는 부분

22. Spacer:
스페이서 자체는 시각표현이 없으나
다른위젯 사이에 패딩을 제공한다
그리드형태 박스위젯 하위에 넣어
다른 위젯자손간 간격과 패딩을 조절한다
크기조절이 가능해 개별 패딩없이도
원하는 간격을 맞추기에 용이하다
<2> 위젯 블루프린트(WBP) 사용

23. 사용자 생성 유형:
생성된 WBP는 다른 WBP상에서 불러와
사용이 가능하다
이걸 이용해 각 기준패널 배치 후
그에 맞는 WBP를 제작하는
작업방식이 가능하고
이것은 동시작업이 불가능한 WBP에 필수적이다
<2> 위젯 블루프린트(WBP) 사용

24. 변수인지 유형:
UMG요소는 디자이너 디테일패널상 변수인지 체크를 통해
UMG그래프 노드 작업 시 변수로 사용할 수 있게 된다.
기능을 위해 필수적으로 변수화 해야하는 경우가 생길 수 있다.
<2> 위젯 블루프린트(WBP) 사용

25. Invalidation Box :
자손위젯들을 캐싱하며 캐싱된 위젯은 프리패스, 틱, 페인트 처리 되지 않는다
(캐싱과 무효화 관련해선 프로그램팀의 작업이 필수)
<2> 위젯 블루프린트(WBP) 사용
<최적화 기능 패널>
Retainer Box :
렌더타겟에 자손위젯을 먼저 렌더링 후, 화면에 다시 렌더링 한다
이것은 렌더링 빈도를 제어할 수 있다.
렌더타겟에 머티리얼을 적용시켜 단순 포스트 이펙트를 적용하는 효과도
가질 수 있다. (재밌는 기능)

26. Retainer Box :
렌더타겟에 단순 포스트 프로세스를 적용하는 효과도 가질 수 있다. (재밌는 기능)
<2> 위젯 블루프린트(WBP) 사용
<최적화 기능 패널>
리테이너박스 디테일패널 Effect에는
머티리얼을 적용 할 수 있다.

27. Retainer Box :
렌더타겟에 단순 포스트 프로세스를 적용하는 효과도 가질 수 있다. (재밌는 기능)
<2> 위젯 블루프린트(WBP) 사용
<최적화 기능 패널>
디테일패널 Effect에 머티리얼이 없을 시

28. Retainer Box :
렌더타겟에 단순 포스트 프로세스를 적용하는 효과도 가질 수 있다. (재밌는 기능)
<2> 위젯 블루프린트(WBP) 사용
<최적화 기능 패널>
디테일패널 Effect에 알파마스크 머티리얼 적용 시

29. >각 위젯유형들의 기능은 특징이 다양함
>클라이언트와 긴밀한 협작이 필요
>아트작업자의 실제 블루프린트 사용은
프로그래밍 지식과 이해가 어느정도 필요하며
생각보다(에픽게임즈의 광고멘트보다) 어렵다
<2> 위젯 블루프린트(WBP) 사용

30. <3>
위젯 블루프린트 버튼의
간단한 그래프

31. <3> 위젯 블루프린트 버튼의 간단한 그래프
<WBP에서 그래프 노드로 간단한 메뉴 켜고끄기>

32. <3> 위젯 블루프린트 버튼의 간단한 그래프
<WBP에서 그래프 노드로 간단한 메뉴 켜고끄기>
1.
MyHUD에서 버튼을 누르면
MyMenu가 등장
2.
MyMenu의 Exit버튼을 누르면
MyMenu가 꺼지도록 만들자

33. <3> 위젯 블루프린트 버튼의 간단한 그래프
1. MyHUD에서 적당히 버튼 생성 후
텍스트로 이름을 표현해준다
(예:Call Menu)
2. MyHUD에서 사용자생성[MyMenu]를
계층구조로 끌어오고
디테일의 Visivility를 Hidden으로 설정

34. <3> 위젯 블루프린트 버튼의 간단한 그래프
계층상 MyMenu는 Visivility가 Hidden이므로
실행해도 보이거나 반응하지 않는다.

35. <3> 위젯 블루프린트 버튼의 간단한 그래프
MyMenu를 변수인지 체크
MyHUD의 임의버튼에서
OnClicked 이벤트 그래프 생성
Set Visibility함수를
OnClicked 이벤트에 연결하고
타겟에 변수화한 MyMenu를 붙인다
상태값은 Visible로 바꾼다

36. <3> 위젯 블루프린트 버튼의 간단한 그래프
실행하여 이벤트연결한 버튼을 누를시
MyMenu가 생성되는것을 잠시 감상
하지만 메뉴를 끌수 없으므로
MyMenu의 Exit버튼에도 기능을 달자

37. <3> 위젯 블루프린트 버튼의 간단한 그래프
Exit 버튼에서 OnClicked 이벤트를 만들지만
MyMenu 자체의 Self Visibility를 바꿀거라
버튼 변수화는 필요 없다
Set Visibility를 연결하고
상태를 Hidden으로 바꿔두면 끝
함수가 타겟을 셀프위젯으로 잡고있다

38. <3> 위젯 블루프린트 버튼의 간단한 그래프
이제 실행하면 메뉴를 켜고 끄기가 가능해진다

39. <3> 위젯 블루프린트 버튼의 간단한 그래프
간략한 기능들은 버튼의 스테이터스를
이벤트노드로 연결하여 가능
그러나 복잡한 함수,변수가 필요한 작업은
프로그램팀과 협의가 필수적

40. <4>
UI아트의 WBP사용 범위 예측

41. <4> UI아트의 WBP사용 범위 예측
실제 프로젝트 협업상 두가지 케이스 예상 가능
-케이스1
포토샵 시안작업과 Paper2D를 이용한 리소스전달 위주의 작업
-케이스2
UMG디자이너를 이용한 언리얼엔진상 UI디자인 작업

42. -케이스1
포토샵 시안작업과 Paper2D를 이용한 리소스전달 위주의 작업
장점
1. 시안과 비쥬얼 리소스 제작 효율이 좋다
2. 엔진교체로 인한 적응비용이 훨씬 덜하다
단점
1. 인터랙션이 많은 UI의 협업은 핑퐁요소가 많아 관리하기 힘들다
2. 리소스 최적화에 대한 결과가 안좋을 수 있다
<4> UI아트의 WBP사용 범위 예측

43. -케이스2
UMG디자이너를 이용한 언리얼엔진상 UI디자인 작업
장점
1. 인터랙션과 모션 UI에 욕심을 내기 수월하다
2. 리소스 최적화를 겸한 UI 제작이 가능하다
단점
1. 엔진과 UMG개념, 최적화 요소에 적응과 대응이 필요
2. 긴밀한 전담 클라팀 없이는 작업효율에 한계가 있다
3. 적응에 따라 작업결과를 내기 위한 시간이 다르다
<4> UI아트의 WBP사용 범위 예측

44. UI아트팀도 UMG사용이 가능하려면
관련작업에 적극 대응해줄 팀이 필수적
대응력을 높이고 핑퐁작업을 최소화 하는 만큼
UI인터랙션과 UI모션에 대해 목표치를 높게 잡는 것이 좋다
이 부분에 목표치 적용이 힘들다면
UI아트팀의 UMG사용은 최소화 하고 리소스제작에 집중하는 것이
더욱 효율이 좋을 것
<4> UI아트의 WBP사용 범위 예측

45. 발표는 여기까지 입니다
감사합니다
Q & A