UMG , 이벤트 바인딩, Invalidation Box

1. UMG, 이벤트 바인딩,
Invalidation Box
2019. 06
데브루키 스터디 대영

2. 발표 주제 선정 이유
• Unreal의 UI를 책임지는 UMG
• Unreal Korea 영상 중 잘 정리된 부분이 있어 탑승
• 참고자료
Unreal Korea - UMG 시작에서 최적화 까지
https://www.youtube.com/watch?v=6SaKxTv1GII

3. 목차
• UMG란?
• UMG 튜토리얼 간단 살펴보기
• 함수 , 프로퍼티, 이벤트 바인딩
• Invalidation Box? 와 디버깅 툴

4. UMG란?
• Unreal Motion Graphic Designer 줄임말
Unreal 게임내 HUD, 메뉴, 유저 인터페이스 만들고 사용가
능한 제작툴
• UMG의 핵심은 Widget과 Widget으로 구성된 Widget
BluePrint

5. UMG 모듈 추가하기
• UMG를 C++ 코드에서 사용하기 위해서 Build.cs에서 모듈
종속성을 추가해줘야한다.
• UMG, Slate, SlateUI를 추가해줘야함(UMG는 Slate,
SlateUI에 종속되어 있음)

6. GameMode 확장
• UMG를 플레이어에게 표시하기 위해서는 GameMode에
PlayerController 설정이 되어야함
레벨 전환시 게임모드가 달라질 경우 기존 UI가 제거됨
확장한 게임모드 적용
확장한 컨트롤러 적용

7. GameMode 확장
• UserWidget을 AddViewport()를 통해 화면에 출력 가능
ReomoveFromViewport() 화면에서 제거 기능.

8. PlayerController 확장
• UMG의 UI 상호작용을 위해 PlayerController를 확장해준다.
• PlayerController에서 마우스 커서를 게임 화면에 표시할 수 있음.
• 작성된 PlayerController는 앞서 확장한 GameMode Controller에 적용
시켜야한다
마우스 커서 표시
입력이 게임 과 UMG 상호작용이
되도록 설정

9. UserWidget 만들기
• 앞서 설명한 것처럼 Text, Image 등 UI의 요소는 Widget
Widget을 사용자가 조합하여 만들어 정의하는 것을
UserWidget이라 하고 이를 로드 및 재활용 하기 위해
위젯 블루프린트로 만든다

10. UserWidget 만들기
• 디자이너 탭에서 UI 구성요소를 설정할 수 있음.
Widget 자식 Widget을 포함시킬 수 있는 여부가 다름 , 인지하고
UI 만드는게 중요할 거 같음.
• 디테일에서 Widget의 프로퍼티를 설정 및 바인딩 할 수 있음.
• 사용자 생성에는 사용자가 정의한 WBP 모두가 표시되므로
찾기 어려워지므로 네이밍 규칙을 만들어야함
바인드

11. Slot
• Text 나 Image는 유니티 UI 처럼 독립적으로 위치 조정이
불가하고 Panel에 있는 Widget에 포함되면 디테일에
Slot이라는 Widget 좌표, 크기 등을 설정할 수 있게 됨.
Canvas Panel, Grid Panel 등 각각의 독자적인 Slot 제공.

12. UMG 출력해보기
• 앞서 확장된 GameMode::BeginPlay 에서 시작 위젯을
AddViewport 해줬기 때문에 화면에 출력이 된다.
확장된 Game Mode 시작 위젯

13. UserWidget 바인딩
• UMG에 함수, 프로퍼티, 이벤트를 바인딩하여
UI 업데이트를 할 수 있음.
• Unreal Docs 바인딩 권장 순
이벤트 > 프로퍼티 > 함수
프로퍼티, 함수 바인딩은 매 프레임
이벤트 바인딩을 통해
이벤트를 받을 경우만 업데이트 하는 경우가 바람직하다

14. 함수 바인딩
• UMG에서 함수 바인딩을 위해
변수에 접근할 수 있게 지정해준다.
• Wiget에서 바인딩 할 부분을 선택
하고 생성해준다.

15. 함수 바인딩
• 함수를 정의하여 Widget의 바인딩 한다.
• 오른쪽 이미지를 보듯이 매 프레임마다
정의한 함수를 호출 및 형변환.(비효율적)

16. 프로퍼티 바인딩
• 이벤트 그래프에서 레퍼런스
변수를 저장하여, UI 업데이트 시
레퍼런스에 접근할 수 있도록 바인딩

17. 프로퍼티 바인딩
• WBP 툴에서 레퍼런스 변수를 추가 및
로직 구성 해줌.

18. 프로퍼티 바인딩
• 바인딩 할 프로퍼티를 지정해준다

19. 프로퍼티 바인딩
• 함수 바인딩과 다르게 매 프레임마다
형변환을 해줄 필요는 없지만
매 프레임마다 접근해야하는 문제는
계속 발생됨.

20. 이벤트 바인딩
• UI 변경을 원할때만 변경되는
이벤트 바인딩, 그래프에서
해당 위젯에 접근하기 위해서는 디테일
변수인지 Flag Check를 해준다.
그래프에서 해당 위젯에 접근하
려면 체크!
프로퍼티 및 함수 바인딩
제거해주세요

21. 이벤트 바인딩
• 바인딩 할 이벤트를 매크로를 통해
등록하고 이벤트를 정의해준다.
이벤트를 알리고 싶을 때
Broadcast를 통하여 이벤트 통지.

22. 이벤트 바인딩
• 프로퍼티 바인딩 부분이 일부 포함되
며 뒤에 이벤트 바인딩 및
이벤트 Rcv 로직을 구현해줘야함.
프로퍼티 바인딩
MyPawn에 정의한
이벤트에 바인딩 해준다

23. 이벤트 바인딩
• 앞에서 체크한 변수인지
flag를 통해 WBP의 Widget 접근 가능
이벤트 호출 시 로직을 작성한 후 테스
트
변수 인지

24. 이벤트 바인딩
• 특정 이벤트가 호출될 때
호출 되는것이 확인 가능하다.

25. 이벤트 바인딩
• 특정 위젯은 디테일에서 이미 정의된 이
벤트를 바인딩 할 수 있음.

26. Invalidation Box
• UMG 최적화 방법 중 하나, 위젯이 변경
되는 내용이 없는 경우 Invalidation Box
하위 자식으로 넣으면 자식의 지오메트리를
캐싱하여 Tick, Paint 등이 처리되지 않음
UI 렌더링 속도를 늘릴 수 있음.
오늘 알아볼 것

27. Invalidation Box 적용법
• 변화가 없을 것으로 예상 될 위젯을
Invalidation Box 자식으로 두거나
우 클릭하여 감싸기를 해준다. 끝?

28. 효과가 있을까?
• 변화가 없을 것으로 예상 될 위젯을
Invalidation Box 자식으로 두거나
우 클릭하여 감싸기를 해준다. 끝?

29. Invalidation Box 알아두어야 할 점
• 자식들이 변경이 있는 경우 통보를 받고,
변경이 생길 경우 Invalidation Box가
포함한 자식 위젯이 캐쉬 생성을 다시 한다. (
비효율적)
캐시된 Widget
자식 위젯 변경
캐싱 다시 시작

30. Invalidation Box 알아두어야 할 점
• 특정 자식 위젯을 캐싱에서 제외
하고 싶다면 디테일 Perfomance에서
Is Volatile Flag를 체크해주자
• 자식 위젯이 위치만 변경된다면
- relative transform Flag 체크
(스크롤에 좋음)

31. Invalidation Box 디버깅
• 위젯 블루프린트 편집창에서 위젯 리플렉터 아이콘
클릭 또는 Ctrl + Shift + W를 눌러 Invalidation 디버
깅을 체크하면
디버깅을 할 수 있음.
인벨리데이션 디버깅
인벨리데이션 적용
된 Widget

32. Invalidation Box 디버깅
• 초록색 – 캐시된 위젯
빨강색 – 현재 프레임에서 캐시 무효된 위젯
노랑색 - Volatile 체크 위젯
파랑색 – Relative Transform 체크 위젯

33. Invalidation 확인
인벨리데이션 적용 전 인벨리데이션 적용 후
인벨리데이션 적용 에셋 변경 시
• 버튼 3개, 이미지 4개, 스크롤 박스 1개
Invalidation On/Off 비교 결과
Swidget::Paint Count가 줄어들고,
Caced Elements 항목에 추가 된다
Invalidation 위젯 변경시 Paint Count가
증가하는 것을 확인 할 수 있음.

34. Invalidation Box 디버깅
• 최근(2019.06 기준)에 적용된 기능이라
언리얼 Docs에도 자세히 설명된
내용이 없고 효과적으로 사용할 수
있는 방법 연구 필요.

35. Q&A

36. 감사합니다