Flappy Bird - Clone em 5 minutos

Stats

387 visits, 438 views

Translations

This tutorial hasn't been translated.

Tools

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
  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!