Programacao_para_Dispositivos_Moveis Livro-Texto Unidade III

Prévia do material em texto

210
Unidade III
Unidade III
7 TEORIA
7.1 Planejando jogos
O foco da unidade III está na construção de um jogo, desde a sua concepção inicial até a sua publicação.
No atual estágio do aprendizado, não podemos pensar em projetos extremamente complexos. Um 
dos métodos de aprendizagem para projetos mais sofisticados é a remixagem (RESNICK, 2014). Os 
projetos são abertos e compartilhados segundo as licenças da Creative Commons, a fim de estarem 
disponíveis para as pessoas aprenderem o código e fazerem alterações nele. Esse tipo de aprendizagem 
é utilizado no MIT, no grupo de creative learning (aprendizagem criativa). O App Inventor apresenta uma 
imensa biblioteca de aplicativos e jogos para serem remixados.
A tarefa de desenvolver jogos digitais é bastante específica: ela requer conhecimentos de psicologia, 
de engenharia, de comunicação e de muitas outras áreas. Daremos uma noção da construção de um 
jogo simples e dos conceitos envolvidos no mundo do design de games. A área responsável por 
construir jogos, sejam eles digitais ou não, é o game design.
Assim, montaremos um jogo dentro das possibilidades didáticas, mas sempre transmitindo os 
conceitos principiais, como fizemos nas unidades anteriores.
 Saiba mais
Creative Commons (CC) é uma organização sem fins lucrativos e 
uma rede internacional dedicada ao acesso educacional e à divulgação 
de trabalhos para que outros possam utilizar legalmente e compartilhar 
software. A organização lançou várias licenças públicas gratuitas de direitos 
autorais, conhecidas como licenças Creative Commons. Essas licenças 
permitem que os autores das obras digam quais direitos eles reservam para 
si e quais direitos eles liberam para os destinatários ou outros criadores. 
Conheça mais sobre a CC no site indicado.
 Creative Commons. Disponível em: https://bit.ly/2OGWZbb. Acesso em: 
19 mar. 2021.
211
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
7.1.1 Identificação da demanda e definição das características do jogo
Existem várias categorias de jogos e, segundo Novak (2010), os gêneros delas se baseiam em mais de 
uma característica de um jogo. A autora propôs um modelo para categorizar os gêneros e os subgêneros 
dos jogos a partir das várias características deles. Mostramos esse modelo a seguir.
•	 Gêneros dos jogos digitais
— Ação
- Jogos de plataforma
- Jogos de tiro
- Corrida
— Luta
— Aventura
— Ação-aventura
— Cassino
— Quebra-cabeça
— Jogo de representação de papéis (RPG)
— Simulações
- Simulações de veículos 
- Simulações de processos (construção e administração)
- Simulações esportivas e participativas
— Estratégia
- Estratégia baseada em turnos (TBS)
- Estratégia em tempo real (RTS) 
— Jogos massivos multijogador online (MMOGs)
212
Unidade III
 Saiba mais
Consulte o livro indicado a seguir, o qual, além de bastante ilustrado, 
contém dicas de especialistas.
NOVAK, J. Desenvolvimento de games. São Paulo: Cengage Learning, 2010.
Gameflow
Existe um elemento que é um grande problema a ser resolvido pelo desenvolvedor de jogo: o fluxo. 
Ele não depende da complexidade do jogo nem da sua simplicidade, mas da empatia do jogo pelo 
jogador. Como o seu jogo pode permitir que as pessoas superem obstáculos significativos sem que essa 
superação seja muito exigente? Qual é a graça de um jogo se ninguém consegue vencer?
Esse problema modelado é chamado de fluxo ou gameflow. O termo foi criado pelo psicólogo Mihalyi 
Csikszentmihalyi (RABIN, 2011).
O fluxo é um estado mental de imersão total. O jogador entra em um túnel em que só ele e o 
dispositivo existem, fica inconsciente e despreocupado com coisas fora da experiência imediata. 
Csikszentmihalyi chama tal fluxo de experiência máxima, e ele é comum em qualquer atividade na 
qual as pessoas estão nessa zona.
Entre as características do fluxo, temos as elencadas a seguir:
•	 propósitos claros e compatíveis com as habilidades do jogador;
•	 feedback claro e imediato;
•	 possibilidade de concentração completa na tarefa em mãos;
•	 usuário com controle sem esforço e sem preocupação de perder o controle;
•	 perda de autoconsciência;
•	 distorção da percepção de tempo.
Na figura a seguir, estar no canal do fluxo significa estar em equilíbrio entre o desafio dado e a 
dificuldade de conseguir ter sucesso. Para entender o processo gráfico apresentado, imagine o desafio 
em grau de 50%. Se, no jogo, a habilidade necessária for qualquer valor acima de 70%, por exemplo, 
isso gerará no jogador ansiedade e/ou frustração. Ao contrário, qualquer valor abaixo de 30% tornará o 
jogo muito fácil, e ele ficará entediante.
213
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
 
Ansiedade
Frustração
Desafio
Habilidades
Flu
xo Tédio
Figura 163 – Canal do fluxo
Dessa forma, temos uma gama de jogos que podemos pensar para iniciar o projeto.
7.1.2 Apresentação da metodologia de game design document (GDD)
O game design document (GDD) é um documento destinado ao desenvolvimento do jogo. Ele deve 
conter a história do jogo, os seus personagens e os demais itens que auxiliarão você e a equipe de 
desenvolvimento a elaborar o produto (GLÓRIA JUNIOR, 2016).
O GDD é uma planta baixa do jogo que servirá de base para a sua programação. Também funciona 
como guia de padronização na produção do jogo, facilitando o trabalho em equipe. 
Não existe um modelo-padrão de GDD. Os dois mais usados são os de página única e de dez páginas.
GDD de página única
O GDD de página única é um documento pequeno, de apenas uma página, cuja finalidade é dar uma 
visão geral do jogo e de suas principais características. Nele, os tópicos são curtos e objetivos.
Esse GDD pode ser ótimo para projetos pequenos ou de baixa complexidade. Todo desenvolvedor de 
jogos deve ter familiaridade pelo menos com o GDD de página única.
A seguir, temos detalhamentos sobre a estrutura do GDD de página única.
•	 Identidade do jogo
— Resumo do jogo.
— O que ele faz.
— Rápida descrição.
214
Unidade III
• Descrição da mecânica
— Listar seu jogo do ponto de vista da mecânica.
— Como funciona?
— Botões, sensores, sons e deslizar o dedo na tela.
• Características
— Elementos do jogo.
— Exige reflexo rápido?
— Exige raciocínio?
— Estratégia adotada.
• Arte
— Será um jogo 2D ou 3D? 
— No caso de jogo 2D, será com Sprites? Haverá figuras? 
— No caso de jogo 3D, utilizará polígono? Será vetorial?
• Música/trilha sonora
— Fontes sonoras, trilhas e efeitos.
— Estilos musicais.
• Interface/controles
— Listar os controles.
— Teclas ou touch?
— Como será a interface de usuário dos jogadores?
• Dificuldade
— Quais serão as dificuldades do jogo? 
215
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
— Haverá inimigos? 
— Haverá obstáculos?
— Tempo?
— Estratégia?
— Quebra-cabeça?
•	 Personagem
— Como será o personagem do jogo? Fazer um resumo.
•	 Cronograma
— Definir as metas e prazos para concretizar o projeto.
•	 Definições gerais
— Gênero.
— Plataformas.
— Quantidade de níveis.
— Quantidade de vilões/inimigos.
— Público-alvo.
GDD de dez páginas
O GDD de dez páginas é um documento de aproximadamente dez páginas que vai delinear 
os principais pontos do projeto com um pouco mais de detalhe e profundidade do que o GDD de 
página única.
Como se trata de um documento maior do que o GDD de página única, ele disponibiliza mais espaço 
para a inclusão de elementos visuais (como diagramas do gameplay), a fim de facilitar o entendimento 
e tornar a leitura mais dinâmica.
O modelo de dez páginas é bem completo, e é útil para recordar detalhes que podem passar 
desapercebidos enquanto o projeto está sendo esboçado. 
A seguir, temos detalhamentos sobre a estrutura do GDD de dez páginas.
216
Unidade III
•	 História (se houver) e tipo de jogo
— Descrição detalhada da história (com começo, meio e fim).
— Breve caracterização do ambiente em que o jogo acontece e, também, dos principais personagens 
envolvidos na história.
•	 Gameplay e jogabilidade
O conceito de gameplay não pode ser traduzido diretamente para jogabilidade,pois, segundo 
Vannucchi e Prado (2009), o gameplay emerge das interações do jogador com o ambiente, a partir 
da manipulação das regras e mecânicas do jogo, pela criação de estratégias e táticas que tornam 
interessante e divertida a experiência de jogar.
— Descrição da mecânica do jogo.
- Quais serão os desafios encontrados pelo jogador e como superá-los? 
- Como o jogador evoluirá no jogo e como as dificuldades aumentarão?
- Qual será a relação do gameplay na história?
- Quais serão os desafios enfrentados para avançar na história?
- O protagonista deverá vencer chefões para progredir?
- Como serão a pontuação, as recompensas, as recargas, o dinheiro, a experiência, os itens 
colecionáveis, as armas e os poderes?
- Quais serão os benefícios que o jogador terá ao coletar itens ou ao desviar de um caminho?
- Como o jogador vencerá?
- Quando o jogador salvará o universo?
- O jogador acabará com todos os inimigos?
- O jogador alcançará determinada pontuação?
- O jogador achará um portal?
- Como o jogador perderá?
- O jogador perderá três vidas?
- O jogador ficará sem energia?
217
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
•	 Personagens/ator
— Descrição das características do(s) personagem(ns) principal(is) (nome, idade, tipo etc.).
- Existirá uma história no passado dos personagens?
- Como serão a personalidade e o caráter dos personagens?
- Quais serão as habilidades e os poderes característicos de cada personagem?
- Esboço dos personagens.
- Ações que os personagens poderão executar (andar, correr, pular, pulo duplo, escalar, voar, 
nadar etc.).
•	 Controles
— Como o jogador controlará o personagem?
— Como funcionará a interação com a tela do dispositivo móvel?
•	 Câmera
— Direção de fotografia.
- Como será a câmera do jogo?
- Como o jogador visualizará o jogo?
- Ilustrar visualmente como o jogo será visto.
•	 Universo do jogo
— Descrição e ilustração dos cenários do jogo.
- Como as fases do jogo estarão conectadas?
- Qual será a estrutura do mundo do jogo?
- Qual será a emoção presente em cada ambiente?
- Que tipo de música deverá ser usada em cada fase?
- Incluir ilustrações de todos os mapas e de todas as fases do jogo.
218
Unidade III
•	 Inimigos/desafios
— Descrição e ilustração dos inimigos e dos desafios que existem no universo do jogo.
- Quando os inimigos e os desafios irão aparecer?
- Como superar cada inimigo ou desafio?
- Qual será a recompensa para o jogador ao derrotar cada inimigo ou ao superar cada desafio?
- Qual será o comportamento e quais serão as habilidades de cada inimigo?
- Qual será a complexidade dos desafios?
- O que será necessário fazer para vencer o inimigo?
•	 Interface
Elementos sobre a tela que fornecem informações para o jogador. Além de placas ou vidas, 
pode-se citar informações como munição, mira, barra de saúde, inventário de itens coletados.
— Design e ilustração do HUD (heads-up display).
— Posicionamento dos elementos do HUD.
— Design e ilustração das interfaces do jogo: tela inicial, menu de opções, tela de pause, menu de 
itens, tela de loading etc.
•	 Cutscenes
São cenas curtas inseridas no jogo, que nem sempre são controláveis. Podem ser danças, 
comemorações ou mudanças de ambiente de jogo.
— Descrição das animações que serão incluídas no jogo.
— Descrição dos roteiros.
— Qual método será usado para a criação das animações?
— Em quais momentos eles serão exibidos?
•	 Cronograma
— Descrição detalhada do cronograma de desenvolvimento.
219
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Quadro 115 – Modelo de cronograma
 Março Abril Maio Junho
