BallBounce: um aplicativo de jogo simples

Transcrição

1 BallBounce: um aplicativo de jogo simples Neste tutorial você vai aprender sobre animação usando o App Inventor para fazer uma bola quicar dentro da tela do celular. Inicie um novo projeto Vá até o menu Projetos e escolha a opção Iniciar novo projeto. BallBounce: um aplicativo de jogo simples - 1

2 Nomeie o novo Projeto Dê o nome de BallBounce. Lembre-se que espaços não são permitidos, mas a utilização do caractere underline para unir nomes compostos é aceita. Adicione um objeto Pintura Na Caixa de Diálogo Desenho e Animação, escolha o componente Pintura clicando sobre o mesmo e arrastando-o até o componente Screen1. BallBounce: um aplicativo de jogo simples - 2

3 Ajuste a Tela (Screen) para não permitir que a barra de rolagem apareça A configuração padrão do App Inventor permite que barras de rolagem apareçam na Tela (Screen), o que significa que o usuário pode ir além dos limites da tela quando desliza o seu dedo sobre a mesma. Quando você utiliza o objeto Pintura, você precisa desmarcar a opção rolável do objeto Screen1, localizada no painel de propriedades. Desta forma, o seu objeto Pintura irá ocupar toda a tela do seu celular. BallBounce: um aplicativo de jogo simples - 3

4 Mude a Altura e a Largura do objeto Pintura Tenha certeza de que o objeto Pintura está selecionado (veja a indicação 1 na figura) assim você verá as propriedades deste objeto apresentadas no painel de Propriedades (indicação 2 na figura). Clique na propriedade Altura e marque a opção Preencher principal. Faça o mesmo com a propriedade Largura. BallBounce: um aplicativo de jogo simples - 4

5 Adicione uma Bola Agora que temos um objeto Pintura, nós podemos inserir uma bola a este objeto. Na paleta de Desenho e Animação clique sobre a Bola, arraste e solte-a dentro da Pintura (veja a indicação 1 na figura). É possível aumentar o tamanho da Bola mudando sua propriedade Raio (veja a indicação 2 na figura). Abra o Editor de Blocos BallBounce: um aplicativo de jogo simples - 5

6 Veja os blocos disponíveis para o objeto Bola1 Escolha evento Arremessado da Bola1 Escolha o evento quando Bola1.Arremessado e arraste-o até a área de trabalho. O Arremesso se refere ao movimento feito com os dedos, mostrando a direção para onde a bola será movida na tela. Arremessar é um gesto similar ao gesto feito por um jogador de golfe e não como o gesto feito no jogo do Angry Birds! BallBounce: um aplicativo de jogo simples - 6

7 Configure a Direção 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 até que os blocos verdes fiquem visíveis). Escolha os blocos ajustar Bola1.Direção e ajustar Bola1.Velocidade. BallBounce: um aplicativo de jogo simples - 7

8 Configure o evento quando Bola1.Arremessado Clique e arraste o bloco ajustar Bola1.Direção para dentro do evento quando Bola1.Arremessado. Faça o mesmo com o bloco ajustar Bola1.Velocidade. Ajuste a velocidade da Bola para a mesma velocidade do gesto de arremesso feito pelo usuário Passe o mouse sobre o parâmetro velocidade no evento quando Bola1.Arremessado. Os blocos obter velocidade e ajustar velocidade irão aparecer. Clique sobre o bloco obter velocidade e coloque-os dentro do bloco ajustar Bola1.Velocidade. Ajuste a direção da Bola para a mesma direção do gesto de arremesso feito pelo usuário Passe o mouse sobre o parâmetro direção no evento quando Bola1.Arremessado. Os blocos obter direção e ajustar direção irão aparecer. Clique sobre o bloco obter direção e coloque-os dentro do bloco ajustar Bola1.Direção. BallBounce: um aplicativo de jogo simples - 8

9 Teste sua App Um bom hábito quanto se está criando Apps é ir testando seu aplicativo enquanto o constroi. O App Inventor te permite fazer isso facilmente uma vez que existe uma conecção entre seu telefone (ou emulador) e o ambiente de desenvolvimento do App Inventor. Se você não tem um telefone ou um emulador conectado, recorra ao manual de instruções para conecção disponível no endereço Por que a Bola fica travada na lateral da Tela?! Depois de arremessar a bola pela tela, você provavelmente notou que ela fica parada no canto da tela. Isto acontece por que a direção da bola não foi modificada apesar dela ter tocado canto da Pintura. Para fazer a bola quicar ao tocar a extremidade da tela, nós podemos programar um novo evento chamado Quando AlcançouBorda. BallBounce: um aplicativo de jogo simples - 9

10 Adicione um evento AlcançouBorda Clique no objeto Bola1, escolha o evento quando Bola1.AlcançouBorda, segure, arraste e solte na área de trabalho. BallBounce: um aplicativo de jogo simples - 10

11 Clique no objeto Bola1, escolha o bloco chamar Bola1.Quicarborda, arraste e solte na área de trabalho. Adicione o valor da borda no bloco Bola1.Quicar O método Bola1.Quicar precisa de um argumento borda. Note que o evento Bola1.AlcançouBorda tem a borda como um parâmetro. Nós podemos obter o bloco obter borda a partir do argumento e colocá-lo no método Bola1.Quicar. Passe o mouse sobre o parâmetro borda existente no bloco quando Bola1.AlcançouBorda, clique e arraste o bloco obter borda para o método Bola1.Quicar. BallBounce: um aplicativo de jogo simples - 11

12 Ao final, seus blocos devem ficar parecidos com os das figuras abaixo. É hora de testar sua App! BallBounce: um aplicativo de jogo simples - 12

13 Teste sua Aplicação Agora, quando você arremesar a bola, ela deve quicar ao bater nas bordas do canvas (quadro de pintura). Bom trabalho! Existem várias formas de estender a sua app Aqui estão algumas ideias... porém as possibilidades são infinitas! 1. Mude a cor da bola com base no quão veloz ela está se movendo ou dependendo de qual lado ela ela tocou na borda. 2. Torne a velocidade da bola variável de forma que seja mais lenta e pare após o seu arremesso. 3. Coloque obstáculos ou alvos para serem desviados ou alcançados. 4. Introduza barras para interceptar a bola, como em um jogo de Pong. Visite a página do App Inventor e encontre tutoriais que podem ajudar você a realizar extensões para esta app, em particular, veja o tutorial da app Mini Golf. Divirta-se com estas extensões ou com outras que você imaginar! BallBounce: um aplicativo de jogo simples - 13