Tutorial produzido pelos integrantes do grupo “Neumann Tech” da Faculdade de Tecnologia da Unicamp Limeira.

Arquivos da aula: https://drive.google.com/drive/folders/1zUp2PEjD85ygW5mdWTQ_LfvuDG-YZ1eR?usp=sharing

1. Para começar a atividade devemos acessar o site https://appinventor.mit.edu/ e clicar na opção “Create Apps!”, então será solicitado que realize o login, para isso deverá usar sua conta google e aceitar os termos da plataforma.

2. Após efetuar o login será levado para esta tela, caso ache necessário poderá alterar o idioma do site para português do Brasil.

3. Agora iremos iniciar o projeto, para isso clique em “Start New Project” e dê um nome a ele.

4. Vamos começar acessando a aba “Drawing and Animation” e selecionando o item “canvas” e por fim o arrastando para dentro da nossa tela.

5. Agora altera a altura (Height) para 400 pixels e a largura (Width) para “Fill parent”.

6. Caso queira, altere a cor do fundo clicando na opção “default” abaixo de “background”.

7. De volta a aba “ Drawing and Animation” iremos selecionar o item “ImageSprite” e arrastá-lo para dentro da nossa tela, repetiremos esse procedimento mais três vezes, elas representaram os fantasmas do jogo.

7.1. Agora vamos renomear os quatro itens para algo mais intuitivo como “fantasma” e algum número ou sua respectiva cor.

7.2. Agora vamos adicionar as imagens dos fantasmas.

7.3. Após adicionar todas as imagens iremos associar cada “ImageSprite” a uma delas. Primeiro clicando no item desejado, e na opção “Picture” escolhendo uma das quatro e finalizando clicando no “OK”.

8. Vamos programar a movimentação dos fantasmas, para isso, devemos acessar a abas “Blocks” no canto superior direito, depois iremos clicar em “Screen1” e escolhendo o bloco “when Screen1 Initialize do”.

8.1. Agora vamos clicar nas imagens e pegar o bloco “set Heading to” e adicionar ao bloco anterior.

8.2. Na sequência, iremos adicionar o bloco “set Speed to”.

8.3. Na aba “Math”, iremos pegar dois bloco, o primeiro será um bloco simples de número que irá ser conectado ao primeiro set, e outro que é o “random integer from” que deverá ser conectado ao segundo.

8.4. No bloco “random integer from” devemos mudar os valores para 4 e 8.

8.5. Agora vamos repetir o processo para as outras imagens, porém, alterando o bloco de número para 90 na segunda imagem.

8.6. Para terminar essa parte, iremos repetir para as imagens 3 e 4, porém, alterando os valores dos blocos 270 e 180.

9. Agora precisamos arrumar a movimentação de cada um dos fantasmas. Ao clicar em imagem vamos pegar o bloco “when EdgeReached edge do”.

9.1. Adicione o bloco “call Bounce edge”.

9.2. Delete o bloco “Direction” e coloque o cursor do mouse acima do “edge” para ter acesso ao “get edge”, e então, coloque-o no lugar do bloco “Direction”.

9.3. Repita o procedimento para as outras três imagens.

10. Volte para a aba “Designer”, selecione uma da imagens e desative a opção “Rotates”, assim vamos evitar que as imagens dos fantasmas girem. Repita esse procedimento para as outras.

11. Agora vamos fazer o Pac-Man, primeiro adicionando mais um “ImageSprite” e renomeando para “imagem_pacman”.

11.1. Adicione a imagem do Pac-Man.

11.2. Vamos repetir o processo de associar a imagem do pac-man ao “ImageSprite”.

12. Altere a opção “Phone size” para “Tablet size”.

13. Na aba Layout, adicione uma “Table Arrangement”.

13.1. Altere o valor das linhas e colunas para 3.

13.2. Na aba “User Interface” adicione quatro botões.

13.3. Renomear os botões para nomes mais intuitivos.

14. Na aba Layout, adicione um “Horizontal Arrangement”.

14.1. Arraste a “Table Arrangement” para dentro da “Horizontal Arrangement”.

14.2. Altere a largura (width) para “Fill parent” e o “Align Horizontal” para center.

15. Adicione as imagens das setas.

16. Clique no primeiro botão, apague tudo o que estiver em Text, já na Image, selecione uma das imagens das setas. Repita o procedimento para os outros três botões.

