iSpazio Developers Program #13 - Pong, parte 2: completiamo il nostro gioco!

In qualità di Affiliato Amazon, iSpazio riceve una commissione dagli acquisti idonei senza alcun costo per voi. (info).

Advertising

Siamo pronti per la seconda parte del tutorial relativo al nostro gioco Pong! Nella scorsa puntata abbiamo visto come dichiarare ed implementare i vari componenti che ci occorrono, ed abbiamo anche dato una fisica alla pallina. Oggi implementeremo invece tutte le parti restanti, ovvero il movimento delle due racchette, un’intelligenza per il computer e la gestione dei punteggi.

Ovviamente le implementazioni non saranno perfette, ma abbastanza semplici, in modo da poter essere comprensibili a tutti. Chi volesse proporre soluzioni migliori può farlo tranquillamente nei commenti! Quindi, sotto con la programmazione!

TUTORIAL:

1. Piccola modifica
2. Interazione dell’utente
3. Gestiamo la collisione tra gli oggetti
4. AI: l’intelligenza del computer!
5. Implementiamo il meccanismo del punteggio

1. Piccola modifica

Prima di iniziare questo tutorial dobbiamo fare una piccola modifica. Nel tutorial precedente vi avevo fatto settare queste costanti:

Modificate il valore della costante “kVelocitàPallaY” in 20. Questo perchè potrebbe capitare cho poi il gioco non funzioni, per un caso davvero particolare, che non voglio stare a discutere ora. Quindi prendete per buono questo valore, mentre se qualcuno è così smaliziato da voler tenere il 15 e cercare di risolvere l’errore ce si presenta è ben libero di farlo, e proporre nei commenti la soluzione trovata!

2. Interazione dell’utente

La prima cosa che dobbiamo gestire è l’interazione dell’utente, che deve poter giocare con il nostro Pong! Dobbiamo iniziare, quindi, implementando la possibilità di muovere la proprio barra! Per far questo modifichiamo il “touchesBegan” in “PongTutorialViewController.m” nella seguente maniera:

Questo servirà solo per rilevare l’inizio di un’azione da parte dell’utente. Il movimento vero e proprio, invece, è gestito da un altro metodo, “touchesMoved”, che infatti viene richiamato nel caso in cui la partita sia in corso. Ovvero, se la partita è già stata avviata e l’utente esegue un movimento (ovvero tocca lo schermo), significa che vuole muovere la sua barra, quindi noi richiamiamo il metodo “touchesMoved”, che si occupa proprio di gestire il movimento. Ecco il codice di tale metodo:

Cosa fa questo metodo? Potete già inturilo dai commenti presenti nel codice. Quando l’utente compie un movimento sullo schermo, noi intercettiamo l’azione (chiamata “touch”), da cui ricaviamo le coordinate, e muoviamo di conseguenza la barra dell’utente (la barraDue, ovvero quella posta in basso; avremmo potuto anche scegliere la barraUno, non c’era nessuna differenza!).

3. Gestiamo la collisione tra gli oggetti

Ora dobbiamo gestire la collisione tra i vari componenti. In altre parole, dobbiamo far si che la pallina rimbalzi quando arriva su una delle due barre, e non passi attraverso come succede ora. Potrebbe sembrare complicato gestire le collisioni, invece si rivelerà tutto molto semplice grazie ad un componente offerto da Cocoa: “CGRectIntersectsRect”. Questo oggetto eseguirà i calcoli necessari, e ci dirà se due rettangoli (perchè sia la pallina che le barre sono contenuti in rettangoli di tipo UIImageView) sono in contatto tra di loro.
Andiamo nel metodo “gameLoop” ed inseriamo il seguente codice:

Semplice vero? Non facciamo altro che usare il componente “CGRectIntersectsRect”, che ci dirà se i due oggetti sono a contatto. In tal caso invertiamo la velocità della pallina, proprio come avevamo già fatto in precedenza per invertire la direzione quando si arriva al bordo dello schermo.

4. AI: l’intelligenza del computer!

Eccoci a una parte molto importante e difficile del gioco, ovvero l’Intelligenza Artificiale (AI) del giocatore comandato dal computer. Purtroppo elaborare un algoritmo efficacie e realistico sarebbe troppo complicato per questo tutorial, e certo non è il nostro scopo. Ci limiteremo, quindi, a una semplice implementazione, che vi permetterà di avere un computer “poco intelligente”. Per questo tutorial, comunque, sarà più che sufficiente.

La prima cosa da fare è definire una costante, che sarà la velocità di reazione del computer. Nel file “PongTutorialViewController.m” inseriamo quindi la seguente dichiarazione:

