Sumário

Mole Mash V2 com camadas de Sprite ............................................................................... 1

O que você está construindo ................................................................................................ 1
Introdução ............................................................................................................................... 2
Começando ............................................................................................................................. 2
Configurar os Componentes ................................................................................................ 3
Adicionar comportamentos aos componentes ................................................................. 4
Criando variáveis.................................................................................................................... 5
Iniciando o Aplicativo ............................................................................................................ 5
Movendo a Toupeira (Mole) ................................................................................................. 7
Registrando toques ................................................................................................................ 9
Programa Final.......................................................................................................................... 10
Variações ............................................................................................................................... 10
Revisar ................................................................................................................................... 10

Mole Mash V2 com camadas de Sprite

O que você está construindo

Este tutorial mostra como construir um

jogo semelhante ao jogo de arcade
whac-A-Mole™. O objetivo é tocar em
uma toupeira que sai aleatoriamente de
um dos cinco orifícios fixos. Toda vez
que você consegue, sua pontuação é
aumentada em um ponto.

Para destacar o App Inventor, qualquer

componente e camadas de imageSprite
Z (Z-layering), este aplicativo adota uma
abordagem ligeiramente diferente do
tutorial original do Mole Mash, que
você não precisa ter concluído para
completar este. Você deve, no entanto,
estar familiarizado com o básico do App
Inventor, usando o Designer para
construir uma interface de usuário e
usando o Editor de Blocos para codificar
o comportamento de um aplicativo.
Introdução

Este tutorial inclui:

1. Adicionando componentes no Designer

2. Usando qualquer funcionalidade de componente para obter e definir
propriedades dos componentes ImageSprite
3. Controlando o jogo com o componente Relógio (Clock)
4. Usando camadas Z (Z-layering) Sprite para garantir que um ImageSprite
apareça na frente de outro

Começando

Abra ai2.appinventor.mit.edu e inicie um novo projeto. Defina a

propriedade Title da tela como um nome apropriado, como "Mole Mash". Baixe
os arquivos de imagem abaixo (criados por Yun Miao) para o seu computador
clicando com o botão direito do mouse neles e, em seguida, adicione-os ao seu
projeto pressionando o "Upload File ..." botão no painel mídia.

Buraco: Mole:
 Configurar os Componentes

A interface do usuário conterá um total de 6 ImageSprites: 5 furos imóveis e 1

toupeira. A toupeira se moverá em cima dos buracos. Use o Designer para criar
a interface do usuário. Quando terminar, deve parecer algo como a foto abaixo.
Não se preocupe em alinhar os buracos uniformemente. Você especificará
suas localizações através de suas propriedades X e Y. Instruções adicionais
estão abaixo da imagem.

A seguir está a lista de componentes que você adicionará:

Tipo de componente Grupo O que você vai Propósito do Componente

paleta nomeá-lo

Canvas Desenho e GameCanvas O campo de jogo

Animação

ImageSprite (5) Desenho e Hole1... Hole5 Buracos dos quais a toupeira

Animação pode aparecer

ImageSprite Desenho e Mole O espião

Animação

HorizontalArrangement Layout ScoreArrangement Para exibir a pontuação

Lable Interface ScoreTextLabel Para segurar "Score: "

do usuário

Lable Interface ScoreValueLabel Para segurar o placar (# de

do usuário vezes que a toupeira foi
atingida)
Clock Interface MoleClock Para controlar o movimento da
do usuário toupeira

Sound Mídia Buzzer Para vibrar quando a toupeira é

tocada

Faça as seguintes alterações nas propriedades dos componentes:

Componente Ação

Canvas1 Defina BackgroundColor para Verde. Defina largura para 320 pixels.
Definir altura para 320 pixels.

Hole1 Definir X para 20 e Y a 60 (superior esquerdo).

Hole 2 Definir X para 130 e Y a 60 (centro superior).

Hole 3 Conjunto X a 240 e Y a 60 (superior direito)

Hole 4 Definir X para 75 e Y a 140 (inferior esquerdo).

Hole 5 Definir X para 185 e Y para 140 (inferior direito).

Mole Definir imagem para "mole.png". Defina Z a 2 para que a toupeira

apareça na frente das outras ImageSprites,que têm o valor Z padrão
de 1.

ScoreTextLabel Definir texto para "Pontuação: ".

ScoreTextValue Definir texto para "0".

Não se preocupe agora em definir a propriedade Imagem para os buracos;

Vamos definir a propriedade no Editor de Blocos.

Adicionar comportamentos aos componentes

Aqui está uma visão geral do que precisamos criar blocos para fazer:

1. Criar variável global:

o holes : uma lista de ImageSprites de furos
2. Quando o aplicativo é iniciado:
o Preencha a lista de buracos.
o Coloque a propriedade Picture de cada buraco como "hole.png".
o Mova a toupeira aleatoriamente para um buraco.
3. Crie um procedimento MoveMole para:
 o Defina currentHole para um orifício aleatório dos holes da lista .
o Mova o espião para a localização do currentHolel .
4. Quando MoleClock.Timer disparar:
oLigue para MoveMole para mover a toupeira aleatoriamente.
5. Implemente um manipulador que faça o seguinte quando a toupeira é tocada:
o Adicione um na pontuação.
o Faça o telefone vibrar brevemente.
o Chame MoveMole.

Para prosseguir, mude para o Editor de Blocos.

Criando variáveis

Crie a variável e nomeie-a holes . Por enquanto, vamos dar-lhe um valor inicial
"manequim" de uma lista vazia. Definiremos o valor inicial real no manipulador
de eventos Screen1.Initialize , que é executado cada vez que o aplicativo
carrega a tela. Aqui está uma foto e lista dos blocos que você vai precisar:

