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

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

2. Adicionar a Imagem do Botão ao grupo

3. Adicione um Controlador de Botão para tornar a imagem clicável

4. Adicione uma animação para o botão

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 Alphuma 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.