이벤트로 UI 업데이트 구동

이벤트를 통한 업데이트를 구동시켜 UI 요소를 최적화시키는 법을 배워봅니다.

Windows
MacOS
Linux

이 문서는 UMG UI 디자이너 에 대한 일반적인 이해가 있으신 분들을 대상으로 합니다.

UI 요소를 제작할 때 만드는 콘텐츠를 최적화시킬 수 있는 방법을 미리 염두에 두는 습관을 들이는 것이 좋은데, 그래야 나중에 크게 최적화시키지 않고도 퍼포먼스를 향상시키는 데 도움이 되기 때문입니다. 예를 들어 프로젝트 범위 내에서라면, 프로퍼티 바인딩 으로 UI 에 정도를 전달하기에 충분할 수 있습니다. 하지만 UI 구성이 좀 더 복잡하다든가 프로젝트를 최적화시킬 필요가 있다면, UI 업데이트를 매 프레임이 아닌 알 필요가 있을 때만 하는 것이 좋을 것입니다.

이번 하우투에서는 HUD 에 정보를 전달하는 세 가지 예제를 살펴보겠습니다. 세 가지 모두 정보 전달은 되지만, 세 번째 예제가 업데이트 프로세스를 틱 이벤트에서 옮기고 이벤트 디스패처 를 사용하여 정보를 수동으로 업데이트하는, 비용상 가장 효율적인 방법을 사용하고 있습니다.

예제 1. 함수 바인딩

이번 예제에서는 함수 바인딩 을 사용하여 플레이어의 Health (생명력)/ Energy (에너지) 업데이트 방법을 살펴보겠습니다.

기본적인 생명력/에너지 구성입니다.

CastBinding_SimpleHealth.png

디스플레이가 놓였으니, GetHealthGetEnergy 라는 진행률 표시줄에 대해 바인딩 생성 을 합니다. 그러면 함수 바인딩은 플레이어 캐릭터 블루프린트로 형변환하고 생명력과 에너지에 대해 정의한 변수를 할당하겠습니다.

아래는 GetHealth 에 대한 바인딩입니다. 디버깅을 위해 Print String 노드도 추가하여 생명력 값을 화면에 출력합니다.

CastBinding_BindingScript.png

게임에서 (아래 그림과 같이) 플레이어 캐릭터의 생명력과 에너지 값이 HUD 에 전달되어 반영되고 있습니다. 하지만 생명력 값을 업데이트하지 않을 때도, 파랑 디버그 텍스트를 보면 매 프레임 생명력 값을 검사하고 있다는 것을 볼 수 있습니다.

CastBinding_InGame.png

사실 이 접근법을 말로 풀면 "플레이어 캐릭터가 뭐지? 알았으면 그 생명력과 에너지 값을 줘" 라고 하는 것입니다. 작고 덜 복잡한 시스템에서는 잘 되지만, 매 프레임 검사할 프로퍼티가 많은 복잡한 시스템에서는 퍼포먼스가 떨어질 수 있습니다.

예제 2. 프로퍼티 바인딩

두 번째 접근법은 프로퍼티 바인딩 으로, 함수 바인딩보다 조금 더 경제적입니다.

같은 생명력/에너지 구성을 사용해서 프로퍼티 바인딩 작동 방식을 살펴 봅시다.

CastBinding_SimpleHealth.png

위젯 블루프린트그래프 탭에서, Event Construc 를 사용하여 플레이어 캐릭터 블루프린트로의 레퍼런스를 구합니다.

Event Construct 를 사용하여 캐릭터 블루프린트로 형변환한 뒤 이 정보를 스크립트가 매 프레임 호출하지 않도록 레퍼런스로 저장합니다.

PropBinding_EventConstruct.png

그런 다음 진행률 표시줄에 대한 값을 캐릭터 블루프린트 안에서 변수에 바로 바인딩해 주면 됩니다.

PropBinding_HealthBound.png

이 접근법에서는 더이상 "플레이어 캐릭터 블루프린트가 무엇인지" 매 프레임 형변환하여 검사하지 않아도 되고, 그냥 한 번만 한 뒤에 "생명력과 에너지 값을 달라"고 할 수 있습니다.

프로젝트 범위에 따라 이 접근법이 효과적일 수도 있지만, 시스템이 더 복잡해지는 경우, Event Driven (이벤트 주도형) 접근법이 나을 수도 있습니다.

예제 3. 이벤트 주도형

여기서는 이벤트를 사용하여 HUD 에 변화가 있을 때만 업데이트하며, 위의 생명력/에너지 구성을 계속 사용하겠습니다.

CastBinding_SimpleHealth.png

캐릭터 블루프린트 안에서 생명력을 감소시키는 스크립트 끝에 이벤트 디스패처 를 추가합니다.

테스팅 목적으로 F 키를 누를 때마다 생명력을 감소시키도록 설정했습니다.

DecreaseHealth.png

이제 생명력이 감소될 때마다, 이 이벤트 디스패처도 호출합니다. HUD 위젯 블루프린트의 그래프에서, Event Construct 를 다시 사용하여 플레이어 캐릭터 블루프린트로의 레퍼런스를 구하고 저장합니다. 그 캐릭터 블루프린트 안의 이벤트 디스패처에 커스텀 이벤트를 바인딩하여 이벤트 디스패처 호출시마다 커스텀 이벤트를 호출하도록 할 수도 있습니다.

이미지를 클릭하면 원래 크기로 봅니다.

HUD 위젯 블루프린트 안의 커스텀 이벤트는 이제 플레이어의 생명력 값이 변하든 말든 상관없이 항상 검사하는 것이 아닌, 변화가 있을 때만 업데이트하여 표시합니다.

아래 이미지는 생명력과 에너지를 같은 Event Construct 스크립트에 넣은 것입니다.

UpdateHealthUpdateEnergy 커스텀 이벤트는 캐릭터 블루프린트에서의 이벤트 디스패처에 바운딩되어 캐릭터의 생명력/에너지 값이 변할 때만 호출됩니다. 바인딩 프로세스 이후 HUD 가 생성되면 위 두 커스텀 이벤트를 호출하여 디스플레이를 초기화시키기도 합니다.

이미지를 클릭하면 원래 크기로 봅니다.

Select Skin
Light
Dark

새로운 언리얼 엔진 4 문서 사이트에 오신 것을 환영합니다!

문서 사이트에 대한 의견을 모을 수 있는 피드백 시스템을 포함해서 여러가지 새로운 기능을 준비하고 있습니다. 아래 Documentation Feedback 포럼(영문) 또는 언리얼 엔진 네이버 공식 카페(한글) 중 편하신 곳에 의견이나 문제점을 알려 주세요.

새 시스템이 준비되면 알려 드리겠습니다.

네이버 카페
공식 포럼