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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-211.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-212.png)
3. Agora iremos iniciar o projeto, para isso clique em “Start New Project” e dê um nome a ele.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-213.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-214.png)
5. Agora altera a altura (Height) para 400 pixels e a largura (Width) para “Fill parent”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-215.png)
6. Caso queira, altere a cor do fundo clicando na opção “default” abaixo de “background”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-216.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-217.png)
7.1. Agora vamos renomear os quatro itens para algo mais intuitivo como “fantasma” e algum número ou sua respectiva cor.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-218.png)
7.2. Agora vamos adicionar as imagens dos fantasmas.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-219.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-220.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-221.png)
8.1. Agora vamos clicar nas imagens e pegar o bloco “set Heading to” e adicionar ao bloco anterior.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-222.png)
8.2. Na sequência, iremos adicionar o bloco “set Speed to”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-223.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-224.png)
8.4. No bloco “random integer from” devemos mudar os valores para 4 e 8.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-225.png)
8.5. Agora vamos repetir o processo para as outras imagens, porém, alterando o bloco de número para 90 na segunda imagem.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-226.png)
8.6. Para terminar essa parte, iremos repetir para as imagens 3 e 4, porém, alterando os valores dos blocos 270 e 180.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-227.png)
9. Agora precisamos arrumar a movimentação de cada um dos fantasmas. Ao clicar em imagem vamos pegar o bloco “when EdgeReached edge do”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-228.png)
9.1. Adicione o bloco “call Bounce edge”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-229.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-230.png)
9.3. Repita o procedimento para as outras três imagens.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-231.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-232.png)
11. Agora vamos fazer o Pac-Man, primeiro adicionando mais um “ImageSprite” e renomeando para “imagem_pacman”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-233.png)
11.1. Adicione a imagem do Pac-Man.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-234.png)
11.2. Vamos repetir o processo de associar a imagem do pac-man ao “ImageSprite”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-235.png)
12. Altere a opção “Phone size” para “Tablet size”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-236.png)
13. Na aba Layout, adicione uma “Table Arrangement”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-237.png)
13.1. Altere o valor das linhas e colunas para 3.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-238.png)
13.2. Na aba “User Interface” adicione quatro botões.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-239.png)
13.3. Renomear os botões para nomes mais intuitivos.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-240.png)
14. Na aba Layout, adicione um “Horizontal Arrangement”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-241.png)
14.1. Arraste a “Table Arrangement” para dentro da “Horizontal Arrangement”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-242.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-243.png)
14.2. Altere a largura (width) para “Fill parent” e o “Align Horizontal” para center.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-244.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-245.png)
15. Adicione as imagens das setas.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-246.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-247.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-248.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-249.png)
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”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-250.png)
17.1. Agora vamos clicar na “imagem_pacman” e pegar o bloco “set Heading to” e um “set Speed to”
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-251.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-252.png)
17.2. Adicione dois blocos de número e altere seus valores para 90 e 4.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-253.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-254.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-255.png)
19. Adicione mais uma “Horizontal Arrangement”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-256.png)
19.1. Caso a sua barra de rolagem não esteja aparecendo, basta clicar em “Screen1” e depois ativar a função “Scrollable”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-257.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-258.png)
19.2. Adicione quatro “Labels” dentro da segunda “Horizontal Arrangement” e repita mais três vezes.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-259.png)
19.3. Altere o Text da Label1 para “Pontos”:
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-260.png)
19.4. Renomeie a Label2 para “etiqueta_pontos”, e em Text, mude para 0.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-261.png)
19.5. Mude o Text da Label3 para “Vidas”, renomeie a Label4 para “etiqueta_vidas” e na parte de Text, altere para 3.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-262.png)
20. Adicione uma label no meio das setas, após isso, renomeie para “etiqueta_fim_de_jogo” e apague o que estiver na Text.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-263.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-264.png)
21. Adicione um botão, renomeie para “etiqueta_novo_jogo” e altere o Text para Novo Jogo.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-265.png)
22. Agora vamos programar o que a imagem pacman fará, voltando para a aba Block e pegando o bloco “when CollidedWith other do”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-266.png)
22.1. Adicione um bloco “if then else”, que está em Control.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-267.png)
22.2. Adicione um bloco de igualdade no espaço “if”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-268.png)
22.3. Adicione um bloco “get other” no primeiro espaço do bloco de igualdade.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-269.png)
22.4. Clique no item “Ball” e adicione o bloco ball no segundo espaço.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-270.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-271.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-272.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-273.png)
22.7. Adicione um bloco set X e um Y.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-274.png)
22.8. Adicione um bloco “random integer from”, mude o primeiro bloco para 0 e delete o segundo.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-275.png)
22.9. Adicione um bloco “Canvas1 Width”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-276.png)
22.10. Copie o bloco anterior e cole no espaço Y, porém, altere Width para Height.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-277.png)
23. Adicione um bloco “set Text to” de “etiqueta_vidas”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-278.png)
23.1. Adicione um bloco de subtração.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-279.png)
23.2. Adicione um bloco de “etiqueta_vidas Text” e um bloco de número e mude o valor para 1.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-280.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-281.png)
23.4. Adicione um bloco set “Speed” e um bloco Math 0.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-282.png)
24. Adicione um bloco “if then” e depois um bloco de igualdade.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-283.png)
24.1. Adicione um bloco “etiqueta_vidas Text” e um Math 0.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-284.png)
25. Adicione um bloco “set etiqueta_fim_de_jogo Text to” e um bloco Text com a seguinte mensagem: “Fim de Jogo”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-285.png)
26. Adicione um bloco “set Speed to” para cada imagem de fantasma.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-286.png)
27. Adicione um bloco “set imagem_pacman Enabled to” junto a um bloco Logic “false”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-287.png)
28. Agora, vamos programar a função do botão “Novo Jogo”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-288.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-289.png)
30. Adicione quatro blocos “set Speed to” referente a cada imagem de fantasma conectado a um bloco Math “random integer from”.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-290.png)
31. Agora adicione um bloco “set imagem_pacman Enabled to” junto a um bloco Logic true.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-291.png)
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.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-292.png)
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-293.png)
33. Utilize a opção “scan QR code” do aplicativo.
![](https://liag.ft.unicamp.br/act-new/wp-content/uploads/sites/33/2022/05/image-294.png)