Cocos2d – Tutorial Video 08

Pubblicato: 8 dicembre 2011 in Tutorial Video

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!

commenti
  1. Harry scrive:

    Piccola domanda… nel video sembra che la giraffa vada a scatti… è un problema del video oppure effettivamente durante il movimento la giraffa manca di fluidita con quella clausola -100*dt?

  2. signo scrive:

    Ciao, no scattava pure a me.
    Il fatto è che se noti i numeri in basso a sinistra sul simulatore, dovrebbero aggirarsi tra i 59.9 e 60.1
    Questi indicano l’utilizzo di risorse del telefono.
    Con Quicktime aperto per registrare è come se vedessi lo schermo della tv con una videocamera, si forma l’effetto di refresh lento proprio perchè quel dt è influenzato dalle risorse occupate e si aggiorna meno volte.
    Se invece lo faccio partire senza quicktime la giraffa va molto più fluida.
    Con il prossimo tutorial invece faccio vedere come creare spostamenti in maniera diversa, magari premendo un pulsante.

    Alla fine del tutorial, quando faccio andare la giraffa a 45° questa non ritorna sulla destra dello schermo perchè quando gli imposto la posizione all’interno della “if” ho messo che ritorni sulla destra dello schermo per la “x”, ma invece per la “y” mantenga quella precedente quindi è come se facesse una sorta di zig-zag verso l’alto:

    Sul momento non me ne sono accorto, basta impostare 150 sulla “y” dentro la posizione dentro la “if” e dovrebbe vedersi sempre il ciclo.

    ciaoo

    • Harry scrive:

      ma il metodo viene richiamato in maniera ricorsiva a quanto ho capito… come mai? i cicli classici while e for non sono utili in questi casi? diciamo che la mia esperienza viene da un corso di C universitario per questo non sono molto preparato sulle caratteristiche dell’Obj-C

      • signo scrive:

        eheh,infatti questo era un mistero anche per me.
        Anche io vengo dal linguaggio c ed ero abituato a vedere le cose una riga alla volta.
        In object-c è diverso, il metodo è come se fosse in loop.
        Fai una prova di questo tipo:
        Prendi la chiamata [self schedule:@selector(movimento:)] e la inserisci prima di definire l’immagine.
        In c questo avrebbe causato un crash perchè viene chiamata una funzione che utilizza parametri che non sono ancora stati definiti.
        In object-C non è molto importante dove metti le cose, basta metterle🙂
        Penso che si potrebbe scrivere il codice al contrario e funzionerebbe lo stesso.
        Non ti preoccupare, se sei abituato ad usare il c magari scrivendo su notepad, con object-c vai tranquillo.
        Io lo vedo come un linguaggio semplice, che ti aiuta in maniera spaventosa sia nel completamento delle scritte che per quanto riguarda le variabili. Per esempio se definisci una variabile lui ti da un errore perchè dice che hai definito una variabile che non usi, quando la devi inserire non serve nemmeno che inizi a scriverla perchè in automatico dice “Hai creato una variabile che non usi e questa va bene qua, ovvio che vuoi metterla qua”. Insomma se sei abituato al c basta che entri nell’ottica e dopo di che ti puoi godere il bello della programmazione.

        Un punto a sfavore invece è che con c le cose te le devi fare tutte tu e nessuno ti aiuta, ma sai sempre quello che stai facendo e dove lo stai facendo. Se vuoi cambiare un numero sai benissimo tutto quello che succederà. In questo linguaggio invece essendo che tutto è collegato rischi che cambiando un numero ti si apre un portale per un altra dimensione…
        ciaoo

  3. Mario scrive:

    Grazie per la dritta sulla freccetta blu, al quinto tutorial ci avevo perso un oretta a cercar di capire quale era l’errore!

    Comunque ho segnalato ai blog anche gomonkey…

    Grazie ancora😉

    Mario

  4. kemicalpanu scrive:

    ciao
    ho seguito oggi tutti i tuoi tutorial, sono già pratico di java e c# e quindi non ho fatto fatica a seguire.. ma ho dei problemi
    da quando ho iniziato a installare cocos2d, vengon fuori 2 warning,, che fino a prima di questo tutorial non creavano problemi.. ma da quando ho provato a usare il ccTime, l’applicazione si blocca e da questo:

    non so come risolverlo.. boh.. il codice è uguale al tuo.. i warning sono questi.. magari sai darmi una mano:

    🙂

    • signo scrive:

      Hai installato la versione stabile di cocos2d?
      Ho notato che qualcuno ha problemi con la versione stabile di cocos2d e le ultime versioni di xcode.
      I miei suggerimenti sono di provare 3 cose:
      1) Sposta la cartella di cocos2d in un altro percorso (meglio se la scarichi di nuovo) e prova a reinstallare tutto dalla nuova cartella con la solita procedura;
      2) Prova con la versione non stabile di cocos2d;
      3) Installa la versione di xcode 3.2.6 che non dovrebbe avere problemi con la versione stabile di cocos2d.

      Se non funziona nessuno di questi metodi vedremo di trovare una soluzione alternativa, come per esempio inserire òe classi di cocos che ti mancano direttamente dentro xcode. Non l’ho mai fatto ma ho visto che qualcuno in rete lo ha fatto.

      ciao

      • kemicalpanu scrive:

        si, sono sicuro.. ho installato la 1.0.1.. ma adesso che faccio.. nel senso.. sovrascrivo quella che ho già?

        PS: non so se centra molto. ma io faccio girare lion su virtual machine.. ma non credo che dovrebbe darmi un errore del genere. boh :S

      • signo scrive:

        Si sovrascrivi pure. Prova con la versione che hai gia in uso spostando la cartella e reinstallando.
        Per la virtual machine non saprei. Anche un altro utente ha problemi di librerie ed usa la virtual machine, a lui però non ne trova nessuna di libreria.
        ciao

      • kemicalpanu scrive:

        Ho provato a riinstallare mac os x, tutte le versioni di cocos ma dava sempre lo stesso errore
        poi ho cercato e ho trovato questo:
        http://www.cocos2d-iphone.org/forum/topic/21796
        🙂

        se vuoi fai una piccola guida per chi come me, ha avuto questo questo errore

      • signo scrive:

        Grande! sicuramente sarà utile per molti.

  5. Ivan scrive:

    Ciao ,
    Ottimo tutorial.
    Ti volevo chiedere come si puo far fermare una CCSprite dopo tot secondi
    ES. Apro l’app. un’immagine inizia a muoversi e dopo tot secondi si ferma
    ….
    Poi si può far iniziare a muovere una CCSprite dopo tot secondi??

    • Harry scrive:

      Per far questo basta mettere delle condizioni if per intenderci in maniera oculata…. come quando lui imposta la if per far tornare l’immagine a destra dello schermo… al momento non so dirti dove mettere le if perche non ho potuto fare nessuna prova al momento ma facendo qualche prova di sicuro troverai la soluzione

    • signo scrive:

      Ciao, ha ragione Harry.
      Con una condizione if lo riusciresti a fare, ma esiste un metodo diverso più adatto allo scopo. Nel prossimo tutorial lo spiego.
      ciaoo

  6. DarioMaso scrive:

    Ciao e grazie dei tutorial!🙂
    solo che ho riscontrato un problema, l’ho commentato anche su youtube lo ricopio qua per sicurezza, non per assillare! è che sono ispirato oggi e mi vengo delle idee😉
    grazie in anticipo delle risposte!

    “Scusa ho problema,
    allora ho creato un menu con un immagine di sfondo… questa immagine l’ho fatta 960×640, quindi per il retina! con: immagine.position = ccp (480, 320);
    quindi su un iphone 4 dovrebbe vedersi tutta ed essere al centro!
    invece si vede solo un pezzo e sgranato!
    quindi deduco che i riferimenti siano SOLO per gli iphone vecchi, giusto?
    come faccio allora a mettere un immagine di sfondo 960×640 ??
    grazie ;)”

    • signo scrive:

      Ciao, diciamo che è quasi giusto quello che hai fatto.
      Hai fatto bene a prendere un immagine 960×640.
      Per metterla al centro però devi metterla comunque in posizione:
      immagine.position = ccp(240,160);
      Perchè lo schermo del retina ha comunque una dimensione 480×320, quindi bisogna distinguere tra:
      -pixel posizione
      -pixel risoluzione
      Ogni pixel posizione contiene 4 pixel risoluzione (2 nella coordinata x e 2 nella coordinata y).
      Quindi quando lavori con le posizioni lavora pure come se avessi pixel normali, mentre con le risoluzioni devi sempre pensare in maniera retina.
      Ora arriviamo alla questione che ti manca.
      Semplicemente non gli hai detto di abilitare l’iphone retina.
      Per fare questo devi andare in AppDelegate.m e togliere le barre di commento a questa condizione:

      if( ! [director enableRetinaDisplay:YES] )
      CCLOG(@”Retina Display Not supported”);

      Ora puoi far partire l’immagine nell’iphone normale e vedi 1/4 di immagine e se invece imposti l’iphone retina, la vedi completamente.
      Comunque spiegherò tutto in un tutorial.
      Ciaoo

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...