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

Nel tutorial di oggi vedremo come realizzare in maniera semplice e veloce un simpatico gioco per Android.

Useremo sempre MIT App Inventor 2, un tool gratuito e cloud based per la realizzazione di applicazioni Android.

Lo schema di base assomiglierà un pò al buon vecchio Space Invaders, ma in questo caso controlleremo con il nostro dito un sottomarino che dovrà sparare dei siluri per affondare la nave che viaggia nella parte superiore dello schermo.
Partiamo come sempre dal definire la nostra interfaccia grafica, questa sarà composta dai seguenti elementi:
- uno sfondo (Background) per il gioco
- un "Canvas" dove andremo a piazzare i nostri sprite che animaremo durante il gioco
- due sprite:
 - "ImageSprite1" (Sprite_Ship) che sarà la nave da guerra da colpire (il formato del file dev'essere in .png per poter impostare lo sfondo trasparente così che si misceli correttamente con lo sfondo)
 - "ImageSprite2" (Sprite_Submarine) che sarà il nostro sottomarino controllato dal giocatore
- un elemento "Ball" (Bl_Bullet) ovvero il nostro "siluro" che verrà sparato dal sottomarino
- due "HorizontalArrangement" per visualizzare il punteggio, quindi con al loro interno due "label"
 - (Lb_Score) per visualizzare il punteggio ed una label fissa con il testo "Punteggio:"
- un pulsante "Button1" (Bn_Reset) per azzerare la partita
- due componenti non visibili:
 - "Clock1" per controllare la velocità della nave
 - "Sound1" per eseguire gli effetti sonori durante il gioco (carichiamo anche il suono da eseguire, in questo caso un file .mp3 del lancio di un torpedo)

L'interfaccia finita quindi sarà fatta in questo modo (trovate tutti i file utilizzati scaricando a fine articolo il sorgente dell'applicazione in formato .aia, importandola nei vostri progetti e salvando poi i vari elementi dalla palette "Media")

Interfaccia del gioco completata - Click per ingrandire

Passiamo ora alla parte più interessante (e difficile...) della realizzazione del nostro gioco, ovvero quella del "Blocks Editor" dove viene definita la logica stessa del gioco, le procedure per animare i nostri sprite e la gestione della collisione tra siluro e nave.

Clicchiamo su "Blocks Editor" e cominciamo:

Iniziamo programmando lo spostamento del sottomarino, clicchiamo dalla palette di sinistra su "Sprite_Submarine" e vediamo tutti i suoi eventi (in marrone) i metodi (in viola) e le proprietà (in verde).

Nel nostro caso ci interessa l'evento che viene generato quando l'utente sposta con il dito il sottomarino, l'evento generato in questo caso è "Sprite1.Dragged" (visto che abbiamo rinominato il nostro componente, questo evento verrà visualizzato come "Sprite_Submarine.Dragged")

I valori che ci ritorna questo evento sono "startX" "startY" "prevX" "prevY" "currentX" "currentY" ovvero le coordinate X,Y di inizio , precedenti ed attuali sullo schermo del nostro trascinamento quando tocchiamo il sottomarino.

Nel nostro caso vogliamo muovere il sottomarino solamente lungo l'asse X (orizzontale) quindi andiamo ad impostare solo la coordinata X dello sprite "Sprite_Submarine.X" al valore "currentX" che ci ritorna l'evento dragged.

Vogliamo quindi anche far sparare il siluro al sottomarino quando l'utente "tocca" lo sprite, l'evento che ci interessa e che viene generato è "Sprite1.Touched" che andremo a programmare con le seguenti azioni:
1 - rendo visibile il proiettile
2 - imposto la velocità del proiettile (in pixel)
3 - imposto la direzione del proiettile (in gradi)

A questo punto però se provate l'applicazione vedrete che il proiettile parte sempre dalla stessa posizione, quindi dobbiamo ancora sistemare l'evento aggiungendo un altro paio di funzioni;
ovvero muovendo il proiettile alla posizione attuale del sottomarino (più uno scostamento negli assi X e Y di alcuni pixel per far si che il proiettile sembra che parta dal cannone del sottomarino, questi valori sono stati trovati in maniera empirica cambiandoli e verificando il risultato sul telefono stesso)

Il blocco di codice finale sarà quindi così composto:

Notate che abbiamo aggiunto anche una condizione "if-then" per far in modo che il proiettile parta solamente quando non è visibile, ovvero se non è già stata sparata una cannonata in precedenza. Per fare questo abbiamo usato il controllo sulla proprietà "visibile" dell'elemento "Ball" (da noi rinominato in "Bl_Bullet")
Quindi solo se il proiettile non stà già vagando sullo schermo, al tocco del sottomarino partirà il nostro siluro...

Cliccate QUA per leggere la parte 2 di questo tutorial
Cliccate QUA per scaricare il sorgente dell'applicazione

A seguire il video tutorial relativo alla realizzazione dell'interfaccia grafica del gioco:

Per ogni dubbio domanda o chiarimento, usate pure i commenti qui sotto oppure il forum ufficiale.