Tutorial 4 - Creazione di un gioco Android con MIT App Inventor (lancia la pallina)

Se ve lo stavate chiedendo, ebbene si, con App Inventor si possono creare anche dei giochi per Android!

Ovviamente ci vuole tanta pazienza e tanta bravura per creare qualcosa di accattivante, voglio comunque iniziare a mostrarvi nel tutorial di oggi alcuni componenti utili nella realizzazione di alcuni semplici giochi.

Partiremo con un gioco molto semplice, su un tavolo da biliardo avremo una pallina che potrà essere lanciata con il nostro dito tramite uno "swipe". (in 10 minuti di tutorial non si possono fare miracoli...)

Partiamo quindi subito vedendo gli elementi che dobbiamo usare,
quelli relativi alle animazioni ed alla creazione dei giochi si trovano quasi tutti nella palette
"Drawing and Animation"

Iniziamo inserendo un "Canvas", il Canvas non è altro che una "tavolozza" su cui possiamo interagire in vari modi, in questo esempio inseriremo uno sprite che si muove all'interno del canvas, ma ricordate che le sue potenzialità non si fermano qua.
(vi invito a leggere la documentazione ufficiale al seguente link http://ai2.appinventor.mit.edu/reference/components/animation.html#Canvas)

Inseriremo poi un componente "Ball" che altro non è che uno "Sprite" di forma sferica, questo componente può essere facilmente animato usando i metodi e gli eventi messi a disposizione da AI.

Dopo aver "disegnato" la nostra interfaccia inserendo un canvas ed uno sprite saremo pronti a programmare il movimento della pallina nel blocks editor.

L'interfaccia del nostro gioco, guardate il video per maggiori info

Vogliamo programmare il movimento della pallina in base al movimento del dito dell'utente sulla pallina stessa.
Questo movimento è conosciuto notoriamente come "swipe" o come "flung", in App Inventor è chiamato appunto Flung, ed ogni volta che viene rilevato dalla nostra app viene generato un evento
Ball1.Flung che possiamo quindi gestire con comodità programmando le azioni volute nel Blocks Editor.

Il blocco che aggiungiamo per far muovere la palla sarà quindi questo:

Andiamo a vedere cosa fa questo blocco di codice.
Letteralmente quando viene rilevato un movimento di tipo "flung" AI esegue questo blocco di codice che ci ritorna vari parametri:

x , y , speed , heading , xvel , yvel
In pratica ci fornisce:
1) le coordinate x,y in cui l'utente tocca la palla
2) la velocità del movimento di "flung"
3) la direzione del movimento di "flung"
4) le velocità relative x e y del movimento di "flung"

Per fare un esempio se col nostro dito "tiriamo" la palla verso l'alto verrà generato questo evento con i valori x,y relativi alla posizione del tocco, con un valore di "speed" (velocità) proporzionale alla velocità con cui abbiamo mosso il dito e con un valore di "heading" (direzione) pari a 0° (0° rappresenta il nord, 180° il sud e così via...)

Quindi andando ad impostare le proprietà di velocità e direzione della palla (Ball1) ai valori letti dall'evento "flung" realizzeremo il movimento della pallina stessa.
nota: abbiamo messo un fattore di moltiplicazione pari a 8 per il parametro di velocità della palla altrimenti questa andrebbe troppo lenta (potete provare a cambiarlo in più o in meno e sperimentare come cambia la velocità della palla di conseguenza)

Come vedete con un semplice blocco di codice abbiamo programmato il movimento della palla ed abbiamo simulato il lancio della palla tramite dito, non male vero!

Passiamo all'ultimo blocco di codice da aggiungere, se testate l'app creata fino a questo momento vi accorgete che la palla, una volta raggiunto il bordo dello schermo scorre su di esso finché non raggiunge un angolo e poi si blocca in uno dei 4 angoli dello schermo.

Per ovviare al problema possiamo usare un altro metodo messoci a disposizione dal componente "Ball" chiamato "EdgeReached" questo evento viene generato quando la palla raggiunge il bordo del Canvas.

Programmiamo questo evento per far in modo che, nel momento in cui la palla tocca il bordo (edge) venga eseguito il metodo "Ball1.Bounce" che ci farà rimbalzare la palla indietro.

Testate l'app sul vostro telefono per capire meglio quello che abbiamo appena realizzato.

Questo tutorial è volutamente semplice ma vi fa capire la potenza di App Inventor, con poche linee di codice abbiamo infatti realizzato un semplicissimo gioco e siamo riusciti ad animare una palla su un tavolo da biliardo virtuale!

Ora vi do qualche suggerimento per gli esercizi proposti alla fine del video:
1 - Per aggiungere l'attrito dovete usare un componente clock, per fare in modo che ogni tot millisecondi la palla rallenti, quindi ad ogni evento Clock1.timer dovete cambiare la velocità della pallina...
se volete un movimento ancora più realistico potete cercare su internet l'algoritmo che calcola la decelerazione di un oggetto sottoposto ad attrito.
2 - Per programmare le 6 buche potete usare altri 6 elementi ball (magari trasparenti ed usare l'evento "collidedWith" per controllare quando e se la pallina è andata in buca

Buon divertimento
Per chi preferisce la versione video del tutorial, la trovate qui sotto

Il sorgente dell'app è scaricabile da questo link:
Sorgente Lancia la Pallina.aia

Il canvas del tavolo da biliardo può essere scaricato cliccando questo link:
Biliardo Canvas.jpg

Per ogni commento o domanda usate i commenti qui sotto od i commenti sul video di YouTube