별빛상영관

안녕하세요 '언리얼로 만들어보는 RPG'의 필자입니다. 이번 글에서는 플레이어의 수치 예를들어 체력이나 경험치 등을 표시해줄 UI를 만들것입니다. 작업을 시작했을때 Image Widget을 두개 겹치고 TextBlock Widget을 사용하는등의 계획을 세웠었는데 보니까 이미 ProgressBar Widget을 언리얼 UMG에서 지원해 주고 있었습니다. 물론 그덕분에 조금 헤매게 되었지만 그건 넘어가도록 하겠습니다.

<구조를 고민하는 필자>

역시 작업에 들어가기전에 전체적인 밑그림을 그려보는게 좋습니다. 우선 ProgressBar Widget이 있는덕분에 필자가 만들 UI의 이름이 피치못하게 Gauge가 되겠습니다. 또 이 Gauge UI는 체력, 마력, 경험치, 로딩 등등 에서 다 쓰일것이기 때문에 Type을 이용해서 어떤 정보를 가져다가 사용할지 결정해줄 것 입니다. 이미지의 경우도 마찬가지여서 이미지를 결정해주는건 Gauge UI가 속해있는 부모 UI에서 할 것입니다.

대충 정리해보자면

1. 어떤 정보를 참조할지 결정할 Type 만들기

2. 사용될 이미지는 속한 부모 UI에서 정해주기

뭐 이 정도인거 같습니다. 그러면 바로 작업을 시작하도록 해보겠습니다.

InGameData.h

<Gauge UI의 타입들>

Gauge.h

Gauge UI도 Player의 정보를 가져다가 써야하기 때문에 CustomUI를 상속받습니다. 그리고 이런 저런 함수가 좀 많아보이는데 어려운것은 없고 보이는 대로 관련된 변수들을 설정해주는 함수들입니다. 필요한 Widget의 경우는 관련 수치를 보여줄 TextBlock, 이미지를 그려줄 ProgressBar 둘만 있으면 됩니다.

Gauge.cpp

<Init 구현코드 실질적 역할은 SetValue 함수가 한다>

Gauge.cpp

<선언해둔 Set함수들의 구현코드>

Type, Color, Texture는 Gauge UI가 속한 부모 UI에서 불러서 이용하는 함수입니다. Init함수에서 실질적인 역할을 하는 SetValue함수가 가장 중요하다고 볼 수 있습니다. 크게 어려운 코드는 없으니 천천히 보고 따라하시면 될 것 입니다.

BpGauge(UMG 에디터)

빌드를 하신다음 평소처럼 UserWidget 블루프린트를 만들어 아까 열심히 작성한 Gauge클래스를 상속합니다. 계층구조창에 보이시는 것 처럼 Bind 해줄 Widget 두개와 해당 위젯을 들고 있어줄 Overlay Widget을 만들어 주면 됩니다. 이외의 작업은 따로해주실건 없습니다.

GameUI.h

<무수히 많이 추가된 변수들>

숫자가 좀 많을 뿐이지 크게 걱정할건 없습니다. 전부다 Gauge UI의 변수와 설정해줄 데이터들입니다. 어떤 이미지를 사용할지 색은 어떻게 할 것인지 등을 정해주는게 끝입니다. 물론 이걸 보시는 여러분이 Gauge클래스 전방선언을 센스있게 하셨으리라 믿습니다.

GameUI.cpp

새로 생긴 변수들을 이용해서 초기화를 시켜줍니다. 인벤토리와 마찬가지로 Player포인터를 채워주고 Type, Color등 기본부분을 지정해주고 Init함수를 호출해주면 됩니다! 그리고 기쁜마음으로 빌드를 합시다.

BpGameUI(UMG 에디터)

이제 열심히 밑작업을 한대로 Gauge UI를 3개 만들어서 각각 Bind 할 이름으로 변경해 줍니다. 그리고 무수히 많이 추가되었던 색상과 어떤 이미지를 쓸지 설정해주면! 저희가 원하는 UI를 만들게 되는 것입니다.

<정상적으로 나오는 UI>

여기까지 만들었으니까 끝이면 참 좋겠지만 회복아이템을 이용했을때 갱신이 되어야 합니다. 저번처럼 디버그 메시지를 이용하는건 임시 조치였을 뿐이니까요.

InGameData.h

이번 작업을 하면서 문제가 좀 있었는데 CharacterAbility에서 수치가 변경되면 Player가 들고있는 UI에 접근해서 갱신을 해줘야 한다는 문제가 있었습니다. 결국 이를 해결하기 위해서 소유자 클래스 포인터를 들고 있게 했습니다. 그리고 해당 하는 소유자가 Player인지 확인하는 bool값과 소유자를 정해주는 함수도 만들었습니다.

InGameData.cpp

<SetOwner함수의 구현코드 별것 없다>

GameUI.h

새로운 함수를 하나 선언해줍니다. 해당하는 함수는 플레이어의 수치가 변동될때 UI를 갱신하기 위해 사용될 것입니다.

GameUI.cpp

현재로서는 HP회복물약만 존재하기 때문에 다른 경우는 비워두겠습니다. 저번에 만든 SetValue를 이용하면 되기때문에 크게 추가되는 코드는 없습니다.

InGameData.cpp

저번에 체력과 자원이 변경될때 디버그 메시지를 이용했지만 이번에는 바꿔서 Owner가 Player인지 확인하여 변경해주는 함수를 호출하도록 합니다. 여기까지 작업했으면 준비는 끝났습니다. 이제 빌드를 하고서 확인하러 가보도록 하겠습니다.

<정상적으로 갱신이 되는 체력바>

인벤토리에서 너무 오래걸려서 지레 겁먹었는데 생각보다 금방할 수 있었던 작업이었습니다. 이 다음에는 역시나 아직 남아있는 UI작업을 더 하려고 생각하고 있습니다. 아마 퀵슬롯 까지만 만들어 두고 스킬은 생각을 좀 해봐야 할 거 같습니다. 읽어주시느라 또 기다려주시느라 감사합니다.

<집요정에게 인정받은 글입니다>