Ed eccoci ad un nuovo appuntamento con la programmazione per iphone. Oggi vedremo di imparare qualcosa sulla programmazione dei nostri amati melafonini sviluppando un semplice giochino che chiameremo GuessTheColor.

Come funziona GuessTheColor?

Il gioco è molto semplice, viene mostrata al giocatore una view colorata per un paio di secondi, dopo di ciò l’utente dovrà ricreare il colore che ha visto agendo su 3 slider che regolano la quantità di rosso, di verde e di blu. Semplice, no?

Il progetto

Questa volta partiamo subito in quarta e apriamo Xcode, scegliamo di creare un progetto di tipo “view-based application” e lo chiamiamo guessTheColor.

Ci vogliamo semplificare la vita, quindi utilizzeremo una sola classe, nello specifico utilizzeremo la classe guessTheColorViewController.h

Che cosa ci servirà in questa classe? Sicuramente i tre UISlider per selezionare il colore, poi ci servirà una UIView dove visualizzare il colore da indovinare (quella che verrà nascosta dopo 1 o 2 secondi), ed infine ci serviranno tre valori di tipo float (float sono valori con la virgola) per memorizzare le componenti RGB del colore che dobbiamo indovinare.

COS’è RGB?

Questa piccola digressione è d’obbligo, sentitevi liberi di andare avanti se sapete già di cosa stiamo parlando.

RGB sono le iniziali di Red (rosso), Green (verde) e Blue (blu) e, che ci crediate o no, tutti colori che state in questo momento guardando sul vostro schermo sono realizzati dosando opportunamente le percentuali di questi tre colori.

A differenza di quello che avviene quando si mescolano i colori a tempera, con i quali se mescolassimo rosso verde (in realtà il giallo :P) e blu in egual misura otterremmo una sorta di marrone scuro, quello che avviene con gli schermi è che otteniamo invece il bianco. Questa è quella che viene chiamata sintesi additiva.

Esempio di sintesi additiva con RGB

Per specificare un colore, quindi, possiamo semplicemente elencarne le percentuali di rosso, verde e blu.

Storicamente queste percentuali vengono specificate con un intero che va da 0 (0%) a 255 (100%) ma l’sdk di apple prevede che questi valori vengano forniti come un float che va da 0 (0%) a 1 (100%). Ovviamente non cambia nulla, è solo un problema di proporzioni e di scalatura.

Considerando che in molti sono abituati a pensare ai colori in termini di valori 0-255 alcuni programmatori usano fornire questi valori usando questa notazione: 127/255. Questo ovviamente da come risultato un float compreso tra 0 e 1 ed ha il vantaggio di essere più chiaro per chi è abituato alla notazione in 255-esimi.

Una piccola nota, puo’ sembrare strano affermare che il bianco è fatto da 100% rosso, 100% verde e 100% blu, ma quello che questa notazione vuol dire è che nel bianco abbiamo la massima quantità di questi tre colori, così come il colore (100%,100%,50%) ha metà blu rispetto alla sua quantità massima.

TORNIAMO ALLA CREAZIONE DEL NOSTRO GIOCO PER IPHONE

Stavamo modificando guessTheColorViewController.h, aggiungiamo quindi gli Outlet e le property in questo modo:

#import 

@interface guessTheColorViewController : UIViewController {
	UIView *secretColorView;
	UISlider *sliderred;
	UISlider *slidergreen;
	UISlider *sliderblue;
	UILabel *tentativi;
	float red;
	float green;
	float blue;
}
@property (nonatomic, retain) IBOutlet UISlider *sliderred;
@property (nonatomic, retain) IBOutlet UISlider *slidergreen;
@property (nonatomic, retain) IBOutlet UISlider *sliderblue;
@property (nonatomic, retain) IBOutlet UIView	*secretColorView;
@end

Non dimentichiamoci di aggiungere al file “guessTheColorViewController.m” la relativa voce “@synthesize”

@synthesize sliderred,slidergreen,sliderblue,secretColorView;

A questo punto possiamo creare l’interfaccia con Interface Builder, trasciniamo i 3 UISlider e colleghiamoli alla nostra classe cliccando con il tasto destro sull’icona “file’s owner” della documentwindows e trascinando sopra gli slider.

Questa è il mio progetto:

Scriviamo ora la funzione che imposti un colore random per la view “secretColorView”, questo è il codice:

- (IBACTION)showNextColor
{
	red = ((float)rand()/ RAND_MAX);
	green = ((float)rand()/ RAND_MAX);
	blue = ((float)rand()/ RAND_MAX);
	[secretColorView setBackgroundColor:[UIColor colorWithRed:red green:green blue:blue alpha:1]];
	[self performSelector:@selector(resetView) withObject:nil afterDelay:1.5];
}

