안녕하세요
가끔 제 본업인 게임 개발 관련 포스팅도 하려고 합니다!
저는 13년차 게임UI 디자이너예요 ㅎㅎ
현재는 언리얼4 UMG로 UI작업을 하고 있습니다!
[UMG] UE4_UI : 전체 메뉴 만들기 - 재료로 되는 하나의 WidgetBlueprint(사용자생성 WidgetBlueprint)를 메인 W
안녕하세요 가끔 제 본업인 게임 개발 관련 포스팅도 하려고 합니다! 저는 13년차 게임UI 디자이너예요 ㅎㅎ 현재는 언리얼4 UMG로 UI작업을 하고 있습니다! 오늘은 아래와 같은 메뉴를 만들어 보
wuni2.tistory.com
위의 포스팅에 이어서 기본 틀로 만들어진 UMG에
함수, 변수노드를 이용해서 사용자생성 위젯 블루프린트를 외부에서 디테일 창에서 제어 하려고 합니다.
| 해당 내용은 언리얼 UMG의 기본위젯은 어느정도 사용할 줄 아시는 사용자를 위해 작성 되었습니다. 처음 해보신 본들도 해보실수 있게 되도록 자세하게 단계를 적어볼게요! |
내부 구성용 버튼 WidgetBlueprint 에 함수, 변수 연결하기
WBP_MainMenu_BtnSlot 을 더블클릭 하여 열어줍니다.
OR
배치해놓은 내부슬롯의 디테일에서 WBP_MainMenu_BtnSlot편집을 눌러줍니다.
WBP_MainMenu_BtnSlot 화면에서 오른쪽 위 그래프를 눌러줍니다.
왼쪽위 내 블루프린트 > 함수에서 +함수를 눌러 함수를 추가한뒤 이름을 변경해줍니다.
그럼 아래와 같이 함수탭으로 자동이동 됩니다.
보라색 함수 노드를 선택후 디테일 > 입력 +새 파라미터를 2개 추가해 줍니다. (추가해주면 보라색 노드에 핀이 2개 생깁니다)
파라미터 이름과 변수의 유형을 정해줍니다.
Btn_Icon / Texture 2D
Btn_Text / Text
핀과 노드를 아래와 같이 연결합니다.
UMG로 셋팅해둔 위젯중 외부에서 제어하려는 위젯을 변수 목록에서 끌어다가 빈공간에 올려두고 Get Img_Icon을 해줍니다.  변수 목록에 노출되지 않는다면 디자이너 쪽으로 가서 변수 인지를 체크 해줍니다.    set = 설정, get = 값을 가져오는 것 셋팅해둔 값을 가져와서 새로운 값으로 설정해 주는 개념 |
1. 상단의 이벤트 그래프탭을 눌러서
2. +변수를 2개 추가해 줍니다.
3. 디테일에서 변수 유형을 함수에 설정한 유형과 맞춰 줍니다.
4. 생성한 변수를 끌어다 Get으로 붙여줍니다.
함수를 끌어다 붙이고 핀을 연결해 줍니다.
1. 컴파일을 눌러주고
2. 추가해준 변수를 선택해서
3. 기본값을 설정해 줍니다. (설정 안해주면 아무것도 안나와요 ㅎㅎ)
Btn_Icon / Btn_Text 둘다 설정해 줍니다
함수, 변수 연결 끝
메인 WidgetBlueprint 에 적용하기
이제 메인 메뉴에서 아이콘과 텍스트를 변경해 주러 갑니다
WBP_MainMenu 더블클릭
배치한 WBP_MainMenu_BtnSlot을 선택하면 디테일에 Btn Icon 과 Btn Text가 추가되었음을 확인할수 있습니다.
이제 하나하나 선택해서 icon과 text를 변경해 줍니다.
icon과 text는 테이블을 통해 연결할지
text만 key값으로 연결할지 (로컬라이징 대응)는 기획담당자와 클라담당자와 상의해서 정하시면 되요
팀마다 다르고 시스템마다 다르기때문에 그것에 맞춰서 나중에 구성을 바꾸시면 됩니다
사용자생성 WidgetBlueprint (내부 버튼슬롯) 에 클릭 이벤트 설정하기
이제 사용자 생성 WidgerBlueprint로 만들어진 위젯에 클릭 이벤트를 연결하여 위젯을 호출 하려고 합니다.
WBP_MainMenu_BtnSlot 더블 클릭
버튼 위젯을 클릭해서 디테일 > 이벤트(맨아래쪽) OnClicked를 선택해줍니다.
좌상단 내 블루프린트 > 이벤트 디스패처에서 +이벤트 디스패쳐를 추가한후 이름을 정해줍니다.
만들어진 이벤트 디스패처를 끌어다가 호출 > On Clicked(Btn_MainMenu)에 핀을 연결해 줍니다.
컴파일 / 저장 합니다.
WBP_MainMenu 더블클릭
버튼을 눌러 디테일 아래쪽을 확인해보면 방금 위에서 추가한 이벤트가 추가되어 있습니다.
눌러 줍니다.
핀을 당겨서 위젯 생성을 해줍니다.
class 클래스 선택에 버튼을 눌렀을때 나타날 위젯 블루프린트를 연결해줍니다.
플레이를 눌러서 확인해보면 연결된 버튼에 연결된 위젯이 뜨는걸 확인할수 있습니다.
이해가 안가는 부분이나 틀린 부분이 있거나 추가로 문의하실 부분이 있으면 댓글로 남겨주세요!
이글이 도움이 되셨다면 댓글, 공감(하트), 구독 부탁드립니다.
댓글