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.


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.


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.


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


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!


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.


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.


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.


Adicione um evento AlcancouBorda

Clique no objeto Bola1, escolha o evento quando Bola1.AlcancouBorda, segure, arraste e solte na area detrabalho.


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.


Ao final, seus blocos devem ficar parecidos com os das figuras abaixo. E hora de testar sua App!


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...

Documents

Transcript of BallBounce: um aplicativo de jogo...