언리얼로 만들어보는 RPG - 인벤토리 구현(2)

안녕하세요 '언리얼로 만들어보는 RPG'의 필자입니다. 오늘은 저번 포스팅때 확인했던 문제부터 시작을 할 예정입니다.

기억하실지 모르겠지만 저번 포스팅때 C++상에서 코드로 위젯을 생성하면 UMG에디터에서 상호작용이 아예 안되는 문제가 있었지요. 그 문제를 해결하기 위해서 좀 찾다보니 UPROPERTY meta 설정에 (&)BindWidget 설정이 있는걸 알게 됐습니다.

C++ 에서 Widget을 선언하면 에디터에서 이름과 해당 Widget에 맞게 설정해서 사용할 수 있게 해주는 설정입니다.

출처 : https://answers.unrealengine.com/questions/786387/how-can-i-handle-blueprint-widgets-in-c.html

블루프린트에서 하는법이 궁금하신분은 밑에있는 링크를 따라가시면 됩니다.

출처 : http://api.unrealengine.com/KOR/Engine/UMG/UserGuide/PropertyBinding/index.html

UISlot.h

<BindWidget 설정을 해준 모습>

이제 UMG에디터에서 위젯을 생성한후에 바인딩을 해줄것이기 때문에 저번 포스팅때 오버라이딩한 함수는 지워버렸습니다. 이제 더이상 필요가 없어지면 사라지게되는건 숙명이기때문에 어쩔 수 없습니다.

BpUISlot(UMG 에디터)

<바인딩 해달라고 오류를 발생시키는 에디터>

빌드가 성공적으로 이루어지고 나면 에디터상에서 위젯을 바인딩 해달라고 이렇게 오류를 띄워줍니다. 왼쪽이 변수의 이름이고 오른쪽이 위젯의 타입이니 그대로 맞춰서 위젯을 생성해주시면 됩니다.

BpUISlot(UMG 에디터)

1번 박스를 보시면 필자의 경우 Grid Panel아래에 이미지와 텍스트를 넣었는데 보시는 분들은 원하시는걸 골라서 넣으셔도 됩니다. 튜토리얼영상이나 다른분들이 Slot UI를 만들때는 보통 버튼과 이미지를 이용하시는데 필자는 버튼을 이용하지 않을 계획이라 제외했습니다. 이미지의 경우 자식위젯을 가질 수 없기도 해서 저런식으로 배치를 하게 되었습니다.

2번 박스에 Custom이라 설정되어있는걸 보실 수 있는데 UI의 전체적 크기에 대한 설정을 할 수 있는걸로 보입니다. 필자는 64x64크기로 만들어주었습니다.

BpUISlot(UMG 에디터)

빨간색으로 테두리 쳐있는 부분을 집중적으로 보시면 되며 좌측부터 GridPanel, Image, Text의 디테일 설정입니다. 필자도 설정을 정확히 파악하고 있는것은 아니어서 이렇다고 확실히 설명해 드릴 수 없는부분에 심심한 유감을 표하는 바입니다. 그저 GridPanel에서 설정한 행과 열의 채우기에 따라서 안에 들어가있는 위젯들이 행과 열에 따라서 다르게 채워지는걸로 알고있습니다.

Slot UI는 지금 이정도면 더 필요한게 없을것 같습니다. 이 Slot을 이용해서 인벤토리 UI를 제작하도록 해보겠습니다.

BpInventory(UMG 에디터)

영상이 아닌 사진으로만 설명하려니까 쉽지는 않은것 같습니다. 인벤토리 UI의 경우 Slot을 가지고 있어야 하기 때문에 Uniform GridPanel을 사용했습니다. 저렇게 아름답게 정리되는건 다 순수한 노가다의 힘으로 이루어진것이란건 비밀아닌 비밀입니다.

BpInventory(UMG 에디터)

인벤토리UI의 GridPanel, Text, Uniform GridPanel의 디테일 설정입니다. 필자와 다른방식을 취하셔도 되나 참고하시라고 올려놓습니다.

BpInventory(UMG 에디터)

<슬롯중 하나>

필자의 경우 인벤토리의 크기를 32로 지정해줬습니다. 보시는분들은 더 크게 혹은 더 작게 해주셔도 되는데 이부분에서 좀 고역인게 디테일 설정창을 보시면 Row, Column을 통해서 Uniform GridPanel에서의 위치를 정해주실수 있고 Slotnum을 설정해 주시면 됩니다. 이걸 32개면 다 일일이 설정을 해주셔야 한다는게 좀 고통스러울 뿐입니다.

이제 화면에 잘 나오는지를 한번 확인해볼 시간입니다. 튜토리얼 영상을 보셨다면 아시겠지만 보통 인벤토리나 장비창 같은경우 메인UI에 자식으로 붙여 앵커위치를 조절해서 사용하더군요 그걸 위해서 저희도 메인UI를 하나 만들어줍니다.

BpGameUI(UMG 에디터)

<인벤토리를 넣어주고 우측중앙에 앵커를 설정한 모습>

BpPlayer(블루프린트 에디터)

<BpGameUI를 생성하고 화면에 추가>

가볍게 테스트를 위해서 확인만 하는것이기 때문에 블루프린트를 통해서 작업했습니다.

<화면에 잘 나타나는 인벤토리>

화면에 잘 뜨는것까지는 기분이 참 좋습니다만, 이제 해결해야할 부분은 PlayerBase에 접근해서 가지고있는 인벤토리 배열의 정보를 참조하여서 UI를 채워주는일만 남았습니다. 지금까지는 우선 화면에 띄우는걸 목적으로 삼았지만 앞으로는 UI와 PlayerBase간의 정보 교환을 어떻게 처리할지에 대해서도 생각을 하고 작업을 해야할것 같습니다.

<이게 뭐냐구요? 이번 포스팅의 끝을 알리는겁니다>

어느덧 벌써 2019년의 1월이 지나고 설날이 코앞으로 다가왔습니다. 여러분 모두 즐거운 명절 되시길 바라며 이번 포스팅은 여기까지 해야할거 같습니다.

이번에도 그렇지만 그리 많은 내용을 담지 않았는데도 불구하고 시간이 훌쩍 지나고 체력도 벌써 방전이군요. 운동을 좀 꾸준히해서 체력을 길러야하는데 사람일이란게 참 마음대로 되는게 없습니다. 다음에는 전체적인 UI의 구성을 어찌할지와 인벤토리의 정보를 어떻게 갱신할지에 대해서 작성하도록 하겠습니다.