Questa funzione si occupa di generare tre valori random utilizzando la funzione rand() ma poichè questi valori non sarebbero compresi nell’intervallo [0,1] bisogna dividere per la costante RAND_MAX.

Impostiamo poi il colore di fondo della view “secretColorView” tramite il metodo “colorWithRed: green: blue: alpha” della classe UIColor.

Questo metodo prende in input tre float che corrispondono alle percentuali dei colori RGB e un altro float per il parametro ALPHA che regola la trasparenza. Con Alpha=0 la view è completamente trasparente, con Alpha=1 è completamente opaca.

L’ultima riga di questa funzione utilizza il metodo “performSelector”, gia incontrato nell’applicazione multithread, in questo caso quello che succede è che viene invocato il metodo “resetView” dopo un ritardo di 1.5 secondi.

Questo è un buon sistema quando si vogliono eseguire delle operazioni “ritardate” senza voler mettere in ballo NSTimer e altre classi più complesse.

Ma cosa fa la funzione resetView? semplicemente toglie il colore visualizzato nella view e lo sostituisce con un anonimo grigio medio.

il codice è questo:

- (IBAction)resetView
{
	[secretColorView setBackgroundColor:[UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:1]];
}

non ci resta che richiamare la funzione “showNextColor” all’avvio dell’applicazione, magari dentro il metodo viewdidload.

- (void)viewDidLoad {
    [super viewDidLoad];
	[self showNextColor];
}

Se proviamo ad eseguire l’applicazione notiamo una cosa fastidiosa, ad ogni avvio viene visualizzato sempre lo stesso colore.
Questo è dovuto alla funzione rand() un generatore di numeri pseudo-random che per funzionare bene necessia che ad ogni avvio venga generato un nuovo seme.

Questa generazione si fa aggiungendo al file main.m, (all’interno del metodo main) questa riga di codice prima di ogni altra istruzione:

srand(time(NULL))

Proviamo ad indovinare:

Questa che abbiamo appena realizzato è la prima parte dell’applicazione, ora dobbiamo realizzare la seconda.vogliamo che scorrendo con gli slide vari in colore della view, quando pensiamo di aver indovinato il colore che abbiamo visto per un secondo clicchiamo sul pulsante GUESS e verremo informati di quanto siamo stati bravi nel ricordare il colore.

Abbiamo bisogno quindi di un metodo:

- (IBAction)slideChanged:(id)sender
{
	[secretColorView setBackgroundColor:[UIColor colorWithRed:[sliderred value] green:[slidergreen value] blue:[sliderblue value] alpha=1]];
}

Questo metodo non fa altro che impostare il colore della view “secretColorView” con il valore presente nei tre slider.

Da interface builder adesso potremo associare all’evento “value changed” degli slider proprio questo metodo.
Proviamo ad eseguirlo e vediamo come il cambia il colore della view.

Non ci resta che implementare il metodo per la verifica, vogliamo vedere se l’utente è riuscito a ricordare il colore segreto, per fare questo scriviamo questo metodo e lo associamo all’evento click sul pulsante “guess”:

- (IBAction)guessColor:(id)sender
{
	float errorerosso = fabs(sliderred.value - red);
	float erroregreen = fabs(slidergreen.value - green);
	float erroreblue = fabs(sliderblue.value - blue);
	NSString *msg =[NSString stringWithFormat: @"ERRORE\nRED: %d%%\nGREEN: %d%%\nBLUE: %d%%",(int)(errorerosso * 100),
					(int)(erroregreen * 100),
					(int)(erroreblue * 100)];
	UIAlertView *alert  = [[UIAlertView alloc] initWithTitle:@"GUESS" message:msg delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
	
×
;
	
×
;
}

Calcoliamo per prima cosa quanto i valori che abbiamo selezionato si discostano dai valori che erano stati scelti random, poi creiamo una alertView che ci informi di quanto abbiamo sbagliato.

Con questo la nostra applicazione è terminata, spero che la lettura sia stata utile e piacevole. Attendo i vostri commenti.

Applicazione guessthecolor per devapp

PS:Ho effettuato alcune modifiche dell’ultima ora, ho aggiunto un pulsante per richiedere un nuovo colore, il cui metodo da richiamare è semplicemente “showNextColor”. e poi ho creato un pulsate “mi arrendo” che visualizza qual’era la corretta posizione degli slide il codice è questo:

- (IBAction)imaloser:(id)sender
{
	[sliderred setValue:red animated:YES];
	[slidergreen setValue:green animated:YES];
	[sliderblue setValue:blue animated:YES];
	[secretColorView setBackgroundColor:[UIColor colorWithRed:red green:green blue:blue alpha:1]];
}

Ed ora un breve video del programma in azione.

Se avete problemi con il tutorial, questo è il nostro file di progetto.