언어:
페이지 정보
태그:
엔진 버전:
언리얼 엔진

3. 메인 메뉴 제작

언리얼 엔진

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

  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

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

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