{"id":3740,"date":"2010-06-23T12:40:31","date_gmt":"2010-06-23T10:40:31","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3740"},"modified":"2011-04-09T18:38:22","modified_gmt":"2011-04-09T16:38:22","slug":"t056-guessthecolor-impariamo-creando-un-giochino-per-iphone","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t056-guessthecolor-impariamo-creando-un-giochino-per-iphone\/","title":{"rendered":"T#056 – GuessTheColor: Impariamo creando un giochino per iPhone"},"content":{"rendered":"

\"\"<\/a><\/p>\n

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<\/strong>.<\/p>\n

Come funziona GuessTheColor?<\/h4>\n

Il gioco \u00e8 molto semplice, viene mostrata al giocatore una view colorata per un paio di secondi, dopo di ci\u00f2 l’utente dovr\u00e0 ricreare il colore che ha visto agendo su 3 slider che regolano la quantit\u00e0 di rosso, di verde e di blu. Semplice, no?<\/p>\n

Il progetto<\/h4>\n

Questa volta partiamo subito in quarta e apriamo Xcode, scegliamo di creare un progetto di tipo “view-based application” e lo chiamiamo guessTheColor<\/em>.<\/p>\n

Ci vogliamo semplificare la vita, quindi utilizzeremo una sola classe, nello specifico utilizzeremo la classe guessTheColorViewController.h<\/p>\n

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

COS’\u00e8 RGB?<\/h4>\n

Questa piccola digressione \u00e8 d’obbligo, sentitevi liberi di andare avanti se sapete gi\u00e0 di cosa stiamo parlando.<\/p>\n

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.<\/p>\n

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

<\/p>\n
\"\"<\/a><\/p>\n

Esempio di sintesi additiva con RGB<\/p>\n<\/div>\n

<\/center><\/p>\n

Per specificare un colore, quindi, possiamo semplicemente elencarne le percentuali di rosso, verde e blu.<\/p>\n

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, \u00e8 solo un problema di proporzioni e di scalatura.<\/p>\n

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\u00f9 chiaro per chi \u00e8 abituato alla notazione in 255-esimi.<\/p>\n

Una piccola nota, puo’ sembrare strano affermare che il bianco \u00e8 fatto da 100% rosso, 100% verde e 100% blu, ma quello che questa notazione vuol dire \u00e8 che nel bianco abbiamo la massima quantit\u00e0 di questi tre colori, cos\u00ec come il colore (100%,100%,50%) ha met\u00e0 blu rispetto alla sua quantit\u00e0 massima.<\/p>\n

TORNIAMO ALLA CREAZIONE DEL NOSTRO GIOCO PER IPHONE<\/h4>\n

Stavamo modificando guessTheColorViewController.h, aggiungiamo quindi gli Outlet e le property in questo modo:<\/p>\n

\r\n#import \r\n\r\n@interface guessTheColorViewController : UIViewController {\r\n\tUIView *secretColorView;\r\n\tUISlider *sliderred;\r\n\tUISlider *slidergreen;\r\n\tUISlider *sliderblue;\r\n\tUILabel *tentativi;\r\n\tfloat red;\r\n\tfloat green;\r\n\tfloat blue;\r\n}\r\n@property (nonatomic, retain) IBOutlet UISlider *sliderred;\r\n@property (nonatomic, retain) IBOutlet UISlider *slidergreen;\r\n@property (nonatomic, retain) IBOutlet UISlider *sliderblue;\r\n@property (nonatomic, retain) IBOutlet UIView\t*secretColorView;\r\n@end\r\n<\/pre>\n
Non dimentichiamoci di aggiungere al file “guessTheColorViewController.m” la relativa voce “@synthesize”<\/p>\n
\r\n@synthesize sliderred,slidergreen,sliderblue,secretColorView;\r\n<\/pre>\n
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.<\/p>\n
Questa \u00e8 il mio progetto:<\/p>\n

\n\"Progetto<\/a>
\n<\/center><\/p>\n
Scriviamo ora la funzione che imposti un colore random per la view “secretColorView”, questo \u00e8 il codice:<\/p>\n
\r\n- (IBACTION)showNextColor\r\n{\r\n\tred = ((float)rand()\/ RAND_MAX);\r\n\tgreen = ((float)rand()\/ RAND_MAX);\r\n\tblue = ((float)rand()\/ RAND_MAX);\r\n\t[secretColorView setBackgroundColor:[UIColor colorWithRed:red green:green blue:blue alpha:1]];\r\n\t[self performSelector:@selector(resetView) withObject:nil afterDelay:1.5];\r\n}\r\n<\/pre>\n
Questa funzione si occupa di generare tre valori random utilizzando la funzione rand()<\/em> ma poich\u00e8 questi valori non sarebbero compresi nell’intervallo [0,1] bisogna dividere per la costante RAND_MAX<\/em>.<\/p>\n
Impostiamo poi il colore di fondo della view “secretColorView” tramite il metodo “colorWithRed: green: blue: alpha” della classe UIColor<\/em>.<\/p>\n
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 \u00e8 completamente trasparente, con Alpha=1 \u00e8 completamente opaca.<\/p>\n
L’ultima riga di questa funzione utilizza il metodo “performSelector”, gia incontrato nell’applicazione multithread, in questo caso quello che succede \u00e8 che viene invocato il metodo “resetView” dopo un ritardo di 1.5 secondi.<\/p>\n
Questo \u00e8 un buon sistema quando si vogliono eseguire delle operazioni “ritardate” senza voler mettere in ballo NSTimer e altre classi pi\u00f9 complesse.<\/p>\n
Ma cosa fa la funzione resetView? semplicemente toglie il colore visualizzato nella view e lo sostituisce con un anonimo grigio medio.<\/p>\n
il codice \u00e8 questo:<\/p>\n
\r\n- (IBAction)resetView\r\n{\r\n\t[secretColorView setBackgroundColor:[UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:1]];\r\n}\r\n<\/pre>\n
non ci resta che richiamare la funzione “showNextColor” all’avvio dell’applicazione, magari dentro il metodo viewdidload.<\/p>\n
\r\n- (void)viewDidLoad {\r\n    [super viewDidLoad];\r\n\t[self showNextColor];\r\n}\r\n<\/pre>\n
Se proviamo ad eseguire l’applicazione notiamo una cosa fastidiosa, ad ogni avvio viene visualizzato sempre lo stesso colore.
\nQuesto \u00e8 dovuto alla funzione rand() un generatore di numeri pseudo-random<\/em> che per funzionare bene necessia che ad ogni avvio venga generato un nuovo seme.<\/p>\n
Questa generazione si fa aggiungendo al file main.m<\/em>, (all’interno del metodo main<\/em>) questa riga di codice prima di ogni altra istruzione:<\/p>\n
\r\nsrand(time(NULL))\r\n<\/pre>\n
Proviamo ad indovinare:<\/h4>\n
Questa che abbiamo appena realizzato \u00e8 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<\/em> e verremo informati di quanto siamo stati bravi nel ricordare il colore.<\/p>\n
Abbiamo bisogno quindi di un metodo:<\/p>\n
\r\n- (IBAction)slideChanged:(id)sender\r\n{\r\n\t[secretColorView setBackgroundColor:[UIColor colorWithRed:[sliderred value] green:[slidergreen value] blue:[sliderblue value] alpha=1]];\r\n}\r\n<\/pre>\n
Questo metodo non fa altro che impostare il colore della view “secretColorView” con il valore presente nei tre slider.<\/p>\n
Da interface builder adesso potremo associare all’evento “value changed” degli slider proprio questo metodo.
\nProviamo ad eseguirlo e vediamo come il cambia il colore della view.<\/p>\n
Non ci resta che implementare il metodo per la verifica, vogliamo vedere se l’utente \u00e8 riuscito a ricordare il colore segreto, per fare questo scriviamo questo metodo e lo associamo all’evento click sul pulsante “guess”:<\/p>\n
\r\n- (IBAction)guessColor:(id)sender\r\n{\r\n\tfloat errorerosso = fabs(sliderred.value - red);\r\n\tfloat erroregreen = fabs(slidergreen.value - green);\r\n\tfloat erroreblue = fabs(sliderblue.value - blue);\r\n\tNSString *msg =[NSString stringWithFormat: @\"ERRORE\\nRED: %d%%\\nGREEN: %d%%\\nBLUE: %d%%\",(int)(errorerosso * 100),\r\n\t\t\t\t\t(int)(erroregreen * 100),\r\n\t\t\t\t\t(int)(erroreblue * 100)];\r\n\tUIAlertView *alert  = [[UIAlertView alloc] initWithTitle:@\"GUESS\" message:msg delegate:nil cancelButtonTitle:@\"OK\" otherButtonTitles:nil];\r\n\t