Umg ,이벤트 바인딩, Invaidation 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. 감사합니다