Con l’arrivo sul mercato degli ultimi modelli di iDevices: iPhone 4 e iPod Touch 4G, entrambi dotati dell’ormai famoso “retina display”, per gli sviluppatori è nata l’esigenza di pianificare l’ottimizzazione della grafica delle loro applicazioni (esistenti e in sviluppo) per i differenti display esistenti. Ogni sviluppatore dovrebbe preoccuparsi infatti di far si che le sue creazioni vengano visualizzate al meglio sia sui precedenti device (iPhone 3G, 3GS, e iPod Touch vari) che su quelli di ultima generazione, che godono appunto di una risoluzione maggiore.
Cominciamo con il dire (se qualcuno ancora non lo sapesse) che il Retina Display introdotto nel nuovo iPhone gode di una risoluzione di 960×640 con una densità di pixel di 326 pixel per pollice. Questo significa che se la nostra grafica è ottimizzata esclusivamente per la risoluzione di 480×320 (dei “vecchi” device), è evidente che su un display di ultima generazione, il quale offre quattro volte il numero di pixel degli display precedenti , l’immagine risulterà inevitabilmente sgranata!
Ora, non voglio certo proporvi la guida definitiva per risolvere tutte le situazioni possibili e immaginabili, ma proporvi semplicemente un buon punto di partenza, che sicuramente sarà utile a molti di voi. Vedremo, con un piccolo esempio, un semplice metodo per ottimizzare un’immagine presente nel nostro programma e l’icona del programma stesso.
Prepariamo la grafica per il nostro esempio
Come ben saprete, fino ad oggi dovevamo prevedere 2 icone per la nostra applicazione, o meglio la stessa icona di 2 differenti dimensioni. Una, pari a 57×57 pixel, quella che verrà poi mostrata nella springboard e che occorre inserire all’interno del progetto e l’altra di 512×512 pixel (da non inserire all’interno dell’applicazione), che verrà poi inviata ad Apple e utilizzata all’interno dell’App Store. Oggi dovremo prevedere una terza dimensione per la nostra icona, ottimizzata appunto per i retina display, che dovrà avere dimensioni 114×114 pixel. Ovviamente sarà conveniente partire da quella più grande (512×512) per poi ricavare quelle più piccole tramite semplice ridimensionamento dell’immagine stessa, prima quella da 114×114 e infine quella da 57×57.
Per quanto riguarda le immagini del nostro esempio, invece, dovranno essere presenti nel progetto in due grandezze differenti: 480×320 (per i “vecchi” dispositivi) e 960×640 pixel (per in nuovi).
Le dimensioni non bastano, dovremmo infatti preoccuparci di qualche altro piccolo accorgimento. Vediamo di cosa si tratta con il nostro piccolo esempio pratico.
Partiamo con il progetto
Apriamo Xcode > New Project > View Based Application. Diamo un nome a piacere alla nostra applicazione e proseguiamo.
Importiamo all’interno del nostro progetto 4 file grafici precedentemente preparati secondo le specifiche riportate sopra (sia le icone che le immagini), trascinandole semplicemente all’interno della cartella “Resources” in Xcode. Facciamo attenzione a mettere la spunta su “Copy items into destination group’s folder (if needed)”, che farà in modo di copiare i file all’interno della cartella di destinazione.
Assicuriamoci che l’icona ottimizzata per i vecchi iPhone sia nominata “icon.png” e quella per iPhone 4 “icon@2x.png” e che le immagini siano nominate rispettivamente “wallpaper.jpg” e “wallpaper@2x.jpg”.
Apriamo il file .plist ed aggiungiamo una nuova riga sotto la voce “icon files” per settare le 2 icone.
Salviamo il file plist e chiudiamolo.
Facciamo ora doppio-click sul file “ViewController.xib” che aprirà Interface Builder. Aggiungiamo quindi una semplice “UIImageView” (di dimensione che prenda tutto lo schermo) alla nostra View. Andiamo a selezionare l’immagine da visualizzare all’interno dell’ “Image View” ed ecco un primo “strano” comportamento che richiede la nostra attenzione. Ci accorgeremo infatti di una cosa:
Nonostante abbiamo importato nel progetto diverse immagini, per la precisione 4, (2 icone e 2 immagini di dimensioni e nome file differenti) potremmo scegliere soltanto tra 2 di essi, (nel nostro esempio i file .png e .jpg)!
Perchè? Dove sono finiti i file “…@2x.png” e “…@2x.jpg” ?!?
Ed ecco che l’ambiente di sviluppo ci viene incontro semplificandoci la vita. Le immagini che terminano per “@2x.png” o “@2x.jpg” sono infatti quelle che il sistema sostituirà automaticamente alle rispettive .png e .jpg quando l’applicazione verrà installata su un dispositivo con display Retina !!!
Tutto qui!
Se da una parte avremo più lavoro lato grafica, almeno non dovremmo preoccuparci di gestire il tutto via codice se non con questi piccoli accorgimenti.
Naturalmente per ottimizzare applicazioni più complesse (tipo giochi) che sfruttano magari OpenGL e via dicendo, le cose probabilmente si complicano notevolmente, ma questo non fa per me 😉
Salviamo e chiudiamo IB. Da Xcode compiliamo la nostra applicazione ed ecco apparire il risultato sul simulatore iPhone:
Adesso dobbiamo vedere se tutto funziona per bene anche sul retina display!
Dal menù del simulatore apriamo Hardware > Dispositivo > iPhone (Retina)
Apriamo nuovamente la nostra applicazione e noteremo che sul retina display verrà visualizzata l’immagine da noi preparata per iPhone 4 (per rendere le differenze più evidenti ho pensato di aggiungere una scritta rossa nella versione retina, che potesse identificare meglio le immagini utilizzate nell’esempio).
In conclusione
Il mio esempio non risolverà sicuramente tutte le situazioni, ma è sicuramente un buon punto di partenza per cominciare ad ottimizzare le nostre applicazioni per i nuovi display!
Alla prossima
Se avete problemi con il tutorial, questo è il nostro file di progetto.
17 Responses to “T#079 – Ottimizzare la grafica delle nostre Applicazioni iPhone per il Retina Display”
4 Novembre 2010
Tweets that mention Ottimizzare la grafica delle nostre Applicazioni iPhone per il Retina Display | devAPP -- Topsy.com[…] This post was mentioned on Twitter by Rynox and iPadWorld.it, devAPP. devAPP said: Ottimizzare la grafica delle nostre Applicazioni iPhone per il Retina Display http://bit.ly/cT45qG […]
4 Novembre 2010
fabrizioquesta regola vale per qualsiasi cosa creata programmaticamente?
per esempio per immagini delle celle nel caso in cui sia sgranata conviene preparare anche immagini con suffisso @2x ?
4 Novembre 2010
MatFur92@Fabrizio
Non ho compreso bene ciò che intendi ma se vuoi rendere la tua app completamente compatibile con retina display devi creare per OGNI immagine.png la rispettiva immagine@2x.png 😉
4 Novembre 2010
ale1983grandi! stavo per fare questa domanda nel forum!
grazieeee!
5 Novembre 2010
fabrizioehsticazzi. saranno contenti gli utenti in fase di download della app!
5 Novembre 2010
RagazzettoX Fabrizio
Questo è il prezzo da pagare !
Ora sta a voi decidere se fare o no l ottimizzazione per il retina 😉
5 Novembre 2010
fabrizioe se io decidessi di farla solo per retina?
creerò solo le immagini con suffisso nomefile@2x.png ma richiamando programmaticamente solo nomefile.png??
o non è possibile?
5 Novembre 2010
RagazzettoLo puoi fare , scarica il file progetto e cancella da xcode il file wallpaper.jpg , da quel momento utilizzerai sempre il file nomefile@2x.jpg anche per i dispositivi senza retina display ( anche se in Xcode selezionerai sempre il file nomefile.jpg ).
9 Novembre 2010
ikarowebma per l’icona dell’app se dichiaro solo quella normale e l’icona per il retina la metto comunque all’interno del progetto, viene richiamata lo stesso oppure va inserita nel plist?
9 Novembre 2010
RagazzettoIo nel plist la dichiarerei , comunque ora sono fuori quando torno a casa provo e ti faccio sapere 😉
9 Novembre 2010
ikarowebok grazie 😉
9 Novembre 2010
RagazzettoControllato, funziona anche senza dichiarare l’ icona per il Retina !
Puoi lasciare il file info.plist come mamma Apple lo ha fatto !
Considera però una cosa :
se i file delle icone li nomini icon.png e icon@2x.png nessun problema , se hanno un nome differente li devi dichiarare nel file info.plist .
A maggior ragione se la tua è un universal app , in questo caso le righe all’ interno del plist dovranno essere 3 : una per iPhone , una per iPhone Retina e una per iPad rispettivamente di 57×57 , 114×114 e 72×72 !
Buona programmazione 😉
11 Novembre 2010
ikarowebAl momento non è universal, sto cercando di capire come fare per renderla universal.
13 Novembre 2010
ikarowebe per ottimizzare la grafica di una tabella?
ad esempio io ho creato una cella personalizzata con tanto di sfondo e icone, che dimensioni devo dare alla cella e alle icona per renderla compatibile con il retina?
grazie
21 Novembre 2010
RagazzettoScusami ikaroweb mi ero perso la domanda :
in ogni caso mi cogli un po impreparato :-/ per l’ icona prova a dargli una dimensione ” doppia ” ( ad esempio se l’ icona è 40×40 fanne una 80×80 e nominala nomeicona@2x.png ), per la cella non so darti risposta certa !
Prova a postare la domanda sul forum !
18 Agosto 2011
MajaProgrammando il interamente con flash sapete se cè possibilità di far scegliere per la risoluzione Retina tramite action
19 Agosto 2011
RagazzettoSincerante non so risponderti ! Sorry
Ma una domanda te la faccio io : ma se dici di programmare completamente in flash cosa te ne importa di ottimizzare la grafica per un dispositivo che non supporta il flash ?