Nella lezione di oggi sfrutteremo le competenze teoriche che abbiamo acquisito nella lezione precedente e realizzeremo uno sfondo in finto 3D, con la particolarità che potrà scrollare all’infinito. Lo scroll infinito è una componente fondamentale in tantissimi tipi di giochi, dal classico “space shooter” ai più recenti “endless run”, ci sono delle enormi differenze tra i vari giochi, ma alla fine la tecnica è sempre la stessa, in pratica quello che si deve fare è gestire correttamente gli elementi grafici che “scompaiono” da una parte dello schermo e crearne di nuovi pronti ad essere visualizzati dalla parte opposta, come in un moderno Zoetrope (http://en.wikipedia.org/wiki/Zoetrope).

Per gli elementi che scompaiono da una parte dello schermo c’è poco da inventarsi, possono al massimo finire in una cache per essere ripescati velocemente qualora il giocatore tornasse indietro, tutta l’inventiva invece sta nel come creare i nuovi elementi.
Il caso più semplice è quello in cui, banalmente, gli elementi non vengno creati… si crea cioè un fondale lunghissimo in cui il personaggio si può muovere avanti e indietro a piacimento. Questo, benché possibile, è estremamente costoso in termini di memoria occupata quidi risulta di fatto inutilizzabile.
I giochi più complessi, invece, creano le nuove immagini in maniera random o in base allo stato del gioco, per esempio un classico “endless run” mostra livelli via via più complessi man mano che avanza il gioco (avete mai provato canabalt? è opensource! http://adamatomic.com/canabalt/).

L’esempio che vedremo in questa lezione è una via di mezzo, in pratica creeremo due “sfondi” completi, quando un’immagine scompare da una parte la faremo istantaneamente riapparire dall’altra parte.

In questa immagine potete vedere anche un piccolo trucco… una delle due schermate è stata flippata per farle combaciare correttamente, altrimenti si sarebbe visto un brutto stacco.
Ma veniamo alle brutte notizie, purtroppo la classe CCParallaxNode che abbiamo visto nel precedente articolo non è utlizzabile per questo genere di operazioni, perché la posizione del singolo livello non è modificabile una volta che viene inserito dentro un CCParallaxNode, non ci resta quindi che darci da fare e scrivere un pò di codice per gestire noi stessi il tutto.

Iniziamo dichiarando alcune variabili nell’header del nostro layer:

@interface HelloWorldLayer : CCLayer
{
    NSArray *spriteArray;
    int numSprite;
    NSArray *speedFactors;
}

spriteArray conterrà i puntatori alle sprite che andremo a creare, numSprite è un intero che useremo per memorizzare il numero di sprite che andremo a gestire. L’ultimo array, speedFactors, memorizza il moltiplicatore che andremo ad utilizzare per muovere ogni livello di una percentuale dello spostamento totale.

La creazione delle sprite avviene come negli altri esempi all’interno del metodo init

Il metodo completo è questo:

-(id) init
{
        if( (self=[super init])) {
        CGSize screensize = [[CCDirector sharedDirector] winSize];
        numSprite = 4;
       
        CCSprite *sprite0 = [CCSprite spriteWithFile:@"liv_0.png"];
        [sprite0 setAnchorPoint:CGPointMake(0,0)];
        [sprite0 setPosition:CGPointMake(0,0)];
        [self addChild:sprite0];
       
        CCSprite *sprite0b = [CCSprite spriteWithFile:@"liv_0.png"];
        [sprite0b setAnchorPoint:CGPointMake(0,0)];
        [sprite0b setPosition:CGPointMake(screensize.width - 1, 0)];
        [self addChild:sprite0b];
       
        CCSprite *sprite1 = [CCSprite spriteWithFile:@"liv_1.png"];
        [sprite1 setAnchorPoint:CGPointMake(0,0)];
        [sprite1 setPosition:CGPointMake(0,80)];
        [self addChild:sprite1];
       
        CCSprite *sprite1b = [CCSprite spriteWithFile:@"liv_1.png"];
        [sprite1b setAnchorPoint:CGPointMake(0,0 )];
        [sprite1b setPosition:CGPointMake(screensize.width - 1 , 80)];
        sprite1b.flipX = YES;
        [self addChild:sprite1b];
       
        CCSprite *sprite2 = [CCSprite spriteWithFile:@"liv_2.png"];
        [sprite2 setAnchorPoint:CGPointMake(0, 0)];
        [sprite2 setPosition:CGPointMake(0, 60)];
        [self addChild:sprite2];
       
        CCSprite *sprite2b = [CCSprite spriteWithFile:@"liv_2.png"];
        [sprite2b setAnchorPoint:CGPointMake(0, 0)];
        [sprite2b setPosition:CGPointMake(screensize.width -1 , 60)];
        sprite2b.flipX = YES;
        [self addChild:sprite2b];
       
        CCSprite *sprite3 = [CCSprite spriteWithFile:@"liv_3.png"];
        [sprite3 setAnchorPoint:CGPointMake(0, 0)];
        [sprite3 setPosition:CGPointMake(0, 0)];
        [self addChild:sprite3];
       
        CCSprite *sprite3b = [CCSprite spriteWithFile:@"liv_3.png"];
        [sprite3b setAnchorPoint:CGPointMake(0, 0)];
        [sprite3b setPosition:CGPointMake(screensize.width - 1, 0)];
        sprite3.flipX = YES;
        [self addChild:sprite3b];
       
        spriteArray = [[NSArray arrayWithObjects:sprite0,sprite1, sprite2, sprite3, sprite0b,sprite1b, sprite2b, sprite3b, nil ] retain];
       
        speedFactors = [[NSArray arrayWithObjects:
                         [NSNumber numberWithFloat:0.1],
                         [NSNumber numberWithFloat:0.4],
                         [NSNumber numberWithFloat:0.8],
                         [NSNumber numberWithFloat:1.0],
                         
                         [NSNumber numberWithFloat:0.1],
                         [NSNumber numberWithFloat:0.4],
                         [NSNumber numberWithFloat:0.8],
                         [NSNumber numberWithFloat:1.0],
                         nil] retain];
       
        [self scheduleUpdate];
    }
        return self;
}

Non dovrebbe essere difficile capire cosa abbiamo fatto… in pratica per ciascuna delle quattro slide abbiamo aggiunto alla scena la sprite e una sua “copia” ribaltata. Queste sprite sono poi state aggiunte in un array (spriteArray) per agevolare l’operazione che vedremo tra un attimo.

All’interno dell’array speedFactors sono memorizzati i fattori di spostamento, sono 8 perché le sprite in gioco sono 8, ma sono solo 4 livelli diversi, quindi sono 4 valori.

Infine utilizziamo [self scheduleUpdate]; per aggiornare la nostra scena ad ogni iterazione.

Il metodo che ho utilizzato è questo:

-(void)update:(ccTime)delta {
    CGSize screensize = [[CCDirector sharedDirector] winSize];    
for (CCSprite *sprite in spriteArray) { //1
        int index = [spriteArray indexOfObject:sprite]; //2
       
        CGPoint position = sprite.position;
        position.x -= 100 * (delta) * [[speedFactors objectAtIndex:index]floatValue]; //3
       
        if ( position.x < -screensize.width ) {  //4
            position.x += ( screensize.width * 2 ) - 2; //5
        }
        sprite.position = position; //6
    }
}

#1 Eseguo un ciclo su tutte le sprite che sono inserite nell'array spriteArray
#2 recupero anche l'indice dell'array alla quale si trova
#3 calcolo la nuova posizione moltiplicando per 100 il delta, in pratica il tempo che è intercorso dalla precedete chiamata, moltiplicato per il fattore di moltiplicazione che è memorizzato nell'arry speedFactors
#4 Verifico se la posizione di questa sprite è completamente fuori dallo schermo, in tal caso...
#4 calcolo la nuova posizione, aggiungendo due volte la larghezza della sprite.
#5 Setto la posizione della sprite.

Flickering

Se avete fatto caso ci sono alcuni piccoli valori correttivi quando creo le sprite "gemelle", in realtà le posiziono leggermente sovrapposte alle prime, nello specifico di un 1 pixel.

[sprite0b setPosition:CGPointMake(screensize.width - 1, 0)];

Inoltre, quando devo risposizionare la sprite, devo mantenere questa differenza, quindi la sposto di ( screensize.width * 2 ) - 2 pixel.

Questo è dovuto al fatto che posizionare la sprite proprio affiancata a quella precedente potrebbe causare problemi di flickering, quindi aggiungiamo un pixel di sovrapposizione per essere più tranquilli.

Vi lascio con il video del risultato finale ottenuto:

e con il link a github con il progetto completo.

PS: il mio scopo qui è quello di raccontare cocos2d, non di fornirvi la pappa pronta... però se una volta studiato il tutto vorreste usare qualche classe scritta da altri potete provare a guardare questo progetto 😉

Buona programmazione a tutti!