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:

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”:

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:

#import <UIKit/UIKit.h>

#import "SplashScreenController.h"

@interface PongTutorialAppDelegate : NSObject  {
    UIWindow *window;
    SplashScreenController *viewController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet SplashScreenController *viewController;

@end

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):

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    viewController = [[SplashScreenController alloc] init];

    // Override point for customization after app launch
    [window addSubview:viewController.view];
    [window makeKeyAndVisible];
}

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:

#import <UIKit/UIKit.h>
#import "PongTutorialViewController.h"

@interface SplashScreenController : UIViewController {
	// il tempo per cui la nostra splash screen sarà visibile
	NSTimer *timer;
	// l'image view in cui caricheremo la nostra immagine
	UIImageView *splashImageView;

	// il controller necessario per gestire l'avvio del gioco
	PongTutorialViewController *viewController;
}

@property(nonatomic,retain) NSTimer *timer;
@property(nonatomic,retain) UIImageView *splashImageView;
@property(nonatomic,retain) PongTutorialViewController *viewController;

@end

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:

#import "SplashScreenController.h"

@implementation SplashScreenController

@synthesize timer, splashImageView, viewController;

- (void)loadView{
	// definiamo la vista principale (dimensioni standard)
	CGRect appFrame = [[UIScreen mainScreen] applicationFrame];
	UIView *view = [[UIView alloc] initWithFrame:appFrame];
	view.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
	self.view = view;
	[view release];

	// definiamo la splash screen e settiamola come vista principale
	splashImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash.png"]];
	splashImageView.frame = CGRectMake(0, 0, 320, 480);
	[self.view addSubview:splashImageView];

	// colleghiamo il gioco al viewController
	viewController = [[PongTutorialViewController alloc] initWithNibName:@"PongTutorialViewController" bundle:[NSBundle mainBundle]];
	viewController.view.alpha = 0.0;
	[self.view addSubview:viewController.view];

	// impostiamo il timer (ovvero l'animazione della nostra splash screen)
	timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(fadeScreen) userInfo:nil repeats:NO];
}

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”:

- (void)fadeScreen{
	// inizia l'animazione
	[UIView beginAnimations:nil context:nil];
	// setta la durata dell'animazione (in secondi)
	[UIView setAnimationDuration:0.75];
	// setta il delegato per questa animazione (in questo caso è la classe stessa)
	[UIView setAnimationDelegate:self];
	// chiama il metodo "finishedFading" quando finisce questa animazione
	[UIView setAnimationDidStopSelector:@selector(finishedFading)];
	// l'alpha di questa vista viene settato a zero (è invisibile)
	self.view.alpha = 0.0;
	// esegue l'animazione
	[UIView commitAnimations];
}

- (void)finishedFading{
	// inizia l'animazione
	[UIView beginAnimations:nil context:nil];
	// setta la durata dell'animazione (in secondi)
	[UIView setAnimationDuration:0.75];
	// setta l'alpha della vista principale (completamente visibile)
	self.view.alpha = 1.0;
	// setta l'alpha del gioco (completamente visibile)
	viewController.view.alpha = 1.0;
	// esegue l'animazione
	[UIView commitAnimations];
	// rimuoviamo dalla finestra la vista con la splash screen
	[splashImageView removeFromSuperview];
}

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!

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.