In questo periodo di grandi incertezze in cui lo spread altalenante sembra essere l’unico vero problema con cui confrontarsi, c’è ancora qualcosa con cui divertirsi quando si è stanchi la sera. No! …non è la TV e neanche la PS3… è la programmazione. Da sempre il periodo di Natale è uno dei miei più proficui momenti per programmare. Ricordo ancora il clima di festa e l’odore del pino, rigorosamente naturale, che si respirava a casa da giorno 8 Dicembre in poi quando ero piccolo. Ogni anno era un’attesa senza fine… ogni anno c’era un nuovo pezzo di tecnologia informatica da aggiungere alla mia collezione. Purtroppo, però, la sete di conoscenza andava sempre più veloce dei naturali periodi di rotazione della terra e così capitava spesso che già alla metà dell’anno appena entrato, avevo voglia/bisogno di qualcosa di nuovo con cui giocare. Erano bei tempi.

Da un pò di tempo questa cosa non capita più, forse è colpa dell’età che avanza. A voler essere sinceri, la reale motivazione sono sicuro coincide con l’essermi imbattuto in Cocoa ed Objective-C (con relativo hardware, si intende). Così, il periodo delle feste natalizie è diventato una piacevole occasione per sedermi davanti al fuoco caldo del camino, giocando con qualche nuovo oggetto del framework che sino ad ora mi era passato sfuggente sotto gli occhi a causa della mancanza di tempo.

Rilasattevi e fatevi un buon the caldo. E’ il momento di scaldare il nostro MacBook. Tra qualche minuto faremo quello che qualunque buon programmatore vorrebbe edovrebbe fare in questo periodo: creare un bel generatore di fiocchi di neve. Meglio se accellerato in OpenGL. D’altrocanto, visto che siamo aspiranti programmatori iOS, ottempereremo al nostro dovere sfruttando il nostro dispositivo preferito. Buonalettura.

Preparazione del progetto

Quello che vogliamo realizzare sarà qualcosa di questo tipo: al tocco dello schermo, cercheremo di creare una caduta di fiocchi di neve.

Sarà un pò come avere la nostra neve personale sempre a portata di mano, con cui fare divertire i nostri amici durante le feste di natale.

Creiamo un nuovo progetto, scegliendo un template il più generale possibile (Empty Application):

Chiamiamo il nostro progetto: SnowFlakes.

Abbiate cura di deselezionare l’opzione ARC (Automatic Reference Counting). Il motivo per cui è meglio deselezionarlo lo raccontiamo un’altra volta.

Se vorrete installare l’applicativo realizzato su dispositivi o regalarlo ad amici con una IPA, date un company identifier valido al vostro applicativo. Altrimenti, potrete ignorarlo.

Aggiungiamo un pò di frameworks a quelli forniti in dotazione standard. Ci serviranno durante il corso del nostro applicativo. Se non sapete a che servono, non vi preoccupate. Ogni qualvolta ne useremo uno, verrà indicato.

I frameworks da aggiungere sono:

• AVFoundation.framework (necessario per dialogare con le API audio/video)
• QuartzCore.framework (necessario per dialogare con CALayer)

Modifichiamo opportunamente il file di *-Prefix.pch. In questo modo, ci eviteremo noiosi warning ed errori da parte del compilatore ed eviteremo di dover includere gli headers necessari in ogni classe che ne necessita l’uso.

La classe CAEmitterLayer

La classe CAEmitterLayer crea un emettitore di particelle CAEmitterCell. Queste particelle, sono disegnate attraverso il framework Quartz / Core Animation direttamente sul layer della UIView che ci ospita. Questo significa che qualunque oggetto che eredita da UIView, potrà ereditare i favolosi effetti grafici che potremo creare. Molto bene, mettiamoci al lavoro.

L’idea generale sarà quella di creare un “contenitore” CAEmitterLayer, aggiungendogli un numero variabile di “particelle” CAEmitterCell. Ogni cella produrrà particelle secondo la configurazione fornita. Come potete immaginare gli usi e gli scopi sono infiniti, tra cui quello dei fiocchi di neve.

Prima di tutto dobbiamo procurarci un’istanza valida di CAEmitterLayer. Se guardiamo la documentazione Apple, ci accorgeremo che la classe CAEmitterLayer eredita direttamente da CALayer. Questo significa che qualunque oggetto che dialoga con un CALayer, potrà essere utile per il nostro scopo. E’ proprio quello che cercavamo.

Creiamo una nuova classe che chiameremo SnowflakeParticleView e che eredita da UIView.

