Parte 5: Adicionando moedas e pontos | hyperPad Documentation

Loading...

Logo
Guia Completo - Criando um Jogo de Plataforma

Parte 5: Adicionando moedas e pontos

Last updated September 19, 2015

Introdução

Com Parte 4 concluída, você agora deve ter um nível e um personagem jogável para correr e pular por aí.

Agora precisamos dar um propósito ao nosso jogador. Para esta parte do tutorial, vamos adicionar moedas colecionáveis e uma pontuação para acompanhar quantas delas foram coletadas.

Moedas escondidas em blocos são uma das características mais icônicas do Mario. Vamos começar este tutorial criando essa funcionalidade.

Escondendo Moedas em Tijolos

Acertando o Tijolo

Vamos fazer nosso primeiro tijolo de uma maneira que possamos modificá-lo rapidamente para conter quantas moedas precisarmos. Depois que o tijolo estiver completo, você poderá duplicá-lo e colocá-lo onde quiser.

Este tutorial se baseia na Parte 4 e supõe que você tenha ramificado o projeto da Parte 4 a partir do hub.

Comece selecionando um dos tijolos que conterão moedas. Nas propriedades do objeto, toque no botão "Comportamentos" para abrir o editor de comportamento.

Na categoria Objeto, adicione o comportamento Colidido. O comportamento Colidido acionará um evento toda vez que 2 objetos especificados tocarem um ao outro.

Toque no comportamento Colidido que você adicionou para ver suas propriedades. Você pode ver que ele tem 2 caixas para objetos selecionáveis (Referidos como Objeto A e Objeto B). O primeiro (Objeto A) é selecionado para você, e é aquele ao qual você está aplicando os comportamentos. Você pode tocar para alterar isso se quiser, mas vamos deixá-lo assim.

A caixa vazia é para seu segundo objeto (Objeto B), que o comportamento de colisão irá verificar. Toque na caixa vazia e selecione seu personagem jogador que você adicionou na Parte 4 do guia.

Com seus objetos selecionados, você pode agora mudar qual parte do Objeto B acionará o evento de colisão. Desative todos os botões, exceto a opção "Por Cima". Agora o comportamento Colidido funcionará apenas quando o topo do personagem jogador tocar o tijolo.

Agora que o tijolo verifica se a cabeça dos jogadores toca nele, vamos fazê-lo balançar para cima e para baixo. Para fazer isso, usaremos os comportamentos Mover Por para movê-lo para cima e, em seguida, de volta para baixo.

Na categoria Transformar, adicione o comportamento Mover Por e conecte-o ao comportamento Colidido que você adicionou anteriormente.

Toque no comportamento Mover Por e veja suas propriedades. Como queremos mover o tijolo para cima quando o jogador o atinge, vamos mudar o Valor Y. Defina isso como um pequeno número, pois queremos apenas dar um pequeno efeito de salto. Eu usei 0.20 Metros.

Você também precisará alterar a Duração. A duração é o tempo que leva para o movimento ser concluído. Por padrão, a duração é definida como 1, mas isso significa que o tijolo se moverá 0,2 metros em 1 segundo. Isso é muito lento para nossas necessidades. Mude a duração para 0.10 Segundos.

Nota: Definir uma duração de zero fará com que seu objeto se mova instantaneamente para a nova posição. Ele não irá animar suavemente. Além disso, repare na caixa com o texto "Linear". Este é o efeito de tween de movimento que é aplicado ao seu movimento. Se seu comportamento tiver uma duração, ele se moverá com base nesse efeito.

Agora, para fazer o tijolo voltar, adicione outro comportamento Mover Por e conecte-o ao anterior.

Mais uma vez, altere as propriedades. Desta vez, queremos que o tijolo se mova de volta para baixo. Para movê-lo para baixo, altere o Valor Y para um número negativo. Como queremos que o tijolo volte à sua posição original, moveremos ele -0.20 Metros. Você também precisará mudar a duração para 0.10 Segundos.

A esta altura, se você pressionar play, seu jogador pode acertar o tijolo pela parte inferior e o tijolo irá subir e descer. No entanto, há alguns problemas que precisamos resolver.

  1. Há um pequeno bug em nossa lógica. Se o jogador continuar pulando muito rápido sem deixar a caixa retornar à posição original, ela continuará subindo.

  2. O tijolo salta para sempre. E se você só quiser algumas moedas, então ele para quando estiver vazio?

  3. Ele ainda não dá nenhuma moeda.

Vamos começar abordando a questão 1. Isso é, na verdade, um bug simples de corrigir. Tudo o que temos a fazer é desligar o comportamento de colisão assim que o jogador o acerta e, em seguida, ligá-lo novamente quando terminar de se mover.

Para fazer isso, mude para a categoria Personalizado e adicione "Comportamento Desligado", depois conecte isso ao comportamento Colidido.

Em seguida, nas propriedades do Comportamento Desligado, toque na caixa vazia rotulada "Selecionar Comportamento". Na lista, localize o comportamento Colidido correto. Observe que a lista mostra todos os comportamentos, de todos os objetos. A lista é classificada com base no nome do objeto.

