Cocos2d – Tutorial Video 05

Pubblicato: 2 dicembre 2011 in Tutorial Video

TUTORIAL N°5

In questo 5° tutorial vediamo come creare un menu fatto con immagini dove premendo sulle varie immagini si viene indirizzati verso un’altra pagina.

Per fare tutto ciò abbiamo bisogno innanzitutto di caricare le immagini all’interno della cartella “Resource” presente nel nostro progetto.

Apriamo semplicemente il finder e trasciniamo le immagini nella cartella del nostro progetto facendo attenzione a spuntare “Destination”.

Come per ogni tutorial apriamo il file HelloWordLayer.m e cerchiamo “-init”.

Dentro “-init” è presente una condizione:

if( (self=[super init]))

{
//  diverse funzioni che fanno comparire la scritta Hello Word di default

}

Dopo aver cancellato tutto quello che è presente all’interno delle parentesi graffe siamo pronti per incominciare.

Per inserire un immagine che faccia parte del menu dobbiamo creare una variabile di tipo “CCMenuItemImage” nel seguente modo:

CCMenuItemImage *immagine1 = [CCMenuItemImage itemFromNormalImage:@”immagine1.png” selectedImage:@”immagine1click.png” target:self selector:@selector(one:)];

In questo modo abbiamo definito una variabile di tipo immagine del menu con il nome “immagine1”, gli abbiamo detto che normalmente è presente l’immagine “immagine1.png”, mentre quando ci andremo a premere con il dito comparirà l’immagine “immagine1click.png”. Se non vogliamo che cambi immagine quando ci premiamo basta mettere la stessa immagine in tutti e due gli spazi.

Inserendo “@selector()” gli stiamo dicendo che quando viene premuto il pulsante dovrà svolgere una determinata azione.

Quell’azione è definita a parte con il nome “one:” (importanti i due punti alla fine del nome).

Adesso che abbiamo inserito la prima immagine del menu possiamo creare anche le altre allo stesso modo.

Dopo aver creato le varie immagini del menu le dobbiamo posizionare scrivendo per esempio:

immagine1.position = ccp(50,50);

Bisogna fare attenzione perchè le immagini del menu partono dal centro dello schermo e non dall’angolo in basso a sinistra come le “CCSprite”.

Fatto questo dobbiamo creare il menu ed inserirci le nostre immagini.

Per farlo scriviamo:

CCMenu *menu = [CCMenu menuWithItems: immagine1, …,nil];

Al posto dei puntini bisogna mettere tutte le voci(immagini) del menu create facendo attenzione a lasciare “nil” come ultimo oggetto.

Dopo aver creato il menu dobbiamo inserirlo nello schermo con il classico metodo:

[self addChild: menu]

Dopo il metodo “-init” inseriamo finalmente la chiamata al metodo “-one”. Per farlo ci posizioniamo subito dopo la parentesi graffa che chiude il metodo “-init” e scriviamo:

-(void) one: (id) sender

{

}

In questo modo quando premiamo l’immagine verrà svolta l’azione all’interno delle parentesi graffe del metodo “one:”

Facciamo la stessa cosa per tutte le immagini che abbiamo creato.

La seconda parte di questo tutorial si trova nel tutorial 6.

ciaoo

commenti
  1. annalimo scrive:

    ottimo tutorial, la traccia scritta è utilissima e anche le spiegazioni sul perché occorrono i passaggi nel codice. Grazie, e che buon ritmo di uscita, si teme sempre che gli autori siano troppo occupati per proseguire. Ciao!

    • signo scrive:

      Grazie a voi che mi seguite dagli inizi del blog, lo faccio sempre con piacere. Anzi vorrei migliorare ancora il sito in modo da rendere le cose più semplici sia per la consultazione dei vari tutorial che per risolvere le varie problematiche. (e molto altro…) In questa settimana probabilmente riuscirò a fare solo un tutorial per potermi dedicare completamente al nuovo sito.
      Spero che vi piacerà, comunque sono sempre aperto ai consigli.
      ciao

  2. cecco989 scrive:

    Ciao, sono arrivato fino a questo punto perché ho conosciuto il tuo sito da poco🙂 E’ davvero ciò che cercavo!! Complimenti, spero tu possa fare tutorial più complessi in futuro, anche per sviluppare veri e propri giochetti.
    Se ti posso dare un consiglio, le immagini e le varie cose che metti nel video, potresti condividerle con noi in qualche modo, così da usare le stesse cose🙂

    • signo scrive:

      Grazie, sto creando adesso un sito più efficiente. Penso che seguirò il tuo consiglio, le immagini scaricabili e alla fine il sorgente del 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...