DevTutorial #15 – Creiamo il nostro primo gioco, Pong! (Parte III)

Eccoci con l’ultimo tutorial dedicato alla creazione di un piccolo videogioco per iPhone. Nei due tutorial precedenti abbiamo visto come impostare la struttura del gioco e di come aggiungere tutti gli aspetti necessari per il funzionamento.

In questa terza parte andremo a creare una splash screen, ovvero una schermata di caricamento, un po’ come quella che è già presente in qualsiasi applicazione, e che si realizza semplicemente con il file “Default.png”. La finestra che andremo a creare noi caricherà un’immagine, e avrà un’animazione di dissolvenza, in modo da rendere più carino il gioco stesso.
La splash screen verrà implementata all’avvio del gioco, ma potete benissimo utilizzarla per altri scopi,  ad esempio tra il caricamento di due livelli oppure mentre l’utente deve attendere un’elaborazione o una connessione.

1. Creiamo la schermata necessaria

La prima cosa da fare è aggiungere al nostro progetto una schermata per il caricamento del gioco. Inseriamo un’immagine con dimensioni 320×480 pixel all’interno del nostro progetto. Io inserirò la seguente immagine:

splash

Dopo aver importato l’immagine, dobbiamo dichiarare una classe che si occuperà proprio di gestire la splash screen. Andiamo in “File -> New File..” e creiamo una nuova classe di tipo UIViewController e nominiamola “SplashScreenControler.m”:

immagine-15

immagine-22

Dobbiamo, ora, modificare la nostra AppDelegate, in modo che all’avvio dell’applicazione non carichi direttamente il gioco, ma la splash screen. Apriamo il file “PongTutorialAppDelegate.h” e modifichiamolo nel seguente modo:

Non abbiamo fatto altro che sostituire “PongTutorialViewController” con la classe della splash screen “SplashScreenController” (riga 7).

Ora apriamo il file “PongTutorialAppDelegate.m” e modificate il seguente metodo inserendo l’istruzione che vedete alla riga (3):

Questo inizializzerà la classe della splash screen all’avvio dell’applicazione, e non caricherà la schermata del gioco. Dobbiamo eseguire questa istruzione in quanto la splash screen non viene caricata da un file nib, ma viene creata dalla classe stessa, quindi abbiamo necessità di richiamare il metodo init di tale classe.

2. Implementiamo la classe della “SplashScreenController”

Dobbiamo ora implementare la classe della nostra splash screen. Apriamo il file “SplashScreenController.h” e inseriamo il seguente codice:

Cosa abbiamo dichiarato? Semplicemente i componenti che ci serviranno: ovvero un timer (per la durata della splash screen), una UIImageView, che conterrà la nostra immagine (che abbiamo inserito all’inizio di questo tutorial) e il controller per avviare poi il nostro gioco.

Dobbiamo, ora, impostare quello che la classe deve fare appena viene istanziata. Apriamo il file “SplashScreenController.m” e inseriamo il seguente codice:

Come potete leggere nei commenti, abbiamo dichiarato e istanziato le viste necessarie. Nella vista principale inseriamo la view che creiamo con l’immagine “Splash.png”, che abbiamo inserito nel nostro progetto. Il viewController, poi, viene collegato con la classe relativa al gioco vero e proprio. Infine viene impostato il timer. Questo contiene due parametri importanti: la durata (nel nostro caso di 2 secondi) e l’azione collegata, ovvero che evrrà richiamata quando viene avviato il timer.

3. Definiamo l’animazione di transizione

Ora manca la definizione dell’animazione vera e propria. La nostra splash screen, infatti, non sparirà di colpo, ma con un gradevole effetto dissolvenza.  Ecco il codice da inserire nel file “SplashScreenController.m”:

Questi due metodi sono quelli che permetteranno alla nostra splash screen di avere un effetto dissolvenza in uscita. Il codice è tutto commentato, quindi non dovreste avere problemi a capire ogni singola istruzione cosa esegue.

Cliccate ora su “Build and Go!” e godetevi la vostra nuova splash screen!

immagine-8

Se Avete Problemi, questo è il nostro file di progetto.

La guida è stata creata da Andrea Busi per “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.

Andrea Busi | @bubidevs

Laureato in Ingegneria Informatica, ho fondato nel 2008 questo piccolo blog, in cui racconto le mie esperienze e i miei pensieri sul mondo dell'informatica. Nella vita mi occupo di sviluppo software, e nel tempo libero continuo a coltivare la mia passione per il mondo iOS.

Un commento a “DevTutorial #15 – Creiamo il nostro primo gioco, Pong! (Parte III)

  1. Dario ha detto:

    Ciao Andrea,
    ho seguito quasi tutti i tuoi tutorial…
    Ho provato ad implementare lo SplashScreen ad un progetto Navigation-based Application, ma ovviamente non funziona.
    La classe AppDelegate ha una struttura diversa nel per il navigationcontroller.
    Hai qualche idea per aiutarmi a risolvere il problema?
    Grazie mille
    ciao

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*