Tutorial do Menu Principal para Unity

Interface do usuário (IU) combina gráficos, texto e botões e desempenha um papel crucial em fornecer uma experiência de jogo agradável.

O menu principal é uma das partes mais proeminentes da IU, pois geralmente é a primeira coisa que os jogadores veem ao carregar o jogo.

Neste tutorial, mostrarei como criar um menu principal em Unity usando IU Tela.

Etapa 1: Crie o menu principal

• Criar um novo Canvas (GameObject -> UI -> Canvas)

• Crie uma nova imagem clicando com o botão direito em Canvas -> UI -> Image (este será o plano de fundo do menu)

• Atribuir a textura a uma imagem recém-criada. Você pode usar a imagem abaixo (clique com o botão direito do mouse -> Salvar como...) e verifique se o tipo de textura está definido como 'Sprite (2D e UI)' nas configurações de importação:

• Crie um novo script, chame-o de SC_BackgroundScaler e cole o código abaixo dentro dele:

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);
        }
    }
}

• Anexar o script SC_BackgroundScaler a uma imagem recém-criada. (Ao anexar, o script irá dimensionar automaticamente a imagem de fundo para caber na tela):

Criar botões de menu:

• Clique com o botão direito do mouse em Tela -> Criar Vazio e renomeie-o como "MainMenu". Este objeto conterá os elementos da interface do usuário para o menu principal.
• Crie um novo Texto clicando com o botão direito do mouse no objeto "MainMenu" -> UI -> Texto. Este será o texto do título.
• Mude o texto para o nome do seu jogo (no meu caso será "Game Title"):

• Mude o alinhamento do parágrafo para o centro e a cor para branco:

• Por fim, altere o tamanho da fonte para algo maior (por exemplo, 30) e o estilo da fonte para negrito.

No entanto, você notará que o texto desapareceu, porque as dimensões do Rect Transform são muito pequenas. Altere-os para algo maior (ex. Largura: 400 Altura: 100), também mova-o ligeiramente para cima alterando Pos Y para 50:

• Crie 3 botões (clique com o botão direito no objeto "MainMenu" -> UI -> Botão 3 vezes) e mova cada botão para baixo em 30 pixels.
• Altere o Texto de cada botão para "Play Now", "Credits" e "Quit" respectivamente:

• Duplique o objeto "MainMenu" e renomeie-o para "CreditsMenu", remova todos os botões dentro dele exceto o botão "Quit" e altere seu Texto para "Back".
• Altere o tamanho da fonte do texto do título em "CreditsMenu" para algo menor (ex. 14), altere sua Pos Y para 0 e digite o texto dos créditos.

Etapa 2: Programar os botões do menu

Agora precisamos tornar os Botões funcionais criando um script.

• Crie um novo script, chame-o de SC_MainMenu e cole o código abaixo dentro dele:

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();
    }
}

• Anexar SC_MainMenu ao objeto Canvas
• Atribuir o objeto "MainMenu" à variável do menu principal
• Atribuir o objeto "CreditsMenu" à variável do menu de créditos

O último passo é vincular as funções SC_MainMenu a cada Button.

• Selecione o Button e em "On Click ()" clique (+) para adicionar uma nova variável de elemento:

• Atribua o Objeto com script SC_MainMenu (Canvas) ao Botão "Ao Clicar ()" e selecione a função que corresponde ao botão ("PlayNowButton()" para Botão Jogar Agora, "CreditsButton()" para o Botão de Créditos, "QuitButton()" para o Botão Sair e "MainMenuButton()" para o Botão Voltar no Menu de Créditos).

O Menu Principal agora está pronto.

NOTA: A função PlayNowButton() em SC_MainMenu.cs tentará carregar uma cena chamada "GameLevel". Portanto, certifique-se de ter uma cena com o nome "GameLevel", que também é adicionado às configurações de compilação (alternativamente, você pode alterar o nome nessa linha para corresponder ao nome da cena que deseja carregar).

Interessado em aprender mais sobre a criação de IU? Confira nosso tutorial sobre Como criar controles de toque para celular em Unity.