Unreal Fest 2020에서 발표한 AAA 게임 UI 최적화 및 빌드하기 세션을 듣고 정리한 자료입니다.

1. DevRookie
AAA게임 UI
최적화
및
빌드하기
2022.04.30
By TonyChoiMS

2. 개요
AHUD::Tick
CreateWidget
DrawWindow
SlatePrepass
SMeshWidget
Index
01
02
03
04
05
06

3. 개요
UI는 왜 최적화를 해야할까?

4. UI는 왜 이렇게 비싼 비용이 드는 것일 까요?
간단한 것 같으면서도 심오한듯한 UI의 세계..
개요
01
4

5. 게임은 갈수록 구체적이고 더 자세한 정보들을 유저에게 제공해주길 원
합니다.
- 모바일 게임
개요
01
5

6. 게임이 고도화됨에 따라 정보량이 계속 늘어나고 있는 이유도 있습니다.
- 모바일 게임2
개요
01
6

7. 그래픽 퀄리티가 좋아지는 것은 인게임 뿐만 아니라 UI 또한 마찬가지인
이유도 있을 것입니다.
- 모바일 게임3
개요
01
7

8. 모바일 뿐만 아니라 PC 게임도 마찬가지입니다.
- PC 게임
개요
01
8

9. - 개발 할 때 사람들은 UI가 빠르게 반복처리 되길 바라면서도 프로그
래머 병목 현상은 없기를 바랍니다.
- 다이나믹 텍스트, 복잡한 레이아웃 규칙들은 UI로 하여금 많은 퍼포먼
스를 요구하게 됩니다.
개요
01
9

10. AHUD::Tick
Tick 함수 제거를 고려해야 합니다.

11. - HUD는 일반 액터와도 같으며, Tick 함수 또한 그와 같은 행동을 합니
다.
- ‘무조건 사용하면 안된다.’ 와 같은 뜻은 아니며, Tick을 제거한다고
무조건 퍼포먼스 향상을 가져온다는 보장은 없습니다.
AHUD::Tick
02
11

12. - Tick을 삭제하는 진짜 이유는 구현하기 쉽다는 이유로 매 프레임마다
작업을 추가하는 일을 방지하기 위해서입니다.
- 게임 코드와의 통신, 위젯 이동, 위젯 생성/삭제
- 이를 방지하기 위해 이벤트 기반의 작업으로 진행하는 것을 권장합니
다.
- TimerEvent를 통해 원하는 만큼만 갱신될 수 있도록 작업
AHUD::Tick
02
12

13. CreateWidget
위젯을 런타임에 생성하다.

14. - ‘CreateWidget’ 함수는 매우 비싸기 때문에 사용에 주의해야 합니다.
- 컨텐츠 상 너무 잦은 함수 호출을 하게 되는 경우, Pooling해서 사용
할 것을 권장합니다.
- 시작(Loading) 시간에 Pool을 채운 후, 필요할 때 가져와서 재사용
- 모든 위젯을 Pooling하는 것을 권장하지는 않습니다.
CreateWidget
03
14

15. DrawWindow
프로파일링 시 확인해야 할 목록

16. - 프로파일링 할 때 볼 수 있는 목록
- 위젯 최상위 계층부터 하위까지 재귀적으로 호출되며 각 위젯의 Paint
함수가 호출되는 것을 얘기합니다.
DrawWindow
04
16

17. - Paint 함수는
1. 내부적으로 블루프린트 위젯과 네이티브(C++) 틱 함수를 호출합니다.
2. Hit Test Grid 를 리빌드 합니다.
3. 렌더러 정보를 Slate Element Batcher에 추가합니다.
Paint Function
04
17

18. - Hit Test Grid는
1. UI와 상호작용을 하기 위해 Hit Test를 진행해야 하는 위젯들을 모아
놓은 컨테이너
2. 쿼드 트리로 구성되어 있습니다.
3. Hit Test를 진행할 위젯들을 다시 선별하여 트리를 재구성하는 것을
의미합니다.
Hit Test
04
18

