Guia de UI da Unity: Como Criar um Menu Principal Simples e Funcional

  • EM

Depois de programar as mecânicas principais do seu personagem e construir os primeiros níveis, chega um momento em que seu jogo precisa de uma “porta de entrada”, um ponto de partida claro para o jogador. Este é o papel do menu principal.

Ele não é apenas uma tela com botões; é o primeiro contato do jogador com seu universo, o local que define o tom e a primeira impressão da experiência que está por vir. O sistema de UI da Unity é incrivelmente poderoso, mas seus componentes — Canvas, RectTransform, EventSystem — podem parecer intimidantes no começo.

Neste guia detalhado, vamos desmistificar esses elementos e construir, passo a passo, um menu principal simples, mas totalmente funcional e responsivo, com botões para “Iniciar Jogo”, “Opções” e “Sair”.

1. Os Pilares da UI da Unity: Uma Breve Teoria

Antes de criar nosso primeiro botão, é importante entender os três componentes que formam a base de toda UI na Unity.

  • O Canvas: Pense nele como uma tela de pintura transparente posicionada em frente à câmera. Todos os elementos de interface (botões, textos, imagens) devem ser filhos de um Canvas para serem renderizados na tela. A sua configuração mais importante é o Canvas Scaler, que define como a UI se adapta a diferentes resoluções de tela.
  • O EventSystem: Criado automaticamente junto com o Canvas, o EventSystem é o “cérebro” que processa os inputs do jogador. É ele que detecta cliques, toques e movimentos do mouse e os traduz em eventos, como o “OnClick” de um botão. Você só precisa de um por cena.
  • O RectTransform: Diferente dos objetos de jogo normais que usam um componente Transform, os elementos de UI usam um RectTransform. Ele possui propriedades adicionais como “âncoras” e “pivôs”, que são cruciais para criar interfaces responsivas que se comportam bem em qualquer proporção de tela.

2. Construindo a Estrutura Visual do Menu

Com a teoria em mente, vamos à prática.

Passo 2.1: Crie a Cena e o Canvas É uma boa prática ter o menu principal em sua própria cena.

  1. Crie uma nova cena (File > New Scene) e salve-a como MenuPrincipal.
  2. Na Hierarquia, clique com o botão direito e vá em UI > Canvas. Isso criará o Canvas e um EventSystem automaticamente.

Passo 2.2: Configure a Responsividade (Canvas Scaler) Este é o passo mais importante para que seu menu não “quebre” em monitores diferentes.

  1. Selecione o Canvas na Hierarquia.
  2. No Inspector, encontre o componente Canvas Scaler.
  3. Mude a opção UI Scale Mode para Scale With Screen Size.
  4. Defina uma Reference Resolution, como 1920 para X e 1080 para Y. Isso significa que você desenvolverá a UI nessa resolução, e a Unity a escalará proporcionalmente para outras.

Passo 2.3: Adicione um Título

  1. Clique com o botão direito no Canvas na Hierarquia e vá em UI > Text - TextMeshPro. Se for a primeira vez, a Unity pedirá para importar os “TMP Essentials”. Clique em importar. O TextMeshPro (TMP) é o sistema de texto moderno da Unity e oferece uma qualidade muito superior.
  2. Selecione o objeto de texto, nomeie-o como “TextoTitulo”.
  3. No Inspector, dentro do componente TextMeshPro - Text, escreva o nome do seu jogo. Ajuste a fonte, o tamanho (Font Size), a cor e o alinhamento como desejar. Use as âncoras do RectTransform para posicioná-lo no topo da tela.

3. Adicionando os Botões Interativos

Passo 3.1: Crie e Organize os Botões

  1. Clique com o botão direito no Canvas e vá em UI > Button - TextMeshPro. Nomeie o objeto como “BotaoIniciar”. Mude o texto do objeto filho para “Iniciar Jogo”.
  2. Duplique este botão (Ctrl+D) duas vezes para criar os botões “Opções” e “Sair”. Renomeie os objetos e os textos de acordo.
  3. Dica de Profissional: Para organizar os botões verticalmente de forma automática e responsiva, crie um objeto vazio dentro do Canvas chamado “PainelBotoes”. Adicione a ele o componente Vertical Layout Group. Arraste seus três botões para dentro deste objeto. Agora você pode controlar o espaçamento, o alinhamento e o tamanho de todos os botões de uma só vez através do componente Vertical Layout Group.

4. Dando Vida aos Botões com Scripts

A parte visual está pronta. Agora, vamos fazer os botões funcionarem.

Passo 4.1: Crie o Gerenciador do Menu

  1. Crie um objeto vazio na cena chamado “MenuManager”.
  2. Crie um novo script chamado MenuPrincipalManager e anexe-o a este objeto.

Passo 4.2: Escreva as Funções Abra o script MenuPrincipalManager e adicione o seguinte código:

using UnityEngine;
using UnityEngine.SceneManagement; // Essencial para gerenciar cenas!

public class MenuPrincipalManager : MonoBehaviour
{
    public void IniciarJogo()
    {
        // Carrega a cena do seu jogo. 
        // Certifique-se de que o nome da cena está exatamente igual.
        SceneManager.LoadScene("Fase1"); // Mude "Fase1" para o nome da sua cena de jogo
    }

    public void AbrirOpcoes()
    {
        // Lógica para abrir o painel de opções
        Debug.Log("Função AbrirOpcoes chamada!"); 
    }

    public void SairDoJogo()
    {
        Debug.Log("Saindo do jogo...");
        Application.Quit();

        // A linha abaixo só funciona no Editor da Unity, para testar o botão.
        #if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false;
        #endif
    }
}

Importante: Para o SceneManager.LoadScene() funcionar, você precisa adicionar suas cenas às “Build Settings”. Vá em File > Build Settings, clique em “Add Open Scenes” com a cena do menu aberta, e depois arraste a sua cena de jogo para a lista.

Passo 4.3: Conecte as Funções aos Botões Este é o passo final.

  1. Selecione o seu “BotaoIniciar” na Hierarquia.
  2. No Inspector, encontre o componente Button. Você verá uma seção chamada On Click ().
  3. Clique no ícone + no canto inferior direito desta seção.
  4. Arraste o objeto MenuManager (que contém seu script) da Hierarquia para o campo que diz None (Object).
  5. No menu dropdown que aparece (inicialmente em No Function), selecione MenuPrincipalManager e, na lista que se abre, escolha a sua função IniciarJogo().
  6. Repita o processo para os botões “Opções” e “Sair”, conectando-os às suas respectivas funções (AbrirOpcoes e SairDoJogo).

Conclusão

E está pronto! Ao apertar “Play”, você terá um menu principal profissional, responsivo e totalmente funcional.

Percorremos os conceitos fundamentais do sistema de UI, aprendemos a usar componentes de layout para organizar os elementos e, o mais importante, conectamos a interface visual à lógica do nosso código.

Criar um bom menu não é apenas uma etapa técnica; é o primeiro sinal de respeito pela experiência do jogador. É um passo que mostra que você está pensando no seu projeto como um produto completo, não apenas como um protótipo.

Quer ver um guia em vídeo construindo menus e outras interfaces? Este é o tipo de conteúdo prático que adoramos criar no nosso canal no YouTube, a PERAI DEV. Inscreva-se e continue evoluindo suas habilidades com a gente!

Compartilhe !

Posts relacionados