Tarefa/semana 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 Progresso
Escrever o GDD Completo
Apresentar o GDD Completo
Selecionar/desenhar a 
arte dos personagens Em progresso
Selecionar/desenhar a 
arte dos cenários Em progresso
Desenvolver o sistema 
de controle do 
jogador
 Planejado
Desenvolver o sistema 
de mapas e fases Planejado
Implementar a 
detecção de colisão Planejado
7.1.3 Criação de imagens para jogos
Para criar personagens, existem programas excelentes, como os da família Adobe – o Photoshop e 
o Illustrator, por exemplo –, porém são programas comerciais e nem sempre estão ao alcance de todos.
Hoje temos alternativas gratuitas tão poderosas quanto as versões pagas, com excelente qualidade. 
Normalmente esses programas tem código aberto e equipes de desenvolvedores que cuidam da 
atualização e da segurança. A interface das versões pagas e das gratuitas não é a mesma, mas a filosofia 
de trabalho é. A vantagem desses programas é que existem muitos tutoriais públicos em português para 
auxiliar na aprendizagem.
Edição de fotografia e montagem de imagens
Para a edição de fotografia e de desenhos, existe o Gimp (GNU Image Manipulation Program). 
Trata-se de um editor de imagem multiplataforma disponível para GNU/Linux, Windows e outros.
O Gimp fornece ferramentas sofisticadas para editar imagens. Trabalha com camadas, máscaras, 
seleções e filtros como padrão, mas é expansível, permitindo aumentar ainda mais a produtividade graças 
a muitas opções de personalização e plug-ins de terceiros, ou até mesmo feitos pelo próprio usuário.
Na figura a seguir, vemos uma tela do Gimp, que foi utilizado para editar várias imagens deste livro.
220
Unidade III
Figura 164 – Tela do Gimp: criando uma ilustração
 Saiba mais
Para baixar o Gimp, acesse o site:
Gimp. Disponível em: https://bit.ly/3lqfxIX. Acesso em: 19 mar. 2021.
Procure a versão em português brasileiro. No mesmo site, você pode 
encontrar a documentação completa:
MANUAL do usuário. Gimp, 2015. Disponível em: https://bit.ly/3eT0W7p. 
Acesso em: 19 mar. 2021.
Diversas universidades públicas lançaram tutoriais. O tutorial indicado a 
seguir tem a vantagem de ser bastante simples para iniciantes.
NATUSCH, G. Tutorial básico de Gimp 2.2. 2009. 
Disponível em: https://bit.ly/38OiQ7F. Acesso em: 19 mar. 2021.
221
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Criação de imagens vetoriais para jogos
O Gimp e o Photoshop tratam imagens rasterizadas. Agora temos dois problemas. Imagens 
rasterizadas são imagens formadas por pixels, que podem ser entendidos como pontos. O formato mais 
simples de compreender é o BMP.
Uma imagem BMP é uma matriz em que cada célula guarda um número correspondente à cor daquele 
ponto (pixel) da imagem. Em uma imagem vetorial, por outro lado, as formas são geradas por meio de vetores, 
ou equações matemáticas. A grande diferença entre as duas está no redimensionamento. Uma imagem 
rasterizada de 500 x 500 pixels, quando duplicada, fica com o tamanho de 1000 x 1000 pixels, e cada ponto 
também duplicará. Nesse caso, um ponto passa a ocupar quatro pontos, dois na horizontal e dois na vertical. 
Com isso, a imagem perderá a resolução e a qualidade ou ficará serrilhada. No caso da imagem vetorial, as 
formas são montadas a partir de equações. Portanto, não há perda de qualidade no resultado. 
Para trabalhar com imagens vetoriais, temos o Inkscape como a versão genérica do Adobe Illustrator. 
O Inkscape é um programa de gráficos vetoriais de qualidade profissional também multiplataforma. 
Ele roda em Windows, Mac OS X e GNU/Linux. É voltado para profissionais de design em todo o mundo, 
para a criação de uma grande variedade de gráficos, como ilustrações, ícones e logotipos. O Inkscape 
usa o padrão aberto SVG (scalable vector graphics) do consórcio W3C como formato nativo e é uma 
aplicação de uso livre e de código aberto.
O Inkscape tem ferramentas de desenho com recursos comparáveis ao CorelDRAW e Xara Xtreme. 
Ele pode importar e exportar diversos formatos de arquivo, incluindo SVG, AI, EPS, PDF, PS e PNG. Tem 
um grande conjunto de funcionalidades, uma interface simples, suporte a multi-idiomas e foi projetado 
para ser extensível (os usuários podem personalizar as funcionalidades do Inkscape com extensões).
Na figura a seguir, temos uma ilustração criadapelo Inkscape.
Figura 165 – Criando uma imagem a partir do zero utilizando o Inkscape
222
Unidade III
 Saiba mais
Para baixar o Inkscape, acesse o site:
Inkscape. Disponível em: https://bit.ly/3rWN53I. Acesso em: 19 mar. 2021.
Procure a versão em português brasileiro. No mesmo site você pode 
encontrar a documentação completa:
APRENDENDO com Inkscape. Inkscape, [s.d.]. 
Disponível em: https://bit.ly/3lqq32K. Acesso em: 19 mar. 2021.
8 JOGOS NO APP INVENTOR
8.1 Projetando o jogo 1
Antes de iniciarmos o nosso projeto chamado de jogo 1, precisamos entender como funciona o 
elemento essencial para jogos animados. Trata-se da Tela de Pintura, que será vista no próximo item.
8.1.1 Design
Aqui, trataremos do componente chamado de Tela de Pintura, também conhecido como Canvas. 
Esse componente é o que denominamos de fundo para criar gráficos simples e bidimensionais (2D), e a 
sua compreensão é fundamental para a construção de jogos 2D.
Sistema de coordenadas da Tela de Pintura
Um desenho em uma tela é, na verdade, uma matriz de pixels, como uma imagem BMP, em que um 
pixel é o menor ponto de cor possível que pode aparecer na tela.
A posição de cada pixel é definida por coordenadas x-y em um sistema matricial, conforme ilustrado 
na figura a seguir.
Figura 166 – Sistema de coordenadas da Tela de Pintura
223
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Nesse sistema de coordenadas:
•	 x define a posição no eixo horizontal (começando em 0 na extrema esquerda e aumentando 
conforme você se move para a direita na tela);
•	 y define a posição no eixo vertical (começando em 0 no topo e aumentando conforme você 
move a tela para baixo).
A célula imediatamente à direita do canto superior esquerdo é dada por x = 1 e y = 0. O canto 
superior direito tem coordenada x igual à largura da Tela de Pintura menos 1 (por conta da posição zero).
Cada célula da Tela de Pintura contém um pixel que define a cor que deve aparecer ali. As cores 
são as mesmas disponíveis para utilizar nas propriedades dos componentes e podem ser alteradas de 
diversas maneiras, de modo estático ou de modo dinâmico, com o auxílio do Temporizador.
Pintura: eventos e propriedades 
Para estudarmos a Tela de Pintura, vamos montar uma tela-padrão. Inicie um novo projeto. 
O exemplo será chamado de EstudoCanvas. Observe os passos mostrados no quadro 116.
Quadro 116 – Configuração da Tela de Pintura
Passo Janela Componente Propriedade Operação
1 Paleta Organização OrganizaçãoHorizontal1 Arrastar para o Visualizador
2 Propriedades OrganizaçãoHorizontal1 Alinhamento Horizontal Centro
3 Propriedades OrganizaçãoHorizontal1 Alinhamento Vertical Centro
4 Propriedades OrganizaçãoHorizontal1 Largura Preencher principal
5 Paleta Desenho e Animação Pintura1 Arrastar para o Visualizador
6 Propriedades Pintura1 Altura 70%
7 Propriedades Pintura1 Largura Preencher principal
8 Paleta Organização OrganizaçãoHorizontal2 Arrastar para o Visualizador
9 Propriedades OrganizaçãoHorizontal2 Alinhamento Horizontal Centro
10 Propriedades OrganizaçãoHorizontal2 Alinhamento Vertical Centro
224
Unidade III
Passo Janela Componente Propriedade Operação
11 Propriedades OrganizaçãoHorizontal2 Largura Preencher principal
Como vamos utilizar essa tela para outras atividades, iremos salvar um ponto de controle, 
conforme indicado na figura 167.
Figura 167 – Salvando um ponto de controle
Para retornar a dado ponto de controle, basta abrir o menu de projetos e retornar àquele ponto, sem 
esquecer de salvar o projeto com outro nome.
225
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Vamos incluir um botão na OrganizaçãoHorizontal1, conforme indicado no quadro 117.
Quadro 117 – Configuração de botão
Passo Janela Componente Propriedade Operação
1 Paleta Interface de Usuário Botão1
Arrastar para a 
OrganizaçãoHorizontal1
Para mudar para o editor de blocos, faça o que se mostra a seguir.
Quadro 118 – Configuração para desenho de ponto
Passo Paleta Componente Operação
1 Botão1 quando.Clique Arrastar para o Visualizador
2 Pintura1 ajustar.CorDePintura Vermelho
3 Pintura1 chamar.DesenharPonto
100
100
Ao fazermos o teste no AI2 Companion, quanto damos o clique, aparentemente nada acontece. 
No entanto, se a tela do dispositivo estiver bem limpa e você estiver muito atento, poderá ver um 
pontinho com o tamanho de um pixel na posição (100,100), como ilustrado na figura a seguir.
Figura 168 – Um pixel na tela do dispositivo
226
Unidade III
A Tela de Pintura permite desenhar algumas figuras geométricas. Vamos alterar o bloco DesenharPonto 
pelo DesenharCírculo, conforme orientado no quadro 119.
Quadro 119 – Configuração para desenho de círculo
Passo Paleta Componente Operação
1 Botão1 quando.Clique Arrastar para o Visualizador
2 Pintura1 ajustar.CorDePintura Vermelho
3 Pintura1 chamar.DesenharCírculo
xCentro = 100
yCentro = 100
raio = 3
Agora o ponto está com 3 pixels de raio, ou seja, está bem mais visível, como podemos verificar 
na próxima figura. O parâmetro fill (preencher):
•	 se verdadeiro, deixa o círculo cheio;
•	 se falso, pinta apenas a circunferência.
Figura 169 – DesenharCírculo com fill verdadeiro e falso
Além de DesenharCírculo, existem métodos para desenhar linhas, formas, arcos e texto.
227
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Eventos
A superfície de pintura não serve só para desenhar. Também é sensível ao toque, respondendo a uma 
série de eventos muito importantes nos jogos. O fato de ser sensível ao toque significa que alguns jogos 
não precisam mais de botão para serem controlados.
 Lembrete