Agora você precisa ativar o comportamento de colisão novamente quando terminar o salto. Para fazer isso, basta adicionar um Comportamento Ligado da categoria Personalizado e conectá-lo ao segundo comportamento Mover Por que adicionamos. Nas propriedades do comportamento, certifique-se de selecionar o comportamento Colidido para ligá-lo novamente.

Para a questão 2, usaremos um contêiner de caixa para definir a quantidade de moedas que cada tijolo possui. Isso permite que mudemos facilmente tijolos específicos para ter mais ou menos moedas.

A primeira coisa que você deve fazer é adicionar um contêiner de caixa da categoria Personalizado, que você pode colocar em qualquer lugar na tela, pois não se conecta a mais nada. Você também pode renomear esse contêiner de caixa para "Moedas" para facilitar a localização mais tarde (para lembrar como renomear comportamentos, consulte a Parte 4)

Nas propriedades de comportamento do contêiner de moedas, mude a propriedade "Valor Padrão" para 3. Isso será quantas moedas o tijolo conterá.

Agora, da categoria Lógica, adicione um comportamento Adicionar Valores e conecte-o ao segundo Mover Por que adicionamos anteriormente. Usaremos esse comportamento Adicionar Valores para acompanhar cada vez que o jogador acerta o tijolo.

Uma vez que o comportamento "Adicionar Valores" esteja conectado, toque nele para ver as propriedades do comportamento. As propriedades mostram 2 campos de entrada, e o comportamento Adicionar Valores irá retornar a soma dos valores inseridos.

No nosso caso, como estamos usando o comportamento de adicionar valor para acompanhar cada acerto, vamos inserir 1 no campo superior e, para o campo inferior, vamos retornar a soma do comportamento Adicionar Valores de volta ao segundo campo de entrada.

O que isso faz é incrementar a soma toda vez que o comportamento é executado. A primeira vez que o comportamento é executado será 1+0, uma vez que não há soma. A segunda vez que ele executa será 1+1, já que a soma da vez anterior está armazenada.

Em seguida, você precisará verificar se a soma dos valores adicionados é igual ao contêiner Moedas que você adicionou anteriormente.

Para fazer isso, adicione um comportamento SE da categoria Lógica e conecte-o ao Adicionar Valores da etapa anterior.

Com o SE conectado, toque nele para ver as propriedades do comportamento. O comportamento SE irá verificar se uma condição específica é atendida (com base nos 2 campos de entrada e a condição selecionada).

Neste caso, vamos compartilhar a soma do comportamento de Adição e colocá-la no primeiro campo do SE.

Depois, coloque o conteúdo do contêiner de caixa no segundo SE.

Com esses valores inseridos, o próximo comportamento conectado será executado SOMENTE SE a soma do valor adicionado for igual ao valor armazenado no contêiner de moedas.

Agora, o que você precisará fazer é desligar o comportamento de colisão e mudar o gráfico para que você não possa coletar mais moedas. Para fazer isso, adicione um novo comportamento Comportamento Desligado da categoria Personalizado e conecte-o ao SE. Como antes, selecione o comportamento Colidido como aquele que você deseja desligar.

Para mostrar ao jogador que não há mais moedas disponíveis, você pode adicionar o comportamento Mudar Gráfico da categoria Transformar e conectá-lo ao SE.

Uma vez que ele esteja conectado, selecione um novo gráfico nas propriedades do comportamento Mudar Gráfico. Toque na segunda caixa nas propriedades do comportamento e selecione um novo gráfico.

Agora, se você pressionar play, poderá pular e acertar o tijolo 3 vezes antes que ele pare.

Obtendo Pontos

Configurando a UI

A próxima coisa a fazer é realmente conseguir pontos e coletar moedas ao acertar o tijolo!

A primeira coisa que faremos é adicionar um contador no canto da tela para informar ao jogador quantos pontos ele possui.

Portanto, volte para o editor principal pressionando voltar do editor de comportamento. Em seguida, você precisa abrir a barra de Camadas tocando nos 3 pontos no lado direito da tela (você também pode arrastar a partir da borda da tela).

Selecione a camada UI Global. As camadas de UI existem acima das outras camadas na cena e são tipicamente usadas para botões, joysticks e rótulos. Elas também estão fixas na mesma posição na tela e parecem se mover com o restante do conteúdo em sua cena.

Nota: Objetos colocados na camada UI Global existirão em todas as cenas do seu projeto. Se você quiser que algo exista apenas em uma cena, use a camada UI da Cena.

Com a camada UI Global selecionada, toque no ícone de frasco de Objetos Especiais no dock, ou arraste-o para a cena.

Na janela pop-up, selecione Rótulo, e um rótulo será colocado em sua cena.

Toque no rótulo recém-adicionado para abrir as propriedades do objeto. Nas propriedades do rótulo, você pode alterar a cor do texto, fonte, texto a exibir e mais.

