Cargo Cult Adventure - Level 1 solution 1 - Endless beaches

Il mondo addosso

Si tratta di un fatto realmente accaduto ad un amico. Mi è stato brevemente raccontato e  siccome conosco la persona, ho immaginato l'accaduto in questo modo e ho pensato di scriverlo....



Si sa, siamo tutti appesi ad un filo. Basta poco e tutto può cambiare in modi e tempi assolutamente imprevedibili.
La nostra idea di vita, immaginata come una lunga strada più o meno già decisa è in realtà pura illusione.
Solo qualche giorno fa ho avuto modo di verificarlo.
Non era la prima volta, ma mercoledì il tutto si è svolto in modo così sottile e subdolo che ancora ne risento.
L'improvvisa sensazione di impotenza, del fatto che tutto è cambiato e nulla posso fare per rimediare, è un qualcosa che ti cambia...

Mercoledì pomeriggio, mentre ero alle prese con un nuovo progetto edilizio, ricevo una chiamata sul mio iPhone da un potenziale cliente. Si presenta semplicemente come Francesco e mi invita a visitare la sua nuova futura casa per avere dei consigli ed eventualmente affidarmi la realizzazione di un progetto di arredamento. Ci accordiamo per fare subito un sopralluogo e lui si offre di passare a prendermi dal mio ufficio per andare insieme alla villa.
Una bella villetta sviluppata su un solo piano poco fuori città. Mi racconta che la sera stessa deve partire per un lungo viaggio all'estero e vorrebbe trovare al suo ritorno la casa finita e arredata.
"Hai carta bianca, mandami foto e proposte, il mio numero è questo, teniamoci in contatto", mi dice poco prima di lasciarmi di fronte al mio ufficio.
Mentre guardo la macchina che si allontana penso, "questo è proprio il mio cliente ideale".
E' uno di quei momenti in cui senti un livello di soddisfazione superiore alla soglia di contenimento, quella soglia che se superata provoca un leggero stato simile all'ubriachezza.
Meccanicamente allungo la mano verso l'iPhone e improvvisamente mi crolla il mondo addosso. E' sparito!! Non c'è!! Sono senza!!
In quei pochi secondi, seguono rapidi terribili pensieri: "Ricordo di averlo preso con me.", "Deve essermi scivolato dalla tasca, quindi ora è nella macchina.", "Tutta la mia Vita è in quel telefono, i miei contatti, le mie foto, i miei messaggi...", "Non posso neanche chiamarlo, il suo numero è sull'iphone".
Inoltre la sera stessa sarebbe partito per un lungo viaggio e io sapevo solo il suo nome. Scacco!! Ero fregato!!

Con lo sguardo fisso di chi sa che è finita, entro in ufficio, mi siedo di fronte allo schermo 27 pollici retina del mio iMac e comincio a contare le icone.
Si, proprio come farebbe un pazzo!!

8, 9, 10, 11, 12, 13 e mi blocco!!

Sotto ad una icona verdina leggo una frase: "Trova il mio iPhone". Un click e ... un iPhone che si sposta su una mappa appare sullo schermo.
E' stato sufficiente premere il tasto "Play sound" un paio di volte e magicamente l'iPhone sulla mappa ha cambiato direzione.
Stava tornando!!

Mentre mi gustavo il momento magico, ricordo di aver pensato, "Steve SANTO SUBITO!!!!".


P.S.
Io non possiedo (purtroppo) dispositivi Apple.

CARGO CULT, l'intervista.

No, questa volta no, non parlerò di CARGO.

Ogni tanto bisogna prendersi una pausa, una pausa per girarsi indietro e guardare....

Qualche giorno fa ho avuto di il piacere di essere intervistato da uno dei più autorevoli siti del panorama video ludico italiano.

Sto parlando di PuntaeClicca, presente anche su Facebook.

Alessandro, la persona che gestisce PuntaeClicca ha saputo, con le sue domande, creare una atmosfera ideale.

Ma non voglio dilungarmi troppo e Vi invito a leggere l'intervista che si trova qui.

Che dire... Sono soddisfazioni!!

CARGO CULT, il gameplay.

Il gameplay di questo gioco si potrebbe definire quello di un punta e clicca puro.
Non ci sono dialoghi se non quelli che il protagonista fa con se stesso, questo a causa anche della natura del gioco visto che si trova solo su un'isola di cui non sa praticamente nulla.
Dal punto di vista della programmazione della logica di gioco ho semplicemente pensato di inserire un commento contestuale alla situazione e al livello di avanzamento nella storia alla fine di ogni spostamento del protagonista. Questi commenti sono a volte generici e a volte mirati ad indirizzare nella giusta direzione il gioco.
A volte sono consigli a volte sono citazioni mie o di personaggi famosi in qualche modo legati alla situazione e al tema del gioco.

