Eccoci con un nuovo appuntamento dell’iSpazio Developers Program. Oggi iniziamo con una serie di tutorial che ci permetteranno di creare il nostro primo vero gioco per iPhone! Si tratta di un classico, molto in voga negli anni ’80: stiamo parlando di Pong! Chi non lo conosce?
In questa prima puntata vedremo come realizzare la parte grafica, e come implementare l’algoritmo che si occupa del movimento della pallina senza discostarci dall’obiettivo principale, che resta sempre quello di fornirvi le spiegazioni dettagliate per capire bene tutti i passaggi ed assimilare il codice, in maniera tale da riuscire a ricreare questo gioco secondo i vostri gusti.
Indice:
1. Creiamo un nuovo progetto
2. Impostiamo la struttura grafica
3. Inseriamo le costanti
4. Scriviamo i metodi necessari
5. Proviamo il gioco!
1. Creiamo un nuovo progetto
Aprimo Xcode, selezioniamo “File -> New Project”. Nel menù che ci appare selezioniamo “ViewBased Application”, clicchiamo su “Choose…” e immettiamo come nome “PongTutorial” e fate clic su “Save”. Abbiamo così creato il nostro nuovo progetto.
Ora procediamo in un modo un po’ diverso da come abbiamo fatto in tutti i precedenti tutorial. Questo vi permetterà di vedere come gestire un’applicazione (e le relative viste) in un modo un po’ diverso.
Il gioco che vogliamo realizzare riprende il classico Pong, un gioco molto di moda negli anni 80. Ecco una semplice bozza del gioco che andremo a realizzare:
Facciamo un rapido riepilogo dei componenti che ci servono:
- 3 immagini: una per ogni barra dei giocatori e una per la pallina (saranno di tipo UIImageView);
- 3 label di testo: due per i punteggi e una per avviare la partita;
Ora che abbiamo definito tutti i componenti possiamo scrivere il codice necessario! Apriamo il file “PongTutorialViewController.h” e inseriamo il seguente codice:
Potete notare che abbiamo dichiarato i componenti che ho descritto poco sopra, insieme ad altre due variabili: una è “statoPartita”, ch ci informerà dello stato della partita, ovvero se è in corso oppure è stata terminata; la seconda variabile è “velocitàPalla”, un componente che conterrà due valori: la velocità sull’asse X quella sull’asse Y. Questa variabile ci servirà per far muovere la nostra pallina, che per ora avrà una velocità fissa, non seguirà quindi nessuna particolare legge oraria.
Salviamo ora il nostro file, assicurandoci che l’icona in XCode sia bianca (segno che abbiamo salvato il file, passaggio fondamentale per impostare correttamente la parte grafica).
2. Impostiamo la struttura grafica
Prima di impostare i componenti grafici dobbiamo importare nel progetto le due immagini che ci serviranno: quelle delle barre e della pallina. Potete creare le vostre immagini personalizzate, oppure utilizzare quelle che trovate qui di seguito:
Salvate le immagini e inseritele nel progetto, semplicemente trascinando le immagini nel progetto di XCode e cliccando “Add” alla schermata che vi apparirà:
Apriamo ora il file “PongTutorialViewController.xib”, che avvierà Interface Builder. Ora dobbiamo ricreare il layout che abbiamo abbozzato in precedenza. Inseriamo nella vista un componente UIImageView, assegnandoci l’immagine della barra (vi basterà selezionarla dal menù “Attribute Inspector”:
Rimpicciolite poi i bordi di tale elemento, in modo che i puntini mostrati da IB corrispondano, più o meno, ai bordi dell’immagine. Per capirci, dovrete avere un risultato come questo:
Inseriamo poi i componenti mancanti, personalizzandoli come preferiamo. Il risultato finale sarà più o meno come questo:
Ora dobbiamo collegare gli elementi che abbiamo appena inserito con quelli che abbiano dichiarato in precedenza in XCode. Per far ciò, clicchiamo, ad esempio, sulla pallina. Se apriamo, poi, la scheda “Connections Inspector” vediamo che non c’è nessun collegamento:
Notiamo, però, un pallino, che ci permette di creare nuovi collegamenti. Prendiamo il pallino a fianco di “New Referencing Outlet” e trasciniamolo su “File’s Owner”, nella finestrella che ci mostra tutti i componenti della vista:
Nel menù a discesa che ci appare selezioniamo, ovviamente, l’elemento “pallina”. Avremo così creato la connessione desiderata. Se avete eseguito i passaggi in maniera corretta avrete un risultato come questo (ovviamente all’interno di “Connections Inspector” della pallina):
Ripetete ora il procedimento con tutti gli altri elementi, ovvero con le due barre, le due label per il punteggio e la label per avviare la partita.
Salvate poi il tutto e uscite da Interface Builder, tornando ad XCode.
3. Inseriamo le costanti
Ora dobbiamo iniziare a scrivere il codice che permetterà alla nostra pallina di muoversi. Andiamo nel file “PongTutorialViewController.m” e inseriamo il seguente codice:
Abbiamo dichiarato quattro costanti, ovvero delle variabili a cui non potremo cambiare valore durante il corso del nostro programma. Le prime due costanti si riferiscono allo stato della partita, mentre le seconde due alla velocità con cui la pallina si deve muovere. Perchè due valori della velocità? Perchè il nostro gioco è bidimensionale, e quindi ha due componenti: la componente X, data dal movimento orizzontale, e la componente Y, ovvero il movimento verticale. Questi due valori sono modificabili a nostro piacimento, potrete, quindi, variare la velocità con cui la pallina si muove.
Nota teorica: avremmo anche potuto non utilizzare le costanti, ma come vedrete il loro utilizzo ci semplificherà molto il codice, rendendolo più leggibile. Ad esempio, se vogliamo controllare se la partita è in corso dovremo fare:
if (partita == kPartitaInCorso) …
Come potete notare è molto leggibile e immediato. Senza costanti avremmo dovuto scrivere così:
if (partita == 1) …
Il codice non è cambiato, fa sempre lo stesso controllo. Ma sicuramente risulta meno comprensibile, soprattutto se rileggete il codice qualche settimana dopo averlo scritto.
4. Scriviamo i metodi necessari
La prima operazione da compiere è quella di importare gli elementi. Inseriamo, quindi, la seguente istruzione:
Dobbiamo adesso definire il metodo che imposterà la aprtita all’avvio del gioco. Per fare questo dobbiamo utilizzare il metodo “viewDidLoad”, che si avvia proprio dopo il caricamento della vista. Inseriamo il seguente codice:
Potete leggere nei commenti che abbiamo eseguito semplici operazioni di inizializzazione, che ci permettono di iniziare una nuova partita. L’istruzione che merita un po’ più di attenzione è l’inizializzazione di un componente NSTimer. Questo elemento si occupa di ripetere l’azione “gameLoop” ogni X secondi, che noi abbiamo settato a 0.05. Quando avremo creato anche il restante codice, provate a modificare tale valore: vedrete che la velocità della pallina cambierà, in quanto l’azione viene ripetuta un numero maggiore o minore di volte. Quindi, con un valore di 1 la pallina sarà molto lenta, mentre se lo portiamo a 0.01 sarà ancora più veloce!
Ora dobbiamo implementare l’algoritmo che fa muovere la nostra pallina. Sempre nel file “PongTutorialViewController.m” scriviamo il seguente metodo:
Non è niente di difficile, i passaggi sono tutti commentati nel codice. Comunque, se la partita è in corso dobbiamo muovere la nostra pallina, e questo lo facciamo aumentando le coordinate del centro della stessa con i valori che abbiamo impostato alle velocità (ecco percè c’era una componente per l’asse X e una per l’asse Y). Se il centro risulta essere esterno alla vista invertiamo la velocità, in modo da variare la direzione con cui si muove la pallina.
L’ultima azione (per questo tutorial) che dobbiamo implementare riguarda la gestione dell’avvio della partita, ovvero quando l’utente tappa sulla stringa a centro schermo la partita deve cominciare. Aggiungiamo, quindi, il seguente metodo:
La gestione è un po’ semplificata, in quanto con questo metodo ci basterà cliccare su una parte qualsiasi dello schermo per iniziare la partita. Ma a noi ora basta così.
Completiamo, infine, il metodo “dealloc”, che libera la memoria da noi utilizzata:
È molto importante gestire nella maniera migliore la memoria, soprattutto quando si sviluppano videogiochi. Un gioco lento e scattoso, infatti, non potrà mai avere successo.
5. Proviamo il gioco!
È giunto il momento di provare il nostro gioco! Clicchiamo su “Build and Go!” e gustiamoci la nostra pallina che vaga per lo schermo!
Se Avete Problemi, questo è il nostro file di progetto.
La guida è stata creata da Andrea Busi per “iSpazio.net” e “Bubi Devs”. La versione originale inglese del tutorial è disponibile a questo indirizzo: “iPhone Game Programming Tutorial, Part 1 – iCodBlog“. I meriti quindi relativamente alla versione inglese, sono del legittimo autore.
Leggi o Aggiungi Commenti