👨‍💻 [Unreal] 언리얼 엔진에서 Progress Bar 란 무엇이며, 어떻게 활용할 수 있나요?

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

언리얼 엔진에서 Progress Bar 란 무엇이며, 어떻게 활용할 수 있는지 간략히 알아보았습니다.

---

질문 >

언리얼 엔진에서 Progress Bar 란 무엇이며, 어떻게 활용할 수 있나요?

답변 >

언리얼 엔진에서 Progress Bar는 UMG(Unreal Motion Graphics) 시스템의 UI 위젯으로, 진행 상황이나 상태를 시각적으로 표시하는 데 사용됩니다. 주로 체력(HP), 마나(MP), 로딩 상태, 작업 진행률 등을 표시하는 데 활용됩니다.

---

1. Progress Bar의 개념

• Progress Bar는 상태의 퍼센트 값(0~1)을 기반으로 그래픽을 표시.
• 진행률을 시각적으로 보여주는 바 형태의 UI 컴포넌트.
• 스타일, 색상, 크기 등을 커스터마이징 가능.

---

2. Progress Bar의 주요 속성

• Percent
  • Progress Bar의 진행률을 설정하는 값.
  • 0.0(0%)에서 1.0(100%) 사이의 값.
  • 예: 0.5는 진행률 50%를 나타냄.
• Fill Color and Opacity
  • 진행률 바의 색상과 투명도를 설정.
  • 예: 체력 감소에 따라 색상을 녹색에서 빨간색으로 변화.
• Style
  • Progress Bar의 모양과 느낌을 정의하는 속성.
  • 경계선, 백그라운드 이미지, 채우기 이미지 등을 설정 가능.
• Bar Fill Type
  • Progress Bar가 채워지는 방향을 설정.
  • Left to Right(왼쪽에서 오른쪽).
  • Right to Left(오른쪽에서 왼쪽).
  • Top to Bottom(위에서 아래).
  • Bottom to Top(아래에서 위).
• Marquee
  • Progress Bar가 반복적으로 움직이는 애니메이션 효과를 활성화.
  • 주로 작업 로딩 상태 표시에 사용.

---

3. Progress Bar의 생성 방법

(1) 블루프린트를 활용한 Progress Bar

• Widget Blueprint 생성:
  • Add New > User Interface > Widget Blueprint로 새 위젯 생성.
• Progress Bar 추가:
  • 캔버스 패널에 Progress Bar 컴포넌트를 드래그하여 추가.
• Percent 값 바인딩:
  • Progress Bar의 Percent 속성을 바인딩하여 동적 값 설정.

블루프린트 예제:

• Percent 바인딩:
  • Progress Bar의 Percent 속성 옆에 있는 바인드 버튼 클릭.
  • 새로운 함수 생성 후, 게임 상태에 따라 Percent 값을 반환.

Percent = PlayerHealth / MaxHealth

• 게임플레이와 연결:
  • 캐릭터의 체력 변화에 따라 Percent 값 업데이트.

---

(2) C++로 Progress Bar 사용

• 위젯 클래스 생성:
  • UUserWidget를 상속하는 새로운 위젯 클래스 작성.
• Progress Bar 구성:
  • 위젯에 Progress Bar를 선언하고 초기화.

예제 코드:

#include "Components/ProgressBar.h"
#include "MyWidget.generated.h"

UCLASS()
class MYGAME_API UMyWidget : public UUserWidget
{
    GENERATED_BODY()

public:
    UPROPERTY(meta = (BindWidget))
    UProgressBar* HealthBar;

    void UpdateHealthBar(float HealthPercent);
};

// CPP 파일
#include "MyWidget.h"void UMyWidget::UpdateHealthBar(float HealthPercent)
{
    if (HealthBar)
    {
        HealthBar->SetPercent(HealthPercent);
    }
}

• 게임플레이에서 업데이트:
  • 캐릭터의 체력 감소 이벤트에 따라 UpdateHealthBar 호출.

---

4. Progress Bar의 활용 사례

• 체력/마나 표시:
  • 캐릭터의 현재 체력이나 마나를 퍼센트로 변환하여 표시.
  • 체력 감소에 따라 색상을 녹색에서 빨간색으로 변경.
• 로딩 화면:
  • 레벨 전환 시 Progress Bar를 사용하여 로딩 상태를 시각적으로 표현.
  • Marquee 모드를 사용하면 진행률이 없는 로딩 표시 가능.
• 퀘스트/작업 진행률:
  • 특정 작업(예: 채집, 제작)의 완료 상태를 표시.
• 경험치 바:
  • 플레이어의 현재 경험치 상태를 표시.

---

5. Progress Bar의 스타일링

(1) 색상 변경

• Fill Color and Opacity 속성을 사용하여 진행률 바의 색상을 설정.
• 블루프린트나 C++에서 동적으로 변경 가능.

예제:

FLinearColor NewColor = FLinearColor::Red;
HealthBar->SetFillColorAndOpacity(NewColor);

(2) 텍스처 적용

• Progress Bar에 고유한 이미지를 스타일로 설정.
• Style 속성에서 이미지 선택 가능.

---

6. Progress Bar 사용 시 유의점

• 실시간 업데이트:
  • Percent 값이 실시간으로 업데이트되도록 이벤트 처리 필요.
  • 값이 빠르게 변화할 경우, 애니메이션이 끊길 수 있으므로 최적화 중요.
• 디자인 고려:
  • 다양한 해상도와 화면 비율에 적합한 크기와 위치 설정 필요.
  • Anchor를 활용해 반응형 UI 구현.
• 퍼센트 값 유효성:
  • Percent 값은 항상 0.0에서 1.0 사이여야 함.
  • 예외적인 상황에서 값을 클램핑(Clamping)하여 처리.

---

7. 결론

언리얼 엔진의 Progress Bar는 단순하면서도 강력한 UI 컴포넌트로, 게임 내 상태나 진행 상황을 직관적으로 표시할 수 있습니다. 체력, 로딩, 경험치와 같은 다양한 정보를 시각적으로 전달하며, Blueprint와 C++에서 쉽게 설정하고 조작할 수 있어 효율적인 UI 디자인을 지원합니다.

---

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---