Download to read offline
![[Ndc11 박민근] deferred shading](https://cdn.slidesharecdn.com/ss_thumbnails/ndc11deferredshading-110602220043-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![NDC 2015. 한 그루 한 그루 심지 않아도 돼요. 생태학에 기반한 [야생의 땅: 듀랑고]의 절차적 생성 생태계](https://cdn.slidesharecdn.com/ss_thumbnails/zxw42orfsbyogfutmcuz-signature-336dceb59671a895fbf4d561f6799d39719d30f09e04cae133a46c0a8f86264a-poli-150519075553-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[2019] 언리얼 엔진을 통해 살펴보는 리플렉션과 가비지 컬렉션](https://cdn.slidesharecdn.com/ss_thumbnails/nhnforward201922-200122092627-thumbnail.jpg?width=640&height=640&fit=bounds)
![[NDC2017] 뛰는 프로그래머 나는 언리얼 엔진 - 언알못에서 커미터까지](https://cdn.slidesharecdn.com/ss_thumbnails/ndc2017splitminjungko-runningprogrammerflyingunrealengine-170428012926-thumbnail.jpg?width=640&height=640&fit=bounds)
![[0903 구경원] recast 네비메쉬](https://cdn.slidesharecdn.com/ss_thumbnails/0903recast-111221053315-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[데브루키/141206 박민근] 유니티 최적화 테크닉 총정리](https://cdn.slidesharecdn.com/ss_thumbnails/141206-141207232632-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[NDC07] 게임 개발에서의 클라이언트 보안 - 송창규](https://cdn.slidesharecdn.com/ss_thumbnails/revival-130427235801-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[IGC2018] 에픽게임즈 신광섭 - 언리얼엔진4 포트나이트 멀티플랫폼 개발 지원](https://cdn.slidesharecdn.com/ss_thumbnails/3-181023024046-thumbnail.jpg?width=640&height=640&fit=bounds)
![[데브루키]노대영_알고리즘 스터디](https://cdn.slidesharecdn.com/ss_thumbnails/devrookiealgorithm-180926091907-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Dev rookie]designpattern](https://cdn.slidesharecdn.com/ss_thumbnails/devrookiedesignpattern-190501095723-thumbnail.jpg?width=640&height=640&fit=bounds)
![[데브루키]노대영_프린이를 위하여(프로그래밍 어린이)](https://cdn.slidesharecdn.com/ss_thumbnails/forjuniorprogrammer-180926092049-thumbnail.jpg?width=640&height=640&fit=bounds)
Umg ,이벤트 바인딩, Invaidation Box
- 1. UMG, 이벤트 바인딩, InvalidationBox 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 MotionGraphic 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.
- 36.