Professional Documents
Culture Documents
a toupeira
Este tutorial ir ajud-lo a construir um jogo onde voc tem que bater na toupeira quando ela
salta para fora do buraco. Toda vez que voc acertar na toupeira sua pontuao ser
aumentada em 1 O tutorial vai incluir a criao de uma lista, usando o timer para controlar o
jogo e usar Sprite z- camadas para garantir que um Sprite possa aparecer na frente dos outros.
1
Esta janela ir aparecer. De o
nome do projeto de
EsmagueToupera e clique em OK
Um cavas
6 image sprites
o 5 buracos fixos
o 1 toupeira que ira se mover sobre os buracos
Um HorizontalArrangement
o 2 Labels
Um elemento Clock
Um elemento Sound
2
Configure a propriedade width do canvas com o valor 320 pixel e height com 320 pixel e
BackgroundColor com green
Queremos adicionar as imagens para os buracos e a toupeira na a tela. Para fazer isso v
ao painel components e abaixo de Media clique em upload new.
3
Selecione a imagem da toupeira e clique em OK
Repita esta operao para adicionar a imagem para o buraco. Agora voc deve ver as 2
imagens disponveis em Media no painel de components.
4
Agora selecione Animation no painel Palette e arraste 5 componentes ImageSprite para o
Canvas1 do projeto. Esses 5 ImageSprites sero utilizados para os buracos.
5
Renomeie os componentes para buraco1, buraco2, buraco3, buraco4 e buraco5.
Selecione cada uma das cinco ImageSprites e no painel properties em Picture selecione o
arquivo buraco.png.
Depois insira as coordenadas X e Y para cada buraco de acordo com a tabela abaixo:
6
Coloque outro ImageSprite e o renomeie como toupeira e na propriedade Picture selecione
a figura toupeira.png
Depois modifique a propriedade Z da toupeira para 2. Isto ir permitir que a toupeira aparea
em frente do buraco
7
No painel Palette selecione a opo basic e coloque 2 labels dentro do componente
HorizontalArrangement1
Agora renomeie o Label1 para lblPlacar e coloque Placar na propriedade text. J o Label2 ser
renomeado como lblPontos e propriedade Text ser mudada para 0.
8
9
No painel Palette selecione a opo basic e coloque um componente clock que ser exibido
abaixo da tela de layout como componente no visvel.
No painel Palette selecione a opo Media e coloque um componente Sound. Novamente, isto
ir aparecer abaixo da tela, em Componentes no-visveis.
10
Passo 3: Adicionando funcionalidades para a interface
Uma vez que a interface est pronta podemos definir as funcionalidades dos componentes. O
que ns queremos que acontea pode ser descrito nos seguintes passos:
Na aba Built-In clique no boto Definition e arraste o bloco def variable as para a rea de
programao e o renomeie como buraco
11
Ainda na aba Built-In clique no boto Lists e arraste o bloco call make a list item conecte
este bloco em def buraco as
Arraste outro bloco def variable as para a rea de programao e o renomeie como
BuracoAtual,. Esta varivel ira indicar o buraco atual da toupeira.
Na aba Built-In clique em Math e arraste um bloco number para a rea de programao e
conecte no bloco def BuracoAtual as e mude o valor deste bloco para 0.
12
Agora na aba Built-In clique em Definition e arraste um bloco to procedure arg do.
Renomeie este bloco como MoveToupeira.
13
Na aba Built-In clique em list e arraste o bloco call add items to list para a rea de
programao e conecte-o na parte interna do bloco when Screen1.Initialize do
Queremos adicionar itens lista. Para fazer isso vamos aba My Blocks clique me My
Definitions e arraste o bloco global buraco e encaixe na parte list do bloco call add items to
list
14
Ainda em My Blocks clique em buraco1 e arraste o bloco component buraco1 para a rea de
programao e o conecte na parte item do bloco call add items to list
15
Agora queremos especificar qual o valor que a varivel buraco vai assumir com os valores da
lista. Para fazer isso selecione a aba Built-In clique em control e arraste um bloco foreach
para rea de programao
16
Agora na aba Advanced clique em Any ImageSprite arraste o bloco ImageSprite.Picture
para a rea de programao e o conecte na parte do em foreach
Para completar este bloco selecione a aba My Blocks clique em My Definitions e arraste um
bloco value buraco e encaixe em component do bloco ImageSprite.Picture
17
Agora selecione a aba Built-In clique em Text e arraste um bloco text text e o encaixe na parte
to do bloco ImageSprite.Picture e o renomeie como buraco.png
18
A procedure MoveToupeira agora precisa ser concluda. A toupeira ir se mover quando o
usurio clica-la ou quando o tempo acabar. Quando isso acontece, um buraco aleatrio
ser escolhido e a toupeira ser exibida em cima do buraco.
Agora selecione a aba Built-In clique em Lists e arraste um bloco call pick random item para a
rea de programao conecte este bloco na parte to do bloco set global BuracoAtual to
19
Selecione a aba My Blocks clique em My Definitions e arraste um bloco global buraco e o
encaixe no bloco pick call random item.
Para fazer isso selecione a aba My Blocks clique em Toupeira e arraste um bloco call
toupeira.MoveTo X Y para a rea de programao e encaixe o mesmo no bloco to
MoveToupeira arg
20
Agora selecione a aba Advanced clique em Any Image Sprite e arraste um bloco
ImageSprite.X component e o conecte na parte X do bloco call toupeira.MoveTo X Y.
Arraste um bloco ImageSprite.Y component e o conecte na parte Y do bloco call
toupeira.MoveTo X Y.
21
Agora selecione a aba My Blocks clique em My Definitions e arraste 2 blocos global
BuracoAtual e os encaixe nos blocos ImageSprite.Y component e ImageSprite.Xcomponent.
Agora precisamos dizer ao programa que a procedure MoveToupeira ser chamada quando
encerrar o tempo do componente Clock1. Para fazer isso selecione a aba My Blocks clique em
Clock1 e arraste para rea de programao o bloco when Clock1.Timer.
22
Finalmente precisamos especificar o que acontece quando a toupeira tocada. O placar ser
incrementado, o telefone ir vibrar e a toupeira ir se mover. Para fazer isso selecione a aba
My Blocks, clique em toupeira e arraste para a rea de programao o bloco when
toupeira.Touched. Os componentes X e Y sero completados automaticamente.
23
Quando a toupeira tocada o placar ser incrementado em 1. Para fazer isso selecione a aba
My Blocks clique em lblPontos e arraste para rea de programao o bloco set
lblPontos.Text to e o encaixe na parte do no bloco when toupeira.Touched
Agora selecione a aba Built-In clique em Math selecione o bloco + e conecte-o na parte to
do bloco set lblPontos.Text
24
Selecione a aba Built-In clique em Math selecione o bloco number 123 arraste-o para a rea
de programao mude seu valor para 1 e o encaixe a esquerda do bloco +
Selecione a aba My Blocks clique em lblPontos, arraste o bloco lblPontos.Text para rea de
programao e o encaixe no lado direito do bloco +
Agora temos que fazer o telefone vibrar. Para fazer isso selecione My Blocks clique em Sound1
e arraste o bloco call Sound1.Vibrate para a rea de programao e insira este bloco logo
abaixo do bloco set lblPontos.Text
25
Selecione a aba Built-In clique em Math e arraste o bloco number 123 para a rea de
programao mude valor para 100 e o conecte na parte millisecs do bloco Sound1.Vibrate
26
O programa completo mostrado abaixo.
Voc acabou de criar uma funcional App do jogo Esmague a Toupeira, bem feito.
27
Passo 4: Experimente - Conecte o dispositivo e teste o programa
Para testar o aplicativo, voc tem duas opes:
1 Teste o aplicativo no emulador virtual, mas lembre-se, a funo de vibrao no vai
funcionar no emulador.
2 Teste o aplicativo em um dispositivo do mundo real
28