L'avanzamento nel gioco è definito da alcune variabili legate alla risoluzione degli enigmi.

Anche la possibilità di muoversi tra le scene viene di volta in volta aggiornato, limitato o abilitato in funzione della risoluzione degli enigmi. Per esempio, una volta trovato il modo di uscire dalle spiagge "infinite" del primo livello del primo capitolo, non sarà più possibile tornare indietro.

Tecnicamente parlando il salvataggio delle variabili di gioco viene fatto a livello di javascript con le funzioni:

localStorage.setItem('enigma1', '1');
localStorage.getItem('enigma1', '1');

Trattandosi di una applicazione html+js che gira all'interno di una app android è necessario aggiungere le seguenti abilitazioni nel webview android:

webview.getSettings().setDatabaseEnabled(true);
webview.getSettings().setDomStorageEnabled(true);

Senza queste abilitazione la funzione localStorage non funzionerebbe.

Ma ecco ora un breve gameplay del gioco.

 CARGO  Google Play

CARGO CULT A spasso sul set

E' giunto il momento di unire le animazioni .gif di "Steve" con il codice Javascript  del post precedente.

Prima di tutto devo ricavare con Gimp, le 4 immagni necessarie per permettere a Steve di muoversi liberamente avanti e indietro.

Bisogna anche fare qualche modifica al codice  javascript (che ho condiviso qualche  post fa) per caricare le gif e le png di steve nel momento giusto.

function addSteve(aspect)

{

if (steve==null){

steve = new Image();

steve = document.createElement('img');

steve.id = 'steve';

steve.setAttribute("src", aspect);

steve.style.cssText = 'position:absolute;top:'+steveTop+'%;left:'+stevePosX+'%;height:'+steveHeight+'%;width:auto;pointer-events:none;opacity:1;z-index:100;';

document.body.appendChild(steve);

}else{

steve.style.cssText = 'position:absolute;top:'+steveTop+'%;left:'+stevePosX+'%;height:'+steveHeight+'%;width:auto;pointer-events:none;opacity:1;z-index:100;';

}

}

function startWalking()

{

if (steve!=null){

useWith='';

stopWalking();

if (parseFloat(steve.style.left) > steveMoveToX){

steveMoveDir = "left";

steveAspect = "img/mainfigure/steveleft.gif";

}else{

steveMoveDir = "right";

steveAspect = "img/mainfigure/steveright.gif";

}

steve.setAttribute("src", steveAspect);

myWalk = setInterval(walkHandler, 30);

}

}

function stopWalking()

{

clearInterval(myWalk);

if (steveMoveDir == "left"){

steveAspect = "img/mainfigure/steveleftstand.png";

}else{

steveAspect = "img/mainfigure/steverightstand.png";

}

steve.setAttribute("src", steveAspect);

}

E il "gioco" è fatto!!
Si fa per dire...

Qui il codice.

In realtà siamo neanche al 1% del lavoro necessario per arrivare alla pubblicazione sul Play Store o almeno questo è quello che mi sento di dire ripensando al lavoro che ho fatto per arrivare a pubblicare il gioco CARGO Cult.

 CARGO Google Play

CARGO Project La gif che cammina

Non è stato facile e comunque non sono ancora soddisfatto.
Realizzare una animazione gif del personaggio che cammina in modo credibile è forse una delle cose meno riuscite in questa mia avventura nel mondo della creazione di  giochi.
Ho provato in tanti modi e il risultato lo potete vedere nel gioco che ho pubblicato sul Playstore (in fondo alla pagina trovate i link).
Qualche giorno fà ho trovato un link interessante che oggi voglio provare e documentare in parallelo con questo post. Quindi se il risultato sarà buono, pubblicherò un aggiornamento del gioco con il nuovo personaggio che cammina in modo decente.
Non ho intenzione di seguire le istruzioni del link alla lettera ma voglio prendere quello che secondo me è più interessante.

Questo è il link:

http://www.spriteland.com/tutorials/animating-a-walk-cycle-in-inkscape-part-1.html

Utilizzerò Inkscape e Gimp e come prima cosa vado a definire in Inkscape l'area di lavoro in File>Proprietà del documento

