Cocos2d – Tutorial Video 08

TUTORIAL N°8

 

 

In questo tutorial vediamo come far muovere una sprite.

Come al solito inizializziamo la nostra pagina “HelloWorldLayer.m” togliendo le operazioni dentro la condizione “if” all’interno del metodo “-init”.

Inseriamo un’immagine dentro la cartella resource che chiamiamo “imm.png”.

Dopo averla inserita apriamo il file “HelloWorldLayer.h”, dentro le parentesi graffe scriviamo:

—————

CCSprite *immagine;

—————

Facendo questo abbiamo definito una variabile di tipo “CCSprite” che viene riconosciuta all’interno di tutta la classe.

Come abbiamo fatto invece le altre volte che la definiamo all’interno del metodo “-init” la variabile funziona solo all’interno di questo. Se utilizzassimo altri metodi non riconoscerebbero l’immagine.

Per far muovere la nostra sprite avremo proprio bisogno di utilizzarla ll’interno di un altro metodo, più precisamente un metodo creato da noi per farla muovere.

Torniamo dentro il file “HelloWorldLayer.m” all’interno della “if” ed inseriamo l’immagine dentro la variabile che abbiamo definito nel file “HelloWorldLayer.h” nel seguente modo:

—————

immagine = [CCSprite spriteWithFile:@”imm.png”];

—————

Gli diamo una posizione:

————-

immagine.position = ccp(100,150);

————

E la inseriamo dentro lo schermo:

————-

[self addChild:immagine];

————–

 

Se facciamo partire il simulatore vedremo che la nostra immagine si troverà a 100px dalla “x” e 150px dalla “y” partendo da in basso a sinistra.

A questo punto dobbiamo creare un programma che crea il movimento.

Iniziamo dicendo che esiste questo programma e che ci vada, quindi nel metodo “-init” dopo aver inserito l’immagine scriviamo:

—————

[self schedule:@selector(movimento:)];

————–

Schedule in italiano vuol dire programma, quindi noi stiamo dicendo a “self” quindi al nostro programma principale di chiamare un sottoprogramma. Con la scritta “@selector()” invece gli diciamo che il sottoprogramma risiede dentro un metodo che abbiamo chiamato “movimento:”

Dopo aver fatto questo dobbiamo creare il metodo “movimento:”. Ci posizioniamo dopo il metodo “-init”

e scriviamo:

——————–

-(void) movimento: (ccTime)dt

{

}

——————–

Abbiamo appena costruito un metodo che non ritorna niente (infatti abbiamo messo void all’inizio), e con la proprietà “ccTime” a “dt”. Questa proprietà non fa altro che incrementare “dt” di un valore pari ai secondi trascorsi (dopo 1 secondo vale 1, dopo 2 secondi vale 2, ecc.).

Dentro il metodo che abbiamo appena creato dobbiamo scrivere la posizione della nostra immagine aggiungendogli il movimento:

——————–

immagine.position = ccp(immagine.position.x     + 100*dt   ,     immagine.position.y);

——————-

In questo modo la posizione della nostra immagine su “x” vale quanto la posizione che aveva in precedenza dicendogli “immagine.position.x”, ma aumentata di un valore pari a 100px ogni secondo.

Mentre su “y” rimarrà la posizione che gli avevamo impostato in precedenza.

Facciamo partire il programma e vedremo la nostra immagine spostarsi da sinistra verso destra.

Semplice no?

Se volessimo aumentare la velocità basterebbe dirgli che si sposti di molti più pixel ogni secondo oppure mettere un segno meno al posto del più per invertirgli la direzione.

Allo stesso modo possiamo cambiare all’interno dello stesso metodo la direzione di “y”.

Se colessimo la nostra immagine che si sposta di 45° dovremmo scrivere:

——————

immagine.position = ccp(immagine.position.x     + 100*dt   ,     immagine.position.y  +100*dt);

—————–

Se invece vogliamo che scompaia a destra e ricompaia a sinistra in un loop dovremmo scrivere:

—————-

immagine.position = ccp(immagine.position.x     + 100*dt   ,     immagine.position.y);

if(immagine.position.x >480)

{

immagine.position = ccp(0 ,     immagine.position.y);

}

—————-

In questo modo quando la nostra immagine superà i 480 px sulla destra (480px perchè è la dimensione dello schermo iPhone) ricompare a 0px, quindi sulla sinistra.

Bisogna però notare che le immagini vengono considerate da metà della loro posizione, quindi fare gli accorgimenti dovuti per avere un movimento fluido, più precisamente:

—————–

if(immagine.position.x >480 +dimensioneInPXdellaLarghezzaDellImmagine/2)

{

immagine.position = ccp(-dimensioneInPXdellaLarghezzaDellImmagine/2 ,     immagine.position.y);

}

—————-

Ovviamente “dimensioneInPXdellaLarghezzaDellImmagine/2” si intende il valore numerico della larghezza in px della vostra immagine.

Spero che questo tutorial vi sia piaciuto.

Al prossimo tutorial!