UI Optimization(ongoing)

Why is UI so expensive?

 

1. 불필요한 Tick(NativeTick & BlueprintTick)을 제거하자.

UCLASS(Meta=(DisableNativeTick))

    항상 업데이트가 필요한 데이타 세팅이 아니면 이벤트나 딜리게이트를 사용하자.

    TimerEvent를 사용해 원하는 만큼만 갱신되도록 하자.

 

2. CreateWidget 함수는 비용이 비싸기 때문에  Pooling 해서 사용하자.

    ex> loading 시간에 pool을 채우고 필요할 때 가져와서 사용하자.

 

3. Visible 보단 HitTestInvisible(인터렉션 받지 않음-하위 불가능), SelfHitTestInvisible(자신만 인터렉션 받지 않음-하위 가능) 를 사용하자.

enum class ESlateVisibility : uint8
{
    /** 표시 및 히트 테스트(커서와 상호 작용) 가능. 기본값. */
    Visible,
    /** 표시되지 않으며 레이아웃에서 공간을 차지하지 않음(히트 테스트 불가능). */
    Collapsed,
    /** 표시되지 않지만 레이아웃 공간을 차지함(히트 테스트 불가능). */
    Hidden,
    /** 표시되지만 히트 테스트 불가능 및 계층 구조의 하위 항목도 히트 테스트 불가능. */
    HitTestInvisible UMETA(DisplayName = "Not Hit-Testable (Self & All Children)"),
    /** 표시되지만 히트 테스트 불가능. 하위 항목의 히트 테스트에는 영향을 주지 않음. */
    SelfHitTestInvisible UMETA(DisplayName = "Not Hit-Testable (Self Only)")
};

 

4. UI Widget 평탄화 작업을 하자.(UMG 구성시 컨테이너를 최소화하자)

    컨테이너 하나 하나가 다 비용이다. 위젯 트리가 작을 수록 호출하는 함수 수도 줄어든다.

 

5. SlatePrepass

    ; 각 위젯의 모든 캐시 지오메트리(슬레이트에서 위젯의 위치, 크기 및 절대 위치) 엔트리를 리빌드 하는 역할을 한다고 함..

      리빌드 하기 위해서는 위젯의 계층구조 바닥까지 내려갔다가 맨 위까지 올라오는데 위젯들의 지오메트리는 계층구조의 위아래 모두 영향을 준다는 것을 알 수 있음.

      Hidden 을 사용하면 위젯이 안보여도 주변 위젯의 지오메트리에 영향을 준다.

      Collapse 를 사용하면 지오메트리 계산을 하지 않음.

 

6. Invalidation Box(무효화 박스)

    위젯이 변경되는 내용이 없는 경우(?) Invalidation Box 하위 자식으로 넣으면 자식의 지오메트리를 캐싱하여 Tick, Paint 등이 처리되지 않음. UI 렌더링 속도를 늘릴 수 있음.

    특정 자식 위젯을 캐싱에서 제외하고 싶다면 디테일 Performance에서 is Volatile 체크.

    자식 위젯이 위치만 변경된다면 디테일 > Caching 에서 Cache Relative Transform 체크(스크롤에 좋음)

** UI가 거의 완성된 경우에 추가할 것. 자식이 하나라도 변경되면 전체가 invalidate 되니까 

[참고] https://docs.unrealengine.com/4.27/ko/InteractiveExperiences/UMG/UserGuide/WidgetTypeReference/Invalidation/

인밸리데이션 박스

 

7. 드로우 콜을 최소화 하기 위해선 같은 레이어 ID에 같은 리소스를 사용하자.(stat slate 명령으로 볼 수 있음)

    Sprite를 사용할 경우엔 Sprite Atlas Group을 사용하자. 여러 Sprite들을 큰 텍스쳐로 합쳐서 콜 수를 줄일 수 있음.

    같은 레이어 ID를 유지하는 위젯 - VerticalBox, HorizontalBox, SizeBox, ScaleBox, UniformGridPanel, WrapBox.

    레이어 ID를 증가시키는 위젯 - Overlay(첫번째 자식은 ID가 같음), Border.

    상황에 따라 다른 위젯 - GridPanel(슬롯마다 직접 지정 가능. 자식들은 순차적으로 ID가 달라짐), ScrollBox(스크롤바는 ID가 1증가),

        Canvas(bExplicitCAnvasChildZOrder 변수를 켜줘야 지정한 슬롯의 ZOrder 값으로 ID가 지정됨, 즉 ID 동일하게 가능)