O App Inventor pode ser considerado orientado a eventos, e um dos 
tipos de evento citados na unidade I é o de Desenho e Animação, de que 
estamos tratando agora.
Para entendermos isso, vamos carregar o projeto salvo no ponto de controle. Se foi adotado o 
nome-padrão, abra o EstudoCanvas_pontoDeControle1. Se não foi adotado esse nome, então abra 
o seu ponto de controle. Salve o projeto como EstudoCanvas_Eventos. Veja o quadro a seguir.
Quadro 120 – Configuração da superfície de pintura
Passo Janela Componente Propriedade Operação
1 Paleta Interface de Usuário Botão1 Arrastar para a OrganizaçãoHorizontal1
2 Propriedades Botão1 Texto Limpar
3 Componentes Renomear Botão1 btnLimpar
4 Paleta Organização OrganizaçãoVertical1 Arrastar para a OrganizaçãoHorizontal2
5 Paleta Organização OrganizaçãoVertical2 Arrastar para a OrganizaçãoHorizontal2
6 Paleta Organização OrganizaçãoVertical3 Arrastar para a OrganizaçãoHorizontal2
7 Propriedades OrganizaçãoVertical3 Altura Preencher principal
8 Propriedades OrganizaçãoVertical3 Largura Preencher principal
9 Propriedades OrganizaçãoVertical2 Altura Preencher principal
10 Propriedades OrganizaçãoVertical2 Largura Preencher principal
11 Propriedades OrganizaçãoVertical1 Altura Preencher principal
12 Propriedades OrganizaçãoVertical1 Largura Preencher principal
13 Paleta Interface de Usuário Legenda1 Arrastar para a OrganizaçãoVertical1
14 Propriedades Legenda1 Texto X1
15 Componentes Renomear Legenda1 txtX1
16 Paleta Interface de Usuário Legenda1 Arrastar para a OrganizaçãoVertical1
17 Propriedades Legenda1 Texto Y1
18 Componentes Renomear Legenda1 txtY1
19 Paleta Interface de Usuário Legenda1 Arrastar para a OrganizaçãoVertical2
228
Unidade III
Passo Janela Componente Propriedade Operação
20 Propriedades Legenda1 Texto X2
21 Componentes Renomear Legenda1 txtX2
22 Paleta Interface de Usuário Legenda1 Arrastar para a OrganizaçãoVertical2
23 Propriedades Legenda1 Texto Y2
24 Componentes Renomear Legenda1 txtY2
Botão Limpar
Veja o quadro a seguir, que aborda a configuração do botão Limpar.
Quadro 121 – Configuração do botão Limpar
Passo Paleta Componente Operação Valor
1 btnLimpar quando.Clique Arrastar para o Visualizador
2 Pintura1 Apagar
3 txtX1 ajustar.Texto “X1”
4 txtY1 ajustar.Texto “Y1”
5 txtX2 ajustar.Texto “X2”
6 txtY2 ajustar.Texto “Y2”
229
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Evento Tocou
O bloco Tocou fornece a posição (x,y)do toque, em relação ao canto superior esquerdo da tela, 
quando o usuário toca a tela e imediatamente levanta o dedo. Veja o quadro 122.
Quadro 122 – Configuração de evento Tocou
Passo Paleta Componente Operação Valor
1 Pintura1 quando.Tocou Arrastar para o Visualizador
2 txtX1 ajustar.Texto Encaixar quando Pintura1.Tocou x em para
3 txtY1 ajustar.Texto Encaixar quando Pintura1.Tocou y em para
Ao tocar em algum lugar da tela, as posições x e y são retornadas. Veja a figura a seguir.
Figura 170 – Retorno da posição do toque na tela
230
Unidade III
ToqueParaCima e ToqueParaBaixo
Os eventos ToqueParaBaixo e ToqueParaCima acontecem em momentos específicos da interação 
com a tela. O ToqueParaBaixo ocorre quando o usuário toca na tela e deixa o dedo na tela. Nesse 
momento, o evento devolve as coordenadas do ponto tocado. O ToqueParaCima acontece quando um 
toque que já existe termina, ou seja, o dedo já está na tela e o usuário deixa de tocar. O bloco retorna as 
coordenadas do ponto em que o dedo é levantado. Veja os quadros a seguir.
Quadro 123 – Configuração do evento ToqueParaBaixo
Passo Paleta Componente Operação Valor
1 Pintura1 quando.ToqueParaBaixo Arrastar para o Visualizador
2 txtX1 ajustar.Texto Bloco quando Pintura1.ToqueParaBaixo x
3 txtY1 ajustar.Texto Bloco quando Pintura1.ToqueParaBaixo y
Quadro 124 – Configuração do evento ToqueParaCima
Passo Paleta Componente Operação Valor
1 Pintura1 quando.ToqueParaCima Arrastar para o Visualizador
2 txtX2 ajustar.Texto Bloco quando Pintura1.ToqueParaCima x
3 txtY2 ajustar.Texto Bloco quando Pintura1.ToqueParaCima y
Para testar os eventos de toque, deixe o dedo na tela, observe as coordenadas e note que, 
enquanto o dedo estiver tocando a superfície, o par X2, Y2 não é atualizado. Deslize o dedo e solte. 
Após soltar o dedo, as coordenadas X2 e Y2 serão atualizadas com aquelas correspondentes ao 
ponto em que o dedo deixou de tocar a tela. Isso está ilustrado na figura a seguir.
231
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Figura 171 – As coordenadas (X1,Y1) correspondem ao momento do toque. 
As coordenadas (X2,Y2) correspondem ao momento em que se parou de tocar
Arremessado
O gesto do evento Arremessado acontece quando se desliza rapidamente o dedo sobre a tela. 
O evento devolve a posição do início do arremesso (X1 e X2), os componentes da velocidade nos eixos x e y 
(xVel e yVel) em pixels por milissegundo e a direção (zero grau aponta para a margem direita da tela) 
do lançamento, bem como o módulo da velocidade. O valor SpriteArremessado será verdadeiro se um 
Sprite estiver localizado próximo ao ponto inicial do gesto de arremesso. Veja o quadro 125.
Quadro 125 – Configuração do evento Arremessado
Passo Janela Componente Propriedade Operação
1 Paleta Interface de Usuário Legenda1 Arrastar para a OrganizaçãoVertical3
2 Propriedades Legenda1 Texto Velocidade
3 Componentes Renomear Legenda1 txtVel
4 Paleta Interface de Usuário Legenda1 Arrastar para a OrganizaçãoVertical3
5 Propriedades Legenda1 Texto Direção
232
Unidade III
Passo Janela Componente Propriedade Operação
6 Componentes Renomear Legenda1 txtDir
O botão Limpar precisa ser alterado para iniciar as novas legendas. Veja os quadros a seguir.
Quadro 126 – Alteração no botão Limpar
Passo Paleta Componente Operação Valor
1 btnLimpar quando.Clique Arrastar para o Visualizador
2 Pintura1 Apagar
3 txtX1 ajustar.Texto “X1”
4 txtY1 ajustar.Texto “Y1”
5 txtX2 ajustar.Texto “X2”
6 txtY2 ajustar.Texto “Y2”
7 txtVel ajustar.Texto “Velocidade”
8 txtDir ajustar.Texto “Direção
233
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Quadro 127 – Configuração dos blocos do evento Arremessado
Passo Paleta Componente Operação Valor
1 Pintura1 Arremessado Arrastar para o Visualizador
2 txtX1 ajustar.Texto Bloco quando Pintura1.Arremessado x
3 txtY1 ajustar.Texto Bloco quando Pintura1.Arremessado y
4 txtX2 ajustar.Texto Bloco quando Pintura1.Arremessado xvel
5 txtY2 ajustar.Texto Bloco quando Pintura1.Arremessado yvel
6 txtVel ajustar.Texto Bloco quando Pintura1.Arremessado velocidade
7 txtDir ajustar.Texto Bloco quando Pintura1.Arremessado direção
Na figura a seguir, temos o resultado de um arremesso. Nesse arremesso, o dedo tocou a tela 
no ponto x = 85 e y = 177, a velocidade do movimento foi de 11,08225 pixels por milissegundo, 
sendo decomposta em 6,3034 pixels por milissegundo no eixo x e 9,11502 no eixo y. A direção foi 
-55,3458 graus em relação ao eixo x.
Figura 172 – Resultado do evento Arremessado
Arrastado
O evento Arrastado acontece quando o usuário arrasta o dedo na tela, como faz ao escrever ou ao 
desenhar. O evento devolve três pares de coordenadas:
•	 O primeiro par é o ponto em que a tela foi tocada.
•	 O segundo par é o ponto atual.
•	 O terceiro par armazena o ponto em que o dedo estava antes de se deslocar para o ponto atual.
234
Unidade III
Para o exemplo em estudo, faça um ponto de controle. Veja o quadro.
Quadro 128 – Configuração do evento Arrastado
Passo Janela Componente Propriedade Operação
1 Propriedades txtVel Texto X3
2 Componentes Renomear txtVel txtX3
3 Propriedades txtDir Texto Y3
4 Componentes Renomear txtDir txtY3
Veja os quadros a seguir.
Quadro 129 – Alteração no botão limpar
Passo Paleta Componente Operação Valor
1 btnLimpar Quando.Clique Arrastar para o Visualizador
2 Pintura1 Apagar
3 txtX1 ajustar.Texto “X1”
4 txtY1 ajustar.Texto “Y1”
5 txtX2 ajustar.Texto “X2”
6 txtY2 ajustar.Texto “Y2”
7 txtX3 ajustar.Texto “X3”
235
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Paleta Componente Operação Valor
8 txtY3 ajustar.Texto “Y3”
Quadro 130 – Configuração dos blocos do evento Arrastado
Passo Paleta Componente Operação Valor
1 Pintura1 Arrastado Arrastar para o Visualizador
2 txtX1 ajustar.Texto Bloco quando Pintura1.Arrastado xInicial
3 txtY1 ajustar.Texto Bloco quando Pintura1.Arrastado yInicial
4 txtX2 ajustar.Texto Bloco quando Pintura1.Arrastado xAnterior
5 txtY2 ajustar.Texto Bloco quando Pintura1.Arrastado yAnterior
6 txtVel ajustar.Texto Bloco quando Pintura1.Arrastado xAtual
7 txtDir ajustar.Texto Bloco quando Pintura1.Arrastado yAtual
Ao executarmos o exemplo, temos as coordenadas x = 139.66667 e y = 347.66666. O ponto 
tocado inicialmente corresponde às coordenadas x = 100 e y = 192. O ponto anterior foi x = 103 e 
y = 193.33333. Veja uma síntese disso na figura a seguir.
236
Unidade III
Figura 173 – Resultado com os valores de saída do evento Arrastado
Para um exemplo simples e prático, vamos alterar o projeto. Veja, no quadro a seguir, a configuração 
de layout proposta.
Quadro 131 – Configuração de layout
Passo Janela Componente Propriedade Operação
1 Paleta Interface de Usuário Botão1 Arrastar para a OrganizaçãoHorizontal1, antes do botão Limpar
2 Propriedades Botão1 CorDeFundo Vermelho
3 Propriedades Botão1 Largura Preencher principal
4 Propriedades Botão1 Texto Apagar
5 Componentes Renomear Botão1 btnVermelho
6 Paleta Interface de Usuário Botão1 Arrastar para a OrganizaçãoHorizontal1, antes do botão Limpar
7 Propriedades Botão1 CorDeFundo Azul
8 Propriedades Botão1 Largura Preencher principal
9 Propriedades Botão1 Texto Apagar
10 Componentes Renomear Botão1 btnAzul
11 Paleta Interface de Usuário Botão1 Arrastar para a OrganizaçãoHorizontal1, antes do botão Limpar
12 Propriedades Botão1 CorDeFundo Verde
13 Propriedades Botão1 Largura Preencher principal
14 Propriedades Botão1 Texto Apagar
237
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Janela Componente Propriedade Operação
15 Componentes Renomear Botão1 btnVerde
No evento Arrastado, faça uma alteração incluindo um bloco DesenharCírculo. Veja isso nos 
quadros a seguir.
Quadro 132 – Inclusão de DesenharCírculo no evento Arrastado
Passo Paleta Componente Operação Valor
1 Pintura1 Arrastado Arrastar para o Visualizador
2 txtX1 ajustar.Texto Bloco quando Pintura1.Arrastado xInicial
3 txtY1 ajustar.Texto Bloco quando Pintura1.Arrastado yInicial
4 txtX2 ajustar.Texto Bloco quando Pintura1.ArrastadoxAnterior
5 txtY2 ajustar.Texto Bloco quando Pintura1.Arrastado yAnterior
6 txtVel ajustar.Texto Bloco quando Pintura1.Arrastado xAtual
7 txtDir ajustar.Texto Bloco quando Pintura1.Arrastado yAtual
238
Unidade III
Passo Paleta Componente Operação Valor
8 Pintura1 DesenharCírculo
xCentro = xAtual
yCentro = yAtual
raio = 5
Quadro 133 – Configuração de botões
Passo Paleta Componente Operação Valor
1 btnVermelho quando.Clique Arrastar para o Visualizador
2 Pintura1 CorDePintura Vermelho
3 btnAzul quando.Clique Arrastar para o Visualizador
4 Pintura1 CorDePintura Azul
5 btnVerde quando.Clique Arrastar para o Visualizador
6 Pintura1 CorDePintura Verde
Agora, é possível acompanhar o movimento dos dedos. No entanto, não temos uma linha 
contínua. Trata-se de “pontos redondos”, conforme representado na figura a seguir.
239
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Figura 174 – Desenhando com a ferramenta DesenharCírculo
O evento Arrastado fornece as coordenadas anteriores e as coordenadas atuais. Para melhorar o 
acabamento, basta ligar os dois pontos. Para isso, temos a ferramenta DesenharLinha. Como a largura 
inicial da linha é de 1 pixel, para um melhor resultado, vamos aumentá-la para 5 pixels. Veja o quadro.
Quadro 134 – Configuração de linha entre pontos
Passo Paleta Componente Operação Valor
1 Pintura1 Arrastado Arrastar para o Visualizador
2 txtX1 ajustar.Texto Bloco quando Pintura1.Arrastado xInicial
3 txtY1 ajustar.Texto Bloco quando Pintura1.Arrastado yInicial
4 txtX2 ajustar.Texto Bloco quando Pintura1.Arrastado xAnterior
5 txtY2 ajustar.Texto Bloco quando Pintura1.Arrastado yAnterior
6 txtVel ajustar.Texto Bloco quando Pintura1.Arrastado xAtual
7 txtDir ajustar.Texto Bloco quando Pintura1.Arrastado yAtual
8 Pintura1 LarguraDaLinha 5
240
Unidade III
Passo Paleta Componente Operação Valor
9 Pintura1 DesenharLinha
x1 = xAnterior
y1 = yAnterior
x2 = xAtual
y2 = yAtual
Assim, temos uma linha contínua, conforme mostrado na figura a seguir, e um aplicativo bem 
simples de desenho utilizando apenas a Tela de Pintura.
Figura 175 – Aplicativo de desenho com linha
241
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
 Observação
