App Inventor_docx

App Inventor
Tutorial: colpisci la talpa
È una versione del gioco in cui una "talpa" compare in posizioni casuali dai tunnel che ha scavato in un prato, il
giocatore, servendosi di un martello, deve colpire la talpa.
Connettersi ad App Inventor ed avviare un nuovo progetto. Assegnargli il nome Talpa. Nel pannello delle proprietà
modificare la proprietà Title da Screen1 a "la Talpa". Aprire il Blocks Editor e connettere l’emulatore.
Scaricare l’immagine sul proprio computer. Oppure creare un’immagine di tipo png di dimensioni 36x42.
Durante il gioco la talpa compare ogni mezzo secondo. Se viene colpita si guadagna un punto e il telefono vibra.
Premendo restart si azzera il punteggio.
Trascinare i seguenti componenti nell’area del progetto:
• Una Canvas, disponibile nella tavolozza Drawing and Animation. Su questa verrà disegnato il campo
di gioco dove si muove la talpa. Collocare la Canvas in alto, e fissare le proprietà Width: 300 pixel e
Height: 300 pixel. Nel pannello Components, selezionare la Canvas e premere il pulsante Rename.
Assegnare il nome Prato alla Canvas.
•
Una Label, disponibile nella tavolozza User Interface, che mostrerà il punteggio, cioè il numero di
volte che la talpa è stata colpita. Impostare la proprietà Text della label a "Punti: ---". Premere il
pulsante Rename per assegnare il nome Punti alla label.
•
Un Button, disponibile nella tavolozza User Interface. Impostare la proprietà Text del pulsante a
"Reset". Cambiare il nome del pulsante a Reset.
Aggiungere un componente Sound, disponibile nel menu Media, e denominarlo Rumore. Questo
componente non verrà usato per riprodurre un suono, ma per far vibrare il telefono quando si colpisce la talpa.
I componenti Timer e Clock
Durante il gioco, per far apparire periodicamente la talpa, serve un componente Clock. Questo componente possiede
vari metodi, ad esempio fornisce la data. In questo caso verrà usato per segnalare che è trascorso un intervallo di tempo.
L’intervallo viene fissato assegnando la durata alla proprietà TimerInterval.
•
•
Trascinare il componente Clock dalla tavolozza User Interface all’area del progetto; Questo si
posizionerà nella zona dei componenti non visibili. Premere il pulsante Rename e assegnargli il nome
TalpaTimer. Modificare la proprietà TimeInterval a 500 millisecondi. Assicurarsi che la casella della
proprietà Enabled sia spuntata.
Aggiungere uno Sprite
Gli Sprite sono immagini che possono muoversi sulla Canvas. Ogni sprite ha le proprietà Speed e Heading, oltre ad un
Interval che determina la frequenza dei passi. Gli Sprite possono anche riconoscere quando si verifica l’evento
“Touched”. In questo gioco la Talpa ha velocità 0, nel senso che non si muove autonomamente. Per farla muovere si
modificherà la sua posizione ogni volta che scade l’intervallo impostato nel timer.
Trascinare un componente ImageSprite dalla tavolozza Drawing and Animation all’area della
Canvas. Premere il pulsante Rename e assegnare il nome Talpa. Fissare le seguenti proprietà dello Sprite:
• Picture: Caricare l’immagine della talpa che è stata precedentemente prelevata: mole.png.
• Enabled: spuntato
• Interval: 500 (non ha importanza l’interval, perché la velocità è 0.)
• Heading: 0 Anche in questo caso l’heading non ha importanza perché la velocità è 0.
• Speed: 0.0
• Visible: spuntato
• Width: Automatic
• Height: Automatic
Le proprietà x ed y posseggono già un valore. Questi corrispondono alla posizione in cui è stato rilasciato il componente
quando è stato trascinato sulla Canvas. Si può notare che queste coordinate cambiano mentre si trascina la talpa, Inoltre,
se il telefono (o l’emulatore) è collegato si può vedere che esso si sposta anche sullo schermo del telefono mentre viene
spostato sulla Canvas. Nella lista della struttura dei componenti, lo sprite è incolonnato per evidenziare che è contenuto
nella Canvas.
Comportamento dei Componenti e gestori degli eventi
Un gestore di evento è una procedura richiamata quando si verifica l’evento. In App Inventor una procedura potrebbe
restituire un valore.
Definizione delle Procedure
• SpostaTalpa muove lo sprite in una nuova posizione sulla Canvas.
•
•
AggiornaPunti calcola e mostra il punteggio modificando la proprietà Text della label Punti.
La procedura SpostaTalpa:
4
App Inventor
Nel menu Built-In, del Blocks Editor, trascinare un blocco Procedures e modificare il nome da
"procedure" a "SpostaTalpa".
Nota: Ci sono due blocchi procedure molto simili: procedure then do e procedure then result, che è
una funzione. Usare procedure then do.
Il blocco SpostaTalpa ha un incastro "do". In questo incastro si inseriranno le istruzioni della procedura. Servono
due istruzioni: una per modificare la posizione x della talpa e l’altra per modificare la posizione y. La posizione viene
calcolata come una frazione casuale, compresa tra 0 e 1, della differenza tra la dimensione della Canvas e la dimensione
della Talpa. I blocchi che si devono usare si trovano nella tavolozza Math.
Nel menu Built-In, fare clic su Talpa, che si trova sotto la voce Screen1->Prato, scorrere l’elenco dei blocchi
e trascinare “set (Talpa).X to” e poi trascinare anche il blocchetto “set (Talpa).Y to”. Incastrare i
blocchi uno sotto l’altro all’interno del blocco procedure.
Dal menu Math trascinare due blocchi di moltiplicazione e incastrarli nell’intaglio etichettato “to” dei blocchi “set”.
Nel primo operando dei blocchi di moltiplicazione inserire un blocco random fraction prelevato dal menu Math.
Nella casella del secondo operando di entrambi i blocchi di moltiplicazione inserire un blocco di sottrazione.
Nel primo operando del blocco di sottrazione, per il calcolo della posizione X, inserire il blocco Prato.Width,
prelevato dal menu che si apre cliccando su Prato nel pannello dei blocchi, sotto la voce Screen1. Ripetere
l’operazione per il primo operando del blocco che calcola la posizione Y, inserendo il blocco Prato.Height.
Nel secondo operando del blocco di sottrazione per il calcolo della posizione X, inserire il blocco Talpa.Width, e,
nel blocco per il calcolo della posizione Y, inserire il blocco Talpa.Height. Definizione completa della procedura:
La procedura SpostaTalpa non riceve parametri, quindi non è necessario usare il puntino blu sul blocco.
Dichiarare una variabile in cui memorizzare il punteggio ed inizializzarla a 0. Definire anche la procedura
AggiornaPunti che mostra il punteggio nella label Punti. Questa deve scrivere nella proprietà Text della label il
risultato del concatenamento tra la stringa “Punti:” e il valore della variabile che conta i punti.
Nel menu Built-In clic su “Variables” e trascinare un blocco “inizialize global (name) to”.
Cliccare su “name” e sostituire name con punteggio. Cliccare su Math e incastrare un blocco “0”.
Clic su procedure, nel menu Built-In, e trascinare un blocco “to procedure do”. Sostituire il nome
“procedure” con “AggiornaPunti”. clic su Punti, che si trova nell’albero delle dipendenze di Screen1, e
selezionare il blocco set (Punti).(Text) to. Incastrarlo nel blocco della procedura AggiornaPunti.
Nell’intaglio del blocco “set Punti.Text to” si deve incastrare l’operatore di concatenazione join, prelevato
dal menu Text. Nel primo intaglio del blocco join incastrare il blocco di messaggio vuoto preso dal menu Text e tra
le virgolette scrivere Punti: (con uno spazio finale). Nel secondo intaglio incastrare la variabile punteggio: clic
su variables e prelevare il blocco get, clic sulla freccia verso il basso e scegliere “global punteggio”.
(oppure portare il mouse sul blocco dove la variabile è stata inizializzata, dopo un po’ compaiono due blocchi,
incastrare “get (global punteggio)”.
Aggiungere il Timer
Il prossimo passo consiste nel far muovere la talpa. Il componente clock ha un gestore dell’evento chiamato “when
... Timer” che viene richiamato periodicamente, in base al valore di TimerInterval. Il gestore di evento
richiama “SpostaTalpa”. Nel menu Blocks, sotto la voce Screen1, fare clic su “TalpaTimer” e trascinare un
blocco “when (TalpaTimer).Timer do” nell’area del progetto.
5
App Inventor
Se il telefono (o l’emulatore) è collegato si deve vedere l’effetto del timer: la talpa si sposta continuamente sul prato.
Aggiungere il gestore di evento Talpa Touch
Ogni volta che la talpa viene colpita, il punteggio si deve incrementare. Il gestore di evento deve:
1. Incrementare il punteggio.
2. Chiamare “AggiornaPunti” per mostrare il nuovo punteggio.
3.
4.
Far vibrare il telefono per 1/10 secondo (100 millisecondi).
Chiamare “SpostaTalpa” per togliere la talpa dalla posizione in cui è stata colpita.
Suggerimenti: per creare un blocco con il valore 100: portare il mouse nell’area di progetto e scrivere 100+Invio. Per
creare un blocco relativo a SpostaTalpa scrivere SpostaTalpa e, dalla lista, selezionare il blocco che interessa.
Azzeramento del punteggio.
Modifiche
Variare la velocità con cui la talpa si sposta in base all’abilità del giocatore. Ad esempio si cambia la proprietà
Interval valutando il punteggio in un secondo.
Contare anche i numeri di colpi mancati e il numero di talpe sfuggite prima di essere colpite. In questo caso bisogna
definire anche il gestore dell’evento Canvas.Touch. Si deve precisare che toccando la talpa vengono generati due
eventi, uno per la talpa e l’altro per la Canvas.
Cambiare la difficoltà.
Aggiungere un pulsante e denominarlo Livello. Modificare la proprietà Text: Livello.
Aggiungere una variabile globale e denominarla Livello. Inizializzarla a 0.
Aggiungere un blocco “When Livello.Click do”. Bisogna calcolare il livello con la formula:
Resto della divisione tra Livello+1 e 3.
Modificare la proprietà Text del pulsante:
set Livello.Text to concatenazione del testo “Livello: “ con il valore della variabile Livello.
Infine modificare l’Interval Timer in “500 + Livello * 250”.
6
App Inventor
Inserire un componente HorizontalArrangement. Al suo interno spostare la label “Punti” ed aggiungere, alla
sua destra, una nuova label con la proprietà Text: Mancate: (aggiungere uno spazio alla fine).
Creare una variabile: “Mancate=0”.
Creare una variabile: Colpita = 0. Nel blocco “when talpa.touched” incastrare, in testa ai blocchi già
presenti. un blocco “set global Colpita to 1”.
Nel blocco “when Talpa.Timer” incastrare un blocco “if“
Nel blocco When Reset.Click incastrare un blocco “set mancate=0”.
Riferirsi alla figura per apportare le modifiche ai blocchi:
Il gioco prevede la distinzione tra i colpi sbagliati, cioè click su un’area vuota del Prato, e i colpi mancati, cioè la talpa
si sposta prima di fare clic. Questa parte è lasciata come esercizio.
Inserire il pulsante per avviare/fermare.
Nel Blocks Editor togliere la marca di spunta alla proprietà Enabled del componente Timer.
Nell’HorizontalArragement inserire un pulsante, denominarlo Via. Modificare la proprietà Text: Avvia.
7