Blog spostato su www.freesh.org

Pubblicato: 21 dicembre 2011 in h, Intro, Tutorial Video

www.freesh.org

Finalmente è online il nuovo sito, migliorato, aggiornato, e non solo…
Su freesh troverere i tutorial video di cocos2d, anche gli ultimi tutorial con i testi e le istruzioni.
Sono stati migliorati tutti i tutorial inserendo:
– la possibilità di copiare le istruzioni o le parti di codice con un click del mouse;
– possibilità di scaricare le immagini utilizzate nei tutorial;
– possibilità di scaricare i file sorgenti.
Inoltre sono state aggiunte un sacco di informazioni utili, come:
– link a siti e blog utili;
– libri;
– forum.
Il sito non parla più solo di programmazione, ma vuole includere anche progettisti, designer e traduttori in modo da avere a portata di click tutte le risorse utili alla realizzazione di un gioco.

Cocos2d – Tutorial Video 09

Pubblicato: 15 dicembre 2011 in Tutorial Video

TUTORIAL N°9

 

Le descrizioni dei tutorial saranno presenti dalla prossima settimana nel nuovo sito con la possibilità di scaricare le immagini utilizzate e i codici sorgenti dei tutorial.

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!

Cocos2d – Tutorial Video 07

Pubblicato: 2 dicembre 2011 in Tutorial Video

TUTORIAL N°7

 

 

Questo tutorial è in realtà la 3^ parte del 5° tutorial, quindi sarebbe meglio incominciare da quello.

Nel tutorial finisco le operazioni spiegate nel 5° e 6° ed aggiungo la possibilità di metterci del testo.

Per inserire una frase in nel nostro schermo dobbiamo posizionarci all’interno della if dentro “-init”  e creare una variabile di tipo “CCLabelTTF” nel seguente modo:

 

CCLabelTTF  *scritta = [CCLabelTTF labelWithString:@”Scritta che deve comparire a schermo” fontName:@”Marker Felt” fontSize:26];

 

In questo modo abbiamo creato una variabile scritta, l’abbiamo chiamata “*scritta” e gli abbiamo detto che deve comparire nello schermo la scritta “Scritta che deve comparire a schermo”, “Marker Felt” invece è il font che si intende utilizzare e “26” è la grandezza della scritta.

Dopo aver creato la scritta bisogna posizionarla con i soliti metodi, per esempio:

 

[scritta setPosition:ccp(100,100)];

 

Bisogna fare attenzione che le scritte partono di default dall’angolo in basso a destra.

A questo punto non ci resta che inserire la scritta con:

 

[self addChild:scritta];

 

Al prossimo tutorial!

ciaoo

Cocos2d – Tutorial Video 06

Pubblicato: 2 dicembre 2011 in Tutorial Video

TUTORIAL N°6

 

 

Questo tutorial è in realtà la seconda parte del 5° e vedremo come creare delle pagine diverse su cui arriveremo premendo le immagini del menu nella pagina iniziale.

Per prima cosa premiamo con il secondo pulsante sulla cartella del nostro progetto e andiamo su “New File…”.

In automatico ci da la possibilità di creare una “CCNode Class”, premiamo su continua e vediamo che abbiamo la possibilità di creare 3 tipi di sottoclasse (CCNode, CCSprite, CCLayer).

Selezioniamo CCLayer e premiamo su “next”, a questo punto ci chiede come vogliamo chiamare la nostra classe, per esempio “pagina1” e premiamo su “next”.

I file creati si trovano dentro la cartella “Supporting Files” che è tra le ultime del nostro progetto, possiamo prendere i due file creati (Pagina1.h, Pagina1.m) e portarli sotto i nostri file HelloWorldLayer.

Aprendo i due file vedremo che contengono poco o nulla.

Apriamo il file “Pagina1.h” e copiamo la scena che è presente su “HelloWorldLayer.h” cioè:

 

+(CCScene *) scene;

 

La mettiamo nella stessa posizione e apriamo il file “HelloWorldLayer.m”.

(Come vi avevo annunciato all’inizio, è più facile fare copia incolla di pezzi già utilizzati così ci si risparmia tempo.)

Dal file “HelloWorldLayer.m” dobbiamo copiare tutto quello che c’è dentro tra “@implementation” e “@end”.

Dopo averlo copiato lo andiamo ad incollare nel file “Pagina1.m” tra “@implementation” e “@end”.

Dentro “pagina1” dobbiamo eliminare tutto quello che abbiamo creato noi, quindi tutto quello che è presente all’interno della if e tutti i metodi delle immagini che abbiamo creato in modo da rimanere con questo prototipo:

—————————

@implementation Pagina1

+(CCScene *) scene
{
// ‘scene’ is an autorelease object.
CCScene *scene = [CCScene node];

// ‘layer’ is an autorelease object.
HelloWorldLayer *layer = [HelloWorldLayer node];

// add layer as a child to scene
[scene addChild: layer];

// return the scene
return scene;
}

// on “init” you need to initialize your instance
-(id) init
{
// always call “super” init
// Apple recommends to re-assign “self” with the “super” return value
if( (self=[super init])) {
}
return self;
}
– (void) dealloc
{

[super dealloc];
}
@end
————————-

A questo unto cambiamo le scritte in rosso “HelloWorldLayer”  e le sostituiamo con “Pagina1”.

Tutti gli errori adesso dovrebbero essere corretti.

Possiamo inserire un immagine o un menu o altro dentro questa classe proprio come se stessimo lavorando con HelloWorldLayer.

Prima di uscire da questo file andiamo in testa al file dove si trova:

 

#import “Pagina1.h”

 

ed inseriamo subito dopo:

 

#import “HelloWorldLayer.h”

 

Apriamo il file “HellowrldLayer.m” e dopo:

 

#import “HellowrldLayer.h”

 

inseriamo:

 

#import “Pagina1.h”

 

In questo modo le due classi possono comunicare.

Per finire andiamo dentro il metodo “one:” che abbiamo creato nel tutorial 5 e scriviamo:

 

[[CCDirector sharedDirector] replaceScene:[Pagina1 node]];

 

In questo modo quando noi premendo l’immagine1, verranno eseguite le operazioni all’interno del metodo “one:” ed in particolare l’operazione appena descritta che serve ad aprire la classe “Pagina1”.

Se facciamo partire il programma vedremo che premendo l’immagine è come se andassimo in un’altra pagina che visualizza quello che abbiamo messo all’interno di “Pagina1”.

Spero di essere stato chiaro, è più semplice mostrarlo a video che spiegarlo🙂

 

ciaoo

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

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