Cerca con Google

Translate

26 febbraio 2014

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


20 commenti:

  1. E' possibile creare dei giochi animati tipo flappy bird per esempio con app inventor ???

    RispondiElimina
  2. In teoria il gioco è fattibile ,nel senso che se osservi attentamente il gioco ha uno sfondo fisso su Canvas, e il Bird è anch'esso fermo si muove alla pressione in alto o in basso per evitare gli ostacoli percui programmando il touch dell'image sprite con le cordinate giuste (dovrai fare diverse prove) è possibile riprodurre il movimento , il vero problema restano gli ostacoli che puoi animare attraverso una sequenza di immagini (ci sono vari tutorial su internet) e programmare la collisione con il game over del gioco. Ho fatto qualcosa di simile con Duck Hunt. Ricorda però che il risultato finale sarà cmq di livello molto inferiore rispetto ad Eclipse (app Inventor ha ancora molti limiti, tra cui fluidità e scattezza delle animazioni), se vuoi fare velocemente e senza programmare un videogioco ,ti consiglio Game Maker,Stencyl o Game Salad , i risultati saranno molto più elevati.
    Ti confesso però che non sono esperto quanto Seba percui sarebbe interessante capire se condivide quanto ho detto o se ha aggiornamenti importanti sul fronte Game con App Inventor .

    RispondiElimina
    Risposte
    1. Grazie Enrico!
      penso che la tua risposta sia molto esaustiva,
      quel che mi lascia più perplesso con AI è lo scrolling orizzontale, secondo me non c'è modo di realizzarlo facilmente e questo limita di molto la possibilità di creare platform o shooter,
      forse i programmi che hai indicato sono più adatti allo scopo essendo fatti proprio per la creazione di giochi, mentre AI è un tool più generico per avvicinarsi alla programmazione o per programmare altre app interessanti ma che graficamente hanno sempre un aspetto non proprio eccezionale.

      Elimina
  3. Enrico, mi sembri abbastanza preparato....condividi gentilmente il tuo sapere e le tue invenzioni sul forum, ci serve un po di gente li :-)

    questo cmq è il link di qlk che ha gia fatto qualcosa di questo tipo con ai

    https://play.google.com/store/apps/details?id=appinventor.ai_shanesuan2.NinjaPlunge

    RispondiElimina
  4. Ciao Enzo
    Ho provato la tua app ma non sono riuscito a contattarti
    Voglio segnalarti un piccolo bug facilmente risolvibile
    Contattami tu
    Ciao

    RispondiElimina
    Risposte
    1. Ciao Salvo e ciao Enzo,
      non capisco a cosa vi riferite...penso al clone di Flappy Bird fatto con App Inventor.
      Cmq penso il posto più corretto per palare di queste cose sia sul forum,
      ci vediamo la :)

      Elimina
  5. Ciao Salvatore, di quale app parli ? se parli di quella segnalata da me sopra, quella non è mia. Io sono enfandroid del forum , anche sul market mi trovi con questo nick. Fammi sapere , ciao

    RispondiElimina
  6. Grazie per il tutorial, sono un super principiante ed ovviamente ho subito un problema: associando all'evento "when clock 1 timer, set ball 1 speed to ball speed -1", la palla perde velocità, si ferma un istante e poi riparte in direzione opposta accollandosi alla prima sponda toccata.
    Come si può risolvere?
    Grazie e Ciao

    RispondiElimina
    Risposte
    1. ciao , senza vedere i tuoi blocchi è difficile dire dove stia l'errore,
      controlla bene quando e se inizializzi il valore della velocità della pallina, e accertati che la velocità venga rallentata fino ad arrivare a 0, magari metti un controllo "if - else" che non faccia il -1 se la velocità è già 0, forse il tuo problema è proprio li che ad un certo punto il tuo timer ti imposta una velocità negativa della pallina...questa è solo un idea,
      se vuoi metti uno screenshot dei blocchi e vediamo insieme la cosa, ciao!

      Elimina
  7. Ciao sebastiano, a quando i tutorial successivi?
    Per variare la velocità dopo il rimbalzo e creare movimenti fluidi
    Oppure in che modo si potrebbe creare una traiettoria andulata, o curvilinea?

    RispondiElimina
  8. Ciao, anche io ho scritto un articolo sui giochi android e ve lo vorrei segnalare:
    http://giuseppederito.altervista.org/blog/creare-un-gioco-android/
    Nel mio caso uso Unity... ;D

    RispondiElimina
    Risposte
    1. Grazie per la gradita segnalazione :)

      Elimina
    2. Ciao Seba! Na faticaccia fare questa semplice app...questi sono i risultati che ho ottenuto utilizzando AI2.
      https://play.google.com/store/apps/details?id=appinventor.ai_lucif3roapps.SuperPork_dinamico
      Che ne pensi? Credi che si possa ottenere di più da AI? (ovviamente trascura la grafica...non sono un grafico e meglio di così non ho saputo fare :D )
      Spero in un tuo parere. Anche se negativo (lo preferisco se sincero...purchè conoscendo i limiti di AI...e i miei :D )

      Elimina
  9. SI PUO CREARE GIOCHI CON APP INVENTOR TIPO CLASH OF CLANS

    RispondiElimina
    Risposte
    1. un gioco come quello non si crea in pochi giorni, serve un team di programmatori e di grafici più tante altre cose...
      Direi che con App Inventor non è possibile fare una cosa del genere, ma non è neanche alla portata del 98% delle persone che lavorano da sole :)

      Elimina
  10. Ciao se volessi creare un gioco più complesso del tipo flappy bird che programma dovrei usare? va bene anche app inventor?

    RispondiElimina
    Risposte
    1. Ho visto che alcuni utenti hanno creato dei cloni di flappy bird anche con App Inventor, non è semplicissimo ma è fattibile.
      Per giochi semplici App Inventor può andare bene, dipende tutto da quanto tempo hai per imparare e qual'è il tuo livello tecnico di programmazione.

      Elimina
    2. Se il mio livello di programmazione è abbastanza basso ma ho tempo per imparare?

      Elimina
    3. Dipende dall'approccio che vuoi usare, potresti prima farti delle buone basi su Android, magari seguendo i classici corsi su coursera o su udemy o cose simili.
      Oppure vai subito con un sdk dedicato alla creazione di giochi, qui trovi qualche link:
      http://stackoverflow.com/questions/5360909/android-games-development-sdk
      ma ce ne sono una miriade, basta che cerchi Android Game SDK ad esempio.
      Ovviamente il 99% di quel che trovi è in inglese
      in bocca al lupo!

      Elimina