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