19. - 위젯이 보이지만, 상호작용이 필요한 위젯이 아닌 경우에는 Visible
Type을 HitTestInvisible 또는 SelfHitTestInvisible로 설정하는 것을 권장
합니다.
- 위젯을 Hit Test Grid에 추가하지 않게 하기 위해서입니다.
Hit Test
04
19

20. - HitTestInvisible : Hit Test Grid에 자신의 모든 자손에 대한 검색을
중지합니다.
- SelfHitTestInvisible : 자기 자신만 Hit Test Grid에 포함시키지 않습
니다.
Hit Test
04
20

21. - Paint 함수는 렌더러 정보를 Slate Element Batcher에 추가합니다.
- FSlateElementBatcher
- UI Slate를 렌더링하기 위해 정보를 저장/관리 하는 클래스
Slate Element Batcher
04
21

22. - 이 행동들을 각 컨테이너에 재귀적으로 호출하게 됩니다.
- 그렇기 때문에, 컨테이너 안에 컨테이너를 넣고, 그 안에 또 컨테이너를 넣
으면 재귀 함수 호출 수가 더욱 늘어나게 되어 vtable 룩업 속도도 저하되며,
CPU 캐시 미스가 발생할 수 있습니다.
- 이를 최적화 하기 위해 UI 위젯 평탄화 작업을 진행합니다.
- UMG UI 디자이너의 위젯 트리는 위젯의 코드를 처리하는 Task Graph를 직
접적으로 나타내고, 이 트리가 작을 수록 호출하는 함수 수도 줄어든다는 것
을 의미합니다.
Paint Function
04
22

23. SlatePrepass
의문을 갖게 되는 항목

24. - 프로파일링 항목
- 엔진 프로그래머가 의문을 던지는 부분
-프로파일링 장치가 너무 적어서 처음엔 무엇을 하는 부분인지 알 수 없음.
SlatePrepass
05
24

25. 1. 각 위젯의 모든 캐시 지오메트리 엔트리를 리빌드 하는 역할을 합니
다.
- 리빌드 하기 위해 위젯의 계층구조 바닥까지 내려갔다가 맨 위까지 다시 올라옵니다. (leaf-most 노
드)
- 따라서 위젯들의 지오메트리는 계층구조의 위아래 모두에 영향을 준다는 것을 알 수 있습니다.
- 예를 들면 테이블 셀의 크기를 결정하는 것은 그 안의 컨텐츠 뿐만이 아닙니다.
- 열과 행의 크기도 셀의 크기를 제한하는 역할을 합니다.
SlatePrepass
05
25

26. 2. 이 함수는 각 프레임마다 위젯 트리 전체를 재계산한 캐시 지오메트
리 값을 가져옵니다.
- 위젯을 숨길 때 Visible Type을 Hidden 보다는 Collapsed 을 사용하는 것을 권장합니다.
SlatePrepass
05
26

27. - Hidden을 사용하면 위젯이 안보이는 상태가 되더라도, 주변 위젯의 지오메트리에 영향을 주기
때문입 니다.
- 숨겨진 위젯의 지오메트리를 계산하려면 그 위젯 자손들의 지오메트리도 계산해야 하기 때문인
데, 이는 자 손 위젯들이 화면 상에 렌더링 되지 않더라도 마찬가지 입니다.
- Collapsed를 사용하면 SlatePrepass가 leaf-most 노드로 내려가는 중간 재귀 함수 호출을 중
단시켜 줄 수 있는 유일한 Visibilty Setting입니다.
※ Hidden이 필요한 경우도 있으나, 최대한 자제.. (UI 디자이너와 협의 필요)
SlatePrepass
05
27

28. 1. Invalidation Box 컨테이너 하위 트리의 레이아웃과 변동성 캐싱
2. 퍼포먼스가 개선될 수도 있지만, 애니메이션이나 레이아웃과 관련된
문제가 발생할 수도 있음.
1. 이와 같은 이슈를 해결하기 위해 Invalidation Box를 삭제하는 것으로 문제를 해결하는 것을 본 적이
있는데, 이것은 좋지 못한 것이라 생각합니다.
2. 상황에 맞는 적절한 해결 방법을 찾아서 문제를 해소하는 것이 좋습니다.
3. Tick 함수에서 Invalidation 함수를 호출하는 것을 봤는데, 이것은 최선이 아닐 거
라 생각합니다.
4. Invalidation Box는 프로젝트 작업 후반부에 하는 것이 좋습니다.
Invalidation Box
05
28

