Cerca con Google

Translate

24 ottobre 2011

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")

6 commenti:

  1. Grazie al tuo tutorial mi è riuscito tutto al 1° colpo.
    Domanda: Esiste la possibilità di temporizzare la ricomparsa della pallina dopo essere andata in buca? Vorrei che ricomparisse dopo 2 secondi da quando ha toccato buca.

    Ps: Cribbio!!! Come riesci a copia/incollare i blocchi?

    RispondiElimina
    Risposte
    1. Dovresti aggiungere un elemento clock e condizionare la posizione e la proprietà visibile della pallina solo dopo che son passati i due secondi (contati con l'elemento clock) un pò difficile da spiegare qui ma realizzabile con un pò di prove :)
      per il copia incolla basta fare control-c control-v da tastiera (se usi windows) :)

      Elimina
  2. ciao, mi sapresti dire come faccio a centrare un canvas di dimensioni inferiori a quelle dello schermo? perchè nelle proprietà non trovo l'opzione per farlo e quindi me lo posizione sampre in alto a sinistra...

    RispondiElimina
    Risposte
    1. con il canvas devi misurare tramite l'elemento screen1.width la larghezza dello schermo e poi calcolare di conseguenza la posizione alle coordinate x esatte dove va posizionato.
      altrimenti se puoi non usare il canvas ma un immagine,
      se lo devi fare in orizzontale puoi fare così:
      un horizontal arrangment di tre elementi
      il primo una label vuota che imposti a fill parent
      il secondo la tua immagine sempre a fill parent
      il terzo una label vuota sempre impostata a fill parent

      un pò complicato purtroppo ma attualmente non ci son soluzioni migliori per centrare gli elementi... :(

      Elimina
  3. ciao, il tuo tutorial è perfetto solo non spieghi come gestire le collisioni con sprite specifici per esempio quando collide con imagesprite1 va al punto di partenza quando collide con imagesprite2 rimani fermo ... me lo spiegeresti per commento

    RispondiElimina
    Risposte
    1. Ciao Archeus, come vedi c'è l'evento "collidedwith" che è valido anche per gli sprite
      ImageSprite1 CollidedWith ImageSprite2 viene generato quando i due sprite entrano in collisione tra loro,
      fai un pò di prove con nel blocks usando le opzioni di debug "watch" così vedi come si modifica questo evento quando gli sprite collidono.
      Ovviamente bisogna usare un timer con cui controlli ogni tot tempo se i due sprite che ti interessano collidono o meno
      Spero di essere stato abbastanza chiaro! in bocca al lupo!

      Elimina