Cocos2d – Tutorial Video 04

Pubblicato: 30 novembre 2011 in Tutorial Video

TUTORIAL N°4

In questo quarto tutorial vediamo come si creano i menu.

Come per ogni tutorial creaiamo un nuovo progetto, 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.

SCEGLIAMO IL TIPO DI FONT DEL MENU

Iniziamo dicendo che tipo di font deve avere il nostro menu con la seguente istruzione:

 [CCMenuItemFont setFontName:@”Marker Felt“];

L’unico parametro modificabile di questa istruzione è “Marker Felt” che è il tipo di font che vogliamo inserire, per esempio potremmo mettere “Arial” oppure “Comic Sans” o altro basta che sia presente all’interno di Cocos2d.

Esiste anche la possibilità di inserire dei font fatti da noi, ma questo lo vedremo più avanti.

SCEGLIAMO LA GRANDEZZA DEI CARATTERI

Per impostare la grandezza dei caratteri del nostro menu utilizziamo l’istruzione seguente:

[CCMenuItemFont setFontSize:26];

In questa funzione il numero è l’unico parametro configurabile e determina proprio la grandezza del carattere.

SCRIVIAMO LE VARIE VOCI DEL MENU

Ogni voce del menu sarà associata ad una variabile, una variabile di tipo “CCMenuItemFont” che è proprio quella che abbiamo impostato precedentemente con font e dimensione.

Per scrivere in maniera compatta definiamo la variabile di tipo “CCMenuItemFont” e dichiariamo cosa contiene nella stessa riga nel seguente modo:

CCMenuItemFont *start = [CCMenuItemFont itemFromString:@”Start Game” target:self selector:@selector(one:)];

In questa istruzione i campi in rosso sono quelli che dobbiamo inserire noi, ora vediamo cosa definiscono:

*start                                —> nome della variabile;

Start Game                      —> scritta che comparirà nel menu;

self                                    —> si riferisce a chi assegnare le proprietà che stiamo definendo, ma avendo definito la variabile  start, si mette self perchè le proprietà andranno definite su se stessa;

@selector(one:)              —>@selector() serve per identificare l’azione da compiere quando viene premuta la scritta start. Mentre “one:” è il nome che noi diamo all’azione e andremo dopo a scrivere.

A questo punto possiamo scrivere tante variabili con il metodo appena descritto per quante voci del menu vogliamo.

Un esempio potrebbe essere:

————————————————————————–

CCMenuItemFont*item1 =[CCMenuItemFont itemFromString:@”New Game”target:self selector:@selector(NewGame:)];
CCMenuItemFont*item2=[CCMenuItemFont itemFromString:@”High Score”target:self selector:@selector(HighScore:)];
CCMenuItemFont *item3 = [CCMenuItemFont itemFromString:@”Help” target:self selector:@selector(Help:)];
CCMenuItemFont *item4 = [CCMenuItemFont itemFromString:@”Continua” target:self selector:@selector(Continue:)];

—————————————————————————

INSERIAMO LE VOCI IN UN MENU

Dopo aver scritto le varie voci dobbiamo inserirle all’interno di un menu.

Per far questo definiamo una variabile menu nel seguente modo:

 CCMenu *menu = [CCMenu menuWithItems:start, nil];

In questa istruzione abbiamo definito una variabile “*menu” di tipo “CCMenu” e gli abbiamo detto che contenga la voce “start”. Dopo “start” è presente una virgola e nil, se avessimo diverse voci nel nostro menu come nell’esempio precedente avremmo dovuto scrivere:

—————————–

CCMenu *menu = [CCMenu menuWithItems:item1, item2, item3, item4, nil];
—————————-

Bisogna sempre tenere il “nil” come ultimo oggetto in modo che identifichi che dopo di lui non c’è più niente da aggiungere.

DIAMO UNA POSIZIONE ALLE VOCI ED INSERIAMO IL MENU

Il menu, di default, posiziona le diverse voci che gli diamo tutte in centro allo schermo. Se ne abbiamo più di una le sovrappone.

Per evitare questo problema bisogna dirgli di allinearle. Ci sono diversi modi per allineare le voci, ma noi ne usiamo solo uno come esempio:

[menu alignItemsVerticallyWithPadding:30];

Con questa istruzione allineiamo le voci verticalmente con una distanza di 30 px una dall’altra.

In questo caso il menu viene sempre messo al centro dello schermo con gli oggetti disposti verticalmente e non più sovrapposti. Se vogliamo possiamo spostarlo con il solito “setPosition” o come si vede all’inizio di questo video con la “dot notation”.

Non ci rimane che far visualizzare il menu a schermo:

[self addChild:menu];

Credo che ormai questa istruzione sia nota a tutti, ma per chi non avesse seguito i tutorial precedenti serve per visualizzare a schermo la variabile “menu” che in questo caso è un menu, ma potrebbe essere stata un’immagine o una scritta.

Spero che vi sia piaciuto questo quarto tutorial, nel prossimo vedremo come fare dei menu per applicazioni 2.0!😉

Ciaoo

commenti
  1. annalimo scrive:

    E’ da tanto che setaccio internet alla ricerca di tutorial in italiano di Cosos2d. Ho provato con i libri in inglese, ma mi mancava il primo appiglio alla comprensione. Illuminanti questi tutorial, grazie davvero!

  2. Thomas scrive:

    Signo a breve faccio un tutorial per installare mac os snow leopard e configurare xcode e cocos2d su qualsiasi pc normale tramite virtual box..così anche chi non ha un mac potrà unirsi:)

    • signo scrive:

      Perfetto! Allora attendo il tutorial.
      Io intanto sto studiando un po di linguaggi e software nuovi per il nuovo sito, ma credo di poter inserire un nuovo tutorial domani.
      ciaoo

  3. annalimo scrive:

    certo che una community italiana è un ottimo fine, e poter provare su un pc quello che si vede nei tutorial sarebbe di grande aiuto. Grazie e ciao.

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...