Modifichiamo l’header della classe, aggiungendo una variabile d’istanza che chiameremo snowflakeEmitter ed un’altra che farà riferimento all’istanza (singletone) del nostro AppDelegate.

#import 

@class AppDelegate;

@interface SnowflakeParticleView : UIView
{
    AppDelegate *appDelegate;
    CAEmitterLayer* snowflakeEmitter;
}

Nel metodo di init, provvederemo ad inizializzare le variabili dichiarate nell’interfaccia, così come indicato sotto.

- (id)initWithFrame:(CGRect)frame {
    if(self = [super initWithFrame:frame]) {
        //Create the emitter layer and retain it
        snowflakeEmitter = [[CAEmitterLayer layer] retain];
        appDelegate = (AppDelegate *)\
                      [[UIApplication sharedApplication] delegate];
    }
    return self;
}

In questo modo, tutta la classe SnowflakeParticleView condividerà la stessa istanza di snowflakeEmitter (il nostro emettitore di neve). Alla variabile appDelegate, invece, assegneremo il riferimento di memoria della classe singletone AppDelegate. Quest’ultima è importante perchè sarà al suo interno che dichiareremo il nostro player di musica…abbiamo detto che è Natale, giusto? Ricordiamoci di dichiarare ed implementare un metodo di dealloc per il nostro oggetto.

- (void)dealloc
{
    [snowflakeEmitter release];
    [super dealloc];
}

Gestione del tocco ed interazione con UIView

Ogni oggetto che eredita da UIView, può implementare tre metodi magici che gli permettono di prendere il controllo del tocco dell’utente (esistono anche altri modi per farlo ma in questa sede e per semplicità useremo questa tecnica). Ci basterà implementare la logica corrispondente ad ogni azione (inizio tocco, movimento, fine tocco) per fare in modo che tutto vada come desideriamo.

Partiamo dall’evento di inizio tocco (touchesBegan:withEvent). Quando toccate un oggetto che eredita da UIView, il suo UIResponder lancia un messaggio che, se correttamente implementato all’interno della nostra subclasse, permette di monitorare
e reagire al tocco.

Nel nostro caso, quello che dovremo fare sarà fare partire il nostro audioPlayer ed iniziare a sparare fiocchi di neve.

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    if(![appDelegate.audioPlayer isPlaying])
        [appDelegate.audioPlayer play];
...

Il parametro touches, passato al metodo dall’evento di tocco, ci permette di ottenere informazioni importanti, quali ad esempio la posizione relativa del tocco sullo schermo. Da questo punto faremo partire il nostro generatore di neve.

...
CGPoint pt = [[touches anyObject] locationInView:self];
...

Infine, modifichiamo la posizione dell’emettitore snowflakeEmitter, facendola corrispondere con il punto di tocco sullo schermo. Variamo anche la sua modalità di emissione (emitterMode), lo shape usato per generare particelle (emitterShape) e la modalità di rendering usata dal motore Quartz (renderMode). Per i dettagli, vi invito a dare un occhiata alla documentazione Apple fornita di seria. Risulta molto precisa ed esaustiva.

...
    snowflakeEmitter.emitterPosition = pt;
    snowflakeEmitter.emitterMode = kCAEmitterLayerOutline;
    snowflakeEmitter.emitterShape = kCAEmitterLayerCircle;
    snowflakeEmitter.renderMode = kCAEmitterLayerAdditive;
    snowflakeEmitter.emitterSize = CGSizeMake(100 * multiplier, 0);
...

E’ la volta delle nostre particelle di neve. Creiamo una cella emettitrice di particelle e configuriamola secondo le nostre preferenze. Tra i parametri che possiamo modificare spiccano: birthRate per il numero di particelle generate in un range di tempo, lifeTime che indica il tempo di vita di ogni particella e velocity per la velocità.

...
    //Create the emitter cell
    CAEmitterCell* aSnowflake = [CAEmitterCell emitterCell];
    aSnowflake.birthRate = 200;
    aSnowflake.lifetime = 3.0;
    aSnowflake.lifetimeRange = 0.5;
    aSnowflake.velocity = 0.5*pt.x;
    aSnowflake.velocityRange = 0.5*pt.x;
    aSnowflake.emissionRange = 1.5*pt.x;
    aSnowflake.scaleSpeed = 0.1;
    aSnowflake.spin = 0.3;
    aSnowflake.emissionLatitude = 100.0;
    aSnowflake.yAcceleration = 150.0;
    aSnowflake.xAcceleration = 0.0;
    aSnowflake.emissionLongitude = 0.0;
    aSnowflake.color = [[UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:0.1] CGColor];
    aSnowflake.contents = (id)[[UIImage imageNamed:@"snow.png"] CGImage];
    [aSnowflake setName:@"snowflake"];
...

Possiamo creare quante celle vogliamo. L’importante è passare al nostro emettitore un oggetto NSArray, contentente tutte le celle create. Nel nostro caso, popoleremo l’array con un solo elemento. Vi invito a non abbondare con il numero di celle create.
Spesso è possibile ottenere lo stesso effetto che state cercando giocando con i parametri sopra e non con il numero di particelle create. La documentazione Apple, ancora una volta, sarà nostra amica.

...
    snowflakeEmitter.emitterCells = [NSArray arrayWithObject:aSnowflake];
    [self.layer addSublayer:snowflakeEmitter];
...

Ad ogni movimento del nostro dito, supponendo di non averlo tolto dallo schermo, viene invocato un’altro metodo. Anche questo, se implementato, ci fornisce di interagire con il movimento del nostro utente. Tutto quello che faremo sarà aggiornare la posizione del nostro emettitore (che, vi ricordo, contiene tutte le celle generatrici di particelle).

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint pt = [[touches anyObject] locationInView:self];
    snowflakeEmitter.emitterPosition = pt;
}

Analogamente, al rilascio del tocco, implementando il metodo sotto potremo effettuare le operazioni di blocco del nostro player musicale e della neve.

E’ interessante notare “come” blocchiamo la neve. Anzichè rilasciare l’oggetto snowflakeEmitter (che vi ricordo essere condiviso per tutta la durata di vita della nostra classe SnowFlakeParticleView), semplicemente ne configuriamo la grandezza dell’emettitore (immaginatevelo come la grandezza del tubo da cui esce la neve) a zero. Simultaneamente, ci adoperiamo per interrompere il flusso di emissione delle particelle, settando a zero la proprietà birthRate di ogni cella.

- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    if([appDelegate.audioPlayer isPlaying])
           [appDelegate.audioPlayer pause];

    for(CAEmitterCell *aSnowFlake in
        snowflakeEmitter.emitterCells) {
        aSnowFlake.birthRate = 0;
    }

    snowflakeEmitter.emitterSize = CGSizeZero;
}

Modifiche finali ed AppDelegate

Spostiamoci nel file AppDelegate.h e modifichiamolo come segue:

@interface AppDelegate : UIResponder  {
    AVAudioPlayer *audioPlayer;
}

@property (strong, nonatomic) UIWindow *window;
@property (nonatomic, retain) AVAudioPlayer *audioPlayer;
@end

La variabile di istanza audioPlayer, ci servirà per poter “rispescare” ed interagire con l’oggetto audioPlayer dall’interno della classe generatrice dei fiocchi di cui sopra.

Esercizio: Al posto dell’uso di una shared instance di AppDelegate, per indicizzare un’oggetto globale quale il lettore musicale, si potrebbe pensare di costruire una nuova classe singletone.

Spostiamoci nel file di implementazione AppDelegate.m e sintetizziamo la nuova variabile:

@synthesize audioPlayer;

ricordiamoci di aggiungere nella sezione di header la dichiarazione di import per la classe generatrice di neve creata sopra.

#import "SnowflakeParticleView.h"

Modifichiamo il metodo di didFinishLaunchingWithOptions come segue:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary
*)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    self.window.backgroundColor = [UIColor colorWithRed:0.0/255.0
                                                  green:5.0/255.0
                                                   blue:113.0/255.0
                                                  alpha:1.0];

    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"jingleBells"
                                                                        ofType:@"mp3"]];
    NSError *error;
    audioPlayer = [[[AVAudioPlayer alloc] initWithContentsOfURL:url error:&error] autorelease];
    audioPlayer.numberOfLoops = -1;
  
    if (audioPlayer == nil) NSLog(@"%@", [error description]);

    SnowflakeParticleView *contentView = [[SnowflakeParticleView alloc] init];

    [self.window addSubview:contentView];
    [contentView release];

    [self.window makeKeyAndVisible];
    return YES;
}

Se avete seguito tutti i passi, potete compilare e godervi il frutto della vostra fatica. Se non ci siete riusciti o siete stati impegnati nella lettura, potete scaricare lo zip con tutto il progetto compresso a questo indirizzo.

Grazie tante per l’attenzione dedicatami. Vi auguro un felice periodo di Natale ed uno straordinario anno nuovo, ricco di applicazioni ed idee entusiasmanti.

Costantino aka (valv`0)

Se avete problemi con il progetto presentato, questo è il link per scaricare il nostro esempio.