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!!!