Nella precedente lezione abbiamo esaminato il codice generato dal templare di cocos2d e abbiamo introdotto tanti termini come scena, layer, director, ma non abbiamo dato una spiegazione organica di come tutto ciò funzioni all’interno dei un’applicazione cocos2d.
Un videgioco, nella terminologia cocos2d, è costituito da diverse scene, tutte istanze della classe CCScene. Come nel caso dei viewController, sta allo stile del programmatore decidere cosa appartiene ad una scena oppure ad un’altra. Di solito il menù principale, i livelli, e le animazioni tra i livelli vengono considerate scene diverse.

Il director (classe CCDirector) è il regista che, come nel cinema, si occupa di passare da una scena alla successiva. In ogni applicazione cocos2d troviamo un solo director e, per comodità, la classe è stata creata seguendo il pattern singleton. Questo significa che da tutta l’applicazione basterà richiamare il metodo:

CCDirector *director = [CCDirector sharedDirector];

per ottenere un riferimento all’unica istanza presente in tutta l’applicazione.

Ciascuna scena è costituita da diversi layer (classe CCLayer) che possono essere aggiunti alla scena come “child” allo stesso modo di come una UIView può avere delle altre UIView come subview.

I layer sono anche gli oggetti che si occupano di gestire gli eventi touch e l’accelerometro. Possono essere associate inoltre delle azioni o particolari effetti ad un intero lager, ottenendo così risultati molto particolari.

Su ciascun layer si trovano gli oggetti con i quali interagiremo più spesso, le sprite (classe CCSprite). Le sprite sono spesso costituite da immagini png, che possono essere animate e possono eseguire moltissime azioni, che vedremo più avanti in questo corso.

Ma qual è la gerarchia delle classi che abbiamo appena visto? Alla base di tutto c’è la classe CCNode, che rappresenta un concetto astratto di oggetto posizionato sullo schermo. Un CCNode non è direttamente visualizzabile sullo schermo, ma fa da superclass a tutto il resto.
Ereditano infatti direttamente dalla classe CCNode tutte e tre le altre classi che abbiamo appena visto: CCLayer, CCScene e CCSprite.

Torniamo adesso a guardare il codice prodotto nel progetto della lezione precedente, il classico “hello world”. Riconosciamo subito la classe “HelloWorldLayer” e dovrebbe sorprenderci l’assenza di una classe che erediti da CSScene, come mai?

La risposta è che in questo primo esempio non è stata necessaria la creazione di una scena specifica ed infatti è presente un metodo di classe +(CCScene *)scene all’interno della classe “HelloWorldLayer”, che si occupa di istanziarne una generica.

Ricordate la riga di codice che visualizza la prima scena del progetto hello world?

[[CCDirector sharedDirector] runWithScene: [HelloWorldLayer scene]];

Qui è visibile l’approccio, forse non chiarissimo, usato da questo progetto: il director chiede alla classe “HelloWorldLayer” (che è un layer) la scena da visualizzare.

Il codice del metodo +(CCScene *)scene è il seguente

+(CCScene *) scene
{
CCScene *scene = [CCScene node]; //1
HelloWorldLayer *layer = [HelloWorldLayer node]; //2
[scene addChild: layer];        //3
return scene;                //4
}

#1 Creiamo un’istanza di una generica scena attraverso il metodo di classe node. Il metodo node non è dichiarato nella classe CCSCene, ma e un metodo della classe CCNode e, potenza della ereditarietà, possiamo usarlo anche in questo caso. Andate pure a guardare il codice, vi accorgerete che è solo un alloc-init-autorelease.

#2 Creiamo una istanza del layer, utilizzando sempre il metodo node. Anche in questo caso è possibile perché CCLayer eredita da CCNode.

#3 Aggiungiamo il layer come “child” alla scena.

#4 Il metodo ritorna la scena appena creata.

Per divertirci un po’ proviamo a modificare questo progetto. Inseriamo la prima sprite e animiamola! Non ci crederete, basteranno davvero pochissime rige di codice!

Salvate l’immagine che vedete qui:

e copiatela all’interno della cartella “resources” del progetto “hello world”.

Una precisazione, questa immagine è pensata per essere usata su iPhone privi di retina display, perché se usassi un simulatore con il retina avrei problemi ad inserire gli screenshot.

Modificate il codice del metodo -(id)init della classe “HelloWorldLayer”. Questo metodo viene richiamato quando si inizializza il livello (riga 2 del precedente codice) e come si può intuire da queste righe:

CCLabelTTF *label = [CCLabelTTF labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64];
CGSize size = [[CCDirector sharedDirector] winSize];
label.position =  ccp( size.width /2 , size.height/2 );
[self addChild: label];

disegna a video il testo Hello World usando una istanza della classe CCLabelTTF (che vedremo più avanti). Sostituite le righe precedenti con queste:

CGSize size = [[CCDirector sharedDirector] winSize]; //1
CCSprite *zepppelin = [CCSprite spriteWithFile:@"zeppelindevapp.png"]; //2
[zepppelin setPosition:ccp(size.width + zepppelin.boundingBox.size.width,size.height / 2)]; //3
[self addChild:zepppelin]; //4
id moveAction = [CCMoveTo actionWithDuration:5.0f position:ccp(-1 * zepppelin.boundingBox.size.width, size.height/2)]; //5
[zepppelin runAction:moveAction]; //6

Vediamo cosa abbiamo appena fatto:

#1 Otteniamo la dimensione dello schermo dal director
#2 Creiamo la sprite utilizzando l’immagine png che abbiamo scaricato.
#3 Impostiamo la posizione iniziale della sprite, il metoso “setPosition” modifica la posizione del centro della sprite.
#4 Creiamo la nostra prima azione, ne vedremo molte altre in seguito, con una sola riga di codice impostiamo la durata (5 secondi) e la posizione da raggiungere.
#5 Eseguiamo l’azione.

Il risultato non sarà ancora un gioco in grado di assicurarci fama e gloria, ma per aver scritto solo due righe di codice il risultato non è niente male 😉

Alla prossima lezione!