1️⃣ WBP_MainMenu 위젯 블루프린트 생성
✅ 작업 내용
- Content Browser에서 UI 폴더 생성
- UI 폴더 안에 새로운 위젯 블루프린트(WBP_MainMenu) 생성
- WBP_MainMenu 내부에 Canvas Panel 추가 (UI 요소 배치를 위해 필요)
- 배경 이미지 추가 및 설정
- Image 위젯을 추가하여 배경 이미지 적용
- Anchors를 전체 화면으로 설정 (다양한 해상도에서 UI가 깨지지 않도록 조정)
- Brush → Image에 원하는 배경 이미지 적용
2️⃣ 버튼 추가 및 기본 스타일 설정
✅ 작업 내용
- Button 위젯 n개 추가 (btn_NewGame, btn_Options, btn_Exit)
- 각 버튼 내부에 TextBlock 추가하여 텍스트 설정
- 버튼 크기 및 위치 조정
- Anchors를 중앙 정렬
- Size X = 300, Size Y = 80 설정 (DPI Scaling을 고려하여 적절한 크기 조정 필요)
- 버튼의 기본 색상 및 호버 스타일 설정 - 버튼을 Image로 사용할 때
- 디테일 패널에서 Style → Hovered 색상 변경
- Tint 값 설정 (단, Image가 None이면 적용되지 않음)
- Draw As를 Box 또는 Rounded Box로 변경하여 스타일 적용 (Box는 사각형, Rounded Box는 부드러운 곡선 스타일을 제공)
3️⃣ 버튼 호버 시 텍스트 색상 변경 (블루프린트 적용)
✅ 블루프린트 설정
- WBP_MainMenu의 Graph 탭으로 이동
- btn_NewGame 선택 후 OnHovered / OnUnhovered 이벤트 추가
- 텍스트 색상 변경을 위한 Set Color and Opacity 노드 추가
- Make Slate Color 노드를 사용하여 색상 설정
- Hovered 시 밝은 금색 (#E6B450) 적용
- Unhovered 시 기본 흰색 (#FFFFFF) 적용
🎯 블루프린트 연결 예시
4️⃣ 테스트를 위한 GameMode 설정
✅ GameMode에서 UI 표시 설정
- BP_GameMode 블루프린트 생성 (GameModeBase 상속)
- Event BeginPlay에서 WBP_MainMenu 추가
- Create Widget → WBP_MainMenu 선택
- Add to Viewport 연결
- Get Player Controller → Set Show Mouse Cursor(True) 설정
- Project Settings → Maps & Modes → Default GameMode를 BP_GameMode로 변경
🎯 블루프린트 연결 예시
✅ 마무리: 테스트 및 추가 예정 기능
🛠 테스트 체크리스트
✔ 버튼이 정상적으로 표시되는지 확인
✔ 호버 시 텍스트 색상이 변경되는지 확인
✔ 호버 시 버튼 배경 색상이 정상적으로 변경되는지 확인
✔ 모든 버튼이 동일한 방식으로 동작하는지 확인
💡 다음 작업 예정
- 버튼 클릭 시 사운드 추가 (Play Sound at Location 활용, 클릭 효과음)
- 애니메이션 효과 추가 (Widget Animation 활용, 페이드인/페이드아웃 적용 가능)
- New Game 버튼 → 게임 시작 레벨로 이동 구현
Unreal UI #4 - UI 레이아웃 및 최적화 정리
Unreal UI #6 - 기본 HUD 추가 & 새로운 UI 구현
Unreal UI #7 - 전투 UI 개선: 부드러운 체력바, 히트마커, 데미지 텍스트 애니메이션
'언리얼 엔진 > 언리얼 엔진 활용' 카테고리의 다른 글
| Unreal UI #5 - 블러 및 페이드 효과 적용 (0) | 2025.02.27 |
|---|---|
| Unreal UI #4 - UI 레이아웃 및 최적화 정리 (0) | 2025.02.25 |
| Unreal UI #2 - 최적화 및 해상도 테스트 (0) | 2025.02.20 |
| Unreal Engine - Custom Pawn 중력 없이 이동 구현 (2) | 2025.02.09 |
| Unreal Engine - 움직이는 플랫폼 만들기 (1) | 2024.12.16 |