Note que os componentes roxos que estão sendo utilizados – por 
exemplo, chamar Pintura1.Apagar e chamar Pintura1.DesenharCírculo – 
têm a mesma cor do bloco Procedimentos dos blocos internos, que 
também recebe o nome de Chamar. Isso não é coincidência. Os blocos dos 
componentes são procedimentos especializados.
8.2 Projetando o jogo 2
No módulo anterior, estudamos a Tela de Pintura, que é o espaço onde os eventos acontecem. 
A animação acontece sobre a tela. A animação é um evento cinemático, ou seja, os eventos 
acontecem em função do tempo.
8.2.1 Design
Vejamos os compontes e os detalhamentos relativos ao projeto aqui desenvolvido.
Animação
O componente não visível chamado de Temporizador não somente fornece o instante em que se 
está usando o relógio interno do dispositivo como também pode ativar um cronômetro para efetuar 
o disparo de eventos em intervalos regulares, conforme mostrado na figura a seguir. Além disso, esse 
elemento realiza cálculos, manipulações e conversões de tempo.
Eventos
Intervalo
TempoT 2T 3T
0
Figura 176 – Intervalos determinados em milissegundos
Vamos continuar o exemplo anterior. 
Crie outro ponto de controle e chame-o de EstudoCanvas_ControleTemporizador. Para isso, observe 
o quadro a seguir.
242
Unidade III
Quadro 135 – Configuração de Temporizador
Passo Janela Componente Propriedade Operação
1 Paleta Sensores Temporizador1 Arrastar para o Visualizador
2 Propriedades Temporizador1 Ativado Desmarcar
3 Propriedades Temporizador1 Intervalo 100
Quando o aplicativo abrir, ele começará sem a ocorrência de disparos (Ativado desmarcado). 
Ao ser ativado o Temporizador, os eventos serão disparados a cada 100 milissegundos.
No editor de blocos, vamos criar duas variáveis de trabalho, chamadas de x e de y. O bloco do 
evento do Temporizador irá desenhar na tela um círculo na posição a cada evento recebido – no caso, 
temos o intervalo de 100 milissegundos. Veja os quadros a seguir.
Quadro 136 – Configuração de variáveis de coordenadas
Passo Paleta Componente Operação Valor
1 Variáveis inicializar para x = 0
2 Variáveis inicializar para y = 0
Quadro 137 – Configuração de eventos disparados por Temporizador
Passo Paleta Componente Operação Valor
1 Temporizador1 Disparo Arrastar para o Visualizador
2 Pintura1 chamar.DesenharCírculo
xCentro = obter x
yCentro = obter y
raio = 3
243
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Paleta Componente Operação Valor
3 Variáveis ajustar x para obter x + 5
O bloco Pintura1.Arrastado também é alterado para ativar a animação ao final do toque, 
armazenando o local do último ponto. Veja o quadro.
Quadro 138 - Configuração do bloco Pintura1.Arrastado
Passo Paleta Componente Operação Valor
1 Pintura1 Arrastado Arrastar para o Visualizador
2 txtX1 ajustar.Texto Bloco quando Pintura1.Arrastado xInicial
3 txtY1 ajustar.Texto Bloco quando Pintura1.Arrastado yInicial
4 txtX2 ajustar.Texto Bloco quando Pintura1.Arrastado xAnterior
5 txtY2 ajustar.Texto Bloco quando Pintura1.Arrastado yAnterior
6 txtVel ajustar.Texto Bloco quando Pintura1.Arrastado xAtual
7 txtDir ajustar.Texto Bloco quando Pintura1.Arrastado yAtual
8 Pintura1 LarguraDaLinha 5
9 Pintura1 DesenharLinha
x1 = xAnterior
y1 = yAnterior
x2 = xAtual
y2 = yAtual
10 Temporizador1 ajustar.Ativado verdadeiro
11 Variáveis ajustar x para xAtual
244
Unidade III
Passo Paleta Componente Operação Valor
12 Variáveis ajustar y para yAtual
Uma vez ativo, o ponto se move para a direita a partir do último ponto tocado na tela, conforme 
indicado na figura a seguir. Para alterar a velocidade, temos duas opções. A primeira possibilidade 
é diminuir o intervalo do Temporizador, com a vantagem de que o movimento seria mais suave e 
com a desvantagem de que o processamento seria “maior”. A segunda possibilidade é aumentar a 
distância do avanço a cada disparo, que no nosso caso é de 5 pixels. Poderíamos aumentar para 
10 pixels. Assim, a velocidade seria o dobro, mas a animação seria truncada.
Figura 177 – Rastro deixado pela animação
245
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Bola: eventos e propriedade
O círculo animado do módulo anterior deixa um rastro. Se realmente quiséssemos ver uma animação, 
teríamos de apagar o desenho anterior antes de fazer o novo desenho e, ainda, restaurar o fundo (se 
houvesse algum). Isso seria um trabalho imenso. Para facilitar essa tarefa, o App Inventor disponibiliza 
componentes que deslizam dentro da Tela de Pintura: a Bola e o Sprite.
A Bola e o Sprite são praticamente a mesma coisa. A diferença entre eles é o fato de que o Sprite 
poder ser uma imagem. Para entendermos como isso funciona, o exemplo a seguir é bastante completo, 
pois cobre a maioria dos eventos suportados pela Bola e pelo Sprite.
Em um novo projeto, vamos montar um jogo de pingue-pongue individual, conforme esquematizado 
na figura a seguir. Uma Bola será lançada em direção aleatória e com velocidade qualquer. Ela deve ser 
defendida pelo Paddle, evitando sua passagem para a borda.
Bola: elemento 
dinâmico do jogo. 
Será iniciado com um 
movimento harmônico 
de cima para baixo e 
de baixo para cima, 
toda vez que tocar no 
Paddle. Sofrerá desvio 
de trajetória toda vez 
que tocar em uma das 
paredes laterais
Pontuação do 
jogo
Botão para 
início do jogo Reinicia o jogo
Paddle: imagem que será movimentada pelo 
usuário para tocar na bola, a fim de evitar seu 
contato com a parte inferior da tela (indicativo 
de final de jogo)
Figura 178 – Esquema geral do jogo
246
Unidade III
Inicialização
Criaremos a variável de trabalho chamada de Pontos e o procedimento para mostrar o Score na tela. 
Veja os quadros a seguir.
Quadro 139 – Configuração de inicialização
Passo Paleta Componente Operação Valor
1 Variáveis inicializar Pontos = 0
2 Procedimento para AtualizaPt ParâmetronovaPontuação
3 Variáveis ajustar.Pontos para novaPontuação
4 lblScore ajustar.Texto Pontos
Quadro 140 – Configuração de tela de fundo
Passo Janela Componente Propriedade Operação
1 Paleta Organização OrganizaçãoHorizontal1 Arrastar para o Visualizador
2 Propriedades OrganizaçãoHorizontal1 AlinhamentoHorizontal Centro
3 Propriedades OrganizaçãoHorizontal1 AlinhamentoVertical Centro
4 Propriedades OrganizaçãoHorizontal1 Altura 60 pontos
5 Propriedades OrganizaçãoHorizontal1 Largura Preencher principal
6 Paleta Interface de Usuário Legenda1 Dentro da OrganizaçãoHorizontal1
7 Propriedades Legenda1 FonteNegrito Marcar
8 Propriedades Legenda1 TamanhoDaFonte 16
9 Propriedades Legenda1 Texto Score
10 Componentes Renomear Legenda1 lblScore
11 Paleta Interface de Usuário Botão1 Dentro da OrganizaçãoHorizontal1
12 Propriedades Botão1 FonteNegrito Marcar
13 Propriedades Botão1 TamanhoDaFonte 20
14 Propriedades Botão1 Texto Start
15 Componentes Renomear Botão1 btnStart
247
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Janela Componente Propriedade Operação
16 Paleta Interface de Usuário Botão1 Dentro da OrganizaçãoHorizontal1
17 Propriedades Botão1 FonteNegrito Marcar
18 Propriedades Botão1 TamanhoDaFonte 20
19 Propriedades Botão1 Texto Reset
20 Componentes Renomear Botão1 btnReset
21 Paleta Desenho e Animação Pintura1 Arrastar para o Visualizador
22 Propriedades Pintura1 Altura Preencher principal
23 Propriedades Pintura1 Largura Preencher principal
Quadro 141 – Configuração da Bola e do Paddle
Passo Janela Componente Propriedade Operação
1 Paleta Desenho e Animação Bola1 Arrastar para Pintura1
2 Propriedades Bola1 Raio 30
3 Paleta Desenho e Animação SpriteImagem1 Arrastar para Pintura1
4 Propriedades SpriteImagem1 Altura 20 pixels
5 Propriedades SpriteImagem1 Largura 80 pixels
6 Propriedades SpriteImagem1 Imagem pdm020.jpg
248
Unidade III
Passo Janela Componente Propriedade Operação
7 Paleta Sensores Temporizador Arrastar para o Visualizador
Quadro 142 – Configuração da Bola
Passo Paleta Componente Operação Valor
1 btnStart Clique Arrastar para o Visualizador
2 Bola1 chamar.MoverPara
x = Pintura1.Largura/2
y = 0
Posiciona no topo da tela, y = 0, e no centro, independentemente da largura da tela do dispositivo, pois é metade 
da largura da Tela de Pintura
3 Bola1 ajustar.Ativado verdadeiro
4 Bola1 ajustar.Direção inteiro aleatório de 255 até 315
Ativa a Bola e define uma direção aleatória a lançar, lembrando que o zero grau se inicia no eixo x
249
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Paleta Componente Operação Valor
5 Bola1 ajustar.Velocidade 5
6 Bola1 ajustar.Intervalo 5
7 Procedimento chamar AtualizaPt novaPontuação = 0
O parâmetro Intervalo corresponde ao intervalo do Temporizador
Movimento da Bola
Como a Tela de Pintura é um espaço fechado, a Bola em movimento alcançará a borda em algum 
momento. Quando a Bola atinge uma borda, é gerado um evento, chamado de AlcançouBorda, que 
retorna o valor correspondente à borda alcançada, conforme indicado na figura a seguir. A Bola 
também tem um procedimento automático em que a borda tocada reflete (quica) com o mesmo 
ângulo de incidência em relação à normal da parede e com o mesmo módulo da velocidade. Esse 
procedimento chama-se Bola.Quicar. Verifique o que foi dito na figura a seguir.
Borda = -1
Borda = 1(0,0)
Direção
Y
X
90°
180° 0°
270°
Bo
rd
a 
= 
-3
Bo
rd
a 
= 
3
Figura 179 – Valores de referência das bordas e dos ângulos
250
Unidade III
Como o jogo é perdido se a Bola atingir a Borda -1, o tratamento do evento AlcançouBorda é uma 
condição necessária para encerrar o jogo. Veja o quadro a seguir.
Quadro 143 – Configuração do evento AlcançouBorda
Passo Paleta Componente Operação Valor
1 Bola1 AlcançouBorda Arrastar para o Visualizador
2 Controle se/então/senão Lógica = borda = -1
3 lblScore ajustar.Texto “Game Over” então
4 Bola1 ajustar.Ativado falso então
5 Bola1 Quicar borda = obter borda senão
Outro evento acontece quando ocorre o choque entre os Sprites. No caso, a Bola colide com o 
Paddle e, então, temos o evento ColidiuCom. O evento retorna o nome do Sprite com o qual colidiu 
pela variável outro. Para fazer a comparação com o outro Sprite, todos os componentes têm um 
bloco pelo qual se autoidentificam na última posição da lista e, dessa forma, é possível verificar a 
identidade do outro Sprite. Veja a figura a seguir.
251
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Figura 180 – Identidade do componente
No nosso jogo, como temos apenas um Sprite, não precisaremos identificá-lo. A cada defesa, o 
jogador ganha um ponto. Veja o quadro.
Quadro 144 – Configuração do evento ColidiuCom
Passo Paleta Componente Operação Valor
1 Bola1 ColidiuCom Arrastar para o Visualizador
2 Bola1 ajustar.Direção 360 - Bola1.Direção
3 Procedimento chamar AtualizaPt obter Pontos + 1
Para movimentar o Paddle ou o nosso Sprite, temos o evento Arrastado, que funciona como o 
Arrastado que vimos anteriormente.
O Paddle movimenta para o xAtual horizontal e verticalmente e fica 20% acima da base. Veja 
o quadro a seguir.
Quadro 145 – Configuração do evento Arrastado
Passo Paleta Componente Operação Valor
1 SpriteImagem1 Arrastado Arrastar para o Visualizador
2 SpriteImagem1 chamar.MoverPara
x = bloco xAtual
y = Pintura1.Altura × 4/5
252
Unidade III
Finalmente, o botão Reset reposiciona os Sprites, desliga a Bola e zera a pontuação, como pode 
ser observado no quadro.
Quadro 146 – Configuração do botão Reset
Passo Paleta Componente Operação Valor
1 btnReset quando.Clique Arrastar para o visualizador
2 Bola1 chamar.MoverPara
x = Pintura1.Largura/2
y = 0
3 Bola1 ajustar.Ativado falso
4 Procedimento chamar AtualizaPt novaPontuação = 0
Uma vez pronto o projeto, vamos fazer testes. Comecemos observando a figura a seguir.
Figura 181 – Tela do jogo funcional
O jogo está funcional e sem problemas técnicos, porém o Gameflow dele está muito aquém do 
esperado. Cabe agora fazer regulagens para melhorar o Flow. 
253
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
8.3 Projetando o jogo 3
Vamos montar um jogo inédito. O jogo surgiu de um rabisco feito em um guardanapo de lanchonete 
do campus Anchieta da UNIP, reproduzido na figura a seguir, enquanto este curso era preparado. 
Figura 182 – Ideia inicial do jogo-fonte
Ele precisava seguir estas premissas:
•	 não ser muito complexo;
•	 ser 2D;
•	 ter animação;
•	 envolver conceitos já vistos;
•	 ter imagens sem necessidade de licenciamento.
A ideia, então, seria uma versão simplificada do Angry Birds, um jogo em que um pássaro estilizado 
é lançado em um movimento balístico a fim de atingir um porco.
8.3.1 Design
Vejamos detalhamentos a respeito do projeto aqui apresentado.
Desenho e Animação: teoria para a prática
O mundo dos jogos não é somente o mundo do design, da matemática, da psicologia e do 
entretenimento. Existem muitas outras disciplinas envolvidas, como anatomia, acústica, biologia, 
história, geografia e, principalmente, física. Neste jogo, precisamos transpor o mundo físico para o 2D. 
254
Unidade III
No item anterior, tivemos o quique da Bola nas laterais e no Paddle. Sem sabermos, estávamos 
utilizando as leis da reflexão. Agora, temos mais um problema de nível do Ensino Médio: o estudo do 
movimento balístico.
Devemos recordar que o movimento balístico pode ser decomposto em dois eixos, o vertical e o 
horizontal. Nesse caso:
•	 na horizontal, temos a realização de movimento uniforme;
•	 na vertical, temos a realização de movimento uniformemente variado, com aceleração igual à da 
gravidade (g).
A equação horária na horizontal é dada por:
x = vh × T
Na equação:
•	 x é a posição na horizontal;
•	 vh é a velocidade na horizontal;
•	 T é o tempo.
Pensando em blocos, podemos escrever a equação como na figura 183.
Figura 183 – Configuração de equação de movimento horizontal
A equação horária na vertical é dada por:
y = vv × T + 0,5 × g × T
2
Na equação:
•	 y é a posição na vertical;•	 vv é a velocidade na horizontal;
255
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
•	 T é o tempo;
•	 g é a aceleração da gravidade local.
Considerando a aceleração da gravidade como -10 m/s2, chegamos à seguinte equação:
y = vv × t-5 × T
2
Em termos de blocos, podemos escrever a equação mostrada na figura a seguir.
Figura 184 – Configuração da equação de movimento vertical
 Lembrete
 No grupo dos blocos internos Matemática existe o bloco de potenciação. 
