{"id":9197,"date":"2012-07-07T10:04:01","date_gmt":"2012-07-07T08:04:01","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=9197"},"modified":"2012-07-07T10:04:01","modified_gmt":"2012-07-07T08:04:01","slug":"02-scopriamo-la-struttura-di-un-videogioco-cocos2d-e-creiamo-la-nostra-prima-animazione","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/02-scopriamo-la-struttura-di-un-videogioco-cocos2d-e-creiamo-la-nostra-prima-animazione\/","title":{"rendered":"02. Scopriamo la struttura di un videogioco cocos2d e creiamo la nostra prima animazione"},"content":{"rendered":"

\"Corso<\/a> 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\u00f2 funzioni all’interno dei un’applicazione cocos2d.
\nUn videgioco, nella terminologia cocos2d, \u00e8 costituito da diverse scene, tutte istanze della classe CCScene<\/strong>. Come nel caso dei viewController, sta allo stile del programmatore decidere cosa appartiene ad una scena oppure ad un’altra. Di solito il men\u00f9 principale, i livelli, e le animazioni tra i livelli vengono considerate scene diverse.<\/p>\n


\n\"corso-cocos2d-struttura-di-un-videogioco-animare-sprite-01\"<\/a>
\n<\/center><\/p>\n

Il director (classe CCDirector<\/strong>) \u00e8 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\u00e0, la classe \u00e8 stata creata seguendo il pattern singleton. Questo significa che da tutta l’applicazione baster\u00e0 richiamare il metodo:<\/p>\n

\r\nCCDirector *director = [CCDirector sharedDirector];\r\n<\/pre>\n
per ottenere un riferimento all’unica istanza presente in tutta l’applicazione.<\/p>\n
Ciascuna scena \u00e8 costituita da diversi layer (classe CCLayer<\/strong>) che possono essere aggiunti alla scena come “child” allo stesso modo di come una UIView pu\u00f2 avere delle altre UIView come subview.<\/p>\n
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\u00ec risultati molto particolari.<\/p>\n

\n\"corso-cocos2d-struttura-di-un-videogioco-animare-sprite-02\"<\/a>
\n<\/center><\/p>\n
Su ciascun layer si trovano gli oggetti con i quali interagiremo pi\u00f9 spesso, le sprite (classe CCSprite<\/strong>). Le sprite sono spesso costituite da immagini png, che possono essere animate e possono eseguire moltissime azioni, che vedremo pi\u00f9 avanti in questo corso.<\/p>\n
Ma qual \u00e8 la gerarchia delle classi che abbiamo appena visto? Alla base di tutto c’\u00e8 la classe CCNode<\/strong>, che rappresenta un concetto astratto di oggetto posizionato sullo schermo. Un CCNode non \u00e8 direttamente visualizzabile sullo schermo, ma fa da superclass a tutto il resto.
\nEreditano infatti direttamente dalla classe CCNode tutte e tre le altre classi che abbiamo appena visto:  CCLayer, CCScene e CCSprite.<\/p>\n

\n\"corso-cocos2d-struttura-di-un-videogioco-animare-sprite-03\"<\/a>
\n<\/center><\/p>\n
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?<\/p>\n
La risposta \u00e8 che in questo primo esempio non \u00e8 stata necessaria la creazione di una scena specifica ed infatti \u00e8 presente un metodo di classe +(CCScene *)scene<\/strong> all’interno della classe “HelloWorldLayer”, che si occupa di istanziarne una generica.<\/p>\n
Ricordate la riga di codice che visualizza la prima scena del progetto hello world?<\/p>\n
\r\n[[CCDirector sharedDirector] runWithScene: [HelloWorldLayer scene]];\r\n<\/pre>\n
Qui \u00e8 visibile l’approccio, forse non chiarissimo, usato da questo progetto: il director chiede alla classe “HelloWorldLayer” (che \u00e8 un layer) la scena da visualizzare.<\/p>\n
Il codice del metodo +(CCScene *)scene<\/strong> \u00e8 il seguente<\/p>\n
\r\n+(CCScene *) scene\r\n{\r\nCCScene *scene = [CCScene node]; \/\/1\r\nHelloWorldLayer *layer = [HelloWorldLayer node]; \/\/2\r\n[scene addChild: layer];        \/\/3\r\nreturn scene;                \/\/4\r\n}\r\n<\/pre>\n
#1 Creiamo un’istanza di una generica scena attraverso il metodo di classe node. Il metodo node non \u00e8 dichiarato nella classe CCSCene, ma e un metodo della classe CCNode e, potenza della ereditariet\u00e0, possiamo usarlo anche in questo caso. Andate pure a guardare il codice, vi accorgerete che \u00e8 solo un alloc-init-autorelease.<\/p>\n
#2 Creiamo una istanza del layer, utilizzando sempre il metodo node. Anche in questo caso \u00e8 possibile perch\u00e9 CCLayer eredita da CCNode.<\/p>\n
#3 Aggiungiamo il layer come “child” alla scena.<\/p>\n
#4 Il metodo ritorna la scena appena creata.<\/p>\n
Per divertirci un po’ proviamo a modificare questo progetto. Inseriamo la prima sprite e animiamola! Non ci crederete, basteranno davvero pochissime rige di codice!<\/p>\n
Salvate l’immagine che vedete qui:<\/p>\n

\n\"corso-cocos2d-struttura-di-un-videogioco-animare-sprite-04\"<\/a>
\n<\/center><\/p>\n
e copiatela all’interno della cartella “resources” del progetto “hello world”.<\/p>\n
Una precisazione, questa immagine \u00e8 pensata per essere usata su iPhone privi di retina display, perch\u00e9 se usassi un simulatore con il retina avrei problemi ad inserire gli screenshot.<\/p>\n
Modificate il codice del metodo -(id)init<\/strong> della classe “HelloWorldLayer”. Questo metodo viene richiamato quando si inizializza il livello (riga 2 del precedente codice) e come si pu\u00f2 intuire da queste righe:<\/p>\n
\r\nCCLabelTTF *label = [CCLabelTTF labelWithString:@\"Hello World\" fontName:@\"Marker Felt\" fontSize:64];\r\nCGSize size = [[CCDirector sharedDirector] winSize];\r\nlabel.position =  ccp( size.width \/2 , size.height\/2 );\r\n[self addChild: label];\r\n<\/pre>\n
disegna a video il testo Hello World usando una istanza della classe CCLabelTTF<\/strong> (che vedremo pi\u00f9 avanti). Sostituite le righe precedenti con queste:<\/p>\n
\r\nCGSize size = [[CCDirector sharedDirector] winSize]; \/\/1\r\nCCSprite *zepppelin = [CCSprite spriteWithFile:@\"zeppelindevapp.png\"]; \/\/2\r\n[zepppelin setPosition:ccp(size.width + zepppelin.boundingBox.size.width,size.height \/ 2)]; \/\/3\r\n[self addChild:zepppelin]; \/\/4\r\nid moveAction = [CCMoveTo actionWithDuration:5.0f position:ccp(-1 * zepppelin.boundingBox.size.width, size.height\/2)]; \/\/5\r\n[zepppelin runAction:moveAction]; \/\/6\r\n<\/pre>\n
Vediamo cosa abbiamo appena fatto:<\/p>\n
#1 Otteniamo la dimensione dello schermo dal director
\n#2 Creiamo la sprite utilizzando l’immagine png che abbiamo scaricato.
\n#3 Impostiamo la posizione iniziale della sprite, il metoso “setPosition” modifica la posizione del centro della sprite.
\n#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.
\n#5 Eseguiamo l’azione.<\/p>\n
Il risultato non sar\u00e0 ancora un gioco in grado di assicurarci fama e gloria, ma per aver scritto solo due righe di codice il risultato non \u00e8 niente male \ud83d\ude09<\/p>\n
Alla prossima lezione!<\/p>\n

\n\"corso-cocos2d-struttura-di-un-videogioco-animare-sprite-05\"<\/a>
\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
Nella precedente lezione abbiamo esaminato il codice generato dal templare di cocos2d e abbiamo introdotto tanti termini…<\/p>\n","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1119],"tags":[1147,1142,1143,1145,1141,1144,1146],"class_list":["post-9197","post","type-post","status-publish","format-standard","hentry","category-corso-programmazione-videogiochi","tag-animazioni-cocos2d","tag-ccdirector-cocos2d","tag-cclayer-cocos2d","tag-ccnode-cocos2d","tag-ccscene-cocos2d","tag-ccsprite-cocos2d","tag-struttura-di-un-videogame"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=9197"}],"version-history":[{"count":7,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9197\/revisions"}],"predecessor-version":[{"id":9210,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9197\/revisions\/9210"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=9197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=9197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=9197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}