Cerca con Google

Translate

31 luglio 2014

Tutorial 9 - Creazione gioco Android tipo Space Invaders con MIT App Inventor 2 (Parte 2)


Per leggere la parte 1 del tutorial clicca QUA

Proseguiamo quindi il nostro tutorial per la creazione di un semplice videogioco Android tramite MIT App Inventor 2.

Mancano ancora da programmare gli eventi per la gestione delle collisioni, per lo spostamento della nave, per il calcolo del punteggio e per l'aggiunta degli effetti sonori...

Se provate l'app realizzata fino a questo punto vedrete che quando il proiettile raggiunge il bordo superiore dello schermo si ferma, per programmare quindi correttamente l'animazione del proiettile e far si che sparisca al di fuori dello schermo possiamo usare l'evento "Ball1.EdgeReached" che ci indica quando il proiettile tocca uno dei bordi dello schermo, quando viene generato questo evento vogliamo semplicemente far sparire il proiettile settando la sua visibilità a "false" e resettando la sua posizione ad un valore di default (ad esempio x=100 y=100 pixel), di fatto simulando l'uscita di questo dallo schermo.

Il reset ad una posizione "neutra" si rende necessario per non generare falsi eventi di collisione anche quando il proiettile è invisibile.


Ora vogliamo controllare la collisione tra la nave ed il proiettile per capire se il giocatore ha colpito la nave o meno, esiste l'evento "CollidedWith" che ci indica la collisione tra due sprite (ricordo che anche l'elemento "Ball" che usiamo come proiettile internamente ad AI è visto come uno sprite con immagine fissa di un cerchio)

Visto che la nave ed il sottomarino si muovono solo sull'asse X e l'unico sprite che si muove anche nell'asse Y (quindi verso l'alto) è il proiettile, non ci dobbiamo preoccupare di capire quali dei 3 sprite siano in collisione tra loro visto che saranno sempre e solo la nave ed il proiettile...(nave e sottomarino si muovono sempre su due altezze Y diverse che non si intersecano mai)

Il blocco da programmare quindi eseguirà le seguenti operazioni:
1 - rendere invisibile il proiettile
2 - incrementare il punteggio di 1
3 - resettare la posizione del proiettile

il nostro blocco di codice che viene eseguito quando il proiettile colpisce la nave
La nave nel nostro gioco però è ancora ferma, quindi il gioco attualmente sarebbe troppo facile, vogliamo quindi far muovere la nave, vediamo come fare...

Torniamo per un attimo nel Design Editor e guardiamo le proprietà dello sprite della nave ("Sprite_Ship")



Come vedete abbiamo tra le altre, tre proprietà: "Heading" "Interval" e "Speed" ; Heading ci indica la direzione dello sprite, "Interval" ogni quanti millisecondi si deve spostare (quindi valori più alti fanno andare la nave più lenta e viceversa) e "Speed" ovvero lo spostamento in pixel del nostro sprite ad ogni "Interval".

Facendo un pò di prove (collegando lo smartphone ad App Inventor come mostrato nei precedenti tutorial) capiamo che 180 è la direzione in gradi del movimento (quindi la nave partirà verso sinistra mentre ad un valore di 0° corrisponderà un movimento verso destra) mentre gli altri due valori li vedremo tra poco ed andremo a ritoccarli nel "Blocks Editor"

Infatti se provate l'app vedrete che la nave andrà verso sinistra e raggiunto il bordo dello schermo si fermerà, dobbiamo quindi programmare la sua animazione per far in modo che navighi prima verso sinistra e poi verso destra.

Usiamo quindi di nuovo l'evento "Sprite1.EdgeReached" generato al contatto tra nave e bordo, quando questo evento viene generato facciamo "rimbalzare" la nave usando il metodo "Bounce" (che vuol dire appunto rimbalzo):


Non siamo però ancora soddisfatti, infatti la nave torna si indietro ma in "retromarcia", la cosa è alquanto brutta da vedere, sistemiamo subito anche questo problema nel seguente modo:

