CARGO CULT A walk on the set

It's time to join the "Steve" .gif animations with the Javascript code of the previous post.

First I have to get with Gimp, the 4 images necessary to allow Steve to move freely back and forth.

You also need to make some changes to the JavaScript code (which I shared a few posts ago) to load the gif and png steve at the right time.

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);

}

And the "game" is done !!
I'm kidding...

Here the code.

In fact we are not even 1% of the work needed to get the publication on Play Store or at least that's what I would say thinking about the work I did to get to publish the game CARGO Cult.

 CARGO Google Play

CARGO Project Walking gif

It was not easy and in any case I'm not yet satisfied.
Make a character animation gif walking in a credible way is perhaps one of the things less successful in my adventure into the world of game creation.
I have tried in many ways and the result you can see it in the game that I posted on Playstore (bottom of the page you find the links).
A few days ago I found an interesting link that today I want to try and document in parallel with this post. So if the result will be good, I will publish an update of the game with the new character who walks decently.
I'm not going to follow the instructions of the link literally but I will take what I think is most interesting.

This is the link:

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

I'll use Inkscape and Gimp. First of all We have to set the working area Inkscape in File>Proprietà del documento

We need to draw all the body parts of our "steve":

And I'll adjust all body parts best I can.

Always following the link instructions, I draw some points. These points  are used to correctly position the legs and arms. To do this add a higher level and drawing the guide points in this new level.

Now you have to place the legs and arms following the instructions of the link, then follow the guidelines. In my case, I prefer to create a new layer for each frame duplicating each time levels. This way I have more control over any unwanted movement of the body parts.

At the end I have got 8 levels. At this point I have only to export one by one the eight levels as a .png.

I import all images as a separate level in Gimp:

Finally export as .Gif with the following settings:

And here is our "steve" walking ..

 CARGO Google Play