{"id":9367,"date":"2012-07-31T10:19:19","date_gmt":"2012-07-31T08:19:19","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=9367"},"modified":"2012-07-31T10:19:19","modified_gmt":"2012-07-31T08:19:19","slug":"5-le-action-in-cocos2d","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/5-le-action-in-cocos2d\/","title":{"rendered":"5. Le action in Cocos2D"},"content":{"rendered":"

\"corso-programmazione-videogame-cocos2d-05\"<\/a> In questa nuova lezione del nostro corso di programmazione videogame in cocos2d<\/strong> approfondiremo un concetto che abbiamo gi\u00e0 incontrato nelle precedenti lezioni ma che, vista l’importanza che riveste, necessita di una lezione tutta sua: le action!<\/p>\n

Le action pemettono di far compiere delle azioni ai CCNode presenti nella nostra applicazione, come rotazioni, ridimensionamenti a molto altro. \u00c8 interessante notare che le action si applicano ai CCNode attraverso il metodo runAction: quindi possiamo indifferentemente applicare un’azione ad una sprite, ad un layer o ad un’intera scena!<\/p>\n

La gerarchia delle classi<\/h4>\n

Per capire bene come gestire ed eseguire le action \u00e8 necessario capire quali sono le classi interessate e la loro gerarchia.<\/p>\n

La radice di tutto \u00e8 la classe CCAction, che mappa il concetto generico di action. CCACtion, infatti, presenta pochissime propriet\u00e0, in quanto viene specializzata da un gran numero di sottoclassi e saranno proprio queste classi che andremo ad utilizzare.
\nIn questo grafico vediamo il primo livello di gerarchia, con la classe CCAction e le prime sottoclassi.<\/p>\n


\n\"ccaction-corso-cocos2d-01\"<\/a>
\n<\/center><\/p>\n

Il grafo completo pu\u00f2 essere visualizzato a questo indirizzo<\/a>.<\/p>\n

Quasi tutte le azioni che andremo ad utilizzare saranno subClass di CCFiniteTimeAction<\/strong>, che mappa il concetto di un’azione e che ha una durata finita nel tempo, come ad esempio uno spostamento oppure una rotazione. In particolare CCFiniteTimeAction ha due sottoclassi, la prima \u00e8 CCActionInterval<\/strong>, mentre la seconda \u00e8 CCActionInstant<\/strong> e dai loro nomi \u00e8 chiaro che si riferiscono alle azioni che durano un certo intervallo di tempo e le animazioni che sono invece instantanee.<\/p>\n

Le rimanenti tre classi (CCFollow, CCRepeatForever, CCSpeed) sono invece delle azioni un p\u00f2 particolari, e le vedremo pi\u00f9 avanti con degli esempi.<\/p>\n

Prepariamo il progetto per gli esempi<\/h4>\n

Per provare alcune azioni ci servir\u00e0 un progetto cocos2d dove fare un p\u00f2 di esperimenti. Questo non dovrebbe pi\u00f9 presentare problemi, se avete qualche dubbio tornate a leggere il capilo due di questo corso.<\/p>\n

Io ho creato il mio progetto cocos2d e l’ho chiamato “learningCocosAction”.<\/p>\n

Ho deciso in questo caso di rimuovere completamente la classe HelloWorldLayer per crearne una mia da zero, ho quindi rimosso i due file HelloWordLayer.h e .m ed ho cancellato la riga
\n#import “HelloWorldLayer.h” dal file AppDelegate.m.<\/p>\n

A questo punto ho creato un nuovo file e dalla finestra che permette di scegliere il tipo di file ho scelto “cocos -> CCNode class”. Saremmo potuti tranquillamente partire anche con un NSObject, infatti partendo da questo template non \u00e8 che ci sia molto in pi\u00f9, ci risparmiamo giusto l’import della libreria di cocos.<\/p>\n

Ho chiamato il file BasicActionLayer e l’ho creato come subclass di CCNode.<\/p>\n

Ora come abbiamo gi\u00e0 visto nel progetto “Hello world” \u00e8 consuetudine inserire all’interno del layer un metodo di istanza che restituisca una CCScene gi\u00e0 allocata e con il CCLayer gi\u00e0 inserito. Personalmente trovo questa soluzione molto comoda, ma forse un p\u00f2 anomala dal punto di vista logico, preseguiamo comunque con questa consuetudine e aggiungiamo questo codice nel file BasicActionLayer.m:<\/p>\n

\r\n+(CCScene *)scene {\r\n    CCScene *scene = [CCScene node];\r\n    BasicActionLayer *layer = [BasicActionLayer node];\r\n    [scene addChild:layer];\r\n    return scene;\r\n}\r\n<\/pre>\n
Non dimentichiamoci di dichiarare il metodo anche nel file BasicActionLayer.h.<\/p>\n
Fatto questo possiamo tornare al file appDelegate.m e importare la nostra nuova classe inserendo:<\/p>\n
\r\n#import \"BasicActionLayer.h\"\r\n<\/pre>\n
e sostituendo l’ultima riga del metodo applicationDidFinishLaunching: con questa:<\/p>\n
\r\n[[CCDirector sharedDirector] runWithScene: [BasicActionLayer scene]];\r\n<\/pre>\n
Se provate ad eseguire l’applicazione a questo punto, dovreste vedere solamente lo schermo nero e il contatore del framerate, questo perch\u00e9 nella classe BasicActionLayer non abbiamo ancora inserito nulla.<\/p>\n
Provvediamo quindi immediatamente a caricare una semplice sprite a cui assegneremo delle action.
\nImportiamo la seguente immagine nel nostro progetto e modifichiamo il metodo init del BasicActionLayer in modo che crei la sprite dall’immagine:<\/p>\n

\n\"ccaction-corso-cocos2d-02\"<\/a>
\n<\/center><\/p>\n
\r\n-(id) init\r\n{\r\n        if( (self=[super init])) {\r\n                        CCSprite *alien = [CCSprite spriteWithFile:@\"alien01.png\"];\r\n                CGSize size = [[CCDirector sharedDirector] winSize];\r\n                alien.position =  ccp( size.width \/2 , size.height\/2 );\r\n                [self addChild: alien];\r\n        }\r\n        return self;\r\n}\r\n<\/pre>\n
Questo codice dovrebbe esservi gi\u00e0 familiare: abbiamo creato una sprite da file e l’abbiamo posizionata al centro dello schermo, il risultato sar\u00e0 questo:<\/p>\n

\n\"ccaction-corso-cocos2d-03\"<\/a>
\n<\/center><\/p>\n
Proviamo le action<\/h4>\n
Non ci resta adesso che provare alcune action, guardiamo la lista di tutte le animazioni presenti alla pagina<\/a> che ho linkato poco fa e decidiamo di provare una tra quelle che useremo pi\u00f9 spesso: CCMoveTo<\/strong>.<\/p>\n
Dalla documentazione possiamo vedere che ha un metodo di istanza actionWithDuration:position:<\/strong> e questo ci \u00e8 sufficiente per creare la nostra action, modifichiamo quindi il metodo init aggiungendo semplicemente queste due righe di codice:<\/p>\n
\r\n-(id) init\r\n{\r\nif( (self=[super init])) {\r\nCCSprite *alien = [CCSprite spriteWithFile:@\"alien01.png\"];\r\nCGSize size = [[CCDirector sharedDirector] winSize];\r\nalien.position =  ccp( size.width \/2 , size.height\/2 );\r\n[alien setTag:100];\r\n        [self addChild: alien];\r\n       \r\nCCMoveTo *moveAction = [CCMoveTo actionWithDuration:2 position:ccp(0, 0 )];\r\n[alien runAction:moveAction];\r\n        }\r\n        return self;\r\n}\r\n<\/pre>\n
Il codice \u00e8 molto semplice, abbiamo creato una istanza della classe CCMoveTo specificando la durata in secondi e la posizione da raggiungere, provate ad eseguire il progetto e vedrete la sprite che si porter\u00e0 a velocit\u00e0 costante verso l’angolo in basso a sinistra dello schermo:<\/p>\n

\n\"ccaction-corso-cocos2d-04\"<\/a>
\n<\/center><\/p>\n
Allo stesso modo possiamo eseguire una lunga serie di animazioni, come ad esempio il blink<\/a> in cui specifichiamo la durata dell’animazione e il numero di “lampeggi”.<\/p>\n
\r\nCCBlink *blinkAction = [CCBlink actionWithDuration:2 blinks:10];\r\n[alien runAction:blinkAction];\r\n<\/pre>\n
oppure il fadein<\/a>, per far apparire l’oggetto modificando la sua opacit\u00e0:<\/p>\n
\r\nCCFadeIn *fadein = [CCFadeIn actionWithDuration:2];\r\n[alien runAction:fadein];\r\n<\/pre>\n
Una molto carina \u00e8 CCJumpTo<\/a>, che permette di far eseguire alla nostra sprite dei salti che simulano la presenza della gravit\u00e0. Niente di eccezionale per carit\u00e0, ma l’accellerazione diminuisce man mano che la sprite raggiunge il punto pi\u00f9 in alto per poi cambiare verso e ricominciare a crescere. Pensate solo per un attimo a quanto codice avremmo dovuto scrivere per ottenere questo risultato, mentre grazie a cocos2d il tutto si riduce a due righe di codice:<\/p>\n
\r\nCCJumpTo *jumpto = [CCJumpTo actionWithDuration:5 position:ccp(0, 0 ) height:100 jumps:8];\r\n[alien runAction:jumpto];\r\n<\/pre>\n
I tre parametri della funzione sono rispettivamente:<\/p>\n
    \n
  • il tempo dell’animazione in secondi<\/li>\n
  • la posizione da raggiungere<\/li>\n
  • quanto alti saranno i salti e in quanti salti verr\u00e0 raggiunta la posizione finale<\/li>\n<\/ul>\n
    Un aspetto molto interessante \u00e8 che le animazioni possono anche essere eseguite contemporanemante… se volte spostare la vostra sprite mentre ruota e intanto diventa trasparente non dovete far altro che creare tre azioni e poi eseguirle: la sprite (che si aggiorna ogni 1\/60 di secondo) eseguir\u00e0 tutte le animazioni contemporaneamente.<\/p>\n
    Ci sono alcune azioni che hanno un effetto immediato sulla sprite e sono subclass di CCActionInstant, come ad esempio CCFlipY:<\/p>\n
    \r\nCCFlipY *fliyp = [CCFlipY actionWithFlipY:TRUE];\r\n[alien runAction:fliyp];\r\n<\/pre>\n
    che una volta eseguita ribalta l’immagine lungo l’asse Y.<\/p>\n
    Modificatori<\/h4>\n
    Alcune subclass di CCAction sono un p\u00f2 particolari nel senso che operano come se fossero dei modificatori alle altre azioni, vediamo ad esempio CCRepeatForever. Questa classe deriva direttamente da CCAction, ma da sola \u00e8 inutile. Dalla documentazione notiamo infatti che il suo metodo principale \u00e8:<\/p>\n
    \r\n+ (id) actionWithAction:(CCActionInterval *) action;\r\n<\/pre>\n
    Quindi dobbiamo prima avere un’azione di tipo CCActionInterval e sar\u00e0 poi questa azione che verr\u00e0 eseguita indefinitivamente. Per avere un esempio basta digitare:<\/p>\n
    \r\nCCRotateBy *rotate = [CCRotateBy actionWithDuration:2 angle:360];\r\nCCRepeatForever *rotateForever = [CCRepeatForever actionWithAction:rotate];\r\n[alien runAction:rotateForever];\r\n<\/pre>\n
    In questo esempio creiamo prima un’animazione per ruotare la sprite di 360 gradi, poi creiamo un’animazione di tipo CCRepeatForever e gli passiamo l’animazione appena creata… in questo modo abbiamo creato una sprite che ruota indefinivamente alla velocit\u00e0 di mezzo giro al secondo.<\/p>\n
    Tra i modificatori uno molto utile \u00e8 sicuramente CCSequence<\/strong>, che ha la particolarit\u00e0 di ricevere un numero di azioni e di eseguirle in sequenza, vediamolo nell’esempio:<\/p>\n
    \r\nCCBlink *blinkAction = [CCBlink actionWithDuration:2 blinks:10];\r\nCCSequence *actionSequence = [CCSequence actionsWithArray:[NSArray arrayWithObjects:blinkAction,rotate, nil]];\r\n[alien runAction:actionSequence];\r\n<\/pre>\n
    Provate adesso a guardare la pagina che ho linkato all’inizio di questo articolo, dove sono presenti tutte le subclass di CCAction e provate a scrivere un p\u00f2 di codice per implementarle tutte.<\/p>\n
    Buona programmazione!<\/p>\n","protected":false},"excerpt":{"rendered":"
    In questa nuova lezione del nostro corso di programmazione videogame in cocos2d approfondiremo un concetto che abbiamo…<\/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":[1172,1165,1167,1166,1169,1170,1164,1168,1171,1121],"class_list":["post-9367","post","type-post","status-publish","format-standard","hentry","category-corso-programmazione-videogiochi","tag-action-cocos2d","tag-ccaction","tag-ccactioninstant","tag-ccactioninterval","tag-ccblink","tag-ccfadein","tag-ccfinitetimeaction","tag-ccmoveto","tag-ccrepeatforever","tag-corso-cocos2d"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9367","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=9367"}],"version-history":[{"count":16,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9367\/revisions"}],"predecessor-version":[{"id":9388,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9367\/revisions\/9388"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=9367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=9367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=9367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}