Tipo de bloco Gaveta Propósito

initialize global holes tp Variáveis Mantenha uma lista de ImageSprites de furos.

create empty list Listas Crie uma lista vazia, a ser preenchida quando o
programa começar.

Os comentários (criados pelo botão direito do mouse em um bloco) são

encorajados, mas não são necessários.

Iniciando o Aplicativo
O primeiro evento a ocorrer em qualquer aplicativo é Screen1.Initialize , então
colocaremos o código inicial nesse manipulador. Especificamente,
adicionaremos os componentes hole a lista de holes, definiremos a propriedade
Picture de cada hole como "hole.png", e chamaremos MoveMole . Como ainda
não escrevemos MoveMole, criaremos um procedimento vazio com esse nome,
que preencheremos mais tarde.

Abaixo estão uma tabela dos blocos que você precisa criar. Observe que a
gaveta "Any ImageSprite" é encontrada na guia "Any component" na parte
inferior da lista de Blocos no Editor de Blocos.

Block type Drawer Purpose

Screen1.Initialize Screen1 Especifique o que deve acontecer quando

o aplicativo for iniciado.

add items to list Lists Adicione os seguintes valores a ...

get global holes Variables ... a lista de buracos

Hole1 Hole1 - o buraco superior esquerdo

Hole2 Hole2 - o buraco central superior

Hole3 Hole3 - o buraco superior direito

Hole4 Hole4 - o buraco inferior esquerdo

Hole5 Hole5 - o buraco inferior direito

for each hole in list Control Iterar através da lista holes .

set ImageSprite.Picture of Any Configure a property Picture de...

ImageSprite
component ... to

get global hole Variables ...a imagem sprite hole corrente

" " (hole.png) Text ...para a imagem do buraco vazio.

to procedure (MoveMole) Procedures Crie um procedimento, a ser preenchido

mais tarde, para mover a toupeira.

call MoveMole Procedures Chame MoveMole para fazer a primeira

colocação da toupeira..

Compare o bloco for each com os blocos equivalentes que seriam

necessários sem ele:

Não só o conjunto esquerdo de blocos é mais curto, como é menos repetitivo,

poupando o programador de cópia e colagem sem sentido e facilitando a
modificação, por exemplo, se o nome do quadro for alterado.

Movendo a Toupeira (Mole)

Agora vamos preencher o corpo do procedimento MoveMole , que

chamaremos quando o programa começar, quando a toupeira for tocada, e
quando nosso Timer explodir a cada segundo. O procedimento deve escolher
um orifício aleatório e mover a toupeira em cima dele. Aqui estão os blocos
compilados e uma tabela dos blocos utilizados:
 Block type Drawer Purpose

initialize local currentHole to Variáveis Guarde o valor do orifício

(existem dois tipos de 'inicialize local': pegue atual para uso no
o que se encaixa no bloco de procedimento) procedimento.

pick a random item Listas selecione aleatoriamente um

buraco da lista

get global holes Variáveis lista de imagesprites de furo

call Mole.MoveTo Toupeira Mova a verruga para o...

ImageSprite.X of component Qualquer .. x-coordenada de...

imagesprite

get local currentHole Variáveis ... o buraco escolhido...

ImageSprite.Y of component Qualquer ... e a coordenada y.

imagesprite

Agora precisamos especificar que o MoveMole deve ser chamado sempre que
o Temporizador do MoleClock explodir. Só precisamos de dois blocos para
conseguir isso:

Tipo de bloco Gaveta Propósito

when MoleClock.Timer MoleClock Quando o Temporizador explodir...

call MoveMole Procedimentos ... mova a toupeira.

Registrando toques

Finalmente, precisamos especificar o que acontece quando a toupeira é

tocada. Especificamente, queremos:

1. Incrementar o placar.
2. Faça o telefone vibrar brevemente.
3. Mova a toupeira.

Podemos facilmente traduzi-los para blocos:

Tipo de bloco Gaveta Propósito

when Mole.Touched Mole Quando a toupeira é tocada...

set ScoreValueLabel.Text to ScoreValueLabel ... atualizar a pontuação visível

para...

+ Math ... o resultado da adição...

1 Math ... 1 [e]...

ScoreValueLabel.Text ScoreValueLabel ... a pontuação anterior.

chamar Buzzer.Vibrar Buzzer Faça o telefone vibrar por...

100 Math ... 100 milissegundos.

chamar MoveMole Procedures Mova a toupeira para um novo

local.
Programa Final

Variações

Aqui estão algumas variações que você pode querer implementar:

• Adicionando um botão Reset para definir a pontuação de volta para 0.

• Ter a pontuação depende não apenas do número de acertos, mas também do
número de faltas e toupeiras que escaparam.
• Aumentando a velocidade do jogo de movimento mole se o jogador está indo
bem e diminuindo-o se o jogador está indo mal.
• Adicionando uma segunda verruga em um temporizador diferente.

Revisar

Aqui estão alguns dos conceitos abordados neste tutorial:

• Colocando componentes em uma lista (list).

• Executando uma operação em cada componente de uma lista (list) usando os
recursos for each bloco e qualquer componente.
• Colocando um ImageSprite em cima de outro, usando seu conjunto Z para
controlar o que vai na frente.
• Usando o componente Clock para controlar o jogo.
• Criando um procedimento e chamando-o de vários lugares.
Fonte:

Mole Mash V2 with Sprite Layering (mit.edu)