Flappy Bird - Clone em 5 minutos

23

Stats

8,132 visits, 11,605 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 15 May, 2019. Last updated 16 May, 2019

Iremos utilizar apenas 3 sprites:

  • 1 Cano
  • 1 Personagem
  • 1 Pista
  • 1 Background

Tamanho da tela:

Tanto o Windows Size como o Layout Size, utilizaremos 400x500px como exemplo:

Com o image Point no canto superior esquerdo, coloque o background do mesmo tamanho da tela (400,500) e na posição 0,0 de X e Y

Lógica da Pista:

1 - A pista irá sempre para esquerda (O “X” da posição da pista sempre irá subtrair)

2 - Saindo da tela vem outra pista igual para “fechar” o espaço da primeira.

3 - A pista 2 fica fora da tela, e também é arrastada com a mesma velocidade para esquerda.

4 - Quando a Pista 1 sair da tela, a pista 2 já está cobrindo todo o Layout.

5 - Retornando a Pista 1, para a posição INICIAL onde estava a Pista 2.

6 - E continua o processo, fazendo assim um Loop Infinito.

Montando a Pista

Insira o Sprite da pista e coloque na posição conforme a imagem:

Criando a pista 2

A pista 2 será criada quando iniciar o layout:

No modo Debug é possível ver a segunda pista criada, para isso vá no canto esquerdo e selecione o nome do sprite, ele ficará destacado na tela.

Passando a pista pelo layout

A cada Tick, será alterado o "X" da pista:

E quando sair da tela, este volta para posição inicial do lado direito.

Inserindo o cano

Monte o sprite do cano com o image Point de acordo com o exemplo abaixo:

Velocidade do cano:

O cano é passado na tela com a mesma velocidade:

Criando uma cópia do cano fora do Layout:

destruindo o cano quando sair da tela

Ao executar o cano estará passando pela tela:

Deixe fora do Layout

Deixar fora ou destruir não terá o problema deste original passar também no layout:

Criando uma instância do cano: Cano 2

É apenas alterado a posição Y do novo cano criado, e espelhado para ficar de cabeça para baixo:

Os dois deverão está se movendo ao mesmo tempo:

Códigos até o momento:

Inserindo o Personagem:

Adicionando o Behavior de Plataforma

Efeito para rotacionar o personagem:

Ação do Personagem

Usando o Teclado como exemplo:

Executando o Salto:

Jogo Funcionando faltando as colisões:

Dica para melhorar a tela do Layout:

Criando a colisão, Personagem com cano e Pista

Colidindo irá Reiniciar o Layout

Codificação Geral

Clique na imagem para visualizar em tela cheia:

Criando uma Pontuação

Use uma variável para armazenar os pontos:

Adicionando os Pontos

Fim de Jogo

Faça seu Recorde, Crie um Layout de início e de Fim, use a criatividade

Divirta-se!!!

http://www.Instagram.com/Liherbert_Artes
  • 6 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Obrigado! Você é bom! Adeus

  • Creio que não consegui fazer esta pontuaçao para quando ele passar pelo cano acrescentar +1 na pontuaçao, ja tentei de uma monte de formas.

    • mais seguisse as etapas, só são duas linhas de código, se o X do cano for menor que a posição X do personagem, aí conta um ponto. O trigger Once ele executa só uma vez, aí qdo vier o outro cano executa novamente

  • eu preciso das imagens você pode por favor deixar o download da imagens para todos??

    • Aqui não tem uma opção para colocar imagens para download, e como faz tempo, não tenho mais estas originais. Nos próximos tutoriais irei criar uma pasta a parte em um drive, ai colocarei o link para download.