---
title: "Adicione um botão de Iniciar ao seu jogo"
slug: "add-a-start-button-to-your-game"
updated: 2026-06-12T10:30:48Z
published: 2026-06-12T10:30:48Z
canonical: "docs.xtremepush.com/add-a-start-button-to-your-game"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adicione um botão de Iniciar ao seu jogo

Um exemplo de como criar um botão de iniciar na tela do carregador do seu jogo

Alguns jogos levam seus usuários diretamente para a tela de jogo após o carregamento do jogo. Para criar uma entrada mais controlada no jogo, você pode adicionar um botão Iniciar animado clicável na tela do carregador, como mostrado no vídeo de exemplo abaixo:

Adicionar um botão iniciar também permite a música de fundo no seu jogo, já que a maioria dos navegadores exige interação do usuário antes de ouvir qualquer áudio.

Esta página fornece instruções detalhadas sobre como adicionar um botão de início para qualquer jogo.

**Pré-requisitos**: Certifique-se de ter um .`png` Arquivo de imagem do seu botão iniciar. Você deve adicionar essa imagem como um recurso adicional na sua campanha de jogo. Para mais informações sobre como adicionar ativos adicionais, veja [Adicionar Ativos Adicionais](/documentation/docs/pt-br/add-additional-assets)

## Visão geral sobre como adicionar um botão de início

Você deve adicionar e configurar o botão do Editor na tela **do Loader** . O processo envolve quatro etapas principais:

1. [Crie uma camada de grupo para o botão](/docs/pt-br/add-a-start-button-to-your-game#create-a-group-layer-for-the-button)
2. [Adicionar a Imagem do Botão ao grupo](/docs/pt-br/add-a-start-button-to-your-game#configure-the-start-button-image)
3. [Adicione um Controlador de Botão para tornar a imagem clicável](/docs/pt-br/add-a-start-button-to-your-game#add-a-button-controller)
4. [Adicione uma animação para o botão](/docs/pt-br/add-a-start-button-to-your-game#add-an-animation-layer)

### Crie uma camada de grupo para o botão

Primeiro, crie uma camada de grupo que contenha todos os elementos do botão de iniciar. Isso facilita o gerenciamento da posição dos botões e das camadas.

1. No **painel Camadas** , clique com o **botão direito em Raiz** e selecione **Criar Camada**>**Elementos**>**Grupo**
2. No painel de propriedades à direita, insira o nome do grupo em **Rótulo**. Por exemplo, `Start Button`
3. Selecione a caixa **de seleção Inicial**
4. Mude o **Modo Posicionamento** para **relativo** e mova o grupo abaixo da barra de progresso do carregador do jogo.

### Configure a imagem do botão Start

Agora, adicione sua imagem do botão de início preparado ao grupo que você acabou de criar.

1. No **painel Camadas** , selecione seu grupo configurado e clique com o **botão direito em Criar Imagem de Camada**>**Elementos**>**Carregador**
2. No painel de propriedades, insira o nome da camada da imagem no campo **Rótulo** .
3. **No menu suspenso Imagem**, selecione a imagem do botão iniciar que você adicionou anteriormente.
4. Salve suas alterações no Editor

### Adicionar um Controlador de Botões

Adicione uma camada de botão para tornar a imagem interativa. Aqui, você configura a imagem para funcionar como um botão que inicia o jogo ao clicar.

1. No **painel de Camadas** , selecione seu grupo e clique com o botão **direito em Criar Camada**>**Controladores**>**Botões**
2. No painel de propriedades, insira o nome da camada de botão no campo **Rótulo** .
3. No campo **Elemento Hitbox** , especifique o elemento clicável do seu botão digitando o ID da camada de imagem.
4. Na **seção Controle de Imagem** , configure a aparência do botão quando o usuário pairar sobre ele. Para adicionar um leve tom no hover, como mostrado no exemplo do vídeo anterior, faça o seguinte:
  1. No campo **Elemento da Imagem** , insira o ID da camada da sua camada de imagem.
  2. Selecione a caixa **de seleção Alterar Tonalidade** .
  3. No **Tonalidade Hover**, selecione uma cor mais escura.
  4. Clique **em Definir Hover** para visualizar o efeito. Alternativamente, você pode usar a caixa **de seleção Alterar Imagem** para exibir uma imagem diferente quando o usuário pairar ou clicar no botão. Essa opção exige que você primeiro envie as imagens de cada estado para os ativos do seu jogo.
5. Configure o botão para iniciar o jogo ao clicar:
  1. Na aba **Camadas** , selecione a camada para animador da barra de progresso e, no painel de propriedades, desmarque **Emitir ao Parar**. Esta ação impede que a tela do jogo seja exibida após a animação da barra de progresso terminar e atingir 100%.
  2. Selecione a camada de botões e então navegue até **Eventos Clicados** no painel de propriedades
  3. No menu **suspenso Evento** , selecione **NamedEvent**
  4. No menu **suspenso Nome do Evento** , selecione **loader_exit**. Isso garante que seu usuário seja direcionado para a tela de jogo.
6. Salve suas alterações no Editor

### Adicionar uma camada de animação

Sem animação, o botão vai parecer estático. Você pode adicionar uma animação simples de fade-in, para que o botão apareça suavemente depois que o jogo termina de carregar.

1. No **painel de Camadas** , selecione o grupo e clique com o botão direito **em Criar Camada**>**Efeitos**>**Animação**
2. No painel de propriedades, insira o nome da camada de botões em **Rótulo**.
3. Na **seção de Lógica** , no menu **suspenso Ação de Iniciação** , selecione **Oculto**. Isso garante que o botão seja oculto por padrão e apareça apenas quando um evento é acionado.
4. Na seção **Trigger** , configure a animação para começar depois que a barra de progresso do loader chegar a 100.
  1. Selecione **loadProgress** no menu **suspenso do evento** .
  2. Selecione **irrelevante** no menu **suspenso do currículo**
  3. **Condição**: Entrar `loader.progress == 100`. Isso garante que a animação só comece quando o progresso do loader atingir 100%.
5. Na seção **de Animação** , ajuste os parâmetros para criar um efeito de fade-in suave, como mostrado no exemplo do vídeo anterior:
  1. Duração da animação para `500 ms`
  2. Selecione **Animar Alph**uma caixa de seleção
  3. **Passos alfa**: Entrar `0%, 0 `na primeira linha e `100%, 1, easeIn` na segunda linha. Isso anima o botão de totalmente transparente para totalmente opaco.
  4. Clique **em Iniciar** para testar a animação.
6. Para testar o botão, selecione a **camada Demo** e, no painel de propriedades, clique **em Executar Simulação**.
7. Salve suas alterações no Editor.