Unreal Common UI Tutorial Part 1 - Main Menu
Common UI 플러그인 만들기
WBP_MainMenu
로고는 Size Box로 랩핑 후에 Min Aspect Radio / Min Aspect Radio (최소/최대 종행비) 둘 다 1로 설정
버튼 만들기
WBP_MenuButton
Common UI Plugin의 Common Text 해야 한다
- 블루프린트에 ButtonText 추가 후
Intext부분 변수로 승격 - Variables의
Text오른쪽에 눈 열기해야WBP_MainMenu에서 이 블루프린트 위젯을 사용할 수 있다
WBP_MainMenu
Vertical Box 안에 방금 만든 WBP Menu Button 넣기
WBP_MenuButton
컴파일하고 Default Value 추가하기
WBP_MainMenu
Dafault Text 에 버튼에 쓸 단어 적기
Buttom Padding 적용해서 버튼 사이 간격 띄우기추가
버튼 스타일 만들기
버튼 위젯 블루프린트에서 Style > +
Min Width 100 / Min Height 30
WBP_MainMenu에 Style 적용하기
HUD_MainMenu
WBP_MainMenu를 뷰포트에 띄우기
Hover / Press 할 때 색상 추가하기
ButtonStyle_MainMenu
버튼 폰트 설정하기
메인 메뉴(CommonUI) 구조
레벨 구조
LV_MainMenu (레벨)
└── WBP_MainMenu (위젯) - 메인 메뉴 화면위젯 구성
WBP_MainMenu
├── 로고 (이미지)
└── Vertical Box
├── WBP_MenuButton (버튼 1)
├── WBP_MenuButton (버튼 2)
├── WBP_MenuButton (버튼 3)
└── ...버튼 위젯 내부
WBP_MenuButton
└── Common Text
└── 텍스트 내용 (예: "게임 시작", "설정" 등)스타일 에셋 관리
CommonTextStyle_MenuText
└── 폰트 스타일 (크기, 색상, 타입 등)
ButtonStyle_MainMenu
├── Normal (기본 상태)
├── Hovered (마우스 올렸을 때)
└── Pressed (클릭했을 때)
└── 각 상태별 배경 색상 설정역할 정리
- LV_MainMenu: 메인 메뉴 전용 레벨이야
- WBP_MainMenu: 실제 메뉴 화면 레이아웃을 담당하는 위젯
- WBP_MenuButton: 재사용 가능한 버튼 컴포넌트 (각 메뉴 항목마다 사용)
- CommonTextStyle_MenuText: 모든 버튼 텍스트의 폰트 스타일을 통일
- ButtonStyle_MainMenu: 모든 버튼의 상호작용 비주얼(색상 변화)을 통일
