Per un progetto universitario, io, Mirko e Simone, abbiamo creato un’applicazione, un gioco in 2D. È stato abbastanza impegnativo, ci abbiamo messo circa 3 mesi. Non avendo un grafico, abbiamo improvvisato per creare alcuni particolari del gioco essenziali per quello che volevamo fare, che tra poco vi spiegherò. L’abbiamo realizzata grazie a un simulatore, Corona SDK, che permette di visualizzare l’applicazione su diversi dispositivi tra cui smartphone e tablet e di simulare la rotazione, i tasti fisici oppure lo shake del dispositivo.

       

È scritto in un linguaggio di programmazione chiamato Lua. Il gioco consiste in 2 modalità: la modalità Play Now a livelli, che consiste nel distruggere la torre nemica con i propri soldati, e Survival, dove lo scopo è resistere più a lungo possibile contro ondate infinite di nemici.

Quello che noi vediamo sullo schermo di un gioco 2D per il telefono non è altro che la sovrapposizione di immagini che creano, in alcuni casi, un effetto di profondità. Semplicemente s’inseriscono le immagini dal codice, una dopo l’altra, in modo che l’ultima immagine inserita è quella che vediamo più avanti sullo schermo.

Figura 1 – Screenshot gioco

In questo screen del gioco (Figura 1) infatti l’ultima immagine inserita è il soldato, mentre la prima inserita è lo sfondo con le montagne più alte.

Figura 2 – Esempio inserimento immagini

In questo esempio di codice (Figura 2) abbiamo la collocazione dei due sfondi in sequenza: il background è lo sfondo con le montagne più alte, mentre il background_mount rappresenta le montagne più basse, che vengono collocate per seconde così da apparire più avanti sullo schermo rispetto al primo background.

Usare questo metodo è utile per poter agire su alcune immagini indipendentemente dalle altre, ad esempio facendole muovere o scorrere sullo schermo; nel nostro caso era necessario per far scorrere alcune immagini sullo schermo e per trattarle come oggetti fisici indipendenti, che reagiscono a certi eventi in modo diverso rispetto agli altri. Per il posizionamento delle immagini viene considerato un punto dello schermo, che dipende dal dispositivo, come un incrocio di assi cartesiani e si inseriscono le immagini in base alle coordinate (x, y).

Il movimento dei personaggi invece viene creato tramite un’immagine chiamata sprite, che contiene le varie posizioni del soldato in sequenza: in questo caso la prima è la camminata del soldato (Figura 3) e la seconda l’attacco (Figura 4). Si impone un determinato tempo alla sequenza e la grandezza di un singolo elemento della sequenza; con il passare del tempo l’immagine del soldato varia uniformemente dando l’impressione che stia camminando, ma non è altro che il succedersi delle varie immagini. Lo spostamento sullo schermo del soldato durante la camminata viene creato incrementando la posizione del soldato, in particolare la x.

 

Figura 3 – Sequenza camminata soldato

      Figura 4 – Sequenza attacco soldato

 

La creazione dello sprite (figura 5) avviene specificando alcuni parametri fondamentali, come: il numero di immagini di cui è composta la sequenza (count), la durata (time) e ovviamente il suo nome (name).

Figura 5 – Creazione sprite soldato

Si passa da una sequenza ad un’altra (Figura 6) con il succedersi di alcuni eventi, come ad esempio la collisione di due immagini.

Figura 6 – Passaggio alla sequenza di attacco

Infatti il simulatore è dotato di un motore fisico, in cui vanno inseriti i vari oggetti che devono essere sottoposti a reazioni fisiche, come ad esempio la gravità o gli urti (collisioni), e dove si indica quali oggetti possono collidere tramite dei filtri. Ad esempio il soldato colliderà con i soldati nemici, ma non con i soldati alleati; con la torre nemica, ma non con quella alleata.

Il succedersi di altri eventi avviene invece con il tocco sullo schermo, che può essere di due tipi: tap, quando tocchiamo lo schermo senza mantenere il dito, e touch, quando manteniamo il dito sullo schermo, e possiamo usare le funzioni di tocco, trascinamento e rilascio, effettuando varie azioni nelle diverse fasi.

Nell’immagine qui sotto, ad esempio, nella fase di trascinamento viene creata la traiettoria della freccia lanciata dalla torre.

Figura 7 – Schermata traiettoria freccia

Le 3 fasi del touch sono began (inizio del tocco), moved (trascinamento del dito sullo schermo) e release (rilascio del dito dallo schermo). In corrispondenza delle 3 fasi (Figura 8) abbiamo nelle prime due il tracciamento della traiettoria (updatePrediction) e nell’ultima il lancio della freccia (fire).

Figura 8 – Distinzione fasi del touch

Come vedete, in tre mesi abbiamo creato un’applicazione funzionante, sfruttando dei programmi che ci hanno permesso di aggirare le nostre carenze nel campo grafico.