2
\$\begingroup\$

I'm creating a Fez-based HTML5 Canvas game and animating my hero image using sprite sheets. The problem is that I can't create the animation of the hero walking, don't matter how much I try, the output is a weird animation that looks like the hero is just shaking its legs. Can someone help me? You don't need to create the sprite sheet for me if you don't want, just show me what's the correct leg position. I'll post the game link in a comment because I can't post more than two links.

Note that the "hero's legs" are compound by 3 pixels each, that are 2x up scaled.

Here is the sprite sheet:

spritesheet

the walking animation is compound by the 6 first frames.

EDIT: If you fall in the demonstration, open the console, type localStorage.x = localStorage.y = 0; and then reload the page immediately to return to the starting point.

Improve this question
\$\endgroup\$
7
  • \$\begingroup\$ escherparkour.com/insanejs \$\endgroup\$
    – Tiago Marinho
    May 7, 2014 at 5:41
  • \$\begingroup\$ I didn't see animation code in your source. I suppose the playback is inside the Fez engine (I don't know it), right? Or did I miss it.. \$\endgroup\$
    – antont
    May 7, 2014 at 6:26
  • \$\begingroup\$ While I haven't played Fez myself, a) the animation seems to be fine for me (IE11) and b) you shouldn't use other people's (or companies') art. \$\endgroup\$
    – Mario
    May 7, 2014 at 7:49
  • \$\begingroup\$ @Mario the art was made by me, but inspired on Fez. \$\endgroup\$
    – Tiago Marinho
    May 7, 2014 at 11:29
  • \$\begingroup\$ @antont I didn't understand what you said, but this game has nothing to do with Fez, except it's inspired in it. My problem is that the "walking" animation looks strange. \$\endgroup\$
    – Tiago Marinho
    May 7, 2014 at 11:31

1 Answer 1

Reset to default
9
\$\begingroup\$

Regardless of the level of details and the number of pixels you have, you must start with a thorough understanding on how walking works. If your character looks like shaking its legs, it probably because, that's all you drew : shaking its legs.

Just search "Walk cycle" with google image and you'll find plenty of examples. Here is a little example of what I would do with yours, where the knee is green, the upper leg is yellow and the lower leg is orange.

enter image description here

It is of course improvable.

Improve this answer
\$\endgroup\$
1
  • 1
    \$\begingroup\$ This example helped me a lot to understand the walk cycle. Thanks. :) \$\endgroup\$
    – Tiago Marinho
    May 7, 2014 at 14:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .