Uno dei nostri utenti a riscontrato problemi con il titolo delle domande troppo lunghe del suo personale quiz game, dove ha tratto spunto dal nostro precedente tutorial.

In effetti non è stato valutato il ritorno a capo e non ci eravamo posti questo grave problema anche abbastanza molto comune.

Vediamo subito come poter risolvere con poche righe di codice:

-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super init])) {
 
        // Definiamo il testo, in questo caso viene scritto manualmente 
        // ma può essere prelevato anche da un file plist
        // \n sta per new line, nuova linea
        NSString *txt = @"Questo testo viene \n scritto su \n più righe .";
 
        //  Misutiamo l'altezza e la larghezza della strinfa
        float fontSize = 14;
        CGSize maxSize = { 450, 2000 };		// inizializziamo l'altezza e la larghezza massima
 
        // Calcoliamo la dimensione effettiva del testo con la dimensione del font e la modalità di interruzione di linea.
        CGSize actualSize = [txt sizeWithFont:[UIFont fontWithName:@"Trebuchet MS" size:fontSize]
                            constrainedToSize:maxSize
								lineBreakMode:UILineBreakModeWordWrap];
 
        CGSize containerSize = { actualSize.width, actualSize.height };
 
        CCLabelTTF  *label = [CCLabelTTF labelWithString:txt
                                   dimensions:containerSize
                                    alignment:UITextAlignmentLeft
                                     fontName:@"Trebuchet MS"
                                     fontSize:fontSize];
 
		// ask director the the window size
		CGSize size = [[CCDirector sharedDirector] winSize];
 
		// position the label on the center of the screen
		label.position =  ccp( size.width /2 , size.height/2 );
 
		// add the label as a child to this Layer
		[self addChild: label];
	}
	return self;
}

Il codice è già commentato per quel poco che serve per capirlo, quindi evito qualsiasi altra spiegazione, se avete dubbi potete sempre commentare il post.

Potete scaricare il codice sorgente

Il timestamp è una sequenza di caratteri che rappresentano una data e/o un orario per accertare l’effettivo avvenimento di un certo evento.

In programmazione questa data è il primo di gennaio 1970 (1-1-1970).

Il timestamp o meglio detto l’UNIX timestamp corrisponde al numero di secondi trascorsi dalla data Unix Epoch (1 Gennaio 1970).

Cosa serve il timestamp

Perché ci interessa avere la data del primo di gennaio del 1970?? no no.. effettivamente non ci interessa, quello è solo un punto di partenza.

più che altro ci interessa avere due date differenti da confrontare.

pensate a Farmville e a tutti quei giochi dove continuano a funzionare pur avendo il computer spento..
Credete che veramente il mondo del contadinotto di farmville vada realmente avanti?

è proprio qui, in questi casi, che si utilizza il timestamp, ovvero memorizziamo la data di un avvenuto evento, come può essere la seminagione di una pianta di pomodori e poi andiamo a confrontare il timestamp dal momento in cui è stata piantata fino al momento che viene riaccesa l’applicazione.

In questo caso tramite un controllo di flusso possiamo verificare se il tempo trascorso e avviare un azione, che può essere la maturazione del pomodoro o peggio ancora, ritrovarsi con una pianta marcia.

ecco a cosa serve il timestamp: verificare due o più date!

Come usare il timestamp in objective-c

è relativamente semplice, prima vi incollo tutto il metodo init:

-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super init])) {
 
        // Utilizzo del timestamp
        NSString *timestamp = [NSString stringWithFormat:@"%d", (long)[[NSDate date] timeIntervalSince1970]];
 
	// create and initialize a Label
	CCLabelTTF *label = [CCLabelTTF labelWithString:timestamp fontName:@"Marker Felt" fontSize:32];
 
	// ask director the the window size
	CGSize size = [[CCDirector sharedDirector] winSize];
 
	// position the label on the center of the screen
	label.position =  ccp( size.width /2 , size.height/2 );
 
	// add the label as a child to this Layer
	[self addChild: label];
	}
	return self;
}

Ora vediamo l’unica riga che ci genera il timestamp

NSString *timestamp = [NSString stringWithFormat:@"%d", (long)[[NSDate date] timeIntervalSince1970]];

la parte più importante, che genera il timestamp è: timeIntervalSince1970

un intervallo di tempo dal 1970, questa è la definizione in Italiano.

Creiamo ora un applicazione di esempio

Per vedere il reale funzionamento, creiamo una semplice applicazione dove memorizza in una variabile il timestamp di apertura, poi un pulsante che se premuto visualizza il timestamp del momento ed infine una label che mostra la differenza trascorsa dal momento dell’apertura dell’applicazione e il momento in cui è stato premuto il pulsante.

partiamo subito aprendo il file helloWorldLayer.h, per chi non lo sapesse gomonkey tratta Cocos2D e tutte le applicazioni vengono realizzate con questo tipo di template.

// When you import this file, you import all the cocos2d classes
#import "cocos2d.h"
 
// HelloWorldLayer
@interface HelloWorldLayer : CCLayer
{
    CGSize size;
    NSString *timestamp;
    NSString *timestampPulsantePremuto;
    CCLabelTTF *labelAperturaApplicazione;
    CCLabelTTF *labelPulsantePremuto;
    CCLabelTTF *labelDifferenza; 
 
    CCMenuItem *item;
    CCMenu *menu;
}
 
// returns a CCScene that contains the HelloWorldLayer as the only child
+(CCScene *) scene;
 
-(void)prelevaTimestamp;
-(void)differenzeTraTimestamp;
 
@end

Abbiamo creato due stringhe e label per stampare a schermo il timestamp attuale, quindi il menu per cliccare e visualizzare la differenza infine i due metodi che andremo ad utilizzare.

helloWorldLayer.m

partiamo subito dal metodo init

-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super init])) {
 
		// ask director the the window size
		size = [[CCDirector sharedDirector] winSize];
 
        // Utilizzo del timestamp
        timestamp = [NSString stringWithFormat:@"%d", (long)[[NSDate date] timeIntervalSince1970]];
 
		// create and initialize a Label
		labelAperturaApplicazione = [CCLabelTTF labelWithString:timestamp fontName:@"Marker Felt" fontSize:32];
 
		// position the label on the center of the screen
		labelAperturaApplicazione.position =  ccp( size.width /2 , 280 );
 
		// add the label as a child to this Layer
		[self addChild: labelAperturaApplicazione];
 
        item = [CCMenuItemFont itemFromString:@"Click" target:self selector: @selector(prelevaTimestamp)];
 
        menu = [CCMenu menuWithItems:item, nil];
 
        menu.position = ccp(size.width/2, 100);
 
        [self addChild:menu];
	}
	return self;
}

Abbiamo solamente eliminato le dichiarazione perché le abbiamo spostate nel file header, dato che le riutilizzeremo e aggiunto il menu.

ora creiamo il metodo -(void)prelevaTimestamp che si farà la stessa identica cosa del metodo init ma solamente quando verrà premuto il pulsante “Click”

-(void)prelevaTimestamp{
 
    if (labelPulsantePremuto) {
        [self removeChild:labelPulsantePremuto cleanup:YES];
    }
 
    timestampPulsantePremuto = [NSString stringWithFormat:@"%d", (long)[[NSDate date] timeIntervalSince1970]];
 
    labelPulsantePremuto = [CCLabelTTF labelWithString:timestampPulsantePremuto fontName:@"Marker Felt" fontSize:32];
 
    labelPulsantePremuto.position = ccp(size.width/2, 240);
 
    [self addChild:labelPulsantePremuto];
    [self differenzeTraTimestamp];
 
}

Unica nota di merito un IF iniziale che controlla se la variabile labelPulsantePremuto è piena e se lo è prima di procedere la svuota, altrimenti andremmo a scriverci sopra del testo illeggibile.

infine chiamiamo l’ultimo metodo

-(void)differenzeTraTimestamp{
 
    if (labelDifferenza) {
        [self removeChild:labelDifferenza cleanup:YES];
    }
 
    int primo = [timestamp intValue];
    int secondo = [timestampPulsantePremuto intValue];
 
    NSString *differenza = [NSString stringWithFormat:@"secondi trascorsi: %d", secondo - primo];
 
    labelDifferenza = [CCLabelTTF labelWithString:differenza fontName:@"Marker Felt" fontSize:32];
 
    labelDifferenza.position = ccp(size.width/2, 200);
 
    [self addChild:labelDifferenza];
}

Prima cosa: Noi abbiamo memorizzato il timestamp in una variabile di tipo NSString, questo non va assolutamente bene, però non vogliamo trasformare la semplicità del codice su più righe e abbiamo deciso di continuare usando una stringa e non un intero.

Però non possiamo, quindi ci viene in aiuto intValue che trasforma la nostra stringa in intero.

ora creiamo solamente una nuova label e al suo interno ci mettiamo una sottrazione tra il secondo intero e il primo intero.

Non è al contrario… ho deciso così solo perché il timestampPulsantePremuto viene creato dopo, però è maggiore del primo e al contrario avremmo avuto un calcolo passivo.

Ora premiamo run per vedere il risultato

Potete scaricare il file sorgente del progetto

Questo ci servirà comunque perché Cocos2d alla fine è un framework grafico di objective-c e spesso dobbiamo far uso del linguaggio puro.

Vediamo come impostare una data e un orario con objective-c.

Naturalmente noi creiamo un nuovo progetto in Cocos2D e lavoriamo con il template grafico.

Apriamo il file helloWorldLayer e all’interno del metodo init aggiungiamo la parte di codice che gestisce la data, tenendo tutto il resto modificando solo la dimensione del carattere e sostituendo la scritta Hello World con il nome della variabile str senza chiocciola e apici.

-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super init])) {
 
        // Implementiamo il codice che gestisce la data in objective-c
        NSDate *date = [NSDate date];
 
        //Creiamo l'oggetto dateformatter 
 
        NSDateFormatter *formatter = [[[NSDateFormatter alloc] init] autorelease];
 
        //Settiamo la data
 
        [formatter setDateFormat:@"'data:' dd-MM-yyyy ' ora:' HH-mm"];
 
        //Preleviamo la data tramite stringa NSString
 
        NSString *str = [formatter stringFromDate:date];
 
	// create and initialize a Label
	CCLabelTTF *label = [CCLabelTTF labelWithString:str fontName:@"Marker Felt" fontSize:32];
 
	// ask director the the window size
	CGSize size = [[CCDirector sharedDirector] winSize];
 
	// position the label on the center of the screen
	label.position =  ccp( size.width /2 , size.height/2 );
 
	// add the label as a child to this Layer
	[self addChild: label];
	}
	return self;
}

Clicchiamo su run per vedere apparire come da immagine:

La stringa che formatta la data è la seguente:

[formatter setDateFormat:@"'data:' dd-MM-yyyy ' ora:' HH-mm"];

Dove formatter è di tipo NSDateFormatter

Fate molta attenzione agli apici, infatti i testi data e ora con rispettivi doppi punti sono all’interno di due apici singoli, questo per differenziare la data dal normale testo

Andiamo a vedere ora come possiamo gestire la data in vari formati:

Data:

Ora

Conclusione

Potrebbe tornarci utile sapere come gestire le date in vari formati per poter memorizzarle all’interno della nostra applicazione e poi confrontarle.

Iniziamo aggiungendo nel file .h tutti gli oggetti che ci serviranno

CCMenuItemFont *aumenta;
CCMenuItemFont *reset;
CCMenuItemFont *salva;
CCMenu *menu;
 
CCLabelTTF *punteggio;
NSString *stringa;
 
int score;

Abbiamo aggiunto tre menu che serviranno appunto per aumentare resettare e salvare il punteggio, poi abbiamo aggiunto un label e una stringa che ci mostreranno il punteggio e infine l’integer che conterrà il punteggio vero e proprio.

Ora che abbiamo tutto spostiamoci nel file .m ed aggiungiamo i nostri menu:

aumenta = [CCMenuItemFont itemFromString:@"Aumenta Punteggio" target:self selector:@selector(aum)];
reset = [CCMenuItemFont itemFromString:@"Reset" target:self selector:@selector(res)];
salva = [CCMenuItemFont itemFromString:@"Salva" target: self selector:@selector(sal)];
menu = [CCMenu menuWithItems:aumenta,reset,salva, nil];
[menu alignItemsVertically];
[self addChild:menu];

Perfetto ora aggiungiamo la stringa che conterrà l’integer score e la inseriamo nel label, in questo modo:

stringa = [NSString stringWithFormat:@"Punteggio: %d",score];
punteggio = [CCLabelTTF labelWithString:stringa fontName:@"Marker Felt" fontSize:24];
punteggio.position=ccp(400,300);
[self addChild:punteggio];

Ok, adesso aggiungiamo i tre metodi che abbiamo chiamato nei menu: il primo servirà ad aumentare il punteggio

-(void)aum{
score++;
stringa = [NSString stringWithFormat:@"Punteggio: %d",score];
[punteggio setString:stringa];
}

Il secondo ci metterà il punteggio a zero:

-(void)res{
score=0;
stringa = [NSString stringWithFormat:@"Punteggio: %d",score];
[punteggio setString:stringa];   
}

Ed infine il terzo ci salverà il punteggio in un plist utilizzando NSUserDefaults:

-(void)sal{
NSUserDefaults *ud=[NSUserDefaults standardUserDefaults];
[ud setInteger:score forKey:@"Punteggio"];
[ud synchronize];   
}

In questo modo gli abbiamo detto di inserire l’integer score all’interno della chiave Punteggio nel plist.

Ora abbiamo tutto, dobbiamo solo fare in modo che il punteggio venga letto ogni volta che avviamo l’applicazione, quindi andremo ad aggiungere questo codice nel metodo init appena sotto i menu:

NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];
score=[ud integerForKey:@"Punteggio"];

Perfetto in questo modo gli abbiamo detto di prendere il contenuto del plist e di inserirlo nell’integer score, che essendo a sua volta inserito nella stringa ci mostrerà il punteggio salvato ogni volta che avvieremo l’app.

Ovviamente in questo modo potremmo salvare non solo il punteggio ma qualsiasi cosa come impostazioni o altro…

Se avete dubbi potete scaricare il file in allegato

Rimaniamo per qualche secondo a bocca aperta increduli e senza nessuna idea del motivo, eppure qualcosa che non funziona, qualcosa di sbagliato nel codice ci deve essere per forza.

Molti programmatori novizi odiano la parola SIGABRT, e condivido immagini in rete chiedendo il motivo!!

Scordatevelo!!! nessuno mai vi darà la soluzione.

A volte invece è a portata di mano, basterebbe apri il log, premendo sul pulsante in alto a destra come da immagine

Per scoprire che come ad esempio (solo come esempio) manca l’immagine:

Quindi effettivamente xCode ci viene in aiuto.

Il segreto è principale o la prima cosa da fare comunque è quello di andare a leggere il log di xCode.

Però ad essere sinceri non sempre si riesce a capire quale sia il problema o dove viene generato, a volte addirittura nemmeno xCode è in grado di aiutarci, ma allora come possiamo fare?

In questo caso, dobbiamo utilizzare un agente segreto che ci aiuterà a scoprire il motivo del nostro errore.

il nostro 007 viene chiamato CCLog();

Lo utilizzeremo per stampare qualsiasi cosa in qualsiasi punto del codice, sia all’interno delle istruzioni IF-ELSE, sia nei cicli oppure nei vari metodi.

Piazzeremo la nostra spia nei punti più segreti del nostro codice per poi andare le informazioni che ci riporta.

Ma lo dobbiamo fare con testa per non incasinarci maggiormente.

esempio in un ciclo for potremmo passargli il numero dell’intero in modo da capire fino a che punto cicla o se ha blocchi dovuti ad altra parte di codice all’interno del ciclo stesso.

for ( int i = 0; i<10; i++){
 
CCLog(@"i = %i", i);
 
// Altro codice all'interno del ciclo.
}

Ora all’avvio della nostra applicazione, se all’interno del log vengono stampati i numeri dallo zero al nove significa che all’interno di quel ciclo non vi sono errori.

Altro metodo potrebbe essere all’interno di un istruzione IF-ELSE.

Se noi ci aspettiamo che il codice entra all’interno dell’istruzione IF perché la riteniamo vera allora dovrà stamparci una riga nel log come da esempio

if(condizioneValida){
CCLog(@"Sono all'interno dell'istruzione IF");
// Altro codice all'interno dell'istruzione if.
}else{
CCLog(@"condizioneValida risulta falsa");
// Codice che viene stampato se if risulta falso
}

Ora se salta l’istruzione IF vuol dire che la condizione è falsa, e se noi non volevamo questo dovremmo rivedere la variabile condizioneValida.

Altro sistema è controllare i metodi

-(void)mioMetodo{
CCLog(@"Sono all'interno di mioMetodo");
// Altro codice all'interno del metodo
}

Anche qui se ci aspettiamo di entrare nel metodo ma non succede all’ora c’è un errore.

Per capire quest’ultimo vi faccio un esempio di errore che xCode non segnalerà mai

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
CCLog(@"Ho toccato lo schermo");
 
// Altro codice all'interno del metodo
}

Perfetto, sappiamo che se tocchiamo lo schermo il log deve stampare quella scritta.

Ma se questo non avviene? semplicemente potremmo esserci scordati di inserire questo codice all’interno del metodo init

self.isTouchEnabled = YES;

Avete visto come una dimenticanza se pur semplice non genererebbe nessun errore e vi farebbe impazzire?

Andiamo a vedere un applicazione reale.

Abbiamo da poco realizzato il tutorial quiz game, quest’ultimo andava in crash e l’errore del log era questo: value lenght must be greater than 0

Vediamo in che modo è stato risolto attraverso l’utilizzo del nostro agente spia.

Questo il metodo completo creaDomanda, il primo ad essere maggiormente indiziato

-(void)creaDomanda{
 
    int randomValue =  (arc4random() % 5); 
 
    NSString *stringa = [NSString stringWithFormat:@"Domanda%i", randomValue];
 
    CCLOG(@"%@",stringa);
 
    // Apre il dictionary
    dictionary = [plistData objectForKey:stringa];
 
    // Preleva la domanda
    domanda = [dictionary valueForKey:@"Titolo"];
 
    labelDomanda = [CCLabelTTF labelWithString:domanda fontName:@"Marker Felt" fontSize:24];
 
    // position the label on the center of the screen
    labelDomanda.position =  ccp( size.width /2 , 280 );
 
    // add the label as a child to this Layer
    [self addChild: labelDomanda];
 
 
    // Estraggo la risposta esatta dal file plist e lo converto da number ad intero
    int rispostaEsatta = [[dictionary valueForKey:@"Soluzione"] intValue];
 
    // Creiamo il menu dinamicamente
 
    menu = [CCMenu menuWithItems:nil];
 
   CCLOG(@"prima del ciclo for"); 
 
    for (int i = 1; i<5;i++)
    {
 
        CCLOG(@"ciclo for %i", i);
 
        if(rispostaEsatta == i){
 
            // La risposta che viene stampata è quella corretta quindi lo mandiamo in un metodo di vincita
 
            item = [CCMenuItemFont itemFromString:[dictionary valueForKey:
                                                               [NSString stringWithFormat:@"Risposta%i",i] ]
                                                       target:self selector:@selector(corretto)];
 
        }else{
 
            // La risposta che viene stampata non è corretta e quini lo mandiamo in un metodo di errore
            item = [CCMenuItemFont itemFromString:[dictionary valueForKey:
                                                               [NSString stringWithFormat:@"Risposta%i",i] ]
                                                       target:self selector:@selector(sbagliato)];
        }
 
        [menu addChild:item];
 
    }
    [menu alignItemsVertically];
 
    [self addChild:menu];
 
 
 
}

Non sappiamo ancora dove sia il problema, sappiamo solo cosa fa il metodo:

1. Preleva una domanda con risposte dal file plist tramite dictionary
2. stampa la domanda
3. stampa le risposte tramite ciclo

abbiamo per prima cosa inserito un CCLog per scoprire il nome della domanda

CCLOG(@"%@",stringa);

in questo modo all’interno del log ogni volta che apparirà una nuova domanda ci verrà stampato nel log la chiave del dizionario che può essere Domanda1, Domanda2 e così via.

Seconda spia l’abbiamo messa poco prima del ciclo, per vedere se si interrompeva prima dell’ingresso

CCLOG(@"prima del ciclo for");

un semplice testo, nulla di più.

L’ultima la siamo andati a mettere all’interno del ciclo per verificare se una volta al suo interno portasse a termine il suo compito, se così non fosse sarebbe indubbiamente al suo interno.

CCLOG(@"ciclo for %i", i);

Stampa semplicemente la sequenza di numeri dall’uno al quattro.

Avviando l’applicazione e giocandoci su un paio di volte sempre con il log aperto scopriamo che al momento non vi è nulla di anomalo, ma dobbiamo proseguire fino a quando l’app non va in crash.

Non ci ha fatto attendere molto, giusto tre o quattro risposte per aver a portata di mano la nostra soluzione.

Adesso è tutto veramente molto più chiaro..

Ci stampa Domanda0, questo significa che sta cercando all’interno del nostro plist una chiave che non esiste, quindi capiamo che la generazione del numero casuale si comporta in maniera errata e va modificata in questo modo:

int randomValue =  (arc4random() % 4) + 1;

Perfetto abbiamo risolto il mistero e sistemato l’applicazione che ora è funzionante.

Non sempre abbiamo vita semplice

Abbiamo trovato un errore in un applicazione dove è composto da un solo file di 210 righe con tanto di spazi.

Certo, ricordarsi di scrivere è senza dubbio un grande aiuto nel proseguimento dell’opera, però a volte se si ha a che fare con grandi progetti che implementano più file e classi, la ricerca dell’errore può risultare molto più complesso e portare via molto più tempo.

Diciamocelo, scrivere troppi CCLog ci potrebbe mandare in confusione e porterebbe via memoria preziosa alla nostra applicazione che verrà ospitata comunque da dei piccoli device come l’iPhone, quindi dovremmo eliminare tutto prima della pubblicazione.

Come fare quindi quando si ha a che fare con applicazioni di un certo livello?

prima cosa scriviamo del codice con stile

CCLog(@"nomeClasse nomeMetodo descrizione")

In questo modo sappiamo sempre da dove nasce anche quando dovremmo riprendere ed eliminare quella riga con il passare del tempo, e vi assicuro che ci scordiamo.

Ora però il difficile.

Dovremmo aver in mente più o meno come si comporta e che flusso ha la nostra applicazione perché l’abbiamo creata noi.

Dovremmo sapere più o meno cosa viene richiamato facendo delle determinate azioni e che flusso prende, quali metodi o classi va a toccare.

Quindi blocchiamola noi l’applicazione fino a che non ci porta in errore.

Utilizziamo i break, cliccando sui bordi delle righe

Naturalmente questo in foto è un esempio ed è basato su uno spazio breve per mostrarvi il funzionamento, ma pensate se lo facessimo all’inizio di ogni metodo chiamato in causa, vedremmo il reale flusso della nostra applicazione

ora facciamo partire l’applicazione

si è bloccata l’applicazione, ma non è un errore, è voluto da noi

non ci ha dato nessun errore quindi proseguiamo cliccando su play:

e di nuovo abbiamo un blocco di numero due:

e così avanti fino a quando non troviamo l’errore.

Potremmo una volta entrati nel metodo che ci genera l’errore bloccarlo riga per riga fino ad arrivare alla riga incriminata, oppure utilizzare i CCLog per capire il reale motivo di questo crash

Per togliere i break dobbiamo cliccare nuovamente sulla freccia di colore blu facendola diventare azzurra.

Rimane azzurra solo come pro memoria, per eliminarla definitivamente cliccare con il tasto destro sopra il break e quindi delete breakpoint

Cosa abbiamo imparato

La vita del programmatore è spesso quella di trovare soluzioni e ingegnarsi ma a volte potrebbe risultare più noiosa che divertente.
Con questo tutorial abbiamo capito come risparmiare tempo prezioso e andare a caccia del problema.
Spero di essere stato di aiuto sopratutto a chi si avvicina alla programmazione e non ha esperienza tale da risolversi da solo i vari problemi.

In questo secondo tutorial impareremo ad inserire immagini e testi sullo schermo del nostro device preferito tramite l’uso del comando display. Potete scaricare il progetto completo con le risorse utilizzate in questo tutorial

Innanzitutto creiamo una cartella, metteteci dentro il file immagine che avete appena scaricato e il nostro bel main.lua, che come abbiamo detto nel tutorial precedente, è il file principale che serve a CoronaSDK per avviare l’app, iniziamo quindi scrivendo:

local background = display.newImage("landscape.jpg")

In questo modo non facciamo altro che visualizzare sul display una nuova immagine di nome landscape.jpg associandola ad una variabile locale di nome background. Se compilate e avviate il progetto, vi apparirà una schermata come questa:

Continuiamo ora aggiungendo le seguenti righe:

local mioTesto = display.newText("Ciao Mondo!", 0, 0, nil, 40)
mioTesto.x = display.contentWidth / 2
mioTesto.y = display.contentHeight / 4
mioTesto:setTextColor(255, 255, 80)

Anche qua come prima creiamo una variabile locale di nome mioTesto, solo che anziché una immagine ci mettiamo dentro un testo col comando display.newText, al quale passiamo anche degli altri valori oltre al testo da visualizzare. In particolare i primi due sono il posizionamento X e Y prendendo come riferimento l’angolo in alto a sinistra del testo, gli diamo 0 perché lo posizionamo dopo con un altro metodo, il terzo è il tipo di carattere da usare, in questo caso nil perché vogliamo usare il font standard del sistema, e l’ultimo è la grandezza in pixel del carattere.

Nella seconda e terza riga posizioniamo il testo in orizzontale tramite le proprietà x e y della variabile appena creata, ma come potete notare non gli diamo un valore assoluto di posizionamento, bensì gli facciamo calcolare la larghezza (display.contentWidth) o l’altezza (display.contentHeight) dello schermo, e poi dividiamo il primo per due in modo da centrare il testo orizzontalmente, e per quattro il secondo in modo da averlo esattamente ad un quarto di distanza dal bordo superiore. Utilizziamo questo sistema perché così avremo lo stesso risultato sia se la nostra app viene eseguita su iPhone, sia sugli smartphone Android che hanno varie misure di schermo.

Nell’ultima riga scritta richiamiamo il metodo setTextColor, che ci permette di impostare il colore del testo passandogli i tre valori rgb standard da 0 a 255 per ogni colore primario. Da notare come in Lua i metodi vengano richiamati utilizzando il simbolo dei due punti:

variabile:metodo(valore)

in objective-C questo tipo di comando sarebbe stato dato sotto questa forma:

[variabile metodo:valore]

Se proviamo ora a far partire l’emulatore avremo una scritta giallina sull’immagina di sfondo in questo modo:

Proviamo ora ad aggiungere un secondo testo più piccolo e bianco sotto il primo, usando una forma diversa, cioè dichiariamo prima due variabili che contengono il testo da visualizzare:

local testoSaluto = "Saluti da"
local testoNome = "GoMonkey.it"

e poi usando gli stessi comandi di prima per visualizzare, posizionare e colorare il nuovo testo:

local secondoTesto = display.newText(testoSaluto .. " " .. testoNome, 0, 0, native.systemFont, 20)
secondoTesto.x = display.contentWidth / 2
secondoTesto.y = display.contentHeight/ 3
secondoTesto:setTextColor(255, 255, 255)

Come avrete notato abbiamo usato i nomi delle variabili questa volta, concatenando le due scritte tra loro ed uno spazio in mezzo, tramite il comando di concatenamento delle stringhe, che in Lua sono due punti affiancati; inoltre questa volta abbiamo dichiarato esplicitamente il font da usare per il testo, che è sempre il font di sistema, quindi avremmo potuto usare nil anche qua. Le restanti righe sono simili alle precedenti ma con un posizionamento diverso e un colore bianco puro.

Ricompiliamo ancora una volta e avremo la nostra schermata finale:

Non mi resta che salutarvi e ricordarvi che se avete bisogno di chiarimenti potete scrivere nei commenti. A presto col prossimo tutorial!

Il file property è a tutti gli effetti un file XML.

Iniziamo con il creare un nuovo progetto cocos2d, io l’ho chiamato semplicemente “quiz game”

Creazione del file Property list

Per prima dobbiamo aggiungere un nuovo file plist, per fare questo andiamo sul menu di destra con tutti i nostri file e clicchiamo con il tasto destro (ctrl + click) sulla cartella del progetto e quando apparirà il menu clicchiamo su “New File”

Scegliamo dunque di creare un nuovo file Property List cliccando sul menu di sinistra Resource in IOS

Infine salviamo il file dopo che è stato rinominato, in questo caso l’ho semplicemente chiamato “Domande”

Il nostro menu ora apparirà come in foto

Lavoriamo con le Property List

Ora apriamo il file Domande.plist, vi apparirà un quadro totalmente bianco, ma non abbiate paura perché è semplicemente vuoto e noi ora lo andiamo a riempire.

Clicchiamo con il tasto destro in un punto qualsiasi del file bianco e all’apertura del menu clicchiamo su Add Row che in Italiano significa nuova riga

Al posto di New Item inseriamo il testo Domanda 1 e in type mettiamo Dictionary dal menu a tendina.

Ora ripetiamo le operazioni per quattro volte in modo da avere quattro domande.

Ci sono due metodi, o facciamo come sopra oppure basterebbe semplicemente cliccare sul tasto con il simbolo più (+) che trovate nella prima riga.

Fate però attenzione che se decidete di cliccare sul tasto + la freccia sulla sinistra deve puntare a destra, se puntasse in basso saremmo all’interno di quella riga e quindi andremmo ad aggiungere dei nuovi record alla domanda uno e questo lo faremo più avanti.

Ora passiamo all’inserimento dei record, ovvero:

• La domanda
• Le quattro possibilità di risposta
• La risposta esatta

Prima avevo detto di stare attenti alla freccia affianco alla domanda 1, ora clicchiamo sopra quella freccia e attendiamo che cambi posizione da destra verso il basso, una volta che questo è avvenuto clicchiamo il simbolo più (+) sulla riga della domanda in modo da creare una nuova riga ma all’interno della domanda.

Le domande sono di tipo Dictionary e questo è importante ma presto parleremo anche dei vari tipi disponibili per i file plist.

Alla nuova riga creiamo la domanda chiamandola Titolo lasciando come type il valore default che è string e in value un testo che sarà la nostra domanda: Domanda numero 1 va più che bene per capire cosa stiamo facendo.

Se fate attenzione questa nuova riga non ha la freccia sulla sinistra, questo perché non è del tipo dictionary.

Ora clicchiamo nuovamente sul pulsante più.

Possiamo decidere se farlo sulla riga appena creata oppure sulla riga madre baste che quest’ultima sia aperta con freccia che guarda verso il basso.

Ora dobbiamo creare le seguenti righe:

• Risposta1 di tipo string con value: Risposta prima
• Risposta2 di tipo string con value: Risposta seconda
• Risposta3 di tipo string con value: Risposta terza
• Risposta4 di tipo string con value: Risposta quarta
• Soluzione di tipo number con value: 1

Infine abbiamo 6 righe dove le prime cinque contengono delle stringe mentre l’ultima riga è di tipo number e contiene un numero, in questo caso è 1.

La scelta del numero 1 è dovuto al fatto di evitare confusione nel tutorial, in pratica la prima domanda sarà quella corretta mentre le altre saranno sbagliate.

Nelle prossime domande invece il valore sarà rispettivo al numero di domanda in modo che quando andremo a testare l’applicazione sappiamo che alla domanda terza la risposta corretta sarà la terza.

Ripetiamo ora tutte le operazioni con le altre tre domande mancanti fino ad aver un risultato del genere:

I Tipi nelle property

Meglio fare un attimo di chiarezza su i tipi che mette a disposizione le property list, fino ad ora abbiamo visto dictionary, string e number, ma cosa fanno e quanti altri ce ne sono?

Dictionary è praticamente il contenitore di quello che andremo mettere al suo interno, una scatola contenente tutte le altre righe.

Array Possibilità di creare array anche utilizzando i plist

String se di questo tipo vi andrà al suo interno del testo

Number Contiene numeri sia di tipo intero sia float separati da una virgola

Date Stampa la data con ora in questo formato: 06/mag/2012 17.57.55

Data è un tipo di dato codificato in ascii Wikipedia Base64

Boolean è per verificare se la condizione è vera o falsa

per altre informazioni sui file plist vi rimando alla pagina di wikipedia

Organizziamo il progetto

Prima di iniziare a scrivere il codice dobbiamo capire cosa vogliamo fare.

Dobbiamo stampare una domanda e quattro risposte, sapere sin da subito quale delle risposte è esatta e pilotare la risposta data dall’utente e segnargli il risultato.

Infine aggiungere un punteggio incrementando di 50 punti per ogni risposta corretta e decrementare di 20 punti per ogni risposta sbagliate e cambiare colore al punteggio in verde se il punteggio è attivo, in rosso invece se è passivo.

I metodi necessari

Sembra strano ma non faremo molto codice, comunque abbiamo bisogno di alcuni metodi e questi sono:

• eliminaLabel
• corretto
• sbagliato
• creaDomanda
• init
• dealloc

helloWorldLayer.h

All’interno dell’interface incollare quanto segue:

    CGSize size;
 
    NSString *path;
    NSString *finalPath; 
    NSString *domanda;
 
    NSDictionary *plistData;
 
    NSArray *dictionary;
 
    int increment;
 
    CCMenuItem *item;
    CCMenu *menu;
 
    CCLabelTTF *labelRisultato;
    CCLabelTTF *labelDomanda;
    CCLabelTTF *pointLabel;

CGSize ci servirà per posizionare gli elementi sullo schermo prendendo la dimensione del device.

Poi abbiamo tre variabili di tipo NSString un NSDictionary e infine un NSArray che ci serviranno per leggere il file .plist

una variabile di tipo integer che utilizzeremo per il punteggio.

Infine tre label che usiamo per le domande, le risposte e la stampa del punteggio.

All’esterno subito dopo la dichiarazione di scena inseriamo questo metodo:

-(void)creaDomanda;

Il cuore dell’applicazione

Partiamo con il scrivere per prima cosa tutti i metodi lasciandoli vuoti.

-(void)eliminaLabel{
}
 
-(void)corretto{
}
 
-(void)sbagliato{
}
 
-(void)creaDomanda{
}

Tutto va sopra il metodo init.

Entriamo ora nel metodo init eliminando tutto quanto di default e incollando il seguente codice:

size = [[CCDirector sharedDirector] winSize];
 
        // Apre il file plist
        path = [[NSBundle mainBundle] bundlePath];
        finalPath = [path stringByAppendingPathComponent:@"Domande.plist"];
        plistData = [[NSDictionary dictionaryWithContentsOfFile:finalPath] retain];
 
[self creaDomanda];
 
        // Punteggio
        pointLabel = [CCLabelTTF labelWithString:@"Points: 0" fontName:@"Marker Felt" fontSize:18];
        pointLabel.position =  ccp( size.width - 60 , size.height - 18 );
        [self addChild: pointLabel];

Il codice è diviso in tre parti.

1. Andiamo ad aprire il file plist;
2. richiamiamo il metodo creaDomanda
3. Aggiungiamo la label del punteggio con valore 0

Metodo creaDomanda

N.B. è stato riveduto un bug in questa parte di codice, puoi trovare la spiegazione all’errore all’interno di questo post nel forum

Passiamo ora al metodo che gestisce la creazione della domanda:

-(void)creaDomanda{
 
    int randomValue =  (arc4random() % 4) + 1;
 
    NSString *stringa = [NSString stringWithFormat:@"Domanda%i", randomValue];
 
    // Apre il dictionary
    dictionary = [plistData objectForKey:stringa];
 
    // Preleva la domanda
    domanda = [dictionary valueForKey:@"Titolo"];
 
    labelDomanda = [CCLabelTTF labelWithString:domanda fontName:@"Marker Felt" fontSize:24];
 
    // position the label on the center of the screen
    labelDomanda.position =  ccp( size.width /2 , 280 );
 
    // add the label as a child to this Layer
    [self addChild: labelDomanda];
 
    // Estraggo la risposta esatta dal file plist e lo converto da number ad intero
    int rispostaEsatta = [[dictionary valueForKey:@"Soluzione"] intValue];
 
    // Creiamo il menu dinamicamente
 
    menu = [CCMenu menuWithItems:nil];
 
    for (int i = 1; i<5;i++)
    {
        if(rispostaEsatta == i){
 
            // La risposta che viene stampata è quella corretta quindi lo mandiamo in un metodo di vincita
 
            item = [CCMenuItemFont itemFromString:[dictionary valueForKey:
                                                               [NSString stringWithFormat:@"Risposta%i",i] ]
                                                       target:self selector:@selector(corretto)];
 
        }else{
 
            // La risposta che viene stampata non è corretta e quini lo mandiamo in un metodo di errore
            item = [CCMenuItemFont itemFromString:[dictionary valueForKey:
                                                               [NSString stringWithFormat:@"Risposta%i",i] ]
                                                       target:self selector:@selector(sbagliato)];
        }
 
        [menu addChild:item];
 
    }
    [menu alignItemsVertically];
 
    [self addChild:menu];
 
 
 
}

Per prima cosa abbiamo bisogno di un numero random per capire quale delle quattro domande dobbiamo andare a leggere e abbiamo fatto in questo modo utilizzando arc4random()

int randomValue =  (arc4random() % 5);

preleva un numero che va da 1 a 4.

Ricordiamo che all’interno del file property abbiamo quattro righe di tipo dictionary che si chiamano Domanda1, Domanda2, Domanda3 e Domanda4.

I numeri li abbiamo estratti casualmente nella prima riga, ora invece dobbiamo concatenare il testo al numero in modo da andare ad aprire uno solo dei dictionary e lo facciamo in questo modo:

 NSString *stringa = [NSString stringWithFormat:@"Domanda%i", randomValue];
dictionary = [plistData objectForKey:stringa];

Ora abbiamo aperto uno dei quattro dizionari.

Ci manca solo da stampare a schermo la domanda e le quattro risposte e vedere quale di queste è la risposta corretta.

tramite valueForKey preleviamo il testo della domanda e successivamente faremo la stessa cosa per le risposte

// Preleva la domanda
    domanda = [dictionary valueForKey:@"Titolo"];

infine stampiamo a monitor

labelDomanda = [CCLabelTTF labelWithString:domanda fontName:@"Marker Felt" fontSize:24];
 
    // position the label on the center of the screen
    labelDomanda.position =  ccp( size.width /2 , 280 );
 
    // add the label as a child to this Layer
    [self addChild: labelDomanda];

Ora estraiamo il numero della risposta esatta. Ricordate? abbiamo pensato giusto di mettere come risposta lo stesso numero della domanda, quindi se la domanda sarà la seconda, la risposta corretta sarà la seconda.

Abbiamo un problema… in plist la risposta equivale a number ma noi per poter verificare se è corretta abbiamo più avanti la necessità di utilizzare un intero, quindi ci comportiamo di conseguenza:

 // Estraggo la risposta esatta dal file plist e lo converto da number ad intero
    int rispostaEsatta = [[dictionary valueForKey:@"Soluzione"] intValue];

tramite intValue abbiamo trasformato il nostro number in int e quindi possiamo proseguire tranquillamente.

Creiamo il menu dinamicamente

    menu = [CCMenu menuWithItems:nil];

Al contrario di come abbiamo sempre fatto ora il menu è senza items perché li andremo ad aggiungere dinamicamente tramite ciclo for

for (int i = 1; i

Prima cosa da notare, il ciclo parte da 1 e continuerà fino a quando il valore della variabile i sarà minore di 5, quindi a 4.

Solitamente nei tutorial si vede questo valore partire da 0, ma sono solo scelte, noi abbiamo bisogno del valore 1 altrimenti ci genererà un errore al programma.

Vediamo ora se la risposta è esatta tramite un controllo di flusso IF-ELSE

if(rispostaEsatta == i){

rispostaEsatta contiene il numero della risposta corretta che abbiamo precedentemente prelevato e trasformato in intero, proprio per poter far funzionare questa porzione di codice.

Ora mentre il programma cicla la variabile i si incrementa di uno e andrà a stampare le risposte, se la risposta che viene stampata è quella corretta allora l’istruzione risulterà vera ed entrerà nel ciclo, altrimenti salta il blocco e passa oltre.

Le items vengono create dinamicamente come già detto, ma vediamo nel dettaglio:

item = [CCMenuItemFont itemFromString:[dictionary valueForKey:[NSString stringWithFormat:@"Risposta%i",i] ]target:self selector:@selector(corretto)];

Una sola riga per fare innumerevoli items dinamicamente, credo sia fantastico!

da notare solo una cosa: itemFromString dove solitamente avremmo fatto in questo modo: itemFromString:@”nome menu”, genera ora il testo dinamicamente andando a prelevare all’interno del file plist la nostra risposta utilizzando la parola chiave Risposta più il numero di risposta che in questo caso ci viene dato dal ciclo e dalla variabile int i.

Infine nel selector rimandiamo al metodo corretto, questo perché siamo all’interno dell’istruzione IF mentre nel blocco ELSE che genera gli altri tre items rimandiamo al metodo sbagliato

Quindi ora non ci tocca che aggiungere gli items al menu in questo modo, sempre all’interno del ciclo for:

[menu addChild:item];

e per finire subito all’esterno del ciclo for creiamo il menu

[menu alignItemsVertically];
[self addChild:menu];

Non ho pensato a nessun settaggio di posizione e colore.

Per questo metodo abbiamo concluso.

Se sbagliamo abbiamo bisogno di avvisare il giocatore

Passiamo ora al metodo di nome sbagliato

-(void)sbagliato{
    CCLOG(@"Sbagliato");
 
    labelRisultato = [CCLabelTTF labelWithString:@"Hai sbagliato!"
    fontName:@"Marker Felt" fontSize:24];
    [labelRisultato setColor:ccc3(255, 1, 1)];
    labelRisultato.position = ccp(size.width / 2, 40);
    [self addChild:labelRisultato];
 
    // Richiamiamo il metodo per eliminare la label dopo 0,3 secondi
    [self performSelector:@selector(eliminaLabel) withObject:nil afterDelay:0.3];
 
    // Punteggio
    increment = increment - 20;
    [pointLabel setString: [NSString stringWithFormat: @"Points: %i", increment]];
 
    if( increment < 0) {        
   pointLabel.color = ccc3(255, 1, 1); // COLORE ROSSO    
     }else if (increment > 0){
        pointLabel.color = ccc3(1, 255, 1); // COLORE VERDE
 
    }
 
}

Le prime quattro righe generano una label di colore rosso posizionato sotto le risposte che avvisano il giocatore che ha sbagliato la risposta.

Quindi andiamo a chiamare il metodo che elimina la label dopo 0,3 secondi

[self performSelector:@selector(eliminaLabel) withObject:nil afterDelay:0.3];

infine settiamo il punteggio togliendo 20 punti per ogni risposta sbagliata.

Ultimo passaggio controlliamo tramite un controllo di flusso IF-ELSE se il punteggio è maggiore o minore di 0 e settiamo il colore della label a seconda se siamo in attivo o in positivo.

Quando è giusto abbiamo un comportamento simile ma diverso

Controlliamo come è stato sviluppato il metodo di nome corretto:

-(void)corretto{
    CCLOG(@"Corretto");
 
    if (menu) [self removeChild:menu cleanup:YES]; 
 
    if (labelDomanda) [self removeChild:labelDomanda cleanup:YES];
 
    labelRisultato = [CCLabelTTF labelWithString:@"Corretto!" fontName:@"Marker Felt" fontSize:34];
 
    [labelRisultato setColor:ccc3(255, 1, 1)];
 
    labelRisultato.position = ccp(size.width / 2, size.height / 2);
 
    [self addChild:labelRisultato];
 
    // Richiamiamo il metodo per eliminare la label dopo un secondo
    [self performSelector:@selector(eliminaLabel) withObject:nil afterDelay:1.0];
 
    // Richiamiamo una nuova domanda dopo un secondo
    [self performSelector:@selector(creaDomanda) withObject:nil afterDelay:1.0];
 
    // Punteggio
    increment = increment + 50;
    [pointLabel setString: [NSString stringWithFormat: @"Points: %i", increment]];
 
    if( increment < 0) {          
     pointLabel.color = ccc3(255, 1, 1); // COLORE ROSSO     
      }else if (increment > 0){
        pointLabel.color = ccc3(1, 255, 1); // COLORE VERDE
 
    }

Prima preoccupazione, eliminiamo se esistente sia il menu che la label della domanda.

Creiamo un label con scritto “corretto” posizionandola in centro e con un carattere maggiore, tanto abbiamo spazio in quanto tutto è sparito.

Quindi eliminiamo la label e creiamo una nuova domanda

infine incrementiamo il punteggio di 50.

Ultimo passaggio: eliminiamo le label

-(void)eliminaLabel{
 
    [self removeChild:labelRisultato cleanup:YES];
 
}

Penso che non ci siano parole per descrivere cosa fa questo metodo.

Di cosa non mi sono preoccupato

Non ho pensato a mettere un controllo di domande e quindi sicuramente si ripeteranno, ma credo che se si fa un buon lavoro e si scrivono centinaia e centinaia di domande, il ripetersi di una inizi a diventare veramente difficile.

Conclusioni

Spero veramente di aver risolto i problemi di molti di loro che in questi tempi mi hanno chiesto tutorial sui file plist e su come creare dei quiz game.

Auguro a tutti voi di creare degli ottimi quiz game partendo da questa base e se vi farà piacere potrete mettere gomonkey tra i credits.

Corona SDK è un eccellente tool di sviluppo per giochi e applicazioni mobile. Il vantaggio principale nell’usare questo SDK anziché quello ufficiale stà nella possibilità di poter compilare nativamente app per iPhone, iPad, Kindle Fire, Nook Color, smartphone e tablet Android in modo tale che l’eseguibile finale sia al 100% Objective-C o C++, a differenza di altri strumenti cross-platform (es. PhoneGap, GameSalad, Marmalade) che utilizzano l’HTML5 embeddato in una schermata web. E’ possibile sfruttare tutte le caratteristiche hardware dei dispositivi come fotocamera, accellerometro, GPS, ecc; nonché accedere alle funzionalità uniche di ogni sistema operativo come, nel caso di iOS, al MapKit, GameKit, acquisti in-app, notifiche push e altro. Gli sviluppatori di Corona hanno anche inserito dei comandi per interfacciarsi a servizi esterni (Facebook, OpenFeint, Flurry Analytics), il tutto programmabile in modo molto semplice grazie ad un linguaggio di nome Lua, molto simile ad ActionScript o Javascript, che consente di essere produttivi in pochissimo tempo, lasciando la gestione di altri compiti (es. gestione della memoria, ciclo di vita dell’app) al compilatore di CoronaSDK.

Purtroppo c’è anche l’altro lato della medaglia. Sebbene sia possibile scaricarlo gratuitamente, il compilatore è utilizzabile solamente con il suo simulatore integrato, oppure per testare le app su un dispositivo fisico, ma per creare i pacchetti da inviare all’AppStore o all’AndroidMarket bisogna pagare un abbonamento annuale i cui costi sono:

Come ultimo avviso bisogna tener presente che alcune caratteristiche proprietarie dei sistemi non sono ancora disponibili, come iAD per iOS e le notifichePush per Android, ma gli sviluppatori hanno assicurato che anche queste funzioni verranno implementate quanto prima.

Installazione e utilizzo del compilatore

CoronaSDK è disponibile sia per Windows che per Mac, ma solo su quest’ultimo è possibile sviluppare sia per iOS che per Android. Su piattaforma Windows si può sviluppare solo per Android, questo perché la compilazione su iOS avviene tramite Xcode che, come sappiamo, è disponibile solo su Mac.

La prima cosa da fare è registrarsi sul sito ufficiale di CoronaSDK e poi scaricare il tool per il sistema che andremo ad utilizzare, ed una volta installato, nella versione Windows dovremmo lanciare Corona Simulator, mentre nella versione Mac abbiamo la possibilità di lanciare o Corona Simulator o Corona Terminal, e in questo secondo caso andremo sempre a lanciare la versione “terminal” di Corona. Questo perché su mac, lanciando solo il simulatore non avremo la possibilità di visionare una console di log per controllare eventuali errori o messaggi del compilatore (presente invece nella versione windows), invece avviando corona terminal si avvierà oltre al simulatore, anche una finestra del terminale di OS X che ci servirà appunto come console di log.

Ciao Mondo!

Il tool che abbiamo scaricato è solo un compilatore, NON include un editor per scrivere il codice, per cui dovremo utilizzarne uno esterno. Possiamo usare qualunque editor di testo, quello che preferiamo, ma io suggerisco di usarne uno che abbia il syntax highlighting del Lua, in particolare sotto Windows consiglio Notepad++ e sotto mac invece TextWrangler, entrambi free. La prima cosa a cui dobbiamo fare attenzione è il nome del file che andremo a creare: in CoronaSDK il file principale di ogni applicazione si deve chiamare obbligatoriamente main.lua, quindi ogni nostra applicazione dovrà contenere almeno questo file. Apriamo quindi il nostro editor di testo e scriviamo:

print("Ciao Mondo!")

salviamo col nome main.lua, poi dal compilatore CoronaSDK selezioniamo “open” ed andiamo ad aprire il file che abbiamo appena creato. A questo punto si aprirà il simulatore del dispositivo, che però rimarrà vuoto a schermo nero, mentre nella finestra del terminale apparirà il nostro “Ciao Mondo!” in maniera simile a questa immagine:

Il comando print in Lua invia il testo scritto fra virgolette alla console di log; è in pratica l’equivalente di CCLog in Cocos2D o di NSLog in Objective-C.

Se tutto è andato a buon fine vuol dire che abbiamo installato correttamente il compilatore e siamo pronti a sviluppare con CoronaSDK.

Considerazioni

Facciamo alcune considerazioni su cose che ho volutamente tralasciato, ma che sicuramente non sarà sfuggito a chi già programma in altri linguaggi o utilizza altri sistemi di sviluppo. Per prima cosa molti avranno notato che alla fine del comando print non c’è il punto e virgola, infatti non è obbligatorio ma si può comunque usare, soprattutto da chi è sovente inserire più comandi sulla stessa riga. Altro accorgimento da ricordare è quello di creare sempre una cartella col nome dell’app che andremo a sviluppare, all’interno della quale metteremo il nostro main.lua e tutti i file che serviranno al nostro gioco o app: quindi immagini, suoni, font, altri eventuali file .lua, creando anche ulteriori sottocartelle se necessarie per tenere ordinati i progetti con molti files.
Infine avrete notato come il codice del nostro primo programmino sia una sola riga, a differenza del codice dell’SDK standard dove ci sono più file e più righe anche a progetto vuoto, che a volte confondono gli sviluppatori, soprattutto quelli alle prime armi, mentre qua moltre di quelle funzioni verranno gestite in automatico del compilatore di CoronaSDK.

Siamo giunti alla fine della prima lezione che ci è servita a conoscere meglio questo nuovo mondo, mentre dalla prossima entreremo nel vivo del linguaggio e daremo uno sguardo più approfondito a come funziona la sintassi del Lua. A presto!

Buona lettura!

Il più diffuso engine grafico tra gli sviluppatori indipendenti, e soprattutto tra chi inizia, grazie alla perfetta integrazione con Xcode, cocos2D è un framework, ovvero un insieme di librerie Objective-C che facilitano la programmazione di elementi grafici ed animazioni in OpenGL. Il suo più grosso vantaggio è il fatto che sia open-source, ciò significa che può essere liberamente scaricato, utilizzato, e volendo anche modificarlo a proprio piacimento da tutti, e questo significa zero spese aggiuntive per chi è alle prime armi; inoltre si programma in objective-C che è il linguaggio standard per programmare le app iOS, rendendolo vantaggioso per chiunque sia già alle prese con lo sviluppo di altre app. Come da nome nasce prettamente per la creazione di videogiochi 2D, anche se esiste una sua variante chiamata Cocos3D ancora in beta per la gestione di oggetti 3D, ed integra un framework per la gestione semplificata dell’audio (CocosDenshion) e due engine fisici, Chipmunk che però non ha la gestione ad oggetti e va programmato in C classico, e Box2D le cui librerie sono in C++ e comporta un cambio di linguaggio per la sua implementazione.

pro:

• Open-source e completamente gratuito
• Si integra perfettamente con Xcode
• Abbastanza completo per sviluppare qualunque tipo di videogioco 2D

contro:

• Bisogna avere una conoscenza discreta dell’Objective-C
• Supporta solo il 2D su OpenGL 1.1 al momento

sito di riferimento: www.cocos2d-iphone.org

Porting di Cocos2D completamente riscritto in C++, il cui più grosso vantaggio è quello di essere totalmente cross-platform, ciò significa che i videogiochi sviluppati con questo framework possono essere compilati per quasi tutti i più comuni sistemi mobile: iOS, Android, Samsung Bada, Blackberry OS e altri. E’ ancora in beta ed è perfettamente identico per prestazioni e potenzialità al suo fratello maggiore in objective-C.

pro:

• Open-source e gratuito come il fratello
• Possibilità di compilare e distribuire i giochi su più piattaforme
• Utilizza i linguaggi C++ e/o Lua per lo sviluppo che sono i più diffusi

 contro:

• Bisogna avere una conoscenza discreta del C++
• Supporta solo il 2D su OpenGL 1.1
• Per interfacciarsi con le UIKit di iOS bisogna comunque usare e conoscere l’Objective-C

sito di riferimento: www.cocos2d-x.org

Questo SDK è uno dei più potenti e versatili per lo sviluppo di videogiochi e app multimediali su iOS e Android, il cui vantaggio maggiore è quello di utilizzare come linguaggio il Lua, che è notevolmente più semplice del tradizionale Objective-C, ed inoltre al suo interno integra già tantissime API come l’engine fisico Box2D, Facebook Connect, OpenFeint e Flurry Analytics pienamente utilizzabili nell’SDK senza dover ricorrere ad API esterne. Per contro non è gratuito ma bisogna pagare 199$ l’anno per poter inviare la propria app sull’AppStore o sull’AndroidMarket, oppure 349$ per entrambi, anche se è possibile scaricare gratuitamente l’SDK sul proprio computer per poter iniziare a sviluppare testando i risultati su una macchina virtuale.

pro:

• SDK disponibile per Mac e Windows
• Sviluppo cross-platform per iOS e Android
• Utilizzo del linguaggio Lua

contro:

• Costo annuale aggiuntivo considerevole per poter vendere il proprio gioco
• Quando escono funzionalità nuove dei dispositivi bisogna attendere gli aggiornamenti

sito di riferimento: www.anscamobile.com/corona

Gamesalad è un tool di sviluppo per “non-programmatori”, cioè l’ambiente è totalmente drag’n’drop per consentire la creazione di videogiochi anche a chi è completamente a digiuno di programmazione informatica, ovviamente ciò implica alcuni limiti ma si riescono comunque ad ottenere buoni risultati. Il tool è gratuito, ha un suo engine fisico integrato, e si possono anche pubblicare i giochi su Appstore, ma per accedere alle funzioni avanzate (Gamecenter, iAD, in-app purchase, pubblicazione anche su AndroidMarket, ecc) è necessario pagare 299$ l’anno, inoltre i videogiochi non girano nativamente, ma sono in HTML5 ed embeddati all’interno di un web-browser sul dispositivo, per cui non è, e non sara mai possibile accedere a funzionalità grafiche avanzate come shader particellari e oggetti 3D, né si possono utilizzare API esterne.

pro:

• Semplicissimo da usare anche per i neofiti
• Nessun costo per la creazione di semplici giochi
• Possibilità cross-platform su Android a pagamento

contro:

• Costo annuale aggiuntivo considerevole per sbloccare tutte le funzioni
• Non è possibile accedere a tutte le funzioni del dispositivo né usare API esterne
• Giochi non nativi con possibile decadimento delle prestazioni

sito di riferimento: www.gamesalad.com

E’ un’app per iPad disponibile su Appstore a 7,99€ che consente la creazione di videogiochi direttamente all’interno di un iPad. Sfrutta il linguaggio Lua ma non è possibile al momento accedere a tutte le funzionalità del dispositivo, inoltre i giochi creati per ora sono solo per iPad e non possono essere inviati su Appstore, ma la società che l’ha creato ha dichiarato che stanno lavorando per superare questi due limiti (è stato anche rilasciato da loro un gioco free su Appstore, Cargobot, interamente creato con Codea). Al momento supporta solo la grafica 2D ma l’app è molto semplice ed abbastanza potente per creare anche giochi anche con complessi effetti particellari.

pro:

• Costo accessibile da tutti
• Utilizzo del linguaggio Lua
• Estremamente  potente nonostante la sua semplicità d’uso

contro:

• I giochi creati girano solo all’interno dell’app, ma in futuro…
• Potrebbe essere scomodo programmare per ore su un iPad

sito di riferimento: twolivesleft.com/Codea

Giunto alla versione 3.5, è un ambiente di sviluppo completo per la creazione di videogiochi 3D su qualunque piattaforma esistente: Mac, Windows, Linux, Nintendo Wii, Sony PS3, Xbox360, iOS, Android fino a flash sul web, per cui è possibile, una volta realizzato il gioco, farlo girare su tutte queste piattaforme senza dover cambiare una virgola. Assieme all’UDK è probabilmente il più potente tool per la creazione di videogiochi 3D perché nel suo motore grafico integra le più moderne tecnologie, utilizza OpenGl ES 2.0 con tutti gli effetti possibili: lightmapping, HDR, ombre in tempo reale ed altro. Integra inoltre un generatore di terreni naturali (con sassi, alberi, atmosfera, ecc), l’engine fisico PhysX di nVidia, l’engine audio FMOD e il supporto al gaming multiplayer; per la programmazione supporta tre linguaggi: javascript, C# e un dialetto di Python chiamato Boo, ed è possibile integrare qualunque libreria .NET esterna. Il software è scaricabile gratuitamente, ma purtroppo non tutte queste funzionalità sono disponibile nella versione free e la versione Pro costa 1.500$, inoltre il software può esportare solo per Win/Mac/Linux, se si vuole esportare per altri dispositivi (iOS, Android, Wii, ecc) bisogna acquistare l’export a parte, ed ognuno costa 400$ se si ha la versione free o 1.500$ se si ha la versione Pro.

pro:

• Uno dei più completi tool per Videogiochi 3D
• L’ambiente di sviluppo è disponibile sia per Windows che per Mac
• Supporta tutte le tecnologie grafiche più moderne esistenti
• Disponibile una versione free abbastanza completa per chi inizia

contro:

• Costo complessivo della versione Pro accessibile solo ai professionisti
• Bisogna avere un’ottima conoscenza di uno dei linguaggi supportati per lavorare bene
• Supporta solo il 3D

sito di riferimento: www.unity3d.com

Siamo arrivati all’ultima parte di questo stupendo tutorial che ci vede impegnati a creare un gioco in stile jetpack utilizzando LevelHelper e SpriteHelper.

In questa parte andremo ad aggiungere il punteggio al gioco e la scena visibile all’esterno delle finestre.

Visualizzazione punteggio

Stiamo per creare una visualizzazione di punteggio in modo dinamico. Invece di avere un display fisso nella parte superiore o inferiore dello schermo, andremo a mostrare il punteggio in una finestra temporanea (pop-up) ogni volta che l’utente accumula un punteggio.

Iniziare con l’aggiunta del seguente codice all’interno HelloWorldScene.h:

CCLabelTTF *scoreText;

Ora, definire questo nuovo metodo da qualche parte sopra il metodo init all’interno HelloWorldScene.mm:

-(void) setupScore
{
    score = 0;
 
    CGSize winSize = [[CCDirector sharedDirector] winSize];
    scoreText = [CCLabelTTF labelWithString:@"Score: 0" dimensions:CGSizeMake(200, 50) alignment:UITextAlignmentLeft fontName:@"Arial" fontSize:22];
    scoreText.color = ccWHITE;
    scoreText.position = ccp(100, winSize.height-25);
    [self addChild:scoreText z:20];    
}

Qui si crea una nuova etichetta e si assegna la nostra variabile scoreText. Abbiamo poi aggiungto l’etichetta al livello e impostato la posizione dell’etichetta in alto a sinistra.

Ora, chiamiamo questo nuovo metodo all’interno del metodo init subito dopo la chiamata a setupAudio:

[self setupScore];

Questo è un bene, ma adesso non stiamo mostrando il punteggio effettivo per l’utente. Stiamo mostrando solo una parte di testo. Facciamo in modo che venga modificato il testo quando l’utente accumula i punti.

Modifichiamo il metodo scoreHitAtPosition in questo modo:

-(void)scoreHitAtPosition:(CGPoint)position withPoints:(int)points
{
    score += points;
    [scoreText setString:[NSString stringWithFormat:@"Score: %d", score]];
 
    NSString* curScoreTxt = [NSString stringWithFormat:@"+ %d", points];
    CCLabelTTF *curScore = [CCLabelTTF labelWithString:curScoreTxt fontName:@"Marker Felt" fontSize:24];
    curScore.color = ccWHITE;
    curScore.position = position;
    [self addChild:curScore z:20];
 
    id opacityAct1 = [CCActionTween actionWithDuration:1 key:@"opacity" from:255 to:0];
    id actionCallFunc = [CCCallFuncN actionWithTarget:self selector:@selector(removeScoreText:)];
    id seq = [CCSequence actionOne:opacityAct1 two:actionCallFunc];
    [curScore runAction:seq];
}

Qui si aggiungono i nuovi punti alla variabile punteggio. Poi si aggiorna il testo della nostra etichetta punteggio.

Abbiamo quindi creato una nuova etichetta che verrà visualizzato nella posizione dell’attributo ottenuto da questo metodo. Come mostrato nel codice, questa è la posizione della moneta o del coniglio. La moneta o coniglio scompare in caso di collisione con il giocatore, e il display del punteggio appare temporaneamente al suo posto.

Aggiungiamo la nuova etichetta al livello. Dobbiamo quindi creare due azioni. La prima azione rende l’etichetta una nuova partitura scomparendo in un secondo e modificando la proprietà dell’opacità dello sprite da 255 (massima visibilità) a 0 (non visibile). La seconda azione prevede un nuovo metodo, removeScoreText.

Infine, creiamo una sequenza utilizzando le due azioni definite ed eseguiamo la sequenza sullo sprite della nuova etichetta.

Dobbiamo ancora definire il metodo removeScoreText chiamato dalla seconda azione. Aggiungere il seguente codice sopra il metodo scoreHitAtPosition:

-(void)removeScoreText:(CCLabelTTF*)scoreLabel
{
    [scoreLabel removeFromParentAndCleanup:YES];
}

Questo nuovo metodo rimuove solo la visualizzazione del punteggio dallo strato.

Eseguire ora il gioco e vedere che il tutto funziona bene. Ogni volta che il giocatore entra in contatto con una moneta o un coniglio, una etichetta si apre mostrando il punteggio aggiornato, viene visualizzato per un secondo, poi scompare.

Aggiungiamo il layer esterno

La nostra ultima modifica: una scena “outdoor” che sarà visibile attraverso lo scorrimento delle finestre del livello, aggiungendo un bel senso di profondità al gameplay.

Apriamo SpriteHelper e creiamo una nuova scena con File\New. Poi con il Finder aperto, passare alla cartella ArtPack, selezionare il bgWindow, window_background, e le immagini window_foreground, e trascinarle sulla finestra SpriteHelper.

Clicchiamo su Pack Sprites per imballare i sprite nuovi. Perché una delle immagini non ha l’alpha, una nuova finestra vi chiederà se si desidera ritagliare l’immagine utilizzando un colore selezionato. Scegliere “Don’t Crop”.

Selezioniamo tutti gli sprite e impostiamo l’opzione “No Physics”. Salviamo la scena come “outside” e inseriamola nella cartella Immagini.

In LevelHelper, creiamo un nuovo livello per vedere i passaggi. Con level03 aperto, premi Command-Maiuscole-S per salvare il livello come un nuovo. Nominiamolo level04 e salviamolo all’interno della cartella Levels.

Ora all’interno della livello, selezioniamo tutte le finestre degli sprite così come tutti gli sprite del background.

Eliminiamo lo sprite premendo il tasto Canc o fare clic sul pulsante rosso con il segno meno sulla sinistra.

Dopo la rimozione di questi sprite, la scena dovrebbe essere simile a questa:

Ora filtrare gli sprite fuori selezionando l’opzione “filter” accanto a outside.png. Questo farà in modo che noi vediamo solo le sprites da quella immagine nella lista. Impostiamo l’ordine del valore z per outside.png a -1 a mettiamo tutti gli sprite in outside.png dietro tutto il resto.

Successivamente, trasciniamo lo sprite bgWindow e mettiamolo negli spazi vuoti lasciati dalle finestre rimosse.

Quando siete pronti, selezioniamo tutti i nuovi sprite con il taglio della finestra (tutti gli sprite bgWindow) e diamo a loro Ordine Z del valore di 1.

Aggiungiamo questi nuovi sprite alla parallasse e impostiamo il componente X del rapporto movimento a 1. Salviamo il livello.

Premiamo il pulsante Livello di prova per eseguire la scena all’interno del Tester.
Si possono notare delle imperfezioni dei nuovi sprites che non sono allineati correttamente con quelli inseriti nei precedenti tutorial.

Ci sono due modi per risolvere questo problema:

1. Regolando ogni disadattamento individuale selezionando ogni sprite e spostando la sprite usando i tasti freccia fino a quando non si allinea correttamente con gli altri sprite.

2. Selezionare tutte le sprites disallineati e impostare Scale X nel menu General Propriety a 1,01, o un valore tale da risolvere il problema.

Salviamo il livello quando si è pienamente soddisfatti.

Ora che tutto è a posto, creiamo uno sfondo che si muove ad una velocità diversa dal resto della parallasse.

Prima di tutto blocchiamo gli sprite nel livello in modo di non spostarli accidentalmente. Per fare questo, selezionare tutti gli sprite dalla lista a sinistra, e fare clic sul pulsante Blocca.

Nota: Per sbloccare gli sprite, selezionarli nuovamente dalla lista e premere il pulsante blocca

Con gli sprite bloccati, trascinare lo sprite window_background nella scena e posizionarlo sopra lo schermo principale. Assicurarsi che il bordo sinistro verticale della sprite window_background sia allineata esattamente con quella dello schermo principale.

Ora assicurarsi che la sprite window_background sia selezionata, e duplicare a destra fino alla fine dello schema di gioco tramite il tasto verde + (o premendo Command-D). Assicurarsi di avere il punto di ancoraggio corretto selezionato.

Il livello dovrebbe essere simile a questo quando hai finito:

Ora selezioniamo tutti gli sprite window_background e aggiungiamoli alla parallasse. Impostiamo la componente X del rapporto movimento a 0,3.

Ripetiamo il processo per gli sprite window_foreground

Trasciniamo nella scena lo sprite window_background come da immagine:

Cloniamo come sopra e per tutta la mappa di gioco

aggiungiamo alla parallasse e impostiamo il componente X del rapporto movimento a 0.7:

Ora selezioniamo tutti gli sprite window_background e trasciniamoli verso il basso sulla scena principale in modo che si può vedere attraverso la finestra.

Ripetiamo il processo per gli sprite window_foreground. Trasciniamo tutti gli sprites fino a quando è possibile vederli attraverso la finestra.

Salviamo e testiamo il gioco, si dovrebbe vedere il mondo esterno che si muove a una velocità diversa rispetto al mondo interno. Questo darà una sensazione di profondità al gioco.

L’ultima cosa che dobbiamo fare è aggiungere il nuovo livello e le immagini al nostro progetto in Xcode. La cartella Livelli dovrebbe assomigliare a questa:

Poi aggiungiamo i nuovi file di immagine (outside.png, outside-hd.png, outside.pshs) nella cartella Images. La nuova cartella di immagini in Xcode dovrebbe assomigliare a questa:

All’interno HelloWorldScene.mm, modifichiamo il codice di livello in modo che carichi il file level04:

lh = [[LevelHelperLoader alloc] initWithContentOfFile:@"level04"];

Abbiamo finito definitivamente con la creazione di un gioco simile a jetpack.
Ultimo passo è quello di giocarci, buon divertimento.

Potete scaricare il codice completo

Sommario tutorial

1. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. Preparazione

2. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. uso di Level Helper

3. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. Il livello

4. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. lasers e coins

5. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. aggiungiamo il personaggio principale

6. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. Logica di gioco

7. Creiamo un gioco simile a Jetpack usando LevelHelper e SpriteHelper. Le collisioni

8. Creiamo un gioco simile a jetpack usando LevelHelper e SpriteHelper: Il sound

9. Creiamo un gioco simile a jetpack usando LevelHelper e SpriteHelper: collisioni con gli animali e aggiustamenti del gioco

10. Creiamo un gioco simile a jetpack usando LevelHelper e SpriteHelper: rotazione laser e coniglietti

11. Creiamo un gioco simile a jetpack usando LevelHelper e SpriteHelper: punteggio e display layer

Questo è un articolo scritto da Bogdan Vladu, uno sviluppatore di applicazioni IoS e aspirante programmatore di videogiochi, vive attualmente a Bucharest in Romania.

Un ringraziamento speciale va a Ray Wenderlich che ci ha dato il permesso di tradurre in Italiano i suoi tutorial

http://www.raywenderlich.com/7358/how-to-make-a-game-like-jetpack-joyride-using-levelhelper-spritehelper-%E2%80%93-part-4