언리얼 내배캠 CH.3 팀 프로젝트 - 메인 메뉴 만들기

메인메뉴 디자인으로 상단에 프로젝트명, 좌측에 게임 메뉴, 우측에는 이미지와 함께 파티클이 날리는 연출을 진행한다.

 

 

1920*1080 해상도로 스크린샷 찍기

3D 모델링 기반의 메인화면이지만, 모델링을 불러오기에는 리소스가 너무 많이 필요하므로 스크린샷을 찍는다.

1. 원하는 화면에 카메라를 위치시킨다.
2. 화면에서 `를 눌러 콘솔 입력창을 연다.
3. "HighResShot 1920x1080"를 입력한다. 이렇게 하면 원하는 해상도로 스크린샷이 찍힌다.

스크린샷 폴더는 프로젝트 폴더 아래 Saved\Screenshots\WindowsEditor에 있다.

 

프로젝트에 가져오기

이미지를 프로젝트 폴더에 넣는다.

 

(5.7 기준) 텍스처를 더블클릭하여 열고 텍스처 그룹을 UI로 설정한다.

 

엔진이 5.5버전이라면 텍스처 그룹 대신 압축 세팅을 UserInterface2D로 변경한다.

 

위젯 블루프린트를 만든다.

 

 

패널 배치

기본 위젯 계층 구조 (Hierarchy)

• Canvas Panel (최상위 부모)
  • Image (이름: Background) - 배경 이미지
  • Background Blur (이름: BlurOverlay) - 효과 영역 (선택사항)
  • Vertical Box (이름: MenuContainer) - 좌측 메뉴 버튼들
    • Button (New Game)
    • Button (Continue)
    • Button (Options)
    • Button (Quit)
  • Text (이름: GameTitle) - 상단 타이틀

캔버스 패널 넣기

16:9 해상도 설정

배경으로 올릴 이미지 추가

앵커는 전체화면으로 설정

 

 

Vertical Box를 하나 만들고, 그 안에 버튼 네 개를 넣는다.

 

버튼은 채우기로 설정한다.

 

각 버튼에 Text를 달고, 버튼은 왼쪽 정렬한다.

 

 

버튼 배경은 투명하게 설정한다.

 

 

버튼 호버 시 효과 넣기

색깔-> 투명 그라데이션 효과

M_Button_Fill이라는 머티리얼을 하나 만든다.

머티리얼 도메인을 User Interface로 선택한다.

LinearGradient를 선택한다.

 

1. 블렌드 모드는 투명도를 적용하기 위해  AlphaComposite(Premultiplied Alpha)로 적용한다.
2. Linear Gradient의 V값(세로축)에서 값을 빼서 그라디언트의 높이를 조절한다.
3. Power의 Exp값으로 그라디언트의 부드러움을 조절한다.
4. 그 뒤 Multiply 값으로 색의 강도를 조정한다.
5. 컬러 노드를 곱하여 색을 입히고 최종색 노드에, 그 이전 노드는 오퍼시티 오버라이드에 연결한다.

해당 머티리얼을 버튼의 Hover 카테고리의 이미지로 넣고, 그리기 방식은 Image로 선택한다.

 

 

이제 마우스를 호버하면 머티리얼이 적용된다.

 

가장자리를 좀더 부드럽게 만들기 위해 Smooth Step을 적용했다.

 

사운드 넣기

호버 사운드를 콘텐츠에 넣는다.

버튼 디테일 패널에서 호버 사운드만 넣어주면 사운드가 출력된다.

 

 

메인 화면에 음악 넣기

레벨에 앰비언트 사운드를 하나 배치한다.

액터 디테일 패널에서 사운드를 설정해준다.

 

위젯 디버깅하기

게임 플레이를 켜고 Ctrl + Shift + W를 누르면 위젯 리플렉션이 나오고, 커서 모양 선택 버튼을 누르면 위젯 디버깅을 할 수 있다.