3. 메인 메뉴 제작

이번 단계에서는 메인 메뉴의 비주얼 레이아웃을 만듭니다.

Windows
MacOS
Linux

더이상 필요하지 않은 페이지입니다.


먼저 아래와 같은 메인 메뉴 레아아웃을 만들어 줍니다.

  1. MainMenu 위젯 블루프린트를 엽니다.

  2. 디자이너 탭에서, 팔레트 의 위젯을 계층구조 로 끌어 놓아 아래처럼 구성합니다.

    Hierarchy1.png

    참고로 Canvas Panel 에는 Image 하나, Text 가 있는 Vertical Box 하나, Text 가 있는 Button 세 개가 들어있습니다.

  3. 계층구조 에서 Vertical Box 를 선택한 다음 우클릭 한 뒤 복사 합니다.

  4. Canvas Panel우클릭 한 다음 붙여넣기 하여 Vertical Box 둘째 사본을 생성합니다.

    Hierarchy2.png

  5. 새로운 Vertical Box 에서 Button우클릭 복사하고 붙여넣어 넷째 Button/Text 위젯을 만듭니다.

    Hierarchy3.png

  6. 첫째 Vertical Box 를 선택하고 디테일 패널에서 이름을 MainMenu 로 변경하고, isVariable 옵션을 체크한 뒤 ZOrder1 로 설정합니다.

    Hierarchy4.png

    명확성을 위해 위젯 이름을 지어주고 접근할 수 있도록 변수로 설정함과 아울러 이미지 위에 나타나도록 ZOrder 설정도 해 줍니다. 이 부분은 곧 설정해 주도록 하겠습니다.

  7. 다른 Vertical Box 를 선택하고 디테일 패널에서 이름을 Options 로 변경한 뒤, isVariable 옵션을 체크하고 ZOrder1 로 설정합니다.

  8. Button 이름을 아래 그림처럼 변경합니다.

    Hierarchy5.png

    각 버튼의 역할을 알 수 있도록 이름을 바꿔주면, 그 함수성 스크립트를 짜기가 수월해집니다.

  9. Text 위젯의 디테일 패널 Content 아래 Text 섹션을 통해 아래와 같이 업데이트합니다.

    Hierarchy6.png

    각 버든과 메뉴 제목줄에 표시되는 텍스트를 업데이트하고 있습니다.

  10. Ctrl 키를 누르고 각 Button 을 선택한 다음 디테일 패널에서 Hovered 에 대한 Tint 색을 설정하고 각각의 Size채우기 로 설정합니다.

    Hierarchy7.png

    모든 버튼의 크기 조절은 물론 마우스를 올렸을 때의 색을 정의하고 있습니다.

  11. 계층구조 에서 Image 를 선택한 다음 디테일 에서 AppearanceBrush 아래 사용할 Texture, Sprite, 또는 Material 을 선택합니다.

    Hierarchy8.png

    이 가이드와 똑같은 것을 사용하려면, 여기서 다운로드하면 됩니다: Example Background

    Example Background 를 언리얼 엔진 에 끌어놓아 임포트합니다 (확인 창이 뜨면 를 클릭합니다).

  12. 디자이너 창에서 이미지가 전체 레이아웃에 맞도록 크기를 조절합니다.

    Hierarchy9.png

  13. Image디테일 패널에서 앵커 버튼을 클릭한 다음 화면 채우기 옵션을 선택합니다. 스케일박스를 사용하여 이미지를 담으면, 종횡비에 맞게 스케일과 크기가 자동 조절되도록 할 수 있습니다.

    Hierarchy10.png

  14. Vertical Box 둘 다 선택한 다음 앵커 위치를 왼쪽 중앙으로 설정합니다.

    Hierarchy11.png

  15. Options Vertical Box 를 선택한 다음 Visibility 세팅을 Hidden 으로 설정합니다.

    Hierarchy12.png

    옵션은 기본적으로 보이지 않도록 했다가, 스크립트를 통해 보이도록 할 것입니다.

  16. MainMenu Vertical Box 를 선택한 다음 디자이너 창에서 원하는 대로 크기와 위치를 조정합니다.

    Hierarchy13.png

  17. Text 위젯의 디테일 패널에서 Font, Size, Alignment 를 설정할 수 있습니다.

    Hierarchy14.png

    이 세팅을 실험하여 원하는 효과를 얻을 수 있습니다.

  18. Options Vertical Box 를 원하는 대로 구성한 다음 Main Menu Vertical Box 바로 뒤로 옮깁니다.

    Hierarchy15.png

    한 번에 하나만 보일 것이므로, 서로 겹쳐놔도 괜찮습니다.

메뉴의 비주얼 레이아웃 작업이 끝났으니, 다음 단계에서는 메뉴의 함수성 스크립트 작업을 하겠습니다.


Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback