Ancora una volta ringraziamo il Team di iCodeBlog che ci ha concesso di tradurre e proporre ai nostri utenti i suoi tutorial e le sue guide. In questo nuovo tutorial, di brandontreb, vedremo come creare una semplice applicazione in cui una palla si muoverà automaticamente e “liberamente” in tutto lo schermo del vostro iPhone, rimbalzando sui lati. Per creare quest’animazione utilizzeremo un’immagine e un oggetto NSTimer. Tutto ciò potrebbe tornare sicuramente utile soprattutto nello sviluppo di giochi, infatti questa è una caratteristica principale di famosi giochini che sono passati alla storia, come “Pong” o “Hockey da Tavolo” (Air Hockey).

Partiamo aprendo Xcode e creando un nuovo progetto. Dall’elenco dei template disponibili scegliamo “View-based Application” e proseguiamo. Diamo ora un nome alla nostra applicazione, ad esempio “Palla”, scegliamo la posizione dove salvare il progetto e andiamo avanti.

Per questo tutorial avrete bisogno di un’immagine in formato .png preferibilmente avente forma circolare, per simulare la presenza di una palla. Io ne ho creata una con il logo di devAPP.it potete scaricarla (tasto destro > “Salva Immagine con Nome….”) oppure potete creare una vostra come meglio credete:

Una volta scaricata o creata l’immagine della palla, trascinatela nella cartella “Resources” del vostro progetto in Xcode, facendo attenzione di mettere la spunta nell’opzione “Copy items into destination’s group folder (if needed)”

Adesso l’immagine è parte del nostro progetto. Clicchiamo sul file “PallaViewController.h” ed andiamo a scrivere un po’ di codice. Dichiariamo un oggetto di tipo UIImageView e un oggetto di tipo CGPoint, che useremo per decidere di quanto si dovrà muovere la nostra palla (se vogliamo una sorta di velocità), infine, dichiariamo la solita @property:

#import 

@interface PallaViewController : UIViewController {	
	IBOutlet UIImageView *palla;
	CGPoint pos;
}

@property (nonatomic,retain) IBOutlet UIImageView *palla;

@end

Salviamo il file .h e andiamo a costruire la nostra semplice interfaccia grafica con Interface Builder. Clicchiamo quindi due volte su “PallaViewController.xib” e si aprirà IB. Ecco la nostra vista principale. Dentro di essa trasciniamo semplicemente una ImageView dalla Library (se non la vedete cliccate in alto su Tools > Library).

Ridimensioniamo l’ ImageView e clicchiamoci sopra. Apriamo quindi l’Attributes Inspector (Tools > Attribute Inspector) e nel campo image, apriamo la selezione multipla a tendina e scegliamo la nostra immagine dall’elenco “palla.png” (o eventualmente il nome che avete dato alla vostra palla caricata in precedenza).

In questo modo apparirà nell’ImageView proprio l’immagine della palla che avete incluso prima nel progetto.

A questo punto, sempre selezionando l’ImageView, clicchiamo contemporaneamente sulla nostra tastiera: Command e = (CMD + =) e i bordi dell’ImageView si allineeranno perfettamente alla palla. Potete benissimo abbellire la vista con molti elementi, ma noi cambieremo solo il colore di sfondo mettendo un Blu Oceano (per far ciò selezionate la vista, cliccate su Attributes Inspector e cliccate accanto a Background)

Ora dobbiamo collegare l’immagine a ciò che abbiamo dichiarato via codice. Clicchiamo quindi su “File’s Owner”, spostiamoci nel Connections Inspector e colleghiamo l’oggetto “palla” all’ImageView

Per quanto riguarda l’interfaccia grafica abbiamo finito, salviamo tutto e chiudiamo Interface Builder. Apriamo ora il file “PallaViewController.m” e aggiungiamo il solito “@synthesize” in questo caso per l’oggetto “palla”.

Scommentiamo il metodo “viewDidLoad” e modifichiamo il suo codice come segue:

- (void)viewDidLoad {
        pos = CGPointMake(14.0, 7.0);
        [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(onTimer) userInfo:nil repeats:YES];
}

Nella prima linea, settiamo i valori per l’oggetto pos. Più questi saranno alti, maggiore sarà lo spostamento della palla (vedremo dopo perchè). Ovviamente questi valori indicheranno anche il modo in cui si muoverà la nostra palla, in questo caso in modo obliquo. Successivamente creiamo un oggetto NSTimer, settiamo il suo metodo “scheduledTimerWithTimeInterval” a 0.05, che indica la velocità con cui si aggiorna costantemente il Timer e, grazie al parametro “selector”, diciamo al nostro Timer quale metodo richiamare ad ogni intervallo di tempo trascorso, nel nostro caso “onTimer”:

- (void) onTimer {
	palla.center = CGPointMake(palla.center.x+pos.x, palla.center.y+pos.y);
	
	if(palla.center.x > 320 || palla.center.x < 0)
              pos.x = -pos.x;
        if(palla.center.y > 460 || palla.center.y < 0)
	      pos.y = -pos.y;
}

Ecco cosa succede. Ad ogni chiamata di questo metodo (onTimer), alla posizione della palla verranno aggiunti i valori settati in pos, quindi la palla si sposterà di quei valori (x,y) indicati. Verrà quindi verificato se la palla, con questo movimento, ha "rimbalzato contro le pareti" dell'iPhone. Se questo dovesse accadere, verranno invertiti i valori della x e rispettivamente della y così da far andare la palla nella direzione opposta, senza uscire quindi dallo schermo.

Per quanto riguarda il codice è tutto, clicchiamo su "Build And Run" e testiamo la nostra applicazione sul Simulatore, l'applicazione in esecuzione farà capire molto meglio quello di cui stiamo parlando. Ecco uno screenshot dell'applicazioni in esecuzione:

Tutorial tradotto da David Pollak (bebus77) per devAPP.it.