Per prima cosa ci serve un altro sprite per la nave, oltre a quello orientato a sinistra uno orientato a destra (con la prua a destra), basterà quindi aggiungere una condizione "if-then-else" al nostro evento "EdgeReached" per impostare l'immagine giusta dello sprite della nostra nave in base alla sua direzione.

Controlliamo il valore dell'"Heading" (ovvero la direzione della nave) se è uguale a 0 vuol dire che sta andando verso destra, altrimenti verso sinistra (perchè vi ricordo che la nave si può muovere solo in orizzontale).
I due sprite utilizzati si chiamano "WarShip_dx-100.png" e "WarShip_sx-100.png" ed andremo ad impostarli cambiando la proprietà di "Sprite_Ship.Picture" con il nome dello sprite relativo.
Il nostro blocco finito quindi sarà questo:


Possiamo ora sistemare le velocità del proiettile per farlo andare un pò più veloce cambiando la proprietà dell'"Interval" dell'oggetto "Bl_Bullet" da Design Editor, provate a cambiarlo a piacimento e testate il tutto sempre con il vostro smartphone collegato ad Ai Companion, ogni modifica sarà immediatamente visibile.

Per rendere il gioco un pò più difficile possiamo decidere di non usare una velocità fissa per la nave ma di farla accelerare e rallentare in maniera casuale così da rendere la posizione del bersaglio mobile imprevedibile.

Useremo quindi finalmente l'elemento "Clock" inserito inizialmente, ad ogni intervallo di 0,5s (settato da design editor alla voce "TimerInterval", espresso in millisecondi) viene generato l'evento "Clock1.Timer", al verificarsi di questo evento vogliamo cambiare la velocità della nave di un fattore casuale (random in inglese)
Nella palette "Math" abbiamo la funzione "random integer" che ci genera un numero casuale tra due estremi (from e to)
Impostiamo quindi la velocità della nave al valore random generato ogni 500ms (quindi ogni mezzo secondo) tra un valore minimo di 1 ed un valore massimo di 5:

Proviamo di nuovo l'app e vediamo come in effetti ora la velocità della nave non è più costante.
Sperimentate pure con altri valori e vedere i diversi effetti che si possono ottenere.

Ci siamo quasi...
manca da programmare solo il pulsante reset per far ripartire il gioco, l'evento generato sarà ovviamente "Bn_Reset.Click" e qui programmeremo tutte le azioni per far in modo che lo stato dell'app sia uguale a quella di partenza, ovvero resettare il punteggio e riportare la nave in posizione iniziale, non ci interessa resettare la posizione del sottomarino ma se volete farlo la procedura è molto simile.


Manca solo la ciliegina sulla torta...vi ricordate il componente "Sound1" che avevamo inserito?
Non sarebbe bello aggiungere un effetto sonoro ogni volta che il torpedo colpisce la nave?
Possiamo fare anche questo, ed è anche molto semplice!
Basta aggiungere la chiamata al metodo "Sound1.Play" all'evento CollidedWith tra siluro e nave:

notate l'ultimo blocco usato per eseguire l'effetto sonoro
Avete completato il tutorial, testate il tutto e fate le modifiche che ritenete necessarie.