Desse modo, o quadrado do tempo (t2) pode ser utilizado de duas formas:
ou
Vamos criar um ambiente para testar o movimento balístico e a dinâmica. Essa tela (Screen) 
evoluirá para o nosso jogo. Portanto, é aconselhável a criação de pontos de controle durante a evolução 
da programação.
A primeira tela será uma tela básica dividida em três janelas. Essas janelas já estarão colocadas 
dentro de uma OrganizaçãoVertical para futuros desenvolvimentos, caso necessitemos de telas 
de abertura, configuração e outras. Assim, teremos, sobre uma OrganizaçãoVertical de fundo, uma 
OrganizaçãoHorizontal, em que deixaremos espaço para um cabeçalho, um corpo principal com 
uma Tela de Pintura (inicialmente com 300 pixels de altura) para estudos e um painel de botões e 
de entradas.
Para isso, inicie um novo projeto e observe a sequência de procedimentos mostrada a seguir.
256
Unidade III
Janela do jogo
Veja o quadro a seguir.
Quadro 147 – Configuração da janela do jogo
Passo Janela Componente Propriedade Operação
1 Paleta Organização OrganizaçãoVertical1 Arrastar para o Visualizador
2 Propriedades OrganizaçãoVertical1 CorDeFundo Nenhum
3 Propriedades OrganizaçãoVertical1 Altura 100%
4 Propriedades OrganizaçãoVertical1 Largura 100%
5 Paleta Organização OrganizaçãoHorizontal1 Arrastar para a OrganizaçãoVertical1
6 Propriedades OrganizaçãoHorizontal1 AlinhamentoHorizontal Centro
7 Propriedades OrganizaçãoHorizontal1 AlinhamentoVertical Centro
8 Propriedades OrganizaçãoHorizontal1 Altura 40 pixels
9 Propriedades OrganizaçãoHorizontal1 Largura Preencher principal
10 Paleta Organização OrganizaçãoHorizontal2 Arrastar para a OrganizaçãoVertical1
11 Propriedades OrganizaçãoHorizontal2 Altura 300 pixels
12 Propriedades OrganizaçãoHorizontal2 Largura Preencher principal
13 Paleta Desenho e Animação Pintura1 Arrastar para a OrganizaçãoHorizontal2
14 Propriedades Pintura1 Altura Preencher principal
15 Propriedades Pintura1 Largura Preencher principal
16 Paleta Organização OrganizaçãoHorizontal3 Arrastar para a OrganizaçãoVertical1
17 Propriedades OrganizaçãoHorizontal3 Altura 40 pixels
18 Propriedades OrganizaçãoHorizontal3 Largura Preencher principal
19 Paleta Interface de Usuário Botão1 Arrastar para a OrganizaçãoHorizontal3
20 Propriedades Botão1 Texto Tiro
21 Componentes Renomear Botão1 btnTiro
22 Paleta Interface de Usuário Botão1 Arrastar para a OrganizaçãoHorizontal3
23 Propriedades Botão1 Texto Voltar
24 Componentes Renomear Botão1 btnVoltar
25 Paleta Interface de Usuário CaixaDeTexto1 Entre btnTiro e BtnVoltar
26 Propriedades CaixaDeTexto1 Largura Preencher principal
27 Propriedades CaixaDeTexto1 Dica Velocidade horizontal
28 Propriedades CaixaDeTexto1 SomenteNúmeros Marcar
29 Componentes Renomear CaixaDeTexto1 cxVH
30 Paleta Interface de Usuário CaixaDeTexto1 Entre cxVH e BtnVoltar
31 Propriedades CaixaDeTexto1 Largura Preencher principal
32 Propriedades CaixaDeTexto1 Dica Velocidade vertical
257
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Janela Componente Propriedade Operação
33 Propriedades CaixaDeTexto1 SomenteNúmeros Marcas
34 Componentes Renomear CaixaDeTexto1 cxV V
35 Paleta Sensores Temporizador1
O botão Tiro (btnTiro) disparará o evento para que o Temporizador inicie e o movimento 
aconteça. As caixas de texto cxVH e cxV V receberão valores numéricos com os componentes, 
respectivamente, da velocidade horizontal e da velocidade vertical. O quarto botão (btnVoltar) é 
para reiniciar a experiência. Crie um ponto de controle.
Variáveis iniciais de trabalho
Veja o quadro a seguir.
Quadro 148 – Configuração de variáveis
Passo Paleta Componente Operação Valor
1 Variáveis inicializar T 0
2 Variáveis inicializar x 0
3 Variáveis inicializar y 0
4 Variáveis inicializar vh 0
258
Unidade III
Passo Paleta Componente Operação Valor
5 Variáveis inicializar vv 0
Na equação horária da física, as variáveis são correspondentes a:
•	 T: tempo.
•	 x: posição x.
•	 y: posição y.
•	 vh: velocidade horizontal (sentido x).
•	 vv: velocidade vertical (sentido y).
Montando a equação horária
A equação horária recebe esse nome porque retorna a posição ocupada por um móvel a 
cada instante. Dessa forma, a variável T inicia com zero. Conforme o tempo avança, os valores 
resultantes nas equações horárias mudam, ou seja, os valores armazenados nas variáveis x e y 
vão se modificando. Para o tempo avançar no programa, colocamos o Temporizador, o qual, 
no momento em que é ativado, passa a tratar os eventos conforme os parâmetros definidos. 
Assim, a cada disparo, o tempo aumenta em 1 (linha 2), até o Temporizador ser desativado. 
Veja isso no quadro.
Quadro 149 – Configuração da equação horária
Passo Paleta Componente Operação Valor
1 Temporizador1 Disparo
2 Variáveis ajustar T obter T + 1
3 Variáveis ajustar x obter vh × obter T
259
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Paleta Componente Operação Valor
4 Variáveis ajustar y obter vv × obter T + (-5 × obter T × obter T)
5 Pintura1 DesenharCírculo
xCentro 0.1 × obter x
yCentro 0.1 × obter y
raio 2
Botão Tiro
Quando o botão chamado Tiro é clicado, o tempo é iniciado (linha 2), a tela é apagada, as 
variáveis de trabalho, vindas da composição da velocidade, são copiadas das caixas de texto, e o 
Temporizador é iniciado (linha 6). Assim, passa-se a gerar eventos de tempo (para esse Temporizador). 
Observe o quadro.
Quadro 150 – Configuração do botão Tiro
Passo Paleta Componente Operação Valor
1 btnTiro Clique Arrastar para o Visualizador
2 Variáveis ajustar T 0
3 Pintura1 Apagar
4 Variáveis ajustar vh cxVH.Texto
5 Variáveis ajustar vv cxV V.Texto
6 Temporizador1 ajustar Ativado verdadeiro
260
Unidade III
Botão Voltar
Veja, no quadro a seguir, a configuração do botão Voltar.
Quadro 151 – Configuração do botão Voltar
Passo Paleta Componente Operação Valor
1 btnVoltar Clique Arrastar para o Visualizador
2 Temporizador1 ajustar Ativado falso
3 Pintura1 Apagar
Primeiro teste
Ao executarmos o teste com vários valores de velocidade horizontal e de velocidade vertical, 
chegamos a um movimento em forma de parábola. No entanto, como mostrado na figura a seguir, 
essa parábola está “de cabeça para baixo”.
Figura 185 – O movimento está “invertido”
261
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Resolver o problema agora é uma questão de matemática, não mais de física.
Sabemos que a altura da Tela de Pintura é igual a 300 pixels. Assim, faremos o que segue.
y = 300 - y
Vejamos essa alteração no quadro a seguir.
Quadro 152 – Alteração na configuração de movimento vertical
Passo Paleta Componente Operação Valor
1 Temporizador1 Disparo
2 Variáveis ajustar T obter T + 1
3 Variáveis ajustar x obter vh × obter T
4 Variáveis ajustar y obter vv × obter T + (-5 × obter T × obter T)
5 Pintura1 DesenharCírculo
xCentro 0.1 × obter x 
yCentro 300 - 0.1 × obter y 
raio 2
Executamos novamente o projeto com os valores que geraram uma boa parábola, conforme 
mostrado na figura a seguir.
262
Unidade III
Figura 186 – Parábola corrigida
Evitando “afundar no chão”
O programa ainda tem um problema, que não está visível. Quando o ponto “atinge o chão”, 
o programa continua executando, mas o correto seria que ele parasse quando chegasse em y = 0. 
Para resolvermos isso, teremos de fazer uma alteração no evento. Precisaremos colocar uma condição 
(se/então/senão) para que o Temporizador1, do spBird, pare ao atingir 0. Veja isso no quadro.
Quadro 153 – Alteração na configuração de movimento
Passo Paleta Componente Operação Valor1 Temporizador1 Disparo
2 Variáveis ajustar T obter T + 1
3 Variáveis ajustar x obter vh × obter T
4 Variáveis ajustar y obter vv × obter T + (-5 × obter T × obter T)
263
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Paleta Componente Operação Valor
5 Pintura1 DesenharCírculo
xCentro 0.1 × obter x 
yCentro 300 - 0.1 × obter y 
raio 2
6 Controle se/então/senão obter y ≤ 0
7 Temporizador1 ajustar.Ativado falso então
8 Bloco chamar Pintura1.DesenharCírculo senão
9 Bloco se/então/senão No lugar em que estava chamar Pintura1.DesenharCírculo
Com essa condição, caso a variável y assuma valores negativos, o Temporizador para. Caso 
contrário, funciona normalmente.
264
Unidade III
Alterando o botão Tiro
Ficar “colocando números” e atirar apenas clicando não gera um gameplay muito realista – 
afinal, temos nas mãos uma tecnologia que permite uma interação melhor com a tela. Seria muito 
interessante se pudéssemos deslizar o dedo na tela para lançar. Na verdade, isso é possível.
Quando estudamos o evento Tela de Pintura, vimos o evento Arremessado, e lá já separamos 
a velocidade nos seus componentes x (na horizontal) e y (na vertical). O que é necessário é fazer 
uma regra de três para que os valores gerados no arremesso se tornem próximos dos valores 
testados no botão.
Para verificar os valores, temos o teste que fizemos anteriormente. Assim, poderemos ver quais 
são os valores interessantes para o movimento que queremos executar no jogo. Os fatores aplicados 
em um primeiro momento parecem ser 12 na horizontal e -12 na vertical. Tais fatores podem ser 
alterados depois, conforme a necessidade, e isso pode ser feito em alguma tela de configuração. 
Veja o quadro.
Quadro 154 – Configuração do evento Arremessado
Passo Paleta Componente Operação Valor
1 Pintura1 quando.Arremessado Arrastar para o Visualizador
2 Variáveis ajustar T 0
3 Pintura1 Apagar
4 cxVH ajustar.Texto 12 × Bloco quando.Arremessado obter xVel
5 cxV V ajustar.Texto -12 × Bloco quando.Arremessado obter yVel
6 Variáveis ajustar vh cxVH.Texto
7 Variáveis ajustar vv cxV V.Texto
8 Temporizador1 ajustar Ativado verdadeiro
265
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Os blocos do arremesso são praticamente iguais ao bloco do tiro. O xVel e o yVel devolvidos 
pelo evento poderiam ser colocados diretamente nas variáveis VH e V V, mas, para termos uma leitura 
durante o desenvolvimento, é preferível passar antes pelas caixas de texto correspondentes. Isso será 
feito futuramente.
Faça os testes com alguns arremessos.
8.3.2 SpriteImagem: eventos e propriedades
Já utilizamos o SpriteImagem antes no Paddle, do módulo anterior, mas desta vez utilizaremos tal 
elemento como personagem principal do jogo. 
Faça um ponto de controle apenas por segurança. Voltando para a tela de design, vamos fazer 
algumas alterações. Faremos a inserção da legenda, dos Sprites do Bird e do Porco e do Temporizador 
do Porco. Veja o quadro.
Quadro 155 – Configuração de Sprites
Passo Janela Componente Propriedade Operação
1 Paleta Interface de Usuário Legenda1 OrganizaçãoHorizontal1
2 Propriedades Legenda1 Texto Status
3 Componentes Renomear Legenda1 lblStatus
4 Propriedades OrganizaçãoHorizontal2 Altura 80 %
5 Propriedades btnTiro Texto “Repetir”
6 Paleta Desenho e Animação SpriteImagem1 Mover para Pintura1
7 Propriedades SpriteImagem1 Ativado Desmarcar
8 Propriedades SpriteImagem1 Altura 20 pixels
9 Propriedades SpriteImagem1 Largura 20 pixels
10 Propriedades SpriteImagem1 Intervalo 100
11 Propriedades SpriteImagem1 Imagem pdm021.png
12 Componentes Renomear SpriteImagem1 spBird
13 Paleta Desenho e Animação SpriteImagem1 Arrastar para Pintura1
14 Propriedades SpriteImagem1 Altura 20 pixels
15 Propriedades SpriteImagem1 Largura 20 pixels
16 Propriedades SpriteImagem1 Intervalo 100
17 Propriedades SpriteImagem1 Imagem pdm022.png
18 Componentes Renomear SpriteImagem1 spPorco
19 Paleta Sensores Temporizador2
266
Unidade III
Passo Janela Componente Propriedade Operação
20 Componentes Renomear Temporizador2 tmpPorco
Para completar o design para este módulo, falta apenas a tela de fundo, que colocaremos no final.
Substituindo o Desenho pelo Sprite
Assim como aconteceu entre o botão Tiro e o Arremesso, a troca entre o Desenho e o Sprite é 
bastante simples. Apenas remova o bloco inteiro do DesenharCírculo e deixe solto. No lugar dele, coloque 
o spBird.MoverPara. Veja isso no quadro a seguir.
Quadro 156 – Alteração de configuração do jogo
Passo Paleta Componente Operação Valor
1 spBird MoverPara
x 0,1 × obter x
y 300 - (0,1 × obter y)
267
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Paleta Componente Operação Valor
2 Não jogue no lixo os blocos de Pintura1.DesenharCírculo. Apenas destaque-os
Faça o teste arremessando o pássaro. O movimento do pássaro deverá ser o mesmo daquele que 
era traçado pelo Desenho. Seria interessante fazer algumas alterações da visualização do caminho 
percorrido pelo spBird.
Utilizando o Desenho e o Sprite
Como deixamos separado, ainda temos o bloco Desenho. Para não deixarmos um rastro muito 
forte, vamos pintá-lo de cinza. Assim, veja o quadro e a figura a seguir.
Quadro 157 – Configuração do rastro
Passo Paleta Componente Operação Valor
1 spBird MoverPara
x 0,1 × obter x
y 300 - (0,1 × obter y)
2 Não jogue no lixo os blocos de Pintura1.DesenharCírculo. Apenas destaque-os
268
Unidade III
Passo Paleta Componente Operação Valor
3 Pintura1 CorDePintura para Cinza
4 Recoloque abaixo os blocos de Pintura1.DesenharCírculo
Figura 187 – Teste do jogo com Sprite e rastro
No teste, observamos que o Sprite e o rastro fizeram uma boa combinação. Entretanto, apesar de, no 
emulador da tela, a altura estar ocupando o espaço inteiro, no dispositivo ela ocupa apenas a metade 
desse espaço.
Automatizando a altura da Tela de Pintura
O problema da altura da tela ocorre porque foi definido um tamanho fixo na altura da 
OrganizaçãoHorizontal2, igual a 300 pixels. Para corrigirmos tal problema, temos de recorrer à medida 
269
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
flexível, que é o percentual da dimensão do dispositivo. Assim, definindo que a dimensão Altura 
de uma organização terá 40%, se a especificação da tela do dispositivo tiver 1000 pontos, então a 
altura do componente terá 400 pontos. 
Para acertarmos a parábola, utilizamos o valor de 300 pixels, porque essa era a altura da organização. 
Portanto, se substituirmos “todos os 300” pela altura da Tela de Pintura, teremos y = 0 na linha inferior 
da Tela de Pintura.
Para facilitar essa codificação, vamos utilizar uma variável chamada de Nivel0, que armazenará o 
valor da altura da Tela de Pintura. Essa variável será definida assim que a Screen1 for inicializada. Veja 
o quadro a seguir.
Quadro 158 – Criação de variável de altura da tela
Passo Paleta Componente Operação Valor
1 Variáveis inicializar Nivel0 = 0
2 Screen1 inicializar
3 Variáveis ajustar Nivel0 Pintura1.Altura
Com a variável carregada com o valor da altura, é feita a substituição “dos 300” pela variável 
Nivel0. Veja o quadro a seguir.
Quadro 159 – Alteração na configuração de movimento
Passo Paleta Componente Operação Valor
1 Bloco chamar spBird.MoverPara y Remover 300 Colocar Obter Nivel0
270
Unidade III
Passo Paleta Componente Operação Valor
2 Bloco chamar Pintura1.DesenharCírculo yCentro Remover 300 Colocar Obter Nivel0
Para voltarmos, vamos acrescentar a movimentação do pássaro referente à posição (0,0). Veja o quadro 
a seguir.
Quadro 160 – Alteração da configuração de movimento
Passo Paleta Componente Operação Valor
1 spBird MoverPara
x 0
y Obter Nivel0
No próximo teste, veremos que o Bird está partindo da linha base. Observe a figura a seguir.
271
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Figura 188 – Novo nível do chão, definido pelo tamanho da tela do dispositivo
Tratamento do SpriteImagem Porco
Para que o jogo seja mais divertido, a ideia é não deixar o Porco parado. Ele deverá andar para a 
direita e para a esquerda, indo evindo. Dessa forma, o Porco terá sua variável x (xPorco) e sua direção 
(dPorco) positivas quando estiver andando para a direita e negativas quando estiver andando para a 
esquerda. Veja o quadro.
Quadro 161 – Configuração de variáveis de movimento do Sprite do Porco
Passo Paleta Componente Operação Valor
1 Variáveis inicializar xPorco = 0
2 Variáveis inicializar dPorco = 5
Na inicialização, posicionamos o Porco a um terço da largura, mas a escolha desse número é 
totalmente livre, e pode ser alterada no futuro, inclusive com o auxílio de um gerador de números 
aleatórios. Veja o quadro a seguir.
272
Unidade III
Quadro 162 – Configuração de movimento do Sprite do Porco
Passo Paleta Componente Operação Valor
1 Variáveis ajustar xPorco 1/3 × Pintura1.Largura
2 spPorco chamar.MoverPara
x Obter xPorco
y Obter Nivel0
No botão Voltar, não seria necessário atualizar a posição do Porco, mas, pensando em uma 
eventual necessidade futura, será feita a alteração. Veja o quadro 163.
Quadro 163 – Alteração da configuração do botão Voltar
Passo Paleta Componente Operação Valor
1 lblStatus ajustar.Texto “Status”
273
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Passo Paleta Componente Operação Valor
2 spPorco MoverPara
x 0
y Obter Nivel0
Movimentando o Porco
O Porco sempre avançará somando dPorco à posição atual (xPorco). Isso quer dizer que:
•	 se o valor de dPorco for positivo, o xPorco aumentará;
•	 se o valor de dPorco for negativo, um valor negativo estará sendo somado à posição, e o 
xPorco diminuirá.
Quando o Porco chega aos limites estabelecidos, tanto em termos de valor superior (largura da tela) 
quanto em termos de valor inferior (posição 150), o sinal de dPorco inverte, fazendo com que o Porco 
mude de sentido de movimentação. Veja o quadro a seguir.
Quadro 164 – Configuração de movimento do Sprite do Porco
Passo Paleta Componente Operação Valor
1 tmpPorco quando.Disparo
2 Variáveis ajustar obter xPorco + obter dPorco
3 Controle se/então obter xPorco > Pintura1.Largura
4 Variáveis ajustar dPorco = -10 Encaixar em então
5 Controle se/então obter xPorco < 150
6 Variáveis ajustar dPorco = 10 Encaixar em então
274
Unidade III
Passo Paleta Componente Operação Valor
7 spPorco chamar.MoverPara
x obter xPorco
y obter Nivel0
Acertou o Porco
O evento de animação chamado de ColidiuCom detecta o encontro entre dois componentes. 
Em um jogo, é importante saber com o que um objeto ou uma personagem colidiram. Nesse caso, 
o evento retorna o valor outro. Para podermos identificar que evento retornou, o App Inventor 
fornece sempre um bloco com o nome daquele componente. Veja as figuras e o quadro a seguir.
Figura 189 – O nome do componente é sempre o último bloco
275
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Quadro 165 – Configuração do evento ColidiuCom
Passo Paleta Componente Operação Valor
1 spBird ColidiuCom Arrastar para o Visualizador
2 Controle se/então Se spPorco = bloco ColidiuCom outro
3 lblStatus ajustar.Texto “Acertou”
Na figura a seguir, após acertar o alvo, o Status muda para Acertou.
Figura 190 – O evento ColidiuCom alterou o Status para acertou
 Observação
