Como Fazer um Jogo Pong - hyperPong

Nota: Um arquivo de projeto concluído para este tutorial pode ser encontrado no final deste artigo.

Introdução

Neste tutorial, criaremos um jogo semelhante ao Pong do zero. Estaremos cobrindo algumas funcionalidades e comportamentos mais avançados no hyperPad, então este tutorial assume algum conhecimento básico com o editor do hyperPad. Se você acha que precisa se familiarizar mais com a criação de um jogo do zero, pode conferir o Guia Completo - Criando um Jogo de Plataforma primeiro.

Pong é um jogo simples para duas pessoas que consiste apenas em duas raquetes e uma bola, e pode ser visto como uma versão digital simples do tênis de mesa. Cada jogador controla uma raquete, ambas em lados opostos da mesa. As raquetes só podem se mover para frente e para trás, atingindo a bola em direção ao jogador oposto. Se um jogador perder a bola, o outro jogador ganha um ponto. O primeiro jogador a fazer 11 pontos vence!

Para o nosso jogo Pong, incluiremos a opção de jogar no modo 1 Jogador (Jogador vs. IA), modo 2 Jogadores (Jogador vs. Jogador), ou modo 0 Jogadores "Assistir" (IA vs. IA).

Parte 1: Configuração do Projeto e Menu Principal

Vamos começar criando um novo projeto.

Abra o menu Projetos no hyperPad e toque em Novo Projeto. Dê um nome ao seu projeto e toque em Próximo. A orientação pode ser deixada como modo paisagem. Para este tutorial, o Suporte ao Dispositivo está definido para iPad 4:3. Na próxima tela, selecione "Vista de Pássaro" e deixe o resto como padrão.

Agora que temos um novo projeto pronto para uso, vamos rapidamente começar a configurar um menu principal antes de mergulhar direto no jogo. A primeira coisa que faremos é renomear nossa cena para "Menu Principal".

Toque no botão Menu de Projeto/Cena e toque no botão de engrenagem ao lado da nossa "Cena 1".

Toque na opção Configurações e renomeie nossa cena para "Menu Principal". Toque em Salvar para salvar e fechar a janela de configurações.

Em seguida, para permanecer tradicional aos primeiros jogos retrô, como o Pong de arcade, podemos deixar nossa cor de fundo preta.

