Tutorial 24 - I componenti OrientationSensor e Ball (ImageSprite) per la creazione di un semplice gioco

Nel tutorial di oggi vedremo come realizzare un semplicissimo gioco del biliardo (o meglio di una palla che deve esser fatta rotolare in una delle buche...).

Ovviamente questo esempio ci serve soltanto per dimostrare ancora una volta la versatilità di App Inventor e con quale facilità sia possibile accedere ai vari sensori presenti sul nostro telefono Android. In questo caso all'accelerometro ed alla bussola.
Parliamo infatti di OrientationSensor, il componente che ci restituisce informazioni circa l'orientamento del telefono nello spazio.
Questo componente ci può dire di quanto il telefono è inclinato (destra/sinistra e avanti/indietro), e verso quale direzione sta guardando (bussola).

Useremo anche il componente Ball (nella palette Animation) che non è altro che un componente ImageSprite la cui immagine è uguale a quella di una sfera e non può essere modificata se non nella sua dimensione.

Il concetto sarà quindi quello di posizionare uno sprite "Ball" , avere un "Canvas" dove la palla si muove ed aggiungere le 6 buche (anch'esse realizzate con della "Ball").
Utilizzando OrientationSensor faremo muovere la palla da biliardo e usando l'evento "CollidedWith" della Ball capiremo quando questa va in buca.

Starò poi alla vostra fantasia pensare ad altri utilizzi per questo componente veramente tanto potente quanto semplice nel suo utilizzo!

Buona visione

Concludiamo con una traduzione approssimativa (fatta da me) dell'help di questi due componenti

OrientationSensor

Componente non visibile che riporta i seguenti tre valori (in gradi):

• Roll: 0 gradi quando il device è posato su un piano orizzontale, arriva fino a 90 gradi quando il device viene sollevato sul suo lato sinistro, e decrementa fino a −90 gradi quando viene sollevato sul lato destro.
• Pitch: 0 gradi quando il device è posato su un piano orizzontale, arriva fino a 90 gradi quando il device è sollevato affinchè la punta guardi verso il basso, incrementa fino a 180 gradi quando viene girato sottosopra. In maniera simile quando viene girato con la base che guarda il basso l'angolo diminuisce fino a -90 gradi e poi fino a -180 gradi quando viene girato sottosopra completamente
• Azimuth: 0 gradi quando la punta guarda nord, 90 quando punta east, 180 quando punta sud, 270 quando punta a ovest.

Properties

Available

Indica se il sensore è presente nel telefono.

Enabled

Se settato, abilita il sensore.

Azimuth

Valore dell'azimuth in gradi.

Pitch

Valore del Pitch in gradi.

Roll

Valore dell Roll in gradi.

Magnitude

Ritorna un numero da 0 a 1 che indica di quanto il device è inclinato. Ritorna la magnitudine della forza che sarebbe sentita da una palla che rotola sulla superficie del telefono.

Angle

Ritorna un angolo che da la direzione verso cui è inclinato il telefono. In pratica da la direzione della forza che sarebbe sentita da una palla che rotola sulla superficie del telefono.

Events

OrientationChanged(number azimuth, number pitch, number roll)

Evento generato quando c'è una variazione di posizione del telefono (in pratica questo evento viene eseguito di continuo).

Ball
Una "ball" è uno sprite tondo che è contenuto in un canvas, può reagire ai tocchi ed ai trascinamenti, interagisce con gli altri sprite (sia ball che sprite) e il bordo del canvas, e si muove in base alle sue proprietà
Per esempio per far muovere una palla di 4 pixel verso la cima del canvas ogni 500ms si setta la proprietà Speed a 4, e la proprietà Interval a 500, e Heading a 90 (gradi) più la proprietà Enabled a True.
Si possono cambiare queste e altre proprietà per cambiare il comportamento della palla.
Le differenze tra una ball ed un image sprite sono che l'image sprite può prendere la sua immagine da un file jpg o png mentre una ball può solo cambiare nel raggio e nel colore.

Properties

Radius

Raggio.

PaintColor

Colore.

Enabled

Se abilitato, la ball è attiva.

Interval

Frequenza del movimento della palla in millisecondi (ogni quanto si muove).

Visible

Se settato la palla è visibile.

Heading

Direzione verso cui la ball sta viaggiando.

X

Coordinate X.

Y

Coordinate Y.

Speed

Numero di pixel con cui si muove la palla ad ogni Interval.

Events

CollidedWith(component other)

Eseguito quando due componenti animati (image sprite o ball) collidono. L'argomento "other" rappresenta l'altro componente che viene in collisione.

Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY)

La ball è stata "dragged". Vedere l'help del canvas per maggiore chiarezza.

EdgeReached(number edge)

Eseguito quando la ball raggiunge i bordi dello schermo. L'argomento edge riporta il valore di quale bordo è stato colpito come da seguente tabella:

• nord = 1
• nord-est = 2
• est = 3
• sud-east = 4
• sud = -1
• sud-ovest = -2
• ovest = -3
• nord-ovest = -4

NoLongerCollidingWith(component other)

Eseguito quando due oggetti animati non collidono più (nota: io ho avuto problemi con questo evento, non son sicuro funzioni correttamente...)

Touched(number x, number y)

Eseguito quando l'utente tocca la ball

Sorgenti:
Immagine del tavolo da biliardo da usare nel Canvas
File .zip da caricare in App Inventor (scaricatelo con l'opzione "scarica originale")