Pode parecer que atingir o alvo na figura anterior foi muito difícil. 
A técnica é fazer um bom lançamento, acertar o sincronismo com o Porco 
e dar o tiro, pois o jogo sempre repetirá o mesmo tiro. Enquanto o jogo 
está na fase de testes, esses botões são muito úteis. No futuro, em caso de 
publicação, esse tipo de botão será transformado em um dos famosos easter 
eggs, um botão invisível para o usuário final, mas bastante interessante 
para o desenvolvimento de projetos.
276
Unidade III
Veja o quadro a seguir.
Quadro 166 – Configuração de movimento do Sprite do Bird
Passo Paleta Componente Operação Valor
1 spBird ajustar spBird.Ativado falso Encaixar em então
Acabamento
Para fazermos o acabamento do projeto, vamos colocar um fundo e trocar o nome do botão 
Tiro. Veja o quadro e a figura a seguir.
277
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Quadro 167 – Configuração de acabamento do jogo
Passo Janela Componente Propriedade Operação
1 Propriedades Pintura1 ImagemDeFundo pdm023.png
2 Propriedades btnTiro Texto Repetir
Figura 191 – Tela do teste do jogo (muito longe)
278
Unidade III
8.4 Finalizando o jogo
Vejamos, agora, a finalização do jogo.
8.4.1 Pontuação, tela de início, ranking e créditos
Uma vez que tenhamos o núcleo central do jogo montado, é necessário montar o acabamento do 
entorno do jogo. Seguindo o modelo do jogo do pássaro, podemos pensar em várias maneiras de contar 
pontos. Poderíamos usar critérios como certo valor de tempo ou determinado limite de número de tiros. 
Além disso, o Porco poderia atacar. A possibilidade de remixagem fica em aberto.
Pontuação
Para mostrar a pontuação, existem várias técnicas. A exibição pode ser feita fora da Tela de Pintura, por meio 
de legendas. Também poderíamos utilizar um procedimento interno da Tela de Pintura, DesenharTexto, 
que se comporta da mesma forma que o DesenharCírculo ou que o DesenharLinha, o que torna possível 
colocar o placar dentro da Tela de Pintura. Veja a figura.
Figura 192 – Placar dentro da Tela de Pintura
Tela de início, ranking e créditos
Para montarmos as telas de início, ranking e créditos, utilizamos a técnica das telas virtuais, que 
vimos quando fizemos o aplicativo do cálculo de combustível. Como foi dito no início da montagem 
279
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
do jogo anterior, providencialmente deixamos uma OrganizaçãoVertical colocada antes de começarmos 
a montar o jogo. Agora basta colocarmos as outras organizações para as telas de abertura, ranking 
e créditos, conforme a figura a seguir. Faremos a alteração na rotina MostraTela para quatro telas e 
criaremos um roteiro de movimentação entre elas. 
Figura 193 – Árvore de componentes com as janelas virtuais de apresentação, ranking e crédito
8.4.2 Atribuição de ícone e título
Nos aplicativos da unidade II já colocamos o ícone e o título. Isso foi feito nas propriedades da Screen1, 
conforme figura a seguir. O nome do app é aquele que aparecerá na tela do dispositivo, e o ícone é o 
nome do arquivo de imagem que aparecerá na tela do dispositivo. Título é a faixa acima da tela principal, 
que pode ser escondida também, e a versão e o nome da versão (por exemplo: V6 – Bis-Sonho de Valsa 
seria a versão 6, de nome Bis, e a versão chamada Sonho de Valsa, V8-Android-Nougat). Também é importante 
inserir o site em que fica o Tutorial. De maneira geral, esses campos são exigidos para realizar publicações 
na Play Store.
280
Unidade III
Figura 194 – Atribuição de título, ícone, nome do aplicativo, versão e release
8.4.3 Geração de arquivo APK
Vimos que, para transformarmos em aplicativo APK, basta utilizarmos o menu superior Compilar. 
Na opção gerar QR code, o App Inventor gera um link para baixar diretamente no dispositivo móvel. 
Caso seja selecionada a opção Salvar APK em Meu Computador, o arquivo APK será baixado na pasta 
Downloads (ou equivalente configurada no sistema operacional). Na segunda opção, o APK pode ser 
distribuído por cópia sem a necessidade do uso da Play Store do Google.
8.4.4 Distribuição do jogo
Caso não se queira distribuir pela Play Store, o APK pode ser distribuído por conta e risco por sites 
para os amigos, mas, como dito no início desta unidade, é importante o compartilhamento, pois servirá 
como base para remixagens. O processo de compartilhamento é feito pelo próprio site do App Inventor.
Veremos como fazer o compartilhamento a seguir. Na primeira vez, é necessário se cadastrar na 
Galeria. Na tela Meus Projetos, dê um clique em Login to Gallery, conforme figura a seguir.
281
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Figura 195 – Fazer login na Galeria
Preencha o cadastro com as informações que serão mostradas na Galeria. Veja a figura 196.
Figura 196 – Como fazer um cadastro na Galeria
Uma vez cadastrado, a Galeria estará disponível para o uso. Agora, todos os milhares de jogos podemser baixados na própria área de projetos e alterados ou mesmo jogados. Veja a figura a seguir.
Figura 197 – Acesso à Galeria
282
Unidade III
Para compartilhar um projeto na Galeria, é necessário marcar o projeto e clicar no botão Publicar na 
Galeria. Veja a figura.
Figura 198 – Escolhendo o projeto para compartilhar
Uma vez compartilhado, é necessário descrever o projeto para que as outras pessoas possam se 
divertir com ele. Veja a figura a seguir.
Figura 199 – Inserindo informações sobre o projeto
No cadastro, também é solicitada uma figura, e foi carregada uma das telas. A chamada já está 
publicada. Veja a figura a seguir.
283
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Figura 200 – Thumb do app compartilhado
284
Unidade III
8.5 Preparando para a publicação na Play Store
A publicação na Play Store, por poder envolver valores financeiros, e devido à própria necessidade 
de confiabilidade e segurança dos programas, é bastante burocrática e não é gratuita. É necessário que 
o processo seja assim para evitar a distribuição de programas maliciosos.
8.5.1 Informações dos detalhes do app
Antes da realização do registro, é necessário já ter em mãos algumas informações para não perder 
tempo no processo. As principais informações para o registro do aplicativo no Play Store são as 
apresentadas a seguir:
•	 o idioma-padrão (pt-br);
•	 o título;
•	 uma descrição curta sobre as funções do aplicativo;
•	 uma descrição completa sobre as funções do aplicativo;
•	 as telas do seu app;
•	 um ícone de alta qualidade, que deverá ter exatamente 512 px por 512 px;
•	 uma imagem que ficará como sua propaganda na loja, a qual deverá ter 1024 px de largura 
por 500 px de altura;
•	 a classificação do aplicativo, se ele é um jogo ou outro tipo de aplicativo.
8.5.2 Versões do app
Quando se faz a compilação de um programa Android, para a sua instalação, ou seja, durante o 
processo de construção do APK, o aplicativo recebe uma chave privada digital vinculada à conta de 
desenvolvedor. Assim, toda vez que há uma atualização de versão, a mesma assinatura é utilizada. Caso 
uma versão antiga esteja instalada no usuário, o dispositivo saberá que a assinatura é a mesma e fará 
a atualização.
Na distribuição, a Play Store pede essa chave, mas, como o aplicativo foi criado pelo App Inventor, 
essa etapa é desnecessária, pois a chave já é gerada quando a compilação é feita na nuvem, ou melhor, 
no servidor do MIT. Na versão, a chave deverá ser recusada.
285
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
8.5.3 Classificação do aplicativo 
Existe um órgão internacional da Coalizão Internacional de Classificação Etária (Iarc) que oferece a 
classificação de conteúdo para os diversos países do mundo. Assim, se o aplicativo for de distribuição 
mundial, ele deverá ser classificado conforme o país de destino. Essa classificação é obrigatória para a 
publicação na Play Store.
8.5.4 Preços e distribuição
A questão do preço é de ordem pessoal. A critério do desenvolvedor, a distribuição do aplicativo 
pode ser feita de forma gratuita, de forma paga ou com o acompanhamento de anúncios, por exemplo.
8.5.5 Conta do desenvolvedor
Para publicar na Play Store, é preciso ter uma conta de desenvolvedor. Para criar essa conta, 
deve-se acessar o site: https://play.google.com/apps/publish/.
O site pedirá o login com a conta oficial do Google, pois a conta de desenvolvedor custa 25 dólares. 
Esse valor será descontado da carteira virtual do usuário do Google. Também serão depositados 
nessa conta os rendimentos do aplicativo, caso sua instalação ou suas funções sejam pagas.
Após a concordância, o desenvolvedor irá receber um email autorizando o desconto e o link 
para terminar o cadastro.
 Resumo
