[UE5] 6주차 1번. HUD 인터페이스 만들기

이번에 만들 것은 적 위에 표시되는 체력바와 화면 인터페이스 입니다. 유저 인터페이스 내 위젯 블루프린트 만들어 주고, WBP_Gauge 라고 합니다.

WBP_Gauge 생성

디자인 부터 해줄게요. 구성은 크기박스, 보더, ProgressBar 이고, 크기박스의 크기는 125, 25로 해줍니다. ProgressBar의 패딩을 5로 지정해주고, 화면크기 옆의 항목을 Desired on Screen으로 해주면 저희가 지정한 크기로 크기박스가 변경됩니다. 퍼센테이지 까지 5 로 지정해주면 완성.

WBP_Gauge 디자이너 모습

 

화면 설정

이제 구현부를 볼게요. WBP_Gauge의 경우 직접 만든 BPI_GaugeWidget을 상속받게 되어있고, 여기엔 이 함수 두개가 선언되어 있습니다. 각각 입력값은 Color, Ratio 입니다.

 

그리고 여기서 어떤 컬러를 넣느냐에 대한 내용이 추가되는데,

선형컬러 vs 컬러

컬러에 대한 설명입니다. 선형컬러는 연속적인 컬러로, 정수가 아닌 float 으로 이루어진 색이에요. 숫자 범위 자체가 0~255가 아닌 0~ 65535 이기에 더 넓은 범위의 색을 표현해줍니다. 지금 사용하는 SetGaugeColor 함수에서는 선형 컬러를 활용하니 참고!

 

다시 돌아와서, WBP_Gauge 에서 함수 두개를 구현해줍니다. 프로그레스바를 변수 여부 체크 해주면 그래프 구역에서 다룰 수 있어요. 그럼 우리는 컴포넌트 처럼 ProgressBar를 활용해 함수를 호출해줍니다. 색상 설정과, Percent 설정 해주는 함수를 호출해주어요.

디자이너 창 변수 여부

그래프 창 구현부

 

그런 다음 새로 만든 BP_Character 의 자손 클래스인 BP_Enemy를 만든 다음, LifeGauge 이름으로 위젯 컴포넌트를 추가하고,  위젯 클래스를 방금 만든 WBP_Gauge로 설정합니다.

LifeGauge 위젯 컴포넌트 생성 및 설정

BeginPlay시에 LifeGauge 의 색을 지정해줍니다. 빨강으로요. 이때 생각할 것은 왜 LifeGauge를 SetGaugeColor 타깃으로 놓지 않느냐 입니다. 여기서 핵심은, LifeGauge는 컴포넌트이고, 컴포넌트가 담고 있는 WBP_Gauge 클래스를 타깃으로 잡아야 한다는 것입니다. 주의합시다.

SetGaugeColor 호출

그리고, LifeGauge 컴포넌트에서 스페이스를 Screen 으로 해주어야. 화면에 항상 보여지는 대상이 됩니다. World의 스페이스 좌표에 의거하지 않아요. UI는 모두 이게 필요해 보이네요.

유저 인터페이스 스페이스 설정

결과물.

Enemy 위에 나오는 WBP_Gauge

 

추가내용

카메라 시점을 캐릭터 몸 내부로 파고들었을 때, 전면부가 구현되지 않아 투시되어 보이는 현상

위의 모습처럼 캐릭터를 파고 들어갔을 때, 전면이 엔진 자체에서 그리지 않은 것을 볼 수 있어요. 이건 최적화를 위해서 뒷모습을 그리지 않은것인데, 여기서 궁금한점은, 뒷면은 그리지 않는다. 그렇다면 뒷면은 어떻게 알까?

모든 언리얼은 삼각형으로 이루어져 있어요. Vertex와 Vertex가 삼각형을 이루며 캐릭터든, 벽이든 다 구성합니다. 그리고 이걸 구성하는 (잇는) 순서가 인덱스로 구성되어 있어요. (최근에 배운 버텍스 버퍼, 인덱스 버퍼)

잇는 순서를 인덱스 버퍼에 저장하는 이유는 점들만 구성한 뒤 이걸 잇는 순서를 파악하여 공간적 이득을 보기 위해서 입니다. 정육면체를 구성하는데 점이 36개가 아닌, 8개로 구성해 공간적 이득을 볼 수 있는거죠.

다시 돌아와서, 전면, 후면 판단은 인덱스 버퍼에 의해 이루어집니다. 내가 바라보는 시점을 기준으로 인덱스 버퍼가 시계방향 일 경우 전면, 반시계방향 일 경우 후면 인겁니다.

 

ps. 배경은 내부에서 보는걸, 캐릭터는 외부에서 보는걸 기준으로 제작되어 있어서, 잇는 순서가 반대라고 보면 된다.

용어. 컬링반전되어있다. 라고 생각하면 될듯.