Toque no botão Configurações da Cena e selecione Fundo. Toque no botão "Alterar Cor" e defina para preto (#000000FF).

Agora vamos adicionar um rótulo de título ao nosso menu principal. Toque no botão Objetos Especiais e selecione Rótulo.

Digite o nome do seu jogo no campo de texto ("hyperPong" foi inserido para este tutorial), defina o tamanho da fonte para algo grande, mas não muito grande. Para um título "hyperPong", 72 pontos é um bom tamanho. Mude a cor para branco (#FFFFFFFF) e coloque-o no centro do menu próximo ao topo.

Agora temos uma cena de menu principal para preencher com botões de todos os nossos modos de jogo. Vamos deixar o menu como está por enquanto, e terminá-lo depois que tivermos um jogo jogável.

Parte 2: Configurando a Cena do Jogo e Raquete

Toque no botão Menu do Projeto e toque em "Adicionar Cena". Nomeie como "Jogo" e toque em Criar. Agora na cena do Jogo, você deve ver uma tela vazia. Assim como fizemos com a cena do Menu Principal, vá em frente e toque no botão Configurações da Cena novamente e mude o fundo para preto (#000000FF).

Vamos trabalhar criando nossas raquetes de jogador. Crie um objeto vazio indo para o botão Objetos Especiais e selecionando "Objeto Vazio". Mude sua cor para branca (#FFFFFFFF) e certifique-se de que o controle deslizante de opacidade está totalmente ativado.

Renomeie o objeto para "Jogador-1" e defina seu modo de física para Física, e deixe Passável ativado.

A razão pela qual manteremos Passável ativado é para que tenhamos maior controle sobre como a bola interage com a raquete quando a atinge. Queremos poder controlar a velocidade e a direção que a bola vai manualmente.

Nas propriedades do objeto Jogador-1, vá para a aba Transformar e defina a escala X para 25% e mova-o para a esquerda do campo de jogo.

Em seguida, adicionaremos alguns controles à nossa raquete para que ela possa se mover. Com a raquete selecionada, vá para seu editor de comportamento voltando para a aba Física.

Coloque um comportamento de Joystick Analógico, encontrado na seção Interação (se você não conseguir encontrá-lo, talvez precise tocar na aba Avançado). Isso criará automaticamente um joystick para você no editor de cenas.

Mas não queremos permitir que a raquete se mova apenas por meio do movimento do joystick. Queremos que uma IA também possa realizar movimentos.

Na seção Personalizada, coloque um Contêiner de Caixa. Isso armazenará qual direção a raquete se moverá. Assim, tanto um jogador controlando um joystick quanto uma IA executando cálculos poderão se mover alterando esse único valor. Seu valor padrão deve ser definido como 0. Também é uma boa ideia dar um bom nome a ele, "Direção de Movimento" parece adequado.

Com o Contêiner de Caixa selecionado, pressione o botão "Alterar Campo de Entrada" e toque em Sim. Isso criará um comportamento de Definir Campo de Entrada para o contêiner de caixa para que possamos alterar seu valor quando necessário. Conecte o Definir Campo de Entrada ao Joystick Analógico.

Com o comportamento de Definir Campo de Entrada selecionado, arraste o valor de saída do Joystick Analógico para o campo Novo Valor. Selecione a propriedade "y". Agora, o contêiner de caixa Direção de Movimento acompanhará o quão longe o jogador move o joystick para cima ou para baixo (eixo y).

Agora que estamos acompanhando o quanto o joystick se move para cima ou para baixo, também precisamos redefini-lo para zero se o jogador soltar o joystick. Caso contrário, a raquete continuará se movendo na direção que ela lembrou por último.

Na seção Interação, adicione um comportamento de Parou de Tocar e toque nele para abrir suas propriedades. Por padrão, ele está rastreando quando o jogador para de tocar a raquete, mas queremos rastrear quando o jogador para de tocar o joystick.

Toque na propriedade do objeto para alterá-la e selecione o joystick. Você pode precisar selecionar a camada UI Global para poder escolhê-la. Quando estiver selecionado, toque no botão de check. O comportamento deve agora estar mostrando o joystick como o objeto rastreado.

Toque no Definir Campo de Entrada que fizemos anteriormente e duplique-o. Com o Definir Campo de Entrada duplicado, conecte-o ao comportamento Parou de Tocar e defina sua propriedade Novo Valor como 0.

Agora nossa variável contêiner de caixa Direção de Movimento acompanhará os movimentos para cima e para baixo do joystick e redefinirá para 0 quando o joystick for solto. Isso nos dá uma ótima maneira de dizer à nossa raquete como se mover, então vamos continuar e dar movimento à nossa raquete.

Na seção Personalizada, coloque um comportamento de Temporizador. Nas suas propriedades, defina o intervalo como 0. Este temporizador será executado o mais frequentemente possível (uma vez por quadro), o que nos dá a oportunidade de atualizar o movimento da raquete com muita frequência.

Antes de definir a velocidade da raquete, queremos ter certeza de que o valor para o contêiner de caixa Direção de Movimento esteja confinado dentro de um intervalo razoável, apenas no caso de ficar muito alto ou muito baixo. Caso contrário, nossa raquete se moverá rápido demais em alguns casos.

Na seção Lógica, coloque um comportamento de Mínimo e um comportamento de Máximo. Conecte o comportamento Mínimo ao temporizador e o comportamento Máximo ao Mínimo. Você deve ter algo que se pareça com isto:

Nas propriedades do comportamento Mínimo, defina o primeiro valor como o valor de saída do comportamento Direção de Movimento e defina o segundo valor como 1.

O comportamento Mínimo retornará o menor número que é dado a ele. Portanto, se o valor de Direção de Movimento for superior a 1, ele retornará 1. Caso contrário, retornará simplesmente o valor para Direção de Movimento.

Nas propriedades do comportamento Máximo, defina o primeiro valor como o resultado do Mínimo e o segundo valor como -1.

O comportamento Máximo retornará o maior número que é dado a ele. Portanto, se o valor de Direção de Movimento for menor que -1, ele retornará -1. Caso contrário, retornará o valor do Mínimo (que é 1 ou Direção de Movimento, o que for menor).

O que tudo isso significa, é que o valor resultante do Máximo é efetivamente o valor de Direção de Movimento confinado entre -1 e +1. Isso nos dá total controle sobre quão rápido a raquete pode possivelmente se mover!

Um intervalo de -1 a +1 é fácil de trabalhar, mas será muito lento se usarmos isso diretamente como a velocidade da raquete.

Na seção Lógica novamente, coloque um comportamento de Multiplicar Valores e conecte-o ao comportamento Máximo. Para o primeiro valor, defina como o resultado da saída do comportamento Máximo. Para o segundo valor, podemos definir como um bom valor de "velocidade máxima".

Por enquanto, defina como 20. Se você achar que depois a raquete se move muito devagar ou muito rápido, você pode simplesmente definir esse número como um mais alto ou mais baixo.

O comportamento de Múltiplicar Valores agora nos dá um bom intervalo de velocidade para trabalhar, de -20 a +20.

Agora é um bom momento para definir a velocidade da raquete. Na seção Física, adicione um comportamento de Definir Velocidade e conecte-o ao comportamento de Múltiplicar Valores. Defina o campo "x" como 0 e o campo "y" como o resultado da saída do comportamento de Múltiplicar Valores.

Experimente! Quando você joga o jogo, a raquete deve se mover enquanto você move o joystick para cima e para baixo.

Como você deve ter percebido durante seus testes, nada está impedindo a raquete de sair da tela. Na próxima parte, adicionaremos algumas barreiras para manter tudo à vista.

Parte 3: Limites do Jogo

Antes de continuarmos, vamos usar um pouco de foresight e considerar um bom design de jogo. A raquete do jogador não ficará no centro da tela, mas mais perto das bordas à medida que montamos nosso jogo. Isso se tornará um problema à medida que temos elementos UI (ou seja, joysticks) que se sobreponham aos nossos elementos de jogo (ou seja, raquetes).

Em vez de usar toda a tela como a área jogável, devemos definir os limites para que nossa raquete não vá para debaixo do joystick onde nossos dedos estão, onde não podemos vê-la facilmente. Dessa forma, não perderemos de vista nossa raquete perto da parte inferior da área jogável. Também podemos usar esse recuo como um limite rigoroso para manter nossos objetos dentro do campo jogável.

Toque no botão Objetos Especiais e crie um novo Objeto Vazio. Toque no novo objeto vazio para abrir suas propriedades.

Mantenha seu modo físico definido como Parede e desative Passável. Defina sua cor para que possamos vê-la visualmente, um cinza escuro opaco (#1F1F1FFF) se encaixa bem. Defina o atrito para 0% e o rebote para 100%.

Agora na aba Transformação da parede, defina a escala Y para 200%, e mova-a para o topo da área da tela. Agora estique-a para que ela se ajuste à largura total da área da tela. Você também pode ativar o modo de encaixe da grade para ajudá-lo a colocá-la com precisão.

Agora duplique a parede e mova a cópia para a parte inferior.

Duplique novamente e defina sua escala X para 200%. Em seguida, estique a altura para ajustar à tela e posicione-a à esquerda da tela.

E novamente, duplique a parede vertical e mova-a para a direita da tela. Você deve ter agora um campo de jogo totalmente fechado:

Quando você joga o jogo agora, provavelmente notará imediatamente que pode se mover através das paredes como se elas não estivessem lá. Isso se deve a duas razões; definimos a raquete como