{"id":9253,"date":"2012-07-23T12:29:42","date_gmt":"2012-07-23T10:29:42","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=9253"},"modified":"2012-07-23T12:29:42","modified_gmt":"2012-07-23T10:29:42","slug":"04-sprite-e-texture-atlas-sprite-sheets-animiamo-in-nostri-personaggi","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/04-sprite-e-texture-atlas-sprite-sheets-animiamo-in-nostri-personaggi\/","title":{"rendered":"04. Sprite e texture atlas (sprite sheets): animiamo in nostri personaggi"},"content":{"rendered":"

\"corso-programmazione-videogame-cocos2d-04\"<\/a> Titolo piuttosto criptico oggi, ma di cosa stiamo parlando? Delle texture atlas (aka sprite sheets), probabilmente il pi\u00f9 importante strumento per migliorare le performance dei nostri videogiochi. Ma prima di addentrarci e scoprire di cosa si tratta esattamente facciamo una piccola premessa, che ci aiuter\u00e0 a capire quale problema andiamo a risolvere con questo strumento.<\/p>\n

Ricordate la precedente lezione<\/a>? Nell’esercizio avevamo aggiunto una sola sprite e le prestazioni non ne avevano minimamente risentito, ma cosa accadrebbe se provassimo a caricare un discreto numero di sprite? Ve lo dico io: il gioco diventerebbe ingiocabile!<\/p>\n

A scopo dimostrativo ho modificato il codice scritto nella lezione 3 creando non una, ma 50 sprite posizionate in maniera random in una zona dello schermo.<\/p>\n

Come potete notare dall’immagine qui sotto le prestazioni sono notevolmente calate, soprattutto considerando che quelle sprite sono fisse e non vengono animate!<\/p>\n


\n\"animare-sprite-texture-atlas-sprite-sheets-cocos2d-01\"<\/a>
\n<\/center><\/p>\n

Un’aspetto che non si riesce ad “apprezzare” da questa immagine \u00e8 il notevole aumento del tempo di caricamento del gioco: in fase di avvio, per diversi secondi, il framerate \u00e8 stato di 5\/7 fps… e tutto questo sul simulatore!<\/p>\n

Pensate a cosa accadrebbe su un dispositivo magari vecchiotto come un iPhone 3.<\/p>\n

Ma perch\u00e9 questo degrado? Per capirlo a fondo dovremmo conoscere cosa succede al livello di OpenGL ES, ma visto che stiamo usando Cocos2d proprio per evitare di addentrarci in questa tecnologia, ci baster\u00e0 sapere che la creazione di molte sprite, ciascuna con la sua immagine, introduce un notevole overhead dovuto al caricamento del file immagine dal disco in memoria. Sarebbe comodo poter usare un unico file cos\u00ec da minimizzare questo overhead, ed \u00e8 infatti l’idea che sta alla base delle texture atlas (vengono chiamate anche sprite sheet).<\/p>\n

Ma cos’\u00e8 una texture atlas?<\/h4>\n

Una texture atlas \u00e8 un’immagine dove sono state inserite, una di fianco all’altra, tutte le immagini di un personaggio o di una scena, come potete vedere in questa figura:<\/p>\n


\n\"animare-sprite-texture-atlas-sprite-sheets-cocos2d-02\"<\/a>
\n<\/center><\/p>\n

Anche in questo caso sta al programmatore decidere quali immagini inserire all’interno di una texture, ovviamente cercando di raggruppare immagini da utilizzare nello stesso contesto.<\/p>\n

Le dimensioni contano<\/h4>\n

Le dimensioni contanto! Chi dice il contrario… non ha mai avuto a che fare con lo sviluppo di videogiochi! Se non fosse chiaro sto parlando della dimensione delle sprite, che ha un impatto notevole sul consumo di memoria dei nostri device.<\/p>\n

Come se la memoria non fosse gi\u00e0 preziosissima, sui “vecchi” device (parliamo di iPhone 3) \u00e8 presente una limitazione che impone il caricamento in memoria solo immagini la cui dimensione sia una potenza di due. Se ad esempio la vostra sprite misura 129×129 pixel in memori\u00e0 sar\u00e0 rappresentata da una immagine 256×256.<\/p>\n

Cocos2d include delle funzionalit\u00e0 per gestire correttamente anche le sprite con dimensione non potenza di due (NPOT) ma questa opzione deve essere abilitata specificatamente.<\/p>\n

Nel file ccConfig.h sono presenti alcune direttive al compilatore, quella che ci interessa \u00e8:<\/p>\n

\r\n#ifndef CC_TEXTURE_NPOT_SUPPORT\r\n#define CC_TEXTURE_NPOT_SUPPORT 1\r\n#endif\r\n<\/pre>\n
Nel vostro caso dovrebbe essere 0, portatela quindi ad 1 e leggete con attenzione il commento, scoprirete che questa opzione verr\u00e0 abilitata di default sulla prossima release di cocos2d, ottima notizia!.<\/p>\n
Come creare una texture atlas (o sprite sheets)<\/h4>\n
Ma come si pu\u00f2 generare una texture atlas come quella che abbiamo appena visto? Esistono decine di programmi per farlo e volendo lo si potrebbe fare anche “a mano” perch\u00e9 quello che serve \u00e8 mettere le immagini affiacate in un’unica immagine ed annotare per ciascuna immagine l’origine (in termini di pixel).. un lavoraccio!<\/p>\n
Utilizziamo quindi un programma che si chiama Zwoptex<\/strong> (http:\/\/zwopple.com\/zwoptex\/<\/a>). Questo programma non \u00e8 gratuito ma il costo \u00e8 veramente basso e anche nella sua versione non-registrata permette di rispondere alle esigenze pi\u00f9 comuni.<\/p>\n
Scarichiamolo quindi dal sito e avviamolo, si aprir\u00e0 quindi una finestra in cui dovremo cliccare su “Create a new document”:<\/p>\n

\n\"animare-sprite-texture-atlas-sprite-sheets-cocos2d-03\"<\/a>
\n<\/center><\/p>\n
L’interfaccia del programma non \u00e8 complessa, ma a prima vista potrebbe disorientare.
\nIniziamo con l’importare delle immagini che abbiamo precedentemente realizzato cliccando sul pulsante “import”. Se volete potete scaricare le immagini da utilizzare da QUESTO indirizzo (io ho le ho recuperate da questo sito: http:\/\/www.retrogamezone.co.uk\/doremifantasy.htm<\/a>) e sono state rippate da un videogioco che si chiama DoReMi Fantasy<\/a>.<\/p>\n

\n\"animare-sprite-texture-atlas-sprite-sheets-cocos2d-04\"<\/a>
\n<\/center><\/p>\n
Come potete notare le immagini appena importate sono visibili nell’elenco sulla destra, mentre nell’immagine al centro appaiono tutte sovrapposte. Assicuriamoci quindi che la dimensione del documento sia adeguata a contenere tutte le nostre sprite (nell’esempio ho selezionato 128×128) e clicchiamo sul pulsante “layout”. Il risultato dovrebbe essere quello visibile in figura:<\/p>\n

\n\"animare-sprite-texture-atlas-sprite-sheets-cocos2d-05\"<\/a>
\n<\/center><\/p>\n
Tra le varie opzioni di questo programma forse la pi\u00f9 importante \u00e8 accessibile dalla checkbox “trimmed”, che permette di eliminare (se presente) l’area trasparente intorno alle nostre sprite cos\u00ec da diminuire lo spazio occupato e permettere l’overlapp di pi\u00f9 sprite. Questa opzione per\u00f2 non cambier\u00e0 le dimensioni a runtime della nostra sprite perch\u00e9 Zwoptex memorizza la quantit\u00e0 di pixel che ha eliminato e la reinserisce a runtime cos\u00ec che possiamo gestire il tutto come se niente fosse accaduto.<\/p>\n
Abilitiamo quindi l’opzione e vedremo che ora il programma riesce a far stare 5 immagini da 32×32 pixel in un’unica riga da 64 pixel!<\/p>\n
Eliminando anche “borderpadding” e “sprite spacing” arrivo a contenere il tutto in un’unica texture atlas da 64×32 pixel, non male!<\/p>\n

\n\"animare-sprite-texture-atlas-sprite-sheets-cocos2d-06\"<\/a>
\n<\/center><\/p>\n
A questo punto possiamo esportare il frutto del nostro lavoro, che consister\u00e0 in un’immagine png ed un file *.plist contenente tutte le informazioni per recuperare la singola sprite.<\/p>\n
Clicchiamo su “Publish Settings” e configuriamo tutto come visibile in questa immagine:<\/p>\n

\n\"animare-sprite-texture-atlas-sprite-sheets-cocos2d-07\"<\/a>
\n<\/center><\/p>\n
Clicchiamo su “Done” e infine su “Publish” per esportare il nostro lavoro.
\nIl risultato \u00e8 composto da questi due file:<\/p>\n

\n\"animare-sprite-texture-atlas-sprite-sheets-cocos2d-08\"<\/a>
\n<\/center><\/p>\n
Come si pu\u00f2 ben vedere il file plist contiene le informazioni necessarie per recuperare e ricostruire le singole sprite.<\/p>\n
Animiamo la nostra sprite<\/h4>\n
Per imparare ad usare le texture atlas creeremo un nuovo progetto cocos2d in cui animeremo la nostra piccola DoReMi posizionandola al centro dello schermo.<\/p>\n
Procediamo quindi (come abbiamo gi\u00e0 fatto altre volte) con la creazione di un nuovo progetto cocos2s, che io ho chiamato “LearnAtlas”.<\/p>\n
Copiamo all’interno del progetto i due files prodotti da Zwoptex trascinandoli sul Navigator di XCode (l’elenco delle risorse a sinistra).<\/p>\n
Esaminiamo il metodo init della classe HelloWorldLayer ed eliminiamo tutto il codice riguardante la creazione della label, al suo posto visualizzeremo la nostra animazione.
\nVediamo come di consueto il codice nella sua interezza e a seguire la spiegazione:<\/p>\n
\r\n-(id) init\r\n{\r\n        if( (self=[super init])) {\r\n       \r\n        [[CCSpriteFrameCache  sharedSpriteFrameCache] addSpriteFramesWithFile:@\"run_default.plist\"];     \/\/1\r\n        NSMutableArray *runningFrame = [NSMutableArray array];\r\n        for(int i = 0; i < 4; ++i) {\r\n            [runningFrame addObject:\r\n             [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:\r\n              [NSString stringWithFormat:@\"run_000%d.png\", i]]];\r\n        }  \/\/2\r\n       \r\n        CCAnimation *runningAnimation = [CCAnimation\r\n                                 animationWithFrames:runningFrame delay:0.15f];  \/\/3\r\n     \r\n        CCSprite *doremiSprite = [CCSprite spriteWithSpriteFrameName:@\"stay.png\"];\r\n        CGSize s = [[CCDirector sharedDirector] winSize];\r\n        [doremiSprite setPosition:CGPointMake(s.width \/ 2, s.height \/ 2)];        \/\/4\r\n        CCAction *walkAction = [CCRepeatForever actionWithAction:                           [CCAnimate actionWithAnimation:runningAnimation restoreOriginalFrame:NO]];        \/\/5\r\n[doremiSprite runAction:walkAction]; \/\/6\r\n        [self addChild:doremiSprite];   \/\/7             \r\n        }\r\n        return self;\r\n}\r\n<\/pre>\n
1. Aggiungiamo al singleton CCSpriteFrameCache il file plist generato da Zwoptex
\n2. Creiamo un array contenente 4 sprite, ciascuna sprite \u00e8 recuperata proprio dal singleton CCSpriteFrameCache attraverso il metodo spriteFrameByName: al quale bisogna passare il nome dell'immagine originale che abbiamo inserito dentro la texture atlas. In questo caso le immagini si chiamano run_0000.png, run_0001.png etc.
\n3. Creiamo un'animazione utilizzando i frame inseriti nell'array e inserendo un delay di 0.15 secondi tra un frame ed il successivo
\n4. Creiamo la sprite della piccola DoReMi utilizzando l'imagine stay.png che la mostra frontalmente. Questa immagine \u00e8 recuperata come le altre dalla texture atlas.
\n5. Creiamo l'azione che ripeter\u00e0 indefinitivamente l'animazione definita al passo 3
\n6. Assegniamo l'azione alla nostra sprite
\n7. Aggiungiamo la sprite alla nostra scena.<\/p>\n
Il risultato sar\u00e0 questa sprite che sgambetta felice al centro del nostro schermo:<\/p>\n

\n\"animare-sprite-texture-atlas-sprite-sheets-cocos2d-09\"<\/a>
\n<\/center><\/p>\n
Nella prossima lezione approfondiremo il comportamento delle sprite imparando ad eseguire le azioni sulle sprite stesse. Per qualsiasi dubbio o chiarimento vi invito a postare sul nostro forum nell'apposita sezione<\/a> dedicata al corso di cocos2d.<\/p>\n
Alla prossima<\/p>\n","protected":false},"excerpt":{"rendered":"
Titolo piuttosto criptico oggi, ma di cosa stiamo parlando? Delle texture atlas (aka sprite sheets), probabilmente il…<\/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":[1158,1157,1154,1156,1160,1155,1159],"class_list":["post-9253","post","type-post","status-publish","format-standard","hentry","category-corso-programmazione-videogiochi","tag-animare-personaggio-gioco-cocos2d","tag-animare-sprite-cocos2d","tag-sprite","tag-sprite-sheets","tag-sprite-sheets-cocos2d","tag-texture-atlas","tag-zwoptex"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9253","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=9253"}],"version-history":[{"count":17,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9253\/revisions"}],"predecessor-version":[{"id":9282,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9253\/revisions\/9282"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=9253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=9253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=9253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}