A partire da questa lezione cercheremo di offrire al lettore degli esempi pratici su specifiche tematiche. Lo scopo di questa lezione, nello specifico, è costruire una nuova app che faccia uso di componenti e behavior finalizzati alla realizzazione di una semplice animazione.
In particolare, la nostra app ci consentirà di muovere col dito una sorta di palla (rappresentata da un’immagine a forma di cerchio) che continuerà a correre sullo schermo nella direzione impressale. Faremo in modo inoltre, che la palla possa "rimbalzare" una volta raggiunto il limitare destro, sinistro, inferiore o superiore del nostro schermo.
La scelta dell’app è motivata dal fatto che gli stessi sviluppatori di MIT App Inventor indicano questo progetto come un modo semplice ed efficace per prendere confidenza con le animazioni e con i componenti della famiglia Drawing and Animation già accennati nella lezione dedicata ia componenti di MIT App Inventor.
Per prima cosa accediamo alla schermata iniziale e creiamo un nuovo progetto, a cui assegneremo il nome di BallBounce (v.figura sottostante).
Inseriamo i componenti
Poi, dalla scheda Designer, inseriamo le componenti di cui avremo bisogno.
Per poter assicurare il rendering dinamico dell’immagine, avremo bisogno di un elemento Canvas, primo elemento del menu Drawing and Animation del pannello Palette.
Facciamo poi in modo che l’elemento Canvas appena inserito si estenda per tutta la lunghezza e la larghezza dello schermo. Per ottenere ciò impostiamo, come possiamo vedere nella figura in basso, la proprietà Width (larghezza) della componente Canvas1 appena inserita, dal menu Properties selezionando il valore Fill parent. Grazie a questa operazione il nostro elemento "riempirà" tutta la larghezza a disposizione.
Analogamente, dovremo assegnare anche alla proprietà Height (altezza) il valore Fill parent.
Successivamente, delimitiamo l’area in cui la nostra pallina potrà muoversi, impedendo cioè allo schermo di "scorrere" (sarebbe altrimenti impossibile definire, come desideriamo, meccaniche di "rimbalzo"). Per ottenere ciò, selezioniamo la componente Screen1 e priviamola della proprietà Scrollable (v.figura in basso: rimuoviamo, con un clic, il segno di spunta).
Aggiungiamo poi la componente Ball, secondo elemento del menu Drawing and Animation del pannello Palette. Per renderla maggiormente visibile, impostiamo, tramite il pannello Properties (sulla destra), un buon valore di radius (ovvero del raggio della nostra sfera), ad esempio 15.
Gestiamo i behaviors
Non resta ora che definire i behavior propri della nostra app, dalla scheda Blocks della schermata principale. Tali behavior dovranno modellare il movimento della palla a seguito del trascinamento e rilascio (movimento che viene detto di flung) e il rimbalzo. Troveremo tutti i blocchi di nostro interesse tra quelli associati all’oggetto Ball1. Cominciamo dalla gestione del movimento di flung.
Trasciniamo a destra, nel pannello Viewer, il blocco "When Ball1.Flung do". A questo punto colleghiamo a "do" sia "set Ball1.speed to" che "setBall1.heading to", in modo da impostare, rispettivamente, velocità e direzione della palla.
Ma a quali valori vogliamo impostare speed e heading? Ovvero: quanto veloce e in che direzione la palla deve cominciare a muoversi sullo schermo? La velocità, così come la direzione, sono determinate dalla natura del movimento di flung (che può essere verso l’alto, verso il basso, verso destra o verso sinistra, più o meno deciso). Desideriamo quindi leggere i valori di speed e heading associati al movimento di flung e trasferirli al movimento della palla, ovvero a setBall1.speed e a setBall1.heading.
MIT App Inventor, fortunatamente per noi sviluppatori, rende tale operazione molto semplice: posizioniamo il mouse, all’interno di "When Ball1.Flung do", su "speed". Appariranno due nuovi blocchi: "get speed" e "set speed to". Trasciniamo il blocco "get speed" e rilasciamolo in modo che seguaset Ball1.speed to, in modo da collegare i due blocchi. Svolgiamo un’operazione analoga anche per quanto riguarda la direzione, ovvero l’heading. A seguito di tali operazioni, il blocco risultante dovrà essere uguale a quello riportato nella figura sottostante.
Seguiremo una procedura simile anche per modellare il behavior associato al rimbalzo della palla, assemblando però in questo caso i blocchi: "When Ball1.EdgeReached", call Ball1.bounce e "get edge" (il blocco "get edge" apparirà, in analogia al caso precedentemente trattato, stazionando col mouse su "edge", in alto nel blocco "When Ball1.EdgeReached"). Il risultato finale è mostrato nella figura in basso.
Una volta terminato, possiamo verificare il corretto funzionamento dell’app tramite l’emulatore.
