Cocos2D: scorrimento del background

Articolo scritto da Gabriele Carbonai    Nessun commento

Dopo aver visto nel precedente articolo, come far saltare uno sprite ora proseguiamo con quel progetto aggiungendo altri due metodi per avere un background a scorrimento continuo.

Primo passo è quello di aggiungere un immagine di background all’interno del nostro progetto

L’immagine che vedete sopra è delle dimensioni di 1024 per 768, l’ideale per iPad, cliccando sopra vi si aprirà in un altra pagina e potrete scaricarla per implementarla nel vostro progetto.

Implementiamo i metodi

Per prima cosa nel file header all’interno del blocco @interface andiamo ad aggiungere due nuove variabili di sprite

CCSprite *background1;
CCSprite *background2;

Ora siamo pronti per creare i nostri metodi all’interno del file helloWorldLayer.m.

- (void)setupBackgroundImage
{
    background1 = [CCSprite spriteWithFile:@"bg1.png"];
    background2 = [CCSprite spriteWithTexture:[background1 texture]];
 
    background1.position = ccp(0, winSize.height/2);
    background2.position = ccp(winSize.width, winSize.height/2);
 
    [self addChild:background1 z:0];
    [self addChild:background2 z:0];
 
    //add schedule to move backgrounds
    [self schedule:@selector(scroll:)];
}

La prima riga crea l’immagine di sprite, la seconda invece clona perfettamente la prima variabile, e dato che in questo tutorial utilizziamo la stessa immagine per fare lo scorrimento basta fare questa azione.

Posizioniamo i background e stampiamoli a schermo, questi sono passi visti e rivisti in molti tutorial.

Infine scheduliamo il metodo scroll che andiamo a implementare ora.

- (void)scroll:(ccTime)dt {
 
    background1.position = ccp( background1.position.x - 8, background1.position.y );
    background2.position = ccp( background2.position.x -8, background2.position.y );
 
    if (background1.position.x == - (winSize.width/2)) {
        background1.position = ccp(winSize.width+(winSize.width/2), winSize.height/2);
    }
    else if (background2.position.x == - (winSize.width/2)) {
        background2.position = ccp(winSize.width+(winSize.width/2), winSize.height/2);
    }
 
}

Questo metodo viene richiamato di continuo quindi le prime due righe vengono utilizzate per cambiare costantemente la posizione dei due nostri background

mentre i due controlli di flusso posiziona nuovamente le immagini una volta che queste hanno finito il loro flusso per ripartire da zero.

infine aggiungiamo la chiamata all’interno del metodo init, sopra a createMonkey, dato che non abbiamo stabilito nessuna precedenza di immagini (Z:) non possiamo metterlo dopo altrimenti la nostra scimmia verrà nascosta sotto il background

        [self setupBackgroundImage];
        [self createMonkey];

inoltre personalmente ho modificato la gravità in modo da aver un salto più basso portando il valore di #define kGravityFactor -1 a -2

#define kGravityFactor -2

Questo il risultato finale del nostro progetto

Puoi ora scaricare il progetto