17. Agora, vamos programar a ação de cada um dos botões. Para isso vamos voltar para a aba Blocks, clicar no “botao_cima” e pegar o bloco “when Click do”.

17.1. Agora vamos clicar na “imagem_pacman” e pegar o bloco “set Heading to” e um “set Speed to”

17.2. Adicione dois blocos de número e altere seus valores para 90 e 4.

17.3. Repita o processo para os botões baixo, direito e esquerdo, alterando os valores do primeiro bloco de número para 270, 0 e 180, respectivamente.

18. Volte para a aba Designer, na seção “Drawing and Animation” selecione o item “Ball” e adicione a tela, depois na opção “Radius” altere o valor para 10.

19. Adicione mais uma “Horizontal Arrangement”.

19.1. Caso a sua barra de rolagem não esteja aparecendo, basta clicar em “Screen1” e depois ativar a função “Scrollable”.

19.2. Adicione quatro “Labels” dentro da segunda “Horizontal Arrangement” e repita mais três vezes.

19.3. Altere o Text da Label1 para “Pontos”:

19.4. Renomeie a Label2 para “etiqueta_pontos”, e em Text, mude para 0.

19.5. Mude o Text da Label3 para “Vidas”, renomeie a Label4 para “etiqueta_vidas” e na parte de Text, altere para 3.

20. Adicione uma label no meio das setas, após isso, renomeie para “etiqueta_fim_de_jogo” e apague o que estiver na Text.

21. Adicione um botão, renomeie para “etiqueta_novo_jogo” e altere o Text para Novo Jogo.

22. Agora vamos programar o que a imagem pacman fará, voltando para a aba Block e pegando o bloco “when CollidedWith other do”.

22.1. Adicione um bloco “if then else”, que está em Control.

22.2. Adicione um bloco de igualdade no espaço “if”.

22.3. Adicione um bloco “get other” no primeiro espaço do bloco de igualdade.

22.4. Clique no item “Ball” e adicione o bloco ball no segundo espaço.

22.5. Na label “etiquetas_pontos” pegue o bloco “set Text to” no espaço then, e adicione um bloco de soma, presente na seção Math.

22.6. Na label “etiqueta_pontos” pegue o bloco Text e encaixe no primeiro espaço do bloco de soma, depois pegue um bloco de numero na seção Math e mude para 1.

22.7. Adicione um bloco set X e um Y.

22.8. Adicione um bloco “random integer from”, mude o primeiro bloco para 0 e delete o segundo.

22.9. Adicione um bloco “Canvas1 Width”.

22.10. Copie o bloco anterior e cole no espaço Y, porém, altere Width para Height.

23. Adicione um bloco “set Text to” de “etiqueta_vidas”.

23.1. Adicione um bloco de subtração.

23.2. Adicione um bloco de “etiqueta_vidas Text” e um bloco de número e mude o valor para 1.

23.3. No item “imagem_pacman” pegue dois blocos set, um X e outro Y, depois adicione dois blocos Math de número e altere os valores para 150 e 200.

23.4. Adicione um bloco set “Speed” e um bloco Math 0.

24. Adicione um bloco “if then” e depois um bloco de igualdade.

24.1. Adicione um bloco “etiqueta_vidas Text” e um Math 0.

25. Adicione um bloco “set etiqueta_fim_de_jogo Text to” e um bloco Text com a seguinte mensagem: “Fim de Jogo”.

26. Adicione um bloco “set Speed to” para cada imagem de fantasma.

27. Adicione um bloco “set imagem_pacman Enabled to” junto a um bloco Logic “false”.

28. Agora, vamos programar a função do botão “Novo Jogo”.

29. Adicione dois blocos “set Text to” um referente a “etiqueta_pontos” e outra a “fim_de_jogo”, junto a um bloco Math 0 e um Text vazio.

30. Adicione quatro blocos “set Speed to” referente a cada imagem de fantasma conectado a um bloco Math “random integer from”.

31. Agora adicione um bloco “set imagem_pacman Enabled to” junto a um bloco Logic true.

32. No seu computador clique em “Connect”, depois “Ai Companion”, e por fim, faça o scan do QR Code que aparecer no monitor com a câmera do seu celular.

33. Utilize a opção “scan QR code” do aplicativo.