Na unidade III, vimos, com riqueza de detalhes e de ilustrações, 
o processo de desenvolvimento de um jogo. Estudamos os conceitos 
envolvidos no Gameflow, ou fluxo, que se refere aos elementos que fazem 
um jogo atraente.
Expusemos características de algumas ferramentas destinadas ao 
desenho de jogos e estudamos o processo de desenho de animação no 
App Inventor.
Tratamos de itens relativos à Tela de Pintura e seus eventos e às 
coordenadas. Em nossa aplicação, colocamos, sobre a Tela de Pintura, uma 
Bola e estudamos a interação dela com os outros componentes e os eventos 
que um jogo gera.
Abordamos o desenvolvimento de um jogo e vimos os conceitos físicos 
e matemáticos básicos utilizados no seu planejamento.
Ao final, fizemos uma breve consideração sobre o acabamento e a 
distribuição dos aplicativos.
286
Unidade III
 Exercícios
Questão 1. Um aluno estava estudando o desenvolvimento de aplicativos utilizando o MIT App 
Inventor e resolveu criar um pequeno programa, baseado em um dos exemplos do livro-texto. Nesse 
programa, na tela Designer, foram adicionados os componentes indicados a seguir:
•	 um botão, chamado de Botão1, com a propriedade Texto igual a Limpar.
•	 um elemento de pintura, chamado de Pintura1.
•	 um temporizador, chamado de Temporizador1, com a propriedade Intervalo ajustada para 100.
•	 um sensor de orientação, chamado de SensorDeOrientação1.
Os componentes foram dispostos da forma mostrada na figura a seguir.
Figura 201 
No editor de blocos, foi criado o programa apresentado a seguir.
287
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Figura 202 
Nesse programa, quando o usuário tocar na tela, um pequeno círculo preto será desenhado na 
posição em que o usuário tocou. Depois, quando o usuário retirar o dedo da tela, o programa continuará 
desenhando círculos pretos nela, mas a posição dos círculos será controlada pelo sensor de orientação 
do celular. Assim, quando o usuário movimentar o aparelho, o círculo se comportará como se fosse uma 
pequena esfera “rolando” sobre a tela do celular e “caindo” na direção na qual o celular estiver apontado. 
O temporizador indicará o momento de desenhar os círculos na tela e calculará a nova posição do 
desenho, com base nas coordenadas anteriores e no posicionamento espacial do aparelho.
Um exemplo de execução do programa em um celular é mostrado abaixo.
Figura 203 
288
Unidade III
Com base nesse programa e nos seus conhecimentos, avalie as afirmativas.
I – Ao processarmos o evento Disparo do Temporizador1, os valores iguais a -10, que estão sendo 
utilizados para ajustar as variáveis globais x e y, estarão incorretos, pois deveriam ser iguais a 10. 
Com um valor negativo, o movimento do desenho fica sempre invertido em relação à posição física 
do celular.
II – Se modificarmos o módulo do valor de -10 para outro valor, poderemos aumentar ou reduzir a 
velocidade do desenho na tela.
III – O componente Botão1 apaga todo o desenho feito na tela, e o usuário pode iniciar um novo 
desenho tocando em uma nova posição. 
É correto o que se expõe em:
A) I, apenas.
B) II, apenas.
C) III, apenas.
D) II e III, apenas.
E) I, II e III.
Resposta correta: alternativa D.
Análise das afirmativas
I – Afirmativa incorreta.
Justificativa: devemos ter em mente que as coordenadas x e y começam no canto superior esquerdo 
do componente Pintura1, aumentando de cima para baixo e da esquerda para a direita. Dessa forma, 
e de acordo com a definição dos ângulos dos sensores, os valores devem ser negativos para que o 
comportamento do desenho seja similar ao comportamento de uma esfera rolando na superfície 
do celular. 
II – Afirmativa correta.
Justificativa: a magnitude do número vai indicar a próxima posição das coordenadas x e y do 
desenho, de forma que valores maiores farão com que o desenho pareça ser mais rápido. 
289
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
III – Afirmativa correta.
Justificativa: como o movimento vai deixando um “rastro”, com o tempo, a tela vai ficando “poluída”, 
de forma que o botão tem a finalidade de apagar tudo o que há na tela, a fim de que o usuário comece 
novamente a brincar com o programa com uma tela limpa (ou seja, sem rastros antigos).
Questão 2. Considere as afirmativas a seguir a respeito do game designdocument (GDD). 
I – Um dos objetivos do GDD é comunicar a ideia básica de um jogo para a equipe de desenvolvimento. 
É importante que esse documento contenha a história associada ao jogo, bem como uma descrição dos 
personagens, entre outros elementos relacionados.
II – Existem vários tipos de GDD, cujo uso dependerá da complexidade do projeto (ou seja, do jogo) 
e da complexidade da história. Entre os tipos mais comuns utilizados, podemos citar o GDD de página 
única e o GDD de dez páginas.
III – Um dos elementos do GDD de página única é a descrição da identidade do jogo, que contém 
informações como o resumo da sua ideia principal e a descrição do que o jogo faz. 
É correto o que se expõe em:
A) I, apenas.
B) II, apenas.
C) III, apenas.
D) II e III, apenas.
E) I, II e III.
Resposta correta: alternativa E.
Análise das afirmativas
I – Afirmativa correta.
Justificativa: é importante que todos os componentes da equipe responsável pelo desenvolvimento 
de um jogo tenham uma visão clara da sua ideia básica. Para isso, é feito o GDD, um documento criado 
justamente com o objetivo de capturar a ideia da estrutura básica do jogo de forma clara e sucinta e 
comunicar essa informação para todos os envolvidos no projeto.
290
Unidade III
II – Afirmativa correta.
Justificativa: o tamanho e a complexidade do GDD dependerão da complexidade do jogo que está 
sendo desenvolvido. Jogos simples e intuitivos podem ter um GDD menor, como o GDD de página única, 
enquanto jogos mais complexos podem requerer um GDD mais detalhado, como o GDD de dez páginas.
III – Afirmativa correta.
Justificativa: uma das informações que normalmente são adicionadas ao GDD de página única é 
descrição da identidade básica do jogo. Isso é feito por meio de uma descrição da ideia principal do jogo 
e de um resumo do seu funcionamento.
291
FIGURAS E ILUSTRAÇÕES
Figura 163
RABIN, S. (ed.). Introdução ao desenvolvimento de games. São Paulo: Cengage Learning, 
2011. v. 1, p. 77.
REFERÊNCIAS
Audiovisuais
HAL Abelson: mobile computing. 24 fev. 2015. 1 vídeo (5 min). Publicado pelo canal The Brainwaves 
Video Anthology. Disponível em: https://bit.ly/3bMSAuU. Acesso em: 19 mar. 2021.
Textuais
AMERKASHI, H. Absolute App Inventor 2: Android programming for all. 2015. E-book.
APRENDENDO com Inkscape. Inkscape, [s.d.]. Disponível em: https://bit.ly/3lqq32K. Acesso 
em: 19 mar. 2021.
FORMATOS de mídia compatíveis. Developers, 27 dez. 2019. Disponível em: http://bit.ly/3qjcOBW. 
Acesso em: 19 mar. 2021.
GLÓRIA JUNIOR, I. A unificação dos game design document: a hora do jogo. FaSCi-Tech, São Caetano 
do Sul, v. 1, n. 10, p. 6-18, jan. 2016. Disponível em: https://bit.ly/3loOddW. Acesso em: 19 mar. 2021.
GUERREIRO, M. D. Os efeitos do game design no processo de criação de jogos digitais utilizados no 
ensino de química e ciências: o que devemos considerar? 2015. Dissertação (Mestrado em Ciências) – 
Faculdade de Ciências, Universidade Estadual Paulista, Bauru, 2009 .
HOWE, D. API. In: HOWE, D. Foldoc. 1985. Disponível em: https://bit.ly/38PCOi2. Acesso 
em: 19 mar. 2021.
INTRODUÇÃO às web APIs. MDN Web Docs, 22 mar. 2021. Disponível em: https://mzl.la/3lKjgBb. Acesso 
em: 23 mar. 2021.
JUUL, J. Games telling stories? A brief note on games and narratives. Game Studies, v. 1, n. 1, 2002. 
Disponível em: http://bit.ly/3r3F8Z2. Acesso em: 19 mar. 2021.
KAMRIANI, F.; ROY, K. App Inventor 2 essentials. Birminghan: Packt Publishing, 2016.
LOGAN, L. Learn to program with App Inventor: a visual introduction to building apps. San Francisco: 
No Starch, 2019.
292
MANUAL do usuário. Gimp, 2015. Disponível em: https://bit.ly/3eT0W7p. Acesso em: 19 mar. 2021.
METZ, C. Google Blockly lets you hack with no keyboard. Wired, 1 jun. 2012. Disponível em: 
http://bit.ly/2NIR6dk. Acesso em: 19 mar. 2021.
NATUSCH, G. Tutorial básico de Gimp 2.2. 2009. Disponível em: https://bit.ly/38OiQ7F. Acesso em: 
19 mar. 2021.
NOVAK, J. Desenvolvimento de games. São Paulo: Cengage Learning, 2010.
OVERVIEW. Yandex, [s.d.]. Disponível em: http://bit.ly/3ei2Uhh. Acesso em: 19 mar. 2021.
RABIN, S. (ed.). Introdução ao desenvolvimento de games. São Paulo: Cengage Learning, 2011. v. 1.
RESNICK, M. Give P’s a chance: projects, peers, passion, play. 2014. Disponível em: https://bit.ly/3bPEiuQ. 
Acesso em: 19 mar. 2021.
SHIMOHARA, C.; SOBREIRA, E. R.; ITO, O. Potencializando a programação de jogos digitais de 
matemática através do Scratch e da avaliação Game Flow. In: WORKSHOP DE INFORMÁTICA NA 
ESCOLA, 22., 2016, Uberlândia. Anais […]. 2016. p. 436-445. Disponível em: http://bit.ly/3kvBohy. 
Acesso em: 19 mar. 2021.
VANNUCCHI, H.; PRADO , G. Discutindo o conceito de gameplay. Revista Texto Digital, Florianópolis, v. 5, 
n. 2, p. 130-140, 2009.
WEILLER, T. A. Game start: lições de game design para seu videogame. São Paulo: Autor, 2015.
WOLBER, D. et al. App Inventor. Sebastopol: O’Reilly Media, 2011.
Sites
Creative Commons. Disponível em: https://bit.ly/2OGWZbb. Acesso em: 19 mar. 2021.
Free Software Foundation. Disponível em: http://bit.ly/2OzZ48L. Acesso em: 19 mar. 2021.
Gimp. Disponível em: https://bit.ly/3lqfxIX. Acesso em: 19 mar. 2021.
Google Maps Platform. Disponível em: https://bit.ly/3d2Xjcz. Acesso em: 23 mar. 2021.
Inkscape. Disponível em: https://bit.ly/3rWN53I. Acesso em: 19 mar. 2021.
Jogos do Blockly. Disponível em: http://bit.ly/3qQwexY. Acesso em: 19 mar. 2021.
Scratch. Disponível em: http://bit.ly/3eCE7ot. Acesso em: 19 mar. 2021.
293
294
295
296
Informações:
www.sepi.unip.br ou 0800 010 9000