Ovviamente potrete variare questo valore per avere un computer con una diversa intelligenza. Più alto sarà il valore, più il computer sarà veloce e quindi “forte”; analogamente, abbassando il valore il computer sarà lento e “debole”.

Inseriamo ora il codice dell’AI. In “gameLoop” inseriamo le seguenti istruzioni:

Analizziamo quello che abbiamo scritto. Il primo “if” aggiunge un po’ di difficoltà al computer, in quanto gli permette di muoversi solo quando la pallina è nella sua metà campo; quindi, se la pallina sarà nella metà alta dello schermo, la barra del computer potrà muoversi, altrimenti dovrà rimanere ferma. I due “if” successivi, invece, muovo la racchetta del computer. Se la pallina (e per la precisione il suo centro) è a sinistra della racchetta (primo if), spostiamo il centro della barra verso sinistra, sottraendo dalle coordinate il valore della velocità del computer. Stessa cosa effettuiamo se la pallina è a destra della barra, ovviamente spostando verso destra la barra stessa.

Come potete vedere non è nulla di particolare, è un algoritmo molto semplice. Ci permetterà, comunque, di poter giocare al nostro personalissimo Pong! Potete anche notare, infine, come sia proprio la costante “kVelocitaMovComputer” a decidere la reattività del computer, in quanto determina la velocità con cui la barra si deve muovere verso la pallina. Più la barra è veloce, più sarà difficile per noi segnare!

5. Implementiamo il meccanismo del punteggio

L’ultima cosa che manca al nostro gioco è il conteggio del punteggio! Dobbiamo implementare proprio questo meccanismo. Il funzionamento, come potete facilmente intuire, sarà semplice: quando la pallina supera la barraUno, sarà punto per il giocatore due (ovvero l’utente), mentre quand la pallina supera la barraDue, sarà il computer ad aver fatto punto.

Iniziamo dichiarando, nel file “PongTutorialViewController.h” due variabili e un oggetto che ci serviranno:

Abbiamo definito le due variabili che conterranno i due punteggi, e un metodo, che dovrà riavviare la partita quando sarà terminata. Ci sorge quindi subito un quesito: quando una partita termina? Facciamo noi una scelta e imponiamo che la partita finisca quando un giocatore totalizzi 5 punti.
Andiamo, quindi, in “PongTutorialViewController.m” e impostiamo una costante relativa a questo punteggio massimo, così:

Il limite che abbiamo fissato sarà quindi a 5 punti. Ovviamente potremo variare a nostro piacere questo valore.

Dobbiamo adesso implementare il codice che conta i punti. Nel metodo “gameLoop”, dopo l’AI del computer, inseriamo questo codice:

Come possiamo vedere il codice è molto semplice. Analizziamo solo il primo “if”, visto che il secondo è uguale ma cambia solo per il giocatore conrollato.Viene controllato se la coordinata y della pallina è minore di 0 (ovvero se è oltre il bordo superiore dello schermo): in caso il controllo dia esito positivo, viene incrementato il punteggio del giocatore due, e viene richiamato il metodo reset, che andremo ad implementare fra poco. Potete vedere che il metodo reset ha come parametro un confronto, tra il punteggio del giocatore e quello massimo. Questo serve in quanto il metodo reset dovrà sapere se la partita è terminata (perchè uno dei due giocatori ha raggiunto 5 punti), oppure se la partita non è ancora finita.

L’ultima cosa che dobbiamo implementare è il metodo reset. Questo metodo dovrà riportare i componenti al loro stato originale, ad ogni punto segnato. Il codice del metodo è il seguente:

I commenti dovrebbero già darvi un’indicazione di cosa avviene all’interno di questo metodo. Si tratta, comunque, di mettere in pausa la partita, riposizionando la pallina al centro dello schermo. Dopodichè, viene eseguito un controllo sulla variabile “newGame”, che ci indica se uno dei due giocatori ha vinto: se il controllo da esito positivo, si controlla chi ha vinto, e si setta la label con un messaggio di avviso. Si azzerano, poi, i due contatori dei punteggi, per essere già pronti per una nuova partita. In caso contrario, si inserisce la scritta “Tocca per iniziare”, in modo che l’utente sappia cosa fare. Infine si settano le due label con i punteggi dei due utenti.

Abbiamo terminato!! Clicchiamo su “Build and Go!” e giochiamo con il nostro personalissimo Pong!

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 2 – iCodBlog“. I meriti quindi relativamente alla versione inglese, sono del legittimo autore.

Sai che siamo anche su Telegram? Unisciti al nostro canale iSpazio per ricevere le notifiche oppure Apple Italia per chattare con altri utenti. Scopri i migliori prodotti Tech in sconto su Amazon con il nostro canale OFFERTE iSpazio.