Ricordo che questo tutorial non vuole insegnarvi a programmare un gioco completo dalla A alla Z da pubblicare su Play Store per diventare milionari, ma vi vuole far vedere come sia possibile con App Inventor spostare gli sprite, gestire le collisioni , eseguire effetti sonori , etc...
Il consiglio che vi do è sempre lo stesso, sperimentate, "giocate" con App Inventor, provate riprovate e sperimentate ancora finchè raggiungerete il risultato desiderato (ovvero l'app dei vostri sogni!)

Come sempre per chi preferisce è disponibile lo stesso tutorial in formato video, lo potete vedere qui sotto:



Potete scaricare il sorgente di questo tutorial cliccando QUA

Per ogni dubbio domanda o chiarimento usate i commenti qui sotto o il forum,
Buon App Inventing!!!

11 commenti:

  1. Ciao, sono un webdesigner e designer, ho trovato il tuo sito cercando tutorial su App Inventor.
    Vedo che programmi. A me piacerebbe confrontarmi con il design delle app.
    Non ho trovato però una mail alla quale scrivere per inviare un pò di materiale.
    C'è una mail alla quale poter scrivere per inviare qualche immagine del mio lavoro, magari per una eventuale collaborazione?
    Un saluto.
    Fulvio.

    RispondiElimina
    Risposte
    1. ciao Fulvio, la mail la puoi vedere nei video, non la scrivo qui per evitare spam ma se guardi in ogni video in alto a destra quando uso App Inventor la puoi recuperare.
      Se vuoi iscriviti anche al forum dove puoi trovare se vuoi altra gente interessata a collaborare con te.
      Il tempo a disposizione è sempre poco ma magari qualcosa insieme si può fare, fammi sapere, ciao!

      Elimina
  2. Ciao Prof !;) non riesco a fare una cosa.. spero riuscirai cortesemente ad aiutarmi... quando sparo la palla "bullet" verso la nave e la colpisco, il punteggio sale a +1 per ogni volta che viene colpita.. e fino a qua ok... la cosa che proprio non riesco a fare è nel caso in cui non riuscissi a colpire la nave (quindi non prendere il bersaglio) come faccio a far ripartire il punteggio da ZERO automaticamente? ho provato in ogni maniera.. ma non mi riesce.. ti ringrazio anticipatamente.

    RispondiElimina
  3. ciao ,prendendo spunto dal tuo tutorial sto realizzando un piccolo gioco ,la difficoltà che sto trovando e questa,ho una sfera che va in collisione con tutto io vorrei invece fare in modo di sceglier con quale sprite image andare in collisione e procedere con un evento, mentre se tocca un altro sprite image ne fa un altro,e possibile?, grazie

    RispondiElimina
    Risposte
    1. si certo, è possibile.
      Se noti ogni tuo sprite genera un evento "CollidedWith" dove c'è un campo "other" che puoi leggere.
      Quindi se non vuoi che la tua sfera (vale la stessa cosa appena detta per gli sprite) faccia un qualcosa quando collide con tutto basta che metti un "if" all'interno di CollidedWith per controllare che "other" sia uguale al tuo oggetto sprite che ti interessa.

      Se non sbaglio "other" prende un valore numerico univoco, quindi devi far girare il tuo gioco e magari stampi in qualche label il valore di "other" quando hai la collisione in modo da capire il valore da mettere nella condizione "if"
      spero di essere stato abbastanza chiaro, ciao!

      Elimina
    2. Grazie per la risposta ,ho avuto un po di difficoltà ma alla fine ho capito,volevo chiederti una cosa strana che mi capita da un po di giorni praticamente da dopo l'aggiornamento di app inventor2,quando esco dal programma e dopo ricarico i progetti lmi trovo tutti le sprite image ingrandite e fuori posizione anche se i dati e le misure sono scritte giuste,infatti nell'emulatore si vedo giuste,capita anche a te? sbaglio qualcosa?

      Elimina
    3. Dalla versione nb145 c'è il resize degli elementi in modo diverso, controlla che in screen1 sia impostata l'opzione "Sizing=fixed" e non "responsive" , forse il problema è quello...

      Elimina
    4. grazie,ho provato ma niente da fare,rimangono grandi ,forse devo iniziare il progetto dall'inizio con l'opzione attivata

      Elimina
    5. confermo il problema rimane ,quando ricarico il progetto tutti gli sprite image si sfasano e si ingrandiscono sulla schermata dello screen del programma rendendo un po tutto il lavoro difficoltoso .

      Elimina
    6. Che io sappia per quanto riguarda gli sprite e i canvas non è stato cambiato nulla,
      non penso che cambiare l'opzione prima o dopo faccia alcuna differenza, cmq non ho ancora esperienza diretta, appena so qualcosa ti faccio sapere.

      Elimina