[언리얼 실습] 46. 위젯 컴포넌트 만들기

---

목차

1. 위젯 컴포넌트 만들기
2. 헬스바 만들기
3. 헬스바 적용하기

---

1. 위젯 컴포넌트 만들기

 

위젯 컴포넌트를 만들어서 체력바를 표시할 것이다.

 

 

컨텐츠 드로워에서 Widget Blueprint를 만들어주자.

 

 

부모 클래스로는 언리얼에서 제공해주는 User Widget을 사용할 것인데 추후 커스텀 위젯도 만들 것이다.

 

 

위젯 블루프린트로 들어가면 다른 블루프린트와 사뭇 다른 화면이 나오게 된다.

---

2. 헬스바 만들기

 

이제 이곳에서 그림을 그려 헬스바를 만들어보려고 한다. 그림을 그리기 위해서는 캔버스가 필요하다.

 

 

캔버스 패널을 추가해주자.

 

캔버스 패널을 드래그 해서

 

이렇게 드롭다운 하면 된다.

 

 

이러면 이렇게 캔버스가 나오고 이는 우리가 보고 있는 화면과 동일하다.

 

 

이제 진행바를 추가해주자. 그리고 위치를 화면 정중앙으로 오게 바꿔줄 것이다.

 

 

앵커를 중앙으로 바꾸고

 

사이즈를 조절하고 포지션은 각각 0, 얼라인먼트는 각각 0.5로 바꾸자. 이렇게 하면 화면 정중앙에 진행바가 생긴다.

 

이제 헬스바를 적에게 적용하여 어떻게 보이는지 확인해보려고 한다.

---

3. 헬스바 적용하기

 

위젯을 에너미에 추가하려면 에너미가 가질 위젯 컴포넌트가 있어야 하며 이는 C++ 클래스로 만들 것이다.

 

 

부모 클래스를 위젯 컴포넌트로 한 뒤 이를 만들자.

 

 

이렇게 클래스가 만들어졌고 이것을 에너미가 가질 수 있게 할 것이다. 에너미 헤더파일로 들어가자.

 

class PRACTICE_API AEnemy : public ACharacter, public IHitInterface
{

// ...

private:
	UPROPERTY(VisibleAnywhere)
	class UWidgetComponent* HealthBarWidget;
    
}

 

이제 생성자에서 실제로 할당하자.

 

#include "Components/WidgetComponent.h"
AEnemy::AEnemy()
{
	// 생략
    
	HealthBarWidget = CreateDefaultSubobject<UWidgetComponent>(TEXT("HealthBar"));
	HealthBarWidget->SetupAttachment(GetRootComponent());
}

 

이제 컴파일 하고 에너미 클래스로 가서 블루프린트에서 할당을 해주자

 

 

기즈모 위치도 에너미 머리 위로 올려주자. 현재 딱 봐도 위젯이 너무 큰것을 알 수 있다. 이것만 조절해주면 일단 위젯 추가는 완료된 듯하다.

 

 

그 전에 스페이스도 World에서 Screen으로 바꿔주자 이렇게 하면 블루프린트 에디터에서는 안보이지만 실제 게임으로 들어가면 스크린에 보이게 된다.

 

 

헬스바가 굉장히 큰 것을 볼 수 있다. 크기만 조금 조절해주면 될 듯하다.

 

이어서 실제 체력바처럼 피해를 받으면 줄어들게 해볼 것이다.