Informática

App Inventor

Guião Prático Nº 4 – Parte 2

Neste guião vais continuar a aprender a criar aplicações para telemóvel utilizando
programação. Não te esqueças que tens de ter a APP Mit Ai2 Companion instalada no teu
telemóvel (só para quem tem Android).
Acede a https://appinventor.mit.edu/ e abre o projeto SpaceInvaders.
Irás continuar o teu projeto.
Descarrega (aqui) e extrai para o teu computador o pack de imagens necessárias para esta
segunda parte.

Parte 4 – asteroide
Para o jogo ter algum interesse é necessário um desafio. Neste caso vamos ter um asteroide
a surgir de partes incertas de encontro à nave. Caso a nave lhe acerte com uma bala ele irá
destruir-se.
Começa por inserir na multimédia o meteorite.png e meteoritefire.png e associa a primeira
imagem a um novo ao qual deves renomear para asteroide. O asteroide
deve ter 50x50 pontos de tamanho.

Acede aos Blocos. Vamos começar pelo movimento do asteroide. Ele aparece em cima e
dirige-se para onde está a nave onde desaparece.
Aqui em cima o Y é zero. Se queremos que o
asteroide apareça antes temos de lhe tirar o
seu tamanho (50 pontos)

Aqui em baixo o Y é igual à altura da Pintura

porque o Y está invertido e aumenta para
baixo.

Página 1 de 7 Ricardo Sérgio

 Informática
App Inventor

Guião Prático Nº 4 – Parte 2

Lembra-te também que o X será aleatório, isto é um número ao acaso entre zero e a largura
da pintura, para garantir que o asteroide sairá sempre de posições diferentes no ecrã.
Cria um procedimento de nome moveasteroide

Condições para a posição inicial (XY): monta os blocos no local correto dentro do
procedimento moveasteroide de acordo com o explicado em cima.

Como queremos que este asteroide esteja sempre num movimento repetitivo continuo
temos de associar um novo Temporizador ao asteroide.
No editor de ecrãs adiciona novo Temporizador e dá-lhe o nome de .
Volta aos blocos e adiciona este bloco ao início do jogo:

Monta os seguintes blocos:

para que o temporizador chame o procedimento continuamente.

Experimenta no telemóvel.
O que aconteceu? O asteroide não desaparece no final do
ecrã?
Tens de alterar o temporizador para que repita
exatamente quando o asteroide chega ao final do teu ecrã.
Por exemplo no meu telemóvel o temporizador tem de se
repetir a cada 2 s (2000ms) e no teu?

Página 2 de 7 Ricardo Sérgio

 Informática
App Inventor

Guião Prático Nº 4 – Parte 2

Sempre que quiseres que o Companion leia o teu código do início acede ao menu Compilar
e escolhe Refresh Companion Screen:

Parte 5 – Colisão
Nesta parte vamos tratar das colisões. Duas neste caso.
Quando o tiro colide com o asteroide e quando o asteroide colide com a nave.

Vamos começar pelo tiro a destruir o asteroide (meteoritefire.png )

Acede aos blocos e adiciona os seguintes blocos de programação:

Ajuda: para obteres o bloco “Obter outro” clica em e arrasta o bloco pretendido:

Regras: se o asteroide colidir com a bala o que deve acontecer?

1. A velocidade do asteroide vai a zero.
2. A imagem meteoritefire.png substitui a normal para parecer que o asteroide
explodiu.
3. A bala desaparece.
Adiciona os blocos necessários dentro da condição “Se…então” para que as 3
condicionantes anteriores se verifiquem.
O que aconteceu? Agora o asteroide continua com a imagem errada quando volta a
aparecer? Acho que consegues corrigir isso!
Agora que sabes como testar se houve uma colisão entre componentes, adiciona um bloco
“Se…então” que teste se o meteorito colidiu com a nave.
Quando isso acontecer deve:
1. Aparecer uma imagem (tem de ser spriteimagem) a dizer GameOver.
Adiciona a imagem game_over.png à multimédia.

Página 3 de 7 Ricardo Sérgio

 Informática
App Inventor

Guião Prático Nº 4 – Parte 2

2. O temporizador do Asteroide para.

Atenção com o que aprendeste deves posicionar (X e Y) a imagem game_over.png para
ficarem centradas no teu ecrã em altura e largura face à altura e largura do teu ecrã.
Ajuda: a equação deve refletir a subtração entre a metade do ecrã e a metade da imagem
game_over.png.
Para dar mais cor ao teu jogo adiciona à multimédia a imagem backgroundgame.jpg e
define-a como fundo do Screen1.

