Tutorial App Inventor – 2° parte
E ai galera da programação, tudo tranquilo com vocês?
Nessa nossa 2° parte do projeto Space Invaders, vamos fazer a parte gráfica do projeto, criando o foguete, a nave e a munição, igual na imagem abaixo.
Bora lá?
Preparando o terreno
Primeiramente vamos começar baixando as imagens do foguete e da nave, você pode baixar elas clicando aqui:
Uma vez que as imagens estejam baixadas, nós vamos começar a fazer o projeto.
Vamos adicionar então um canvas, ele pode ser encontrado na aba Drawing and Animation, no lado esquerdo, ao clicar em cima você vai ter acesso ao canvas, onde vai arrastar ele para dentro do seu celular, igual no exemplo abaixo.
Próximo passo, vamos ajustar para que fique com o fundo preto e completo, na aba properties, ou propriedades, vamos ajustar isso.
Na direita temos a caixinha onde vamos completar com essas informações.
Você vai clicar ali em Canvas1, e vai editar as informações dentro dos campos onde estão circulados ali na direita:
Na parte do BackgroundColor, vamos selecionar a cor preta, onde está escrito Width, você vai colocar a opção Fill parent e em Height, vai selecionar a opção pixels e colocar 300, exatamente igual os exemplos abaixo.
Feito isso vamos adicionar as imagens do foguete e da nave na tela, para isso, vamos adicionar um ImageSprite, que fica no mesmo lugar onde pegamos o canvas. Você seleciona ele e arrasta para dentro da tela, seguindo, você vai clicar na 1° imagem que arrastou no lado direito e vai renomear ele para RocketSprite.
Na sequência, vamos adicionar as imagens dos respectivos objetos dentro do projeto para que ele mostre na tela para o usuário, fiz um vídeo para explicar esses processos.
Link: https://youtu.be/hAgXOFdbFc0
Adicionando a bala (Tiro do foguete)
Próximo passo, vamos adicionar a bola que vai ser a munição do nosso foguete, o processo é o mesmo, a ball está localizada no mesmo local que o canvas e as imagens. vamos arrastar a bola para o meio do celular e ajustar as configurações.
Vamos colocar as informações exatamente como eu pus aqui, o PaintColor para green e o radius para 8.
Beleza, está tomando forma nosso jogo hein?
Agora vamos adicionar o relógio. Caso não encontre ele, basta escrever na parte de pesquisa o nome clock, como no exemplo abaixo:
Após localizar o relógio, você deve arrastar o ele para dentro do celular e ajustar as configurações de TimeInterval para 3000.
Criando o rodapé
Nesta etapa, vamos na parte de layout e vamos adicionar um HorizontalArrangement, abaixo do canvas
Depois disso vamos na parte de User Interface e vamos adicionar 2 labels dentro deste HorizontalArrangement, vamos também trocar o nome da label2 para ScoreLabel e ajustar as frases mostradas em cada um dos campos, no label1 vamos trocar o text para Score: e no label2 para 0.
Por último, vamos adicionar um botão para que possa resetar a contagem.
Assim, teremos toda a nossa interface pronta, próximo passo é fazer a parte lógica!
Beleza pessoal?
Espero que tenham gostando da montagem do jogo!
Dúvidas ou Sugestões? Deixe o seu comentário!
Um abraço e até o próximo post. Valeu!
#App Inventor
#ScapeInvaders
#GiovaniDaCruz
