Atividade 13 - Revisão!

Enunciado:

01 - Sprite do personagem
O sprite utilizado para o personagem foi do avatar Aang do jogo de nintendo DS, Avatar: The Burning Earth.

sprite sheet do Aang

Iremos utilizar apenas três sprites desse sprite sheet para os três estados do personagem:

- Parado(estado inicial):

- Esquerda:

- Direita:

02 - Personagem

Primeiro iremos criar variáveis do tipo final int para os três estados possíveis do player e uma variável que seja responsável por alocar o estado atual do personagem. Já que o personagem começa parado iremos setar o estado parado como estado inicial para o estado atual.

Ademais, iremos criar uma variável playerY responsável por alocar o eixo y do personagem que começará com o valor 0, já que o personagem vai iniciar no topo da tela.

No setup da aplicação, o tamanho da tela escolhida foi de 600 x 600, iremos inicializar com o loadImage nossas variáveis PImage que correspondem a cada sprite do Aang.

Tanto o personagem como o robô iniciam no mesmo eixo x e por isso iremos criar uma variável float chamada "posicaoInicialX" que receberá um valor de 10 a 562, pois a largura do robô será 38 assim evitando que o robô possa nascer cortado nas extremidades da tela. Esse valor aleatório será gerado com o random do processing.

Na função do personagem, iremos receber o estado atual e colocaremos condições para cada estado. Em cada condição iremos usar o image, associando as variáveis que criamos no setup para cada sprite e nas coordenadas iremos usar a variável "posicaoInicialX" para o eixo x e a playerY para o eixo Y.

Por fim, no draw iremos chamar um background(255) e depois a função do personagem utilizando o estado atual como parâmetro: 

03 - Estados do jogo

Iremos as varáveis do tipo final int no início do nosso código para cada estado da nossa aplicação, rodando e resultado. Rodando para o jogo tiver em andamento e resultado para quando houver a colisão do personagem com o robô e mostrar o vencedor.

Além disso, iremos criar uma variável que vai receber o estado atual do jogo. O estado rodando irá ser o estado inicial.

04 - MEF

A máquina estados finita que iremos usar na nossa aplicação será para o player.

Ademais, Iremos criar mais duas variáveis globais para o player:

- movimentaPlayer: variável que vai ser adicionada ao playerY toda vez que for pressionada alguma tecla. Desse modo, é essa a variável responsável por movimentar o jogador. O valor dela será igual a 20.

- distanciaPlayer: variável responsável por registrar qual a distância que o jogador percorreu. O valor inicial dela será igual a 0.

Primeiro iremos estabelecer que ela só irá trocar de estado enquanto o estado atual do jogo for rodando. Feito isso iremos criar duas condições se o jogador estiver no estado parado:

- Se a seta esquerda for pressionada: o estado atual do jogador vai ser esquerda e a variável movimentaPlayer vai ser somada a playerY e a distanciaPlayer.

- Se a seta direita for pressionada: o estado atual do jogador vai ser direita e a variável movimentaPlayer vai ser somada a playerY e a distanciaPlayer.

Como o enunciando pede para que o personagem não possa dar dois passos na mesma direção, iremos criar mais duas condições:

- Se o estado atual do jogador for esquerda e for pressionada a seta direita: o estado atual do jogador passará a ser direita e a variável movimentaPlayer vai ser somada a playerY e a distanciaPlayer.

- Se o estado atual do jogador for direita e for pressionada a seta esquerda: o estado atual do jogador passará a ser esquerda e a variável movimentaPlayer vai ser somada a playerY e a distanciaPlayer.

Por fim iremos chamar a função MEF no draw:

05 - Robô

Como o enunciado pede para que a altura do robô seja igual a do jogador, o nosso robô terá 48 pixels de altura. Depois escolhi a altura de cada parte do robô de modo que quando somadas o resultado seja igual a 48:

- Cabeça(retângulo): 18 pixels

- Tronco(triângulo): 20 pixels

- Membros(círculos): 10 pixels

Antes de criar a função desenhaRobo, iremos criar as variáveis globais:

- roboY: posição y do robô. Seu valor inicial será 552, visto que a altura robô será 48 pixels.

- distanciaRobo: variável responsável por registrar qual a distância que o robô percorreu. O valor inicial dela será igual a 0.

- movimentaRobo: variável que vai ser diminuída, já que ele vai se mover para cima, ao roboY a cada frame. Desse modo, é essa a variável responsável por movimentar o robô. O valor dela será igual a 1.

Depois fiz os cálculos de cada ponto de origem das formas geométrica, começando pelo retângulo(ponto preto) e o triângulo(pontos vermelhos):

Logo depois inseri os dois círculos, já que como o enunciado pede para que o triângulo fique parcialmente sobreposto a eles, e calculei os pontos de origem(pontos verdes) dos dois: 

Tendo em vista cada ponto calculado, vamos criar a função desenhaRobo que pede um parâmetro(posX)que no caso será a variável posicaoInicialX para que o robô esteja no mesmo eixo x do player.

Depois vamos colocar uma condição para que só quando o jogo estiver no estado rodando, a variável roboY vai ser decrescida da movimentaRobo. Nesse mesmo escopo iremos somar a variável distanciaRobo em 1. 

Fora dessa condição, iremos chamar uma função fill para pintar o nosso robô de cinza com os seguintes parâmetros: 196,196,196.

Ademais; vamos criar as formas geométricas(retângulo, triângulo e os dois círculos) seguindo essa ordem e com os pontos de origem calculados antes:

- rect(roboX,roboY,28,18)

- triangle(roboX+14,roboY+18,roboX,roboY+38,roboX+28,roboY+38)

- ellipse(roboX, roboY+38,20,20)

- ellipse(roboX+28,roboY+38,20,20)

Então chamamos nosso robô no draw:

06 - Colisão

Depois de criado o player e o robô vamos fazer a colisão.

Primeiro vamos criar duas variáveis, posPlayer e posRobo para a posição, respectivamente, do personagem e do robô.

A posPlayer vai ser igual a variável playerY + 48, já que a altura do player é 48. A posRobo vai ser igual a variável playerY.

Depois iremos estabelecer a condição da colisão que será se a variável posPlayer for maior ou igual a posRobo, a variável do estado atual do game vai passar a ser a resultado.

Ademais, vamos estabelecer três condições para quando o estado for resultado:

- Se a distanciaPlayer for maior que a distanciaRobo, irá aparecer o texto "Player Ganhou!".

- Se a distanciaRobo for maior que a distanciaPlayer, irá aparecer o texto "Robô Ganhou!".

- Se a distanciaPlayer for igual que a distanciaRobo, irá aparecer o texto "Empate".

Depois é só chamar a função no draw:

07 - Montando o campo!

Para finalizar e deixar o jogo mais bonito vamos criar uma função desenhaCampo, que desenha uma linha no meio da tela e cria dois textos com as variáveis distanciaPlayer e distanciaRobo para indicar a distância percorrida pelo player e pelo robô. Logo, iremos chamar no draw ficando assim:

DOWNLOAD DO CÓDIGO