BallBounce: um aplicativo de jogo...
Transcript of BallBounce: um aplicativo de jogo...
BallBounce: um aplicativo de jogo simples
Neste tutorial voce vai aprender sobre animacao usando o App Inventor para fazer uma bola quicar dentro da telado celular.
Inicie um novo projeto
Va ate o menu Projetos e escolha a opcao Iniciar novo projeto.
BallBounce: um aplicativo de jogo simples - 1
Nomeie o novo Projeto
De o nome de BallBounce. Lembre-se que espacos nao sao permitidos, mas a utilizacao do caractere underline paraunir nomes compostos e aceita.
Adicione um objeto Pintura
Na Caixa de Dialogo Desenho e Animacao, escolha o componente Pintura clicando sobre o mesmo e arrastando-oate o componente Screen1.
BallBounce: um aplicativo de jogo simples - 2
Ajuste a Tela (Screen) para nao permitir que a barra de rolagem apareca
A configuracao padrao do App Inventor permite que barras de rolagem aparecam na Tela (Screen), o que significaque o usuario pode ir alem dos limites da tela quando desliza o seu dedo sobre a mesma. Quando voce utiliza oobjeto Pintura, voce precisa desmarcar a opcao rolavel do objeto Screen1, localizada no painel de propriedades.Desta forma, o seu objeto Pintura ira ocupar toda a tela do seu celular.
BallBounce: um aplicativo de jogo simples - 3
Mude a Altura e a Largura do objeto Pintura
Tenha certeza de que o objeto Pintura esta selecionado (veja a indicacao 1 na figura) assim voce vera as propriedadesdeste objeto apresentadas no painel de Propriedades (indicacao 2 na figura). Clique na propriedade Altura e marquea opcao “Preencher principal”. Faca o mesmo com a propriedade Largura.
BallBounce: um aplicativo de jogo simples - 4
Adicione uma Bola
Agora que temos um objeto Pintura, nos podemos inserir uma bola a este objeto. Na paleta de Desenho e Animacaoclique sobre a Bola, arraste e solte-a dentro da Pintura (veja a indicacao 1 na figura). E possıvel aumentar o tamanhoda Bola mudando sua propriedade Raio (veja a indicacao 2 na figura).
Abra o Editor de Blocos
BallBounce: um aplicativo de jogo simples - 5
Veja os blocos disponıveis para o objeto Bola1
Escolha evento Arremessado da Bola1
Escolha o evento quando Bola1.Arremessado e arraste-o ate a area de trabalho. O Arremesso se refere aomovimento feito com os dedos, mostrando a direcao para onde a bola sera movida na tela. Arremessar e um gestosimilar ao gesto feito por um jogador de golfe e nao como o gesto feito no jogo do Angry Birds!
BallBounce: um aplicativo de jogo simples - 6
Configure a Direcao e a Velocidade da Bola. Primeiro, visualize os blocos de Ajuste
Clique na Bola1 e visualize os blocos de ajuste disponıveis para este objeto (role a tela do Visualizador ate que osblocos verdes fiquem visıveis). Escolha os blocos ajustar Bola1.Direcao e ajustar Bola1.Velocidade.
BallBounce: um aplicativo de jogo simples - 7
Configure o evento quando Bola1.Arremessado
Clique e arraste o bloco ajustar Bola1.Direcao para dentro do evento quando Bola1.Arremessado. Faca omesmo com o bloco ajustar Bola1.Velocidade.
Ajuste a velocidade da Bola para a mesma velocidade do gesto de arremesso feito pelo usuario
Passe o mouse sobre o parametro velocidade no evento quando Bola1.Arremessado. Os blocos obter veloci-dade e ajustar velocidade irao aparecer. Clique sobre o bloco obter velocidade e coloque-os dentro do blocoajustar Bola1.Velocidade.
Ajuste a direcao da Bola para a mesma direcao do gesto de arremesso feito pelo usuario
Passe o mouse sobre o parametro direcao no evento quando Bola1.Arremessado. Os blocos obter direcaoe ajustar direcao irao aparecer. Clique sobre o bloco obter direcao e coloque-os dentro do bloco ajustarBola1.Direcao.
BallBounce: um aplicativo de jogo simples - 8
Teste sua App
Um bom habito quanto se esta criando Apps e ir testando seu aplicativo enquanto o constroi. O App Inventor tepermite fazer isso facilmente uma vez que existe uma coneccao entre seu telefone (ou emulador) e o ambiente dedesenvolvimento do App Inventor. Se voce nao tem um telefone ou um emulador conectado, recorra ao manual deinstrucoes para coneccao disponıvel no endereco http://appinventor.mit.edu/explore/ai2/setup.html.
Por que a Bola fica travada na lateral da Tela?!
Depois de arremessar a bola pela tela, voce provavelmente notou que ela fica parada no canto da tela. Isto acontecepor que a direcao da bola nao foi modificada apesar dela ter tocado canto da Pintura. Para fazer a bola ”quicar”aotocar a extremidade da tela, nos podemos programar um novo evento chamado Quando AlcancouBorda.
BallBounce: um aplicativo de jogo simples - 9
Adicione um evento AlcancouBorda
Clique no objeto Bola1, escolha o evento quando Bola1.AlcancouBorda, segure, arraste e solte na area detrabalho.
BallBounce: um aplicativo de jogo simples - 10
Clique no objeto Bola1, escolha o bloco chamar Bola1.Quicarborda, arraste e solte na area de trabalho.
Adicione o valor da borda no bloco Bola1.Quicar
O metodo Bola1.Quicar precisa de um argumento borda. Note que o evento Bola1.AlcancouBorda tem a“borda” como um parametro. Nos podemos obter o bloco obter borda a partir do argumento e coloca-lo no metodoBola1.Quicar. Passe o mouse sobre o parametro “borda” existente no bloco quando Bola1.AlcancouBorda,clique e arraste o bloco obter borda para o metodo Bola1.Quicar.
BallBounce: um aplicativo de jogo simples - 11
Ao final, seus blocos devem ficar parecidos com os das figuras abaixo. E hora de testar sua App!
BallBounce: um aplicativo de jogo simples - 12
Teste sua Aplicacao
Agora, quando voce arremesar a bola, ela deve quicar ao bater nas bordas do canvas (quadro de pintura). Bomtrabalho!
Existem varias formas de estender a sua app
Aqui estao algumas ideias... porem as possibilidades sao infinitas!
1. Mude a cor da bola com base no quao veloz ela esta se movendo ou dependendo de qual lado ela ela tocouna borda.
2. Torne a velocidade da bola variavel de forma que seja mais lenta e pare apos o seu arremesso.
3. Coloque obstaculos ou alvos para serem desviados ou alcancados.
4. Introduza barras para interceptar a bola, como em um jogo de Pong.
Visite a pagina do App Inventor e encontre tutoriais que podem ajudar voce a realizar extensoes para esta app,em particular, veja o tutorial da app Mini Golf. Divirta-se com estas extensoes ou com outras que voce imaginar!
BallBounce: um aplicativo de jogo simples - 13