[UE5] Shop UMG 프로토타입 제작하기

 

 

지금 Sprite로 쓸만한 에셋이 없어서 엔진의 기본 세팅을 가지고 임의로 만들었다. 예쁘게 만드는 건 아트팀에서 예쁘게 해줄 것이다. 

 

 

 

 

 

계층구조는 이렇게 했다. 이제 하나씩 뜯어보면서 코드로 연결을 해볼 예정이다. 이렇게 UI가 만들어져서 나오면 이대로 바로 연결하지 않고 기획적인 부분을 확인해보고 필요에 의해 수정되는 경우가 있다. 

 

예를 들어서 아이템이 20개가 될지 10개가 될지 2개가 될지 모르는 상황이지만 어떤 데이터가 들어와도 우리는 유연하게 대처할 수 있는 코드를 짜야한다. 그러기 위해서는 2개 였을 때는 스크롤박스가 필요없지만 10개가 넘어가면 스크롤 박스가 필요할지도 모른다는 생각을 우선 캐치해내야한다.

 

나는 계층구조를 각각의 역할이 필요한 순서대로 엮었다. 첫 번째는 가장 상단의 재화 표기 bar이다. Shop 이라는 현재 컨텐츠의 이름을 보여주고, 어떤 재화를 보여줄 것인지를 넣었다. 

 

 

계층구조는 열어보면 내부적으로 더 묶여있다.

 

크게 캔버스 패널 안에 HorizontalBox라는 것을 사용했다. HorizontalBox는 오른쪽으로 나열하게끔 도와준다. 균등하게 나열해야할 때 쓰기 좋지만, 나는 이미지 왼쪽과 오른쪽에 패딩값을 넣어 조금 다르게 표현했다. 디테일에서 설정을 어떻게 하느냐에 따라 이렇게 쓸 수 있다.

 

 

그 아래 Top은 설명을 쓰는 곳으로 만든거라 일단 넘어가겠다.

 

왼쪽에 탭 리스트가 있다.

 

 

 

여기 탭에는 어떤 이름을 쓰게 될지는 데이터를 읽어서 가져오는 형식으로 코드로 적용해보려고 한다.

 

계층 구조는 이렇게 되어있다.

 

verticalBox에 내가 따로 만든 커스텀 위젯을 넣었다. 커스텀 위젯은 Shop위젯처럼 UUserWidget을 부모로하는 블루프린트를 하나 새롭게 만들었다. UUserWidget도 결국 UWidget을 상속받은 것이므로 Palette에서 가져올 수 있게 되어있다. 

 

 

Tab_0을 우클릭해서 수정하기를 들어가면 그 위젯을 열어준다.

 

 

 

 

 

여기에서는 WidgetSwitcher라는 것을 넣어주었다. 주로 게임을 할 때 탭을 하나 누르면 다른 탭은 선택되지 않은 상태를 보여주고, 선택된 탭은 조금 더 하이라이트 되어있는 것을 볼 수 있는데, 여기서 On이면 현재의 파란색, Off면 회색을 보여주기 위해 이미지를 두 개 넣어두었다. 위젯 스위처에는 위젯스위처만의 기능이 있는데 index 번호를 넣어주면 그 인덱스에 존재하는 위젯만 보여준다. 

 

그래서 나는 코드에서 bool 변수를 이용해 select 되었으면 true, select 되지 않았으면 false 형태로 만들어 0과 1로 위젯 스위처 인덱스 변경을 해줄 예정이다. 

 

 

 

마지막은 아이템 종류를 담고있는 Tileview인데, 굳이 이걸 선택한 이유는 Listview, Tileview가 사용법이 조금 독특해서이다. 추후에 ScrollBox, WrapBox와의 사용법 차이에 대해, 그리고 성능 차이에 대해서도 알아보고 잘 쓰는 방법이 뭐가 있을지 고민해보려고 한다.

 

 

 

 

Tileview에는 조금 특별한 세팅이 필요하다. 

 

TileView를 클릭하고 Detail 패널에서 조금 내려보면

 

 

EntryWidgetClass 라는 것을 설정하도록 되어있다. 이걸 위해서 따로 UserWidget으로 아이템을 만들고, 그 내부에서 몇 가지 세팅을 해주어야한다.

 

 

 

ShopItem이라는 이름으로 아이템 하나를 만들어 주었다.

 

그리고 디자이너 탭이 아닌 그래프 탭으로 이동하자.

 

 

 

그러면 블루프린트를 사용할 수 있는 탭이 나온다. 우리는 코드 연결작업을 할 때 이 블루프린트 그래프 탭쪽도 같이 사용하게 될 예정이다. 

 

 

 

 

 

 

상단에 Class settings 라는 곳과 Class Defaults라는 곳이 있다. 현재 이 아이템을 타일뷰에서 사용할 수 있도록 해줄 예정이므로 Class Settings에서 인터페이스라는 것을 추가해주겠다.

 

Class Settings 를 누르면 Detail에서 보여주는 내용이 달라져 있을 것이다.

 

 

우리가 주목할 곳은 Interface라는 곳이고 여기서 Add를 통해 필요한 Interface를 추가하겠다.

 

 

 

UserObjectListEntry라는 것을 추가한다. 작동되는 원리는 코드연결 할 때 다시 설명하겠다.

 

이렇게 추가하면 왼쪽 MyBlueprint아래에 인터페이스 관련된 항목들이 나열 된다. 여기서 ObjectListEntry에 들어가보면 OnListItemObjectSet 이라는 인터페이스가 생겨있을 것이다.

 

 

 

 

우클릭해서 구현하기를 누르면 

 

이렇게 그래프에 인터페이스 이벤트가 생겨난다.

 

이 세팅까지 해주어야 최소한 타일뷰에서 현재 이 아이템을 Entry Item으로 지정할 수 있다. 다시 TileView가 있는 Shop으로 돌아가서 

 

 

본인이 사용하고자 하는 Entry Item을 넣어주면 된다.

 

그러면 기능을 추가하기 이전 UMG 세팅이 어느정도 되었다고 볼 수 있겠다.  다음에는 정말 코드에 하나씩 연결해보자.