Disegno le parti del corpo del mio personaggio.:

E lo compongo come meglio riesco:

Seguendo sempre le istruzioni del link, disegno i punti guida che servono per posizionare correttamente gambe e braccia. Per fare questo aggiungo un livello superiore e disegno i punti guida in questo nuovo livello.

Ora bisogna posizionare gambe e braccia seguendo le istruzioni del link, quindi seguendo le linee guida. Nel mio caso, preferisco creare un nuovo livello per ogni fotogramma duplicando di volta in volta i livelli. In questo modo ho più controllo su eventuali spostamenti indesiderati delle parti del corpo.

Al termine avrò ottenuto 8 livelli. A questo punto non mi resta che esportare uno ad uno gli 8 livelli come .png.

Importo tutte le immagimi come altrettanti livelli in Gimp:

Infine esporto come .Gif con le seguenti impostazioni:

Ed ecco il nostro "steve" che cammina..

 CARGO  Google Play

CARGO Project Il protagonista del gioco

Probabilmente, il primo mattoncino per la costruzione di un gioco di questo tipo è il protagonista.
Solitamente dotato di una pazienza sovrumana, obbedisce ad ogni vostra richiesta.
Spesso cammina e a volte parla, raccoglie oggetti e compie azioni che spesso vi sorprendono (anzi devono sorprendervi).
Nello specifico il mio attore che nel codice chiamerò "steve" si muove solamente verso destra o sinistra.

Il codice javascript che anima il protagonista da inserire nel file index.js

Cominciamo con il definire alcune variabili globali:

var steve;
var steveAspect = 'img/mainfigure/man.png';
var steveHeight = 22;
var steveWidth;
var stevePosX = 50;
var steveTop = 60;
var myWalk;
var steveMoveToX;
var steveMoveDir;
var steveSpeed=0.3;

e la funzione di partenza:

window.onload=function(){
load();
};

function load(){
setNewscene('img/scnr1/S0.jpg'); //carico una immagine di fondo
addSteve(steveAspect); //creo il protagonista
document.getElementById("backImg").addEventListener("mouseup", goWalk, false);
}

function setNewscene(sceneName)
{
document.getElementById("backImg").setAttribute("src", sceneName);
}

function addSteve(aspect)
{
if (steve==null){
steve = new Image();
steve = document.createElement('img');
steve.id = 'steve';
steve.setAttribute("src", aspect);
steve.style.cssText = 'position:absolute;top:'+steveTop+'%;left:'+stevePosX+'%;height:'+steveHeight+'%;width:auto;background-color:blue;pointer-events:none;opacity:1;z-index:100;';
document.body.appendChild(steve);
}else{
steve.style.cssText = 'position:absolute;top:'+steveTop+'%;left:'+stevePosX+'%;height:'+steveHeight+'%;width:auto;background-color:blue;pointer-events:none;opacity:1;z-index:100;';
}
}

sul mouseup dell'immagine di fondo viene lanciata la seguente funzione:

function goWalk(e) {
steveMoveToX = parseFloat((e.clientX-this.offsetLeft) / this.offsetWidth * 100);
steveWidth = parseFloat($("#steve").width() / this.offsetWidth * 100)/2;
startWalking();
}

Se "steve" esiste determino la direzione dx o sx.

function startWalking()
{
if (steve!=null){
useWith='';
stopWalking();
if (parseFloat(steve.style.left) > steveMoveToX){
steveMoveDir = "left";
steveAspect = "img/mainfigure/man.png";
}else{
steveMoveDir = "right";
steveAspect = "img/mainfigure/man.png";
}
myWalk = setInterval(walkHandler, 30);
}
}

function stopWalking()
{
clearInterval(myWalk);
}


e muovo "steve" fino al punto del mouseup sull'immagine di fondo.

function walkHandler()
{
if (steveMoveDir == "left"){
if (parseFloat(steve.style.left) > (steveMoveToX - steveWidth)){
stevePosX = (parseFloat(steve.style.left) - steveSpeed);
steve.style.left = stevePosX + "%";
}else{
stopWalking();
}
}else{
        if (parseFloat(steve.style.left) < (steveMoveToX - steveWidth)){
stevePosX = (parseFloat(steve.style.left) + steveSpeed);
steve.style.left = stevePosX + "%";
}else{
stopWalking();
}
}
}

Ed ecco il nostro "steve" (il rettangolo rosso) che si muove sulla scena.

Qui potete trovare i file appena descritti:


E qui sotto i link al gioco finito:

 CARGO  Google Play