Toque na grande caixa de texto e altere o texto para dizer "Pontos:".

Em seguida, toque em "Alinhamento" para expandir as propriedades de alinhamento. Defina a Largura como 110 e a Altura como 64.

Nota: Definir esses valores como 0 remove a área de texto, permitindo que seu texto cresça horizontalmente indefinidamente.

Com as propriedades do rótulo todas configuradas, você pode usar a ferramenta Mover/Transformar para posicionar seu novo rótulo no canto da tela e garantir que não obstrua a visão do jogador.

Assim que seu rótulo estiver posicionado, adicione outro rótulo à cena; usaremos esse rótulo para exibir seus pontos. Desta vez, defina o texto para ser 0, já que seu jogador começa com zero pontos. Diferente da vez anterior, definiremos uma largura e altura especificadas. Defina a Largura para 500pt e a Altura para 64pt. Isso dá uma área especificada, onde o texto pode aparecer. Se você tiver texto demais para caber nessa área, ele será cortado.

Além disso, defina o alinhamento horizontal para ser alinhado à esquerda (Justificado à Esquerda).

Quando você terminar com as propriedades do rótulo, posicione-o ao lado do título "Pontos".

Obtendo Pontos

Agora precisamos aumentar seus pontos toda vez que você coletar uma moeda. Volte à sua camada principal e volte aos comportamentos do tijolo com as moedas para que possamos adicionar os comportamentos necessários.

Da categoria UI, arraste o comportamento "Adicionar à Pontuação" e conecte-o ao segundo comportamento Mover Por adicionado anteriormente neste guia.

Em seguida, toque no comportamento Adicionar à Pontuação e ative o botão Pontuação Infinita. Se esse botão estiver desligado, o próximo comportamento será acionado quando a pontuação especificada for atingida. Além disso, certifique-se de que o rótulo "0" está selecionado como o objeto correto, pois o comportamento Adicionar à Pontuação selecionará automaticamente um rótulo aleatório em sua cena.

Se você pressionar play agora, você ganhará 1 ponto toda vez que o jogador acertar o tijolo.

Agora você pode duplicar esse tijolo (como você aprendeu na parte 3) e colocá-lo por todo o seu nível.

Moedas Individuais

Sua primeira moeda

Às vezes, você pode querer apenas adicionar moedas ao seu nível sem escondê-las dentro de tijolos. Isso é relativamente simples, e vamos discutir isso agora.

Comece adicionando seu gráfico de moeda na sua cena e, em seguida, toque nele para visualizar as propriedades do objeto.

Na parte inferior das propriedades do objeto, certifique-se de que a aba física esteja selecionada.

Enquanto estiver na aba de física, faça a moeda ser passável. Fazer isso permite que nosso jogador continue correndo através dela sem ser parado ou desacelerado.

Em seguida, ajustaremos os limites de colisão da moeda. Os limites de colisão definem a forma física do objeto. Os limites de colisão podem ter um tamanho ou forma diferente da aparência visual do objeto. Para ajustar os limites de colisão, toque no ícone de Colisões.

Na Editor de Colisão, você pode usar a paleta de ferramentas à esquerda para modificar e criar formas de colisão exclusivas.

Para este guia, selecionaremos a opção "Círculo" para criar um limite de colisão circular.

Em seguida, arraste o ponto verde no círculo para redimensionar o limite de colisão. Faça o limite de colisão ter o mesmo tamanho que a moeda. Nota: se o limite de colisão for maior que o seu objeto, então seu jogador pode interagir com ele mesmo antes de tocar fisicamente o gráfico da moeda no meio.

Quando terminar de criar o limite de colisão, toque no ícone de marca de seleção na paleta de ferramentas para aceitar e salvar a nova forma.

Novamente, toque na moeda para visualizar as Propriedades do Objeto. Desta vez, abra o editor de comportamento da moeda.

Na categoria Objeto, adicione o comportamento "Colidido" à tela. Assim como antes, abra as propriedades do comportamento colidido e selecione o jogador Spaceman Verde para Objeto B.

Em seguida, da categoria UI, arraste o comportamento Adicionar à Pontuação e conecte-o ao colidido. Novamente, nas propriedades do comportamento, ative o botão para Pontuação Infinita e certifique-se de que o rótulo correto da pontuação seja selecionado.

Finalmente, da categoria Objeto, adicione o comportamento Destruir Objeto e conecte-o ao comportamento colidido. Isso removerá completamente a moeda assim que o jogador colidir com ela.

Se você pressionar play, agora poderá correr até a moeda e ela desaparecerá.

É isso! Agora seu jogo de plataforma tem moedas colecionáveis. Neste ponto, tudo o que você precisa fazer é duplicar suas moedas e colocá-las por todo o seu nível. Tente ser criativo ao posicionar suas moedas!

Você pode baixar a versão finalizada da Parte 5 no Hub e ver tudo em ação.

Na Parte 6, começaremos a adicionar um pouco de dificuldade ao jogo ao introduzir inimigos.