Unity용 메인 메뉴 튜토리얼

사용자 인터페이스(UI)는 그래픽, 텍스트, 버튼을 결합하여 즐거운 게임 경험을 제공하는 데 중요한 역할을 합니다.

메인 메뉴는 일반적으로 플레이어가 게임을 로드할 때 가장 먼저 보게 되는 UI이기 때문에 UI에서 가장 눈에 띄는 부분 중 하나입니다.

이 튜토리얼에서는 UI 캔버스를 사용하여 Unity에 메인 메뉴를 만드는 방법을 보여 드리겠습니다.

1단계: 메인 메뉴 디자인

• 새 캔버스를 만듭니다(GameObject -> UI -> Canvas).

• 캔버스 -> UI -> 이미지를 마우스 오른쪽 버튼으로 클릭하여 새 이미지를 만듭니다(메뉴 배경이 됩니다).

• 새로 생성된 이미지에 텍스처를 할당합니다. 아래 이미지를 사용하고(마우스 오른쪽 버튼 클릭 -> 다른 이름으로 저장...) 가져오기 설정에서 텍스처 유형이 'Sprite (2D and UI)'로 설정되어 있는지 확인하세요.

• 새 스크립트를 만들고 이를 SC_BackgroundScaler로 지정한 다음 그 안에 아래 코드를 붙여넣습니다.

SC_BackgroundScaler.cs

using UnityEngine;
using UnityEngine.UI;

[ExecuteInEditMode]
public class SC_BackgroundScaler : MonoBehaviour
{
    Image backgroundImage;
    RectTransform rt;
    float ratio;

    // Start is called before the first frame update
    void Start()
    {
        backgroundImage = GetComponent<Image>();
        rt = backgroundImage.rectTransform;
        ratio = backgroundImage.sprite.bounds.size.x / backgroundImage.sprite.bounds.size.y;
    }

    // Update is called once per frame
    void Update()
    {
        if (!rt)
            return;

        //Scale image proportionally to fit the screen dimensions, while preserving aspect ratio
        if(Screen.height * ratio >= Screen.width)
        {
            rt.sizeDelta = new Vector2(Screen.height * ratio, Screen.height);
        }
        else
        {
            rt.sizeDelta = new Vector2(Screen.width, Screen.width / ratio);
        }
    }
}

• 새로 생성된 이미지에 SC_BackgroundScaler 스크립트를 첨부하세요. (첨부 시 스크립트는 화면에 맞게 배경 이미지의 크기를 자동으로 조정합니다.)

메뉴 버튼 만들기:

• 캔버스 -> 빈 만들기를 마우스 오른쪽 버튼으로 클릭한 다음 이름을 "MainMenu"로 바꿉니다. 이 개체에는 기본 메뉴의 UI 요소가 포함됩니다.
• "MainMenu" 개체 -> UI -> 텍스트를 마우스 오른쪽 버튼으로 클릭하여 새 텍스트를 만듭니다. 제목 텍스트가 됩니다.
• 텍스트를 게임 이름으로 변경합니다(제 경우에는 "Game Title"입니다).

• 단락 정렬을 가운데 가운데로 변경하고 색상을 흰색으로 변경합니다.

• 마지막으로 글꼴 크기를 더 큰 값(예: 30)으로 변경하고 글꼴 스타일을 굵게 변경합니다.

그러나 Rect Transform 크기가 너무 작기 때문에 텍스트가 사라진 것을 알 수 있습니다. 더 큰 것으로 변경하고(예: 너비: 400 높이: 100) Pos Y를 50으로 변경하여 약간 위로 이동합니다.

• 3개의 버튼을 만들고("MainMenu" 개체를 마우스 오른쪽 버튼으로 클릭 -> UI -> 버튼을 3번 클릭) 각 버튼을 30픽셀씩 아래로 이동합니다.
• 각 버튼의 텍스트를 각각 "Play Now", "Credits" 및 "Quit"로 변경합니다.

• "MainMenu" 객체를 복제하고 이름을 "CreditsMenu"으로 바꾸고, "Quit" 버튼을 제외하고 내부의 모든 버튼을 제거하고, 텍스트를 "Back"로 변경합니다.
• "CreditsMenu"에 있는 제목 텍스트의 글꼴 크기를 더 작은 크기(예: 14)로 변경하고 Pos Y를 0으로 변경한 다음 크레딧 텍스트를 입력하세요.

2단계: 메뉴 버튼 프로그래밍

이제 스크립트를 생성하여 버튼이 작동하도록 만들어야 합니다.

• 새 스크립트를 생성하고 SC_MainMenu라고 명명한 다음 그 안에 아래 코드를 붙여넣습니다.

SC_MainMenu.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SC_MainMenu : MonoBehaviour
{
    public GameObject MainMenu;
    public GameObject CreditsMenu;

    // Start is called before the first frame update
    void Start()
    {
        MainMenuButton();
    }

    public void PlayNowButton()
    {
        // Play Now Button has been pressed, here you can initialize your game (For example Load a Scene called GameLevel etc.)
        UnityEngine.SceneManagement.SceneManager.LoadScene("GameLevel");
    }

    public void CreditsButton()
    {
        // Show Credits Menu
        MainMenu.SetActive(false);
        CreditsMenu.SetActive(true);
    }

    public void MainMenuButton()
    {
        // Show Main Menu
        MainMenu.SetActive(true);
        CreditsMenu.SetActive(false);
    }

    public void QuitButton()
    {
        // Quit Game
        Application.Quit();
    }
}

• SC_MainMenu를 캔버스 개체에 연결
• 주 메뉴 변수에 "MainMenu" 개체를 할당합니다.
• "CreditsMenu" 개체를 크레딧 메뉴 변수에 할당

마지막 단계는 SC_MainMenu 기능을 각 버튼에 바인딩하는 것입니다.

• 버튼을 선택하고 "On Click ()"에서 (+)를 클릭하여 새 요소 변수를 추가합니다.

• SC_MainMenu 스크립트(캔버스)를 사용하여 개체를 버튼 "On Click ()"에 할당하고 버튼에 해당하는 기능을 선택합니다(지금 재생 버튼의 경우 "PlayNowButton()", 크레딧 버튼의 경우 "CreditsButton()", 종료 버튼의 경우 "QuitButton()" 및 "MainMenuButton()" - 크레딧 메뉴의 뒤로 버튼).

이제 메인 메뉴가 준비되었습니다.

참고: SC_MainMenu.cs의 PlayNowButton() 함수는 "GameLevel"이라는 장면 로드를 시도합니다. 따라서 이름이 "GameLevel"인 장면이 있는지 확인하세요. 이 장면은 빌드 설정에도 추가됩니다(또는 로드하려는 장면의 이름에 해당하도록 해당 줄의 이름을 변경할 수도 있습니다).

UI 생성에 대해 더 자세히 알고 싶으십니까? Unity에서 모바일 터치 컨트롤을 만드는 방법에 대한 튜토리얼을 확인하세요.