29. Invalidation Box
05
29

30. SMeshWidget
좀 더 극단적인 최적화를 위한 내용

31. 1. 발표자는 SMeshWidget 클래스를 통해 구현하는 커스텀 위젯을 많이
사용함.
2. 현재 UMG에서는 구현된 부분이 없으며, 사용되지 않는 것으로 알고
있습니다.
- 원하는 2D메시를 이용해 그에 대응하는 머티리얼로 직접 그리는 인터페이스를 제공합니다.
- 이것을 이용하면 버텍스/인덱스 버퍼에 레퍼런스와 함께 전달되는 버퍼를 Slate Element Batcher
에 직접 생성할 수 있습니다.
- 렌더 배치에서는 렌더링 가능한 인스턴스 수를 포함하는 버퍼를 사용하여 메시의 수많은 인스턴스
를 렌더링하고 해당 버퍼를 머티리얼 쉐이더에 전달할 수 있습니다.
- 결과적으로 버퍼 하나로 수많은 메시 인스턴스를 렌더링할 수 있습니다.
- 이를 이용한 첫번 째 예가 Particle Emitter입니다.
SMeshWidget
06
31

32. 3. 이를 구현하면 다른 위젯에 레이어링 할 파티클을 스폰할 수 있습니다.
- UMG 위젯 트리에 순서대로 레이어링 된다는 것을 의미합니다.
SMeshWidget
06
32

33. SMeshWidget
06
33

34. 4. 파티클 위젯 이외에도 수많은 복잡한 위젯들을 만들 수 있으며, 그 중 지도가 좋은
예 입니다.
- 맵에 그려지는 모든 아이콘은 하나의 머리티얼 인스턴스에 포함될 수 있지
만, 인스턴 스 버퍼에서는 각 아이콘에 엔트리마
다 다른 파라미터가 전송된다는 것을 알아야 합니 다.
- 한마디로 이 맵은 한번의 페인트 함수 호출로 모든 아이콘을 그릴 수 있다는
것을 의미 합니다.
SMeshWidget
06
34

35. 4. 커스텀 위젯을 사용할 때 발생하는 문제점도 있습니다.
- 게임을 위해 직접 제작한 커스텀 위젯을 구축한 것은 일반적인 솔루션을 만
드는게 아 니므로, 아티스트의 워크플로우에 영향을 미칩니다.
- 아티스트가 시퀀스 툴을 사용할 수 없으므로, 파티클을 붙일 때 프로그래머
와 협업을 해 야 하므로, 반복 작업 시 병목현상을 일으킬 수 있습니다.
- 그렇기 때문에 모든 것을 커스텀해서 사용하게 된다면, 오히려 낮은 생산성
을 초래할 수 있습니다.
SMeshWidget
06
35

36. - UI는 우리가 생각한 것보다 더 많은 퍼포먼스를 요구하기에, 커스텀보다는
일반적인
솔루션을 가져가는 것이 더 효율적일 수 있습니다.
SMeshWidget
06
36

37. [Unreal ListView]
https://bornsoul.tistory.com/32
[Unreal Atlas Group]
https://m.blog.naver.com/PostView.naver?blogId=jinwish&logNo=2215597
25843&targetKeyword=&targetRecommendationCode=1
추가 팁
06
37

38. [Unreal Fest Online 2020 – AAA 게임 UI 최적화 및 빌드하기]
https://www.youtube.com/watch?v=SYLeRHu6ras
참고 자료
06
38

39. [프로그래머의 길, 멘토에게 묻다]
- 당신이 프로그래밍한지 3개월이 되었든 5년이 되었든 간에,
소프트웨어 장인 정신의 관점에서는 여전히 초보자라는
사실을 이해해야 한다.
- 흰 띠를 매라. : 내가 어떤 전문 지식을 익혔든지 간에 초심으로
돌아가라.
참고 자료
06
38

40. 감사합니다