Avete quindi deciso di imparare a creare giochi per iPhone e iPad, bene! Vi attende un po’ di studio, ma anche tanto tanto divertimento.

Lo sviluppo di un videogioco richiede tante competenze diverse: servono dei disegnatori, degli esperti di audio e dei creatori di contenuti; oltre che, ovviamente, dei bravi programmatori. Al programmatore sono richieste competenze non indifferenti perché se si vuol realizzare un videogioco da zero bisogna muoversi agevolmente con OpenGL ES e con tutti i framework di basso livello relativi al multimedia come OpenAL. Lavorare con queste tecnologie non è semplicissimo, ma fortunatamente (il corsivo è d’obbligo perché non si tratta di fortuna, il tutto è reso possibile da gente che ci lavora tutti i giorni) esistono alcuni framework che fanno per noi il lavoro più duro e ci permettono di creare videogiochi con semplicità e senza necessariamente conoscere OpenGL ES o avere a che fare con complicati calcoli di fisica.

In queste lezioni tratteremo Cocos2d, più precisamente la sua versione per il sistema operativo iOS che si chiama cocos2d for iPhone. Si tratta di un framework open source per la creazione di videogiochi che comprende una lunga serie di strumenti che vanno dalla gestione delle scene, dei menù, delle transazioni, la gestione dell’audio e molto altro ancora.

Il progetto non è nato però per questa piattaforma, nasce infatti per python, ma ha conosciuto il successo proprio grazie alla diffuzione dei device Apple.

Attualmente esistono porting di cocos2d anche per atri linguaggi come Ruby e Java (Android).
Tra i numerosi vantaggi presenti nell’utilizzare un framework come cocos2d va sottolineato che il suo sorgente, lavorando con OpenGL ES, viene eseguito dalla GPU e questo è molto importante perché lascia la CPU libera di fare altro mentre tutto il carico di lavoro derivante dalle animazioni viene asseganto alla scheda grafica.

Il progetto ha il suo sito ufficiale: http://www.cocos2d-iphone.org/ dove potete trovare una folta community di sviluppatori, tante guide http://www.cocos2d-iphone.org/wiki/doku.php/ e un’elenco delle applicazioni realizzate con questo framework http://www.cocos2d-iphone.org/games.

Alcuni giochi elencati, diciamolo francamente, farebbero venire voglia di abbandonare lo studio, ma ci sono anche tanti capolavori come il recente “The Numberlys” (App Store) oppure Zombie Smash (App Store) che sono state rispettivamente “app of the week” e “top paid app”.

Installazione

Potete trovare l’ultima release del framework sul sito ufficiale del progetto http://www.cocos2d-iphone.org/ nella sezione relativa ai Download. Il consiglio è come sempre quello di utlizzare la versoine definita “stable” lasciando le versioni unstable solo agli utenti più esperti che hanno voglia di provare delle nuove caratteristiche.

Al momento in cui scrivo la release stabile è la 1.0.1. Scarichiamo il file cocos2d-iphone-1.0.1.tar.gz in una cartella del nostro sistema operativo e scopattiamolo con un semplice doppio click, verrà creata la cartella cocos2d-iphone-1.0.1

Se avete voglia di vedere come può essere gestito un progetto complesso come cocos2d aprite il file cocos2d.xcworkspace, ma attenti a non modificare nulla! Il progetto Cocos2d-ios ha ben 67 targets, molti dei quali sono test (ricordate il nostro articolo su Unit-test, vero?). Assicuratevi di non aver modificato nulla e chiudete il progetto, passeremo adesso all’installazione.

Molti framework vengono distribuiti semplicemente come un insieme di file .h e .m da trascinare all’interno dei nostri progetti, ma vista la particolarità di questo framework viene fornito un programma che permette di aggiungere tre nuovi template ad XCode.
Il programma si chiama install-templates.sh ed è uno script bash. Per eseguirlo non dovete cliccarci sopra, ma bisogna eseguirlo da riga di comando.

Mi auguro che tutti i lettori di questo corso sappiano che cosa sia la riga di comando, perché non si può realmente dire di conoscere un sistema operativo se non si è in grado di usarlo esclusivamente attraverso questo sistema. Estremismi a parte avviamo l’applicazione “terminale” e spostiamoci all’interno della cartella cocos2d-iphone-1.0.1. Per verificare in quale cartella ci si trova basta digitare il comando “pwd”, mentre per spostarsi nella cartella “prova” il comando da digitare è “cd prova”.
Quando siamo all’interno della cartella giusta assicuriamoci che xcode non sia aperto e digitiamo

sudo ./install-templates.sh

(occhio al punto prima dello slash)

Quando la procedura sarà terminata possiamo aprire XCode e, se tutto è andato a buon fine, vedremo una nuova sezione con tre nuovi template:

Il primo ci permetterà di creare un progetto base che utilizza cocos2d, il secondo oltre ad usare cocos utilizza anche il motore di simulazione fisica box2d. Il terzo è simile al secondo, ma al posto di utilizzare box2d utilizza chipmunk. Vedremo qualche differenza sui due framework più avanti nel corso.

Hello world

Creiamo adesso il primo progetto con cocos2d: il classico “hello world”.
Avviamo XCode, scegliamo di creare un nuovo progetto e selezioniamo la categoria “cocos2d”. In questo momento non ci servirà nessun motore fisico quindi scegliamo il template “cocos2d”.
Diamo un nome al progetto e salviamolo in una cartella sul nostro disco.
La creazione del progetto termina qui, infatti possiamo già eseguire il progetto sul simulatore

per verificare che tutto funzioni.
Una volta in esecuzione il progetto mostra questa interfaccia:

Il numero visibile nell’angolo in basso a sinistra indica il framerate corrente, cioè il numero di frame visibili in un secondo. Chiaramente i frame non sono divisibili quindi quel valore non deve essere considerato come “59 frame e 7 decimi di frame” ma piuttosto “il frame è rimasto visibile per 1 / 59.7 secondi”.

Ci si potrebbe chiedere come mai il framerate non sia stabile su 60 considerata la semplicità dell’interfaccia del “gioco”; una risposta esaustiva richiederebbe un’approfondimento non banale sui sistemi operativi, qui possiamo dire che il framerate oscilla perché il sistema operativo iOS non è un sistema operativo realtime e l’esecuzione dei processi è demandata ad un componente chiamato “schedulatore”. Lo schedulatore interrompe ciclicamente l’esecuzione del nostro processo per eseguire tutti gli altri processi del sistema operativo e queste interruzioni durano per un tempo brevissimo ma non prevedibile. Per questo motivo alcuni frame possono impiegare più tempo di altri ad essere aggiornati portando il framerate ad un valore leggermente più basso di quanto fissato. Ma non vi illudete, se nel vostro gioco il framerate scende a 15 fps non date la colpa allo schedulatore 😉 quella è solo colpa della complessità del vostro gioco!

Non impostate mai valori più alti di 60 perché sarebbe inutile, lo schermo dell’iphone ha una frequenza di aggiornamento fissata a 60Hz quindi non sarebbero visibili aggiornamenti con una maggiore frequenza. Inoltre in alcuni casi può essere più utile mantenere un framerate più basso, ma costante, piuttosto che uno altalenante.

Hello world in dettaglio

Non possiamo però concludere in questo modo il nostro approccio con il primo progetto cocos2d, vogliamo infatti vedere nel dettaglio com’è fatto questo template e come funziona.
Se diamo un’occhiata all’elenco delle risorse che sono state create vediamo davvero un gran numero di framework e di librerie importate, è stato proprio un bene avere un template, non credete?

Lasciamo lì le librerie e diamo uno sguardo all’elenco dei file:

• AppDelegate.h /.m Questo è l’app delegate dell’applicazione, non dimentichiamo che anche se stiamo usando cocos2d un’applicazione iPhone è sempre un’applicazione iPhone quindi necessita dell’AppDelegate. I metodi di questa classe sono gli stessi delle applicazioni standard, ma la loro implementazione è particolare quindi la vedremo in dettaglio.
• RootViewController.h /.m Questo è il principale (nonché unico) viewcontroller presente in tutta l’applicazione. Le diverse schermate del gioco non vengono gestite con più viewcontrollers ma con le scene quindi anche in progetti più grossi non sarà necessario avere altri viewcontrollers. In questo viewcontroller è stato fatto l’override dei metodi che si occupano della rotazione dello schermo. La rotazione dello schermo è un processo piuttosto oneroso in termini di risorse quindi sono state pensate più possibilità: nessuna rotazione per i device vecchi, rotazione gestita dal viewcontroller e rotazione gestita dal Director (ancora non sappiamo cos’è). Di default troverete le impostazioni per far eseguire la rotazione al viewcontroller, che è un’ottima impostazione per device di ultima generazione. Suggerisco di lasciare questa impostazione per il momento.
• HelloWorldLayer.h /.m Il primo layer del nostro gioco. Parleremo più avanti dei layer e della loro creazione, ma potete immaginarli come i livelli di photoshop, sono delle aree trasparendi su cui disegnare gli elementi del nostro gioco. Una volta sovrapposti visualizzeranno il gioco nella sua interezza.
• GameConfig.h si tratta di un file di intestazione (non è presente il .m) dove sono dichiarate molte costanti per la configurazione del gioco.

Il ciclo di vita

Esaminando il progetto d’esempio possiamo notare che per quando riguarda il file main.m non ci sono modifiche rispetto ad un’applicazione standard. Possiamo però notare che non è presente il supporto ARC.
La “magia” avviene invece all’interno del metodo dell’AppDelegate applicationDidFinishLaunching:
guardiamolo quindi in dettaglio:

- (void) applicationDidFinishLaunching:(UIApplication*)application
{
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; //1
        
if( ! [CCDirector setDirectorType:kCCDirectorTypeDisplayLink] ) //2
                [CCDirector setDirectorType:kCCDirectorTypeDefault];
CCDirector *director = [CCDirector sharedDirector]; //3
viewController = [[RootViewController alloc] initWithNibName:nil bundle:nil]; //4
viewController.wantsFullScreenLayout = YES;
        
EAGLView *glView = [EAGLView viewWithFrame:[window bounds]  
pixelFormat:kEAGLColorFormatRGB565
depthFormat:0
];  //5
        
[director setOpenGLView:glView]; //6
        
[director setDeviceOrientation:kCCDeviceOrientationPortrait]; //7
[director setAnimationInterval:1.0/60]; //8
[director setDisplayFPS:YES]; //9
        
        
[viewController setView:glView]; //10
        
[window addSubview: viewController.view]; //11
        
[window makeKeyAndVisible]; //12
        
[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGBA8888]; //13
[self removeStartupFlicker]; //14
[[CCDirector sharedDirector] runWithScene: [HelloWorldLayer scene]]; //15
}

# 1 Il metodo inizia come di consueto allocando un oggetto UIWindow che costituirà la window principale dell’applicazione.
# 2 Verifica se è possibile utilizzare le API CADDisplayLink (Apple CADisplayLink Class Reference) disponibile solo da iOS 3.1 in poi.
# 3 Instanzia un oggetto singleton della classe CCDirector. Questa classe, come un vero e proprio regista si occupa di gestire il passaggio tra le varie scene del gioco.
# 4 Inizializza il viewcontroller principale.
# 5 Crea una EAGLView: un oggetto utilizzato da cocos2d per visualizzare oggetti OpenGL.
# 6 Comunica al director qual è la EAGLView da utilizzare.
# 7 Qui ho rimosso la parte di codice che non verrebbe compilata con le opzioni di default, comunichiamo al director l’orientamento del device.
# 8 Impostiamo il framerate desiderato.
# 9 Scegliamo di visualizzare il valore corrente dell’FPS, utilissimo in fase di testing mostra infatti il numero in basso a sinistra che abbiamo visto nella foto precedente.
# 10 – 11 – 12 Operazioni comuni con la window e con il viewcontroller.
# 13 Settiamo il valore delle texture da utilizzare.
# 14 Elimina il flick se l’applicazione deve avviarsi solo in landscape. Viceversa avremmo inizialmente una visione in portait che viene subito cambiata da una in landscape.
# 15 Comunichiamo al director di visualizzare la scena della classe HelloWorldLayer, scena che viene richiamata tramite il metodo di classe scene.

Conclusioni

In questa lezione abbiamo imparato dove ottenere l’utlima versione di cocos2d e dove ricevere supporto. Abbiamo visto qualche esempio di applicazione realizzata con questo framework e infine abbiamo creato il primo progetto “hello world” analizzandolo in dettaglio.
Vedremo nella prossima lezione come apportare le prime modifiche al progetto per visualizzare ed animare i primi oggetti del gioco.