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

CARGO Project Struttura del progetto

Comincia qui una serie di post che descrivono il processo di creazione del gioco sia dal punto di vista tecnico che creativo.
Non pretendo di affermare che la struttura di questo progetto sia la migliore per il tipo di gioco che ho realizzato ma vorrei solo descrivere come io l'ho realizzato.
Consigli e suggerimenti costruttivi sono bene accetti anzi necessari credo.
Ho realizzato questo gioco in HTML e Javascript, pensando fin da subito di inglobarlo in una web app Android.

Quindi tutto il gioco salvo qualche piccolo particolare può girare su qualsiasi browser moderno.
Nello specifico ho usato Chrome.

La pagina Html è realmente minima.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
     <meta name="game" content="myGame">
    <meta name="fpwing" content="fpwing">
</head>
<body id='mybody' style='background-color:#000000;opacity:1'>
<img id='backImg' style='position:fixed;top:0%;left:0%;width:100%;height:88%;z-index:60;'/>

<div id="collectedObjs" style='position:absolute;top:88%;left:0%;height:12%;
                       width:100%;opacity:1;color:Black;z-index:60;background-color:#000000;' >
                </div>

<div id='msgPopUp' style='position:absolute;top:0%;left:0%;height:15%;width:90%
                       ;opacity:1;z-index:100;'>
                </div>
</body>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index1.js"></script>
</html>

Ci sono i riferimenti alle librerie js e i tag principali del progetto sui quali si sviluppa tutto il gioco.

Nel prossimo post vedremo la parte javascript e cercherò di descriver in modo semplice il  funzionamento delle meccaniche di  gioco di base come il movimento del protagonista e la raccolta e interazione con gli oggetti sulla scena.

Il progetto gratis che contiene il primo capitolo è scaricabile dal Play store a questo

 CARGO Google Play

CARGO project

Secondo Garcia Lorca, ci sono 3 cose che ogni persona dovrebbe fare nella vita: 

1. METTERE AL MONDO UN FIGLIO.
2. SCRIVERE UN LIBRO.
3. PIANTARE UN ALBERO.

Sono sostanzialmente d'accordo ma secondo il mio personale modo di vedere le cose, il caro Garci ha dimenticato inspiegabilmente una cosa:

• REALIZZARE UNA AVVENTURA GRAFICA DI TIPO PUNTA & CLICCA.

Vi ricordate di "Monkey Island" ? se non sapete di cosa sto parlando, potete anche cliccare altrove :-(((((

Era il 1990 quando in una giornata qualunque, non ricordo come e perchè, installai sul mio primo computer "compatibile IBM" un nuovo gioco. Si chiamava "The secret of Monkey Island". 
Non sapevo molto del gioco e non mi ispirava particolarmente ma solo qualche giorno dopo, era diventato il mio felice pensiero fisso. Era diventato il mio giardino segreto. Un posto dove vivere un'altra vita, una fuga temporanea dagli impegni quotidiani. Sono seguiti poi "LeChuck's Revenge " e tutti gli altri capolavori di LucasArts. Ricordo con commozione "Amerzone" e  "Syberia" di  Benoît Sokal. Ricordo "Atlantis" di Microid e "Brokens Sword" di revolution software, "Blade Runner" di Westwood Studios.

Poi qualche mese fa, in un momento creativo, mi resi conto che avevo le conoscenze e le capacità per creare in un tempo ragionevole una avventura grafica di tipo punta e clicca. 

Quindi sfruttando a fondo le mie medie capacità grafiche e di programmazione che nel tempo ho accumulato, ho cominciato ad immaginare come poteva essere questa nuova "cosa" e soprattutto cominciai a gustare il piacere e la soddisfazione di vederla realizzata.

Ecco alcune immagini del progetto in fase di sviluppo:

Si, è vero, la grafica potrebbe essere più curata ma è solo l'inizio.

E come dicono quei tizi di Hollywood quando pubblicizzano un loro lavoretto:

STAY TUNED - IT'S COMING - SOMETHING BIG IS COMING - WHAT'S NEXT e bla bla bla...

ed ecco il mio TEASER TRAILER:

 CARGO Google Play

Confessioni di un pilota FPV. Il Rover parte 7. Il segnale wireless.

Ogni "Progetto Terrina" che si rispetti possiede un pannello con le informazioni vitali del sistema.

Primo fra tutti il livello del segnale wireless. Senza questa importantissima informazione non è possibile "navigare" in sicurezza.

Ne sanno qualcosa i piloti di aerei FPV che hanno perso il segnale video mentre il modello era a 1 km di distanza a qualche centinaio di metri di altitudine e non più visibile ad occhio nudo. "Game Over!!"

Il pilota, durante la sua sessione di esplorazione, deve dedicare una parte dei suoi neuroni a questa informazione. Trascurare questo dato, potrebbe trasformare una comoda "Gita FPV" in un estenuante sessione di "Nordic Walking" con in più l'ansia dell'oggetto perduto.

La funzione di "Return To Home" ha spesso risolto il problema. Ma la soluzione definitiva è arrivata da una nuova tecnologia chiamata "ENAC" che ha di fatto vietato l'FPV.

Per il "Progetto Terrina" la faccenda è meno grave ma si tratta comunque di una informazione che non poteva  mancare e che fa indubbiamente parte del "Gioco" del FPV anche se terrestre.

Per aggiungere questa informazione ho faticato un po'. Ho cercato dapprima di utilizzare un file script "Lua" presente nella folder "/usr/bin/pretty-wifi-info.lua" che restituisce una stringa con tutte le informazioni Wireless come spiegato qui. Con Putty funziona perfettamente:

Era mia intenzione accedere alla stringa con le informazioni utilizzando il WebServer. Ho provato ad includere nella pagina web dello sketch Arduino l'indirizzo:

• "http://192.168.1.36/cgi-bin/pretty-wifi-info.lua | grep Signal" 

e mi aspettavo una stringa che avrei cercato di formattare al meglio nella pagina ma il risultato nonostante diverse modifiche e tentativi è sempre stato questo:

Esprimo qui la mia richiesta ufficiale di HELP ME!!!

Poi dovendo/volendo comunque raggiungere l'obiettivo ho messo in moto il mio pregiatissimo e discusso "Workaround Engine". Ho scritto mio non perchè è solo mio ma perchè ho usato il mio.

Sull'argomento "Workaround Engine" si potrebbe discutere a lungo e potrei dedicare non un Post ma un intero Blog ma questo non è il momento e il luogo.

Mi sono detto: "Il pannello LuCi di Arduino Yùn mostra questi dati ed anche tanti altri" e quindi ho lavorato di HTML per inserire nel "Cruscotto" del "Progetto Terrina" la pagina che mostra queste informazioni. e questo è il risultato:

Questo è il tipico risultato da workaround. Non sono soddisfatto e cercherò di fare meglio ma devo ammettere che anche così non è male. E' presente il tasto di refresh automatico dei dati e ci sono tantissime informazione anche completamente inutili ma sicuramente scenografiche come i grafici del carico del sistema e del traffico wireless. Tutto quello che il pannello LuCi può offrire.

Nei prossimi Post cercherò di dare più visibilità ai dati veramente utili.
Per fare questo lavorerò di sega martello e javascript.

Confessioni di un pilota FPV. Il Rover parte 6

Dopo aver aggiunto il servo Tilt per la web cam non potevo non aggiungere anche il servo Pan.
Ho aggiunto un servo alla base del gruppo Tilt webcam e modificato il software Arduino Yùn e la pagina HTML.

Ho fissato il servo in modo estremamente professionale con una fascetta  per alimenti.

 Il servo Pan è collegato al piedino 6 della scheda Arduino Yùn. 

Cliccando sulla griglia si comandano contemporaneamente Pan e Tilt della webcam.  

Ecco un breve video del Kitchen Tray Project.

Tutti i files della versione 3.5 sono scaricabili qui.