Creare animazioni utilizzando le texture (parte due)

Articolo scritto da Gabriele Carbonai Comments

9 Commenti

Dopo aver creato la nostra textura nell’articolo precedente della categoria cocos2D è giunto il momento di mostrare come animare lo sprite.

In fondo al post trovi il video col risultato finale.

Creiamo un progetto con template cocos2D, io l’ho chiamato semplicemente animazione ed eliminiamo tutto il contenuto del metodo init di helloWorldLayer.m lasciando intatto la chiamata super init.

primo passo:
importiamo la textura e l’immagine nella cartella resource o se vi è più comodo sulla cartella principale del progetto cliccate con il tasto destro e create una nuova cartella “New Group” e rinominatela in “images”.

Secondo passo:
Prendiamo le dimensioni dello schermo del nostro device cosi da posizionare il nostro sprites dove vogliamo

 CGSize screenSize = [CCDirector sharedDirector].winSize;

Terzo passo – il codice essenziale:
richiamiamo a codice la texture e l’immagine png creata con Zwoptex

 [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"finalfight.plist"];
 CCSpriteBatchNode *spriteSheet = [CCSpriteBatchNode batchNodeWithFile:@"finalfight.png"];
 [self addChild:spriteSheet];

Creiamo un NSMutableArray di nome *animFrames

NSMutableArray *animFrames = [NSMutableArray array];

e infine il ciclo che da vita all’animazione

        for (int i = 1; i <= 5; i++) {
            NSString *file = [NSString stringWithFormat:@"ff%d.png", i];
            CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:file];
            [animFrames addObject:frame];
        }

in quest’ultima porzione di codice l’immagine viene salvata nella variabile di nome *file e poi memorizzata nella cache del device.

Quarto passo – posizione e animazione
Ora l’ultimo step è quello di posizionare il nostro sprite al centro dello schermo e di animarlo.

Prima cosa stampiamo lo sprite usando il primo frame “ff1.png” della sequenza, poi gli diamo una posizione centrale utilizzando la dimensione dello schermo in larghezza screenSize.width diviso 2
e infine il metodo addChild che aggiunge la nostra immagine allo schermo con i parametri definiti.

        CCSprite *player = [CCSprite spriteWithSpriteFrameName:@"ff1.png"];		
        player.position = ccp(screenSize.width / 2, 50.0f);
        [spriteSheet addChild:player];

ma ancora non abbiamo l’animazione.

CCAnimation *anim = [CCAnimation animationWithFrames:animFrames delay:0.10f];
        CCRepeatForever *repeat = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:anim restoreOriginalFrame:NO]];
       [player runAction:repeat];

Con CCAnimation creiamo la nostra animation, è possibile rallentare l’animazione aumentando il delay oppure velocizzandola diminuendo il valore del delay.
con CCRepeatForever diamo l’ordine all’immagine di continuare all’infinito

Quinto passo – aggiunte
In quest’altra porzione di codice mostro come poter aggiungere anche una movimento oltre che un animazione.
Per prima cosa modificare la posizione:

player.position = ccp(20.0f, 50.0f);

Cosi abbiamo il nostro sprite che inizia il suo ciclo vitale alla sinistra del monitor e non più centralmente come lo era prima.
Ora aggiungiamo il codice che manca al quarto passo:

        CCAnimation *anim = [CCAnimation animationWithFrames:animFrames delay:0.05f];
        CCRepeatForever *repeat = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:anim restoreOriginalFrame:NO]];
        CCAction *moveAction = [CCMoveBy actionWithDuration:2.0f position:CGPointMake(500.0f,0.0f)];
 
       [player runAction:repeat];
       [player runAction:moveAction];

è stata aggiunta un’azione di movimento che permetterà allo sprites di attraversare tutto lo schermo.

Download Animazione

Loggati per scaricare il file

Info sull'autore: Gabriele Carbonai

Sono un appassionato di programmazione. Ho iniziato a scrivere i primi codici con visual basic per poi passare a Java. Mi sono specializzato in php e jquery prima di scoprire un mondo ancor più affascinante... objective-c.

9 Commenti + Aggiungi commento

Vincenzo 11 novembre 2011 alle 19:19

ma a me il tutorial non funziona mi da 2 errori rossi 2 gialli,ci sono dei termini deprecati

Fare il login per rispondere
gomonkey 11 novembre 2011 alle 19:24

Termini deprecati? puoi postare gli errori? perché io quel codice l’ho scritto con xcode 4.2 che supporta ios 5 quindi mi sembra strano… l’ho anche testato ed è funzionante

Fare il login per rispondere
gomonkey 11 novembre 2011 alle 19:34

mi puoi postare anche tutto il metodo init? cosi controllo

Fare il login per rispondere
samohong 6 dicembre 2011 alle 23:03

ciao, con CCRepeatForever ripeti lánimazione all’ ínfinito e per ripetere lánimazione un determinato numero di volte?
grazie!!!!!

Fare il login per rispondere
- gomonkey 6 dicembre 2011 alle 23:20
  
  Con CCRepeat ripeti una volta sola se poi ci aggiungi times e il valore ripeti l’animazione per il numero da te deciso. prova a commentare il codice CCRepeatForever e aggiungere il seguente codice:
  CCRepeat *repeat = [CCRepeat actionWithAction:[CCAnimate actionWithAnimation:anim restoreOriginalFrame:NO] times:4];
  
  qui viene ripetuta l’animazione 4 volte
  
  Fare il login per rispondere
  - samohong 7 dicembre 2011 alle 19:51
    
    Grazie molto gentile………. avevo fato una cosa simile, ma mettevo times: dentro le parentesi quadre e mi dava errore……..mi sapresti indicare se c’e'una documentazione online con tutte le classi e i rispettivi metodi…. grazie ancora!
    
    Fare il login per rispondere
gomonkey 7 dicembre 2011 alle 20:47

c’è la documentazione ufficiale al momento http://www.cocos2d-iphone.org/wiki/doku.php/

Fare il login per rispondere
dariodario2497 15 gennaio 2012 alle 15:09

mi da errore SIGABRT
sia nella versione scritta da me sia in quella che ho scaricato…
questo errore mi perseguitaa!! help!

Fare il login per rispondere
gomonkey 5 marzo 2012 alle 11:42

Stampate la console degli errori, il log quando vi da l’errore SIGABRT

Fare il login per rispondere