Parte 6 – Pontuação
Esta parte é simples. Com o que aprendeste no jogo da toupeira já tens capacidade de fazer
uma pontuação.
1. Começa por adicionar uma .
2. Cria uma variável Pontos.
3. Adiciona 100 pontos à tua pontuação sempre que acertas num asteroide.
4. Atualiza a legenda com o valor da variável pontos.
5. Garante que a pontuação do jogo inicia sempre a zero e isso se reflita na legenda.
Parte 7 – Dois ecrãs
Vamos adicionar um novo Screen (ecrã) para fazer o menu.
Começa por adicionar um novo ecrã de nome Menu. Para isso clica em

Automaticamente o ecrã menu ficará visível no Smartphone do centro do teu monitor e

podes verificar que em cima o ecrã selecionando é o Menu .

Sempre que quiseres trocar para ecrã de jogo tens de aceder aos ecrã e escolher Screen1.

Para já mantém o ecrã menu e adiciona a imagem backgroundmenu.jpg à multimédia.

Página 4 de 7 Ricardo Sérgio

 Informática
App Inventor

Guião Prático Nº 4 – Parte 2

Adiciona essa imagem como fundo do ecrã Menu.

Adiciona um que ocupe todo o ecrã na horizontal e

vertical e que seja transparente.
• Adiciona as imagens play.png e exit.png para a multimédia.
• Adiciona dois botões ao organizador vertical e muda as suas
imagens para play.png e exit.png.
• Garante que os botões ficam centrados em altura e largura.
• A dimensão do botão play será 100x100 pontos e do exit 70x70
pontos.
• Adiciona uma Legenda que diga o nome do jogo AnotherFight com
as caraterísticas da imagem do lado.
Penso que já entendeste a lógica do Menu. O botão Play fará abrir o ecrã
de jogo (Screen1) e o botão Exit sairá da aplicação.
Adiciona os seguintes blocos para obteres o descrito acima:

Testa a tua App no Companion.

Funcionou! Como regressar ao menu através do Jogo?
Ao clicar no botão Voltar (back) do telemóvel deveria voltar ao menu. Para isso adiciona os
seguintes blocos no Screen1.

Página 5 de 7 Ricardo Sérgio

 Informática
App Inventor

Guião Prático Nº 4 – Parte 2

Bem parece estranho mandar fechar o ecrã em vez de dizer para abrir o ecrã de menu, não
é? Pois, o problema na programação de telemóveis é que ao passar de um ecrã para outro
ele vai acumulando ecrãs abertos pelo que se utilizássemos o bloco:

ocorriam duas situações erradas.

1. o ecrã de jogo era deixado aberto em background só que era sobreposto pelo ecrã
Menu.
2. o ecrã Menu aberto era o segundo aberto porque já existia um que foi aberto ao
iniciar a App. Conclusão neste momento tínhamos o seguinte cenário:

Ecrãs existente abertos

em background Ecrã que estás a ver

Muda o ecrã para o Menu e descarrega a App para o teu telemóvel e instala-a para a veres
a funcionar.

O que aconteceu? Passou logo para o jogo sem ir para o menu?

O App inventor é de certa forma limitado neste aspeto, pelo que se devia planear a
sequência de ecrãs antecipadamente. Ou seja, devíamos fazer os ecrãs por ordem com que
aparecem.
Uma vez que fizemos o jogo antes do Menu vamos ter isso em conta na nossa programação.
Aqui é que fica complicado porque temos de alterar o nosso código que estava tão bem
feito e simples. Mas quem manda é o IDE, o programador adapta-se!
Começa por alterar os blocos no ecrã menu para os seguintes:

Deste modo podemos ter uma Flag, neste caso a definição do valor inicial para 1.
Agora no ecrã Screen1, que a aplicação carrega sempre como sendo o ecrã principal, temos
de testar este valor. Se o valorinical for diferente de 1 quer dizer que nunca passou no ecrã
de Menu e temos de o forçar a ir para lá (quando entramos na app). Se o valorinicial for 1
então quer dizer que já estivemos no ecrã de menu e é suposto jogar. Acede aos blocos do
ecrã Screen1.

Página 6 de 7 Ricardo Sérgio

 Informática
App Inventor

Guião Prático Nº 4 – Parte 2

Insere o código que já

tinhas no bloco “Quando
o Screen1 inicializar”

Finalmente, para que o ecrã de menu só seja aberto uma vez também é necessário fechar
o ecrã quando já se foi ao ecrã de Menu mais do que uma vez.

Compila o APK final e instala no teu telemóvel.

e diverte-te a jogar!
Chama o teu professor para avaliar.
Desafios finais (escolhe um ou mais):
• Adicionar um Splashscreen com a tua marca de software. Ao entrar no jogo aparece
o splashscreen depois o menu e só depois o jogo.
• Adicionar som ao asteroide a explodir, som do tiro e adicionar música ao jogo.
• Adicionar Bosslevel.
• Adicionar velocidade progressiva do asteroide e nave destrói-se ao colidir com o
asteroide.
• Adicionar ideias pessoais.

Página 7 de 7 Ricardo Sérgio