Player entity sprite animation

[Paul]

Hello,

Followed the tutorial and then started hacking away to see if i could make a top-down 4 axis game.

Borrowed from a few bits of code on some other melonjs projects I came across and came up with this:

http://apps.e-swoosh.co.uk/negotiator/map_part

My problem at the moment is that the sprite sheet does not animate - instead it just sticks to the first frame, what i suspect is wrong is that I am setting

"this.renderable.setCurrentAnimation('up');" (same for left right and down)

every time a keypress is made - which, i figure resets the animation to the first frame I've specified in the init/constructor:

"this.renderable.addAnimation("up", [10,11,12,13,14]);"

So i need to keep track of which frame the animation should be on and have that persist across key presses/ticks of the game timer.

Any pointers?

Hoping to get these basics sorted and then get stuck into the engine itself

Cheers

[Jay Oster]

Hi again Paul,

I meant to respond to this yesterday, but got side-tracked by other stuff. Apologies for the delay!

Managing animations is kind of a tricky thing. What you want to keep in mind is that you are stepping a state machine. To that effect, the easiest way to handle it all is to create separate named animations for each state, and allow the animations to continuously play. In other words, you should not be pausing the "walk" animation for idling; instead, create two separate states; "walk" and "idle".

Of course, with a top-down view, you are going to have at least four directions the character can face, so you would have four "idle" animations, and four "walk" animations. This is how I organized both of my top-down perspective games, and it has always worked out very well: http://git.kodewerx.org/neverwell-moor/src/c6f5b8715267d0afcc5d0f14583a2743dfb71ac1/js/objects/npc.js?at=master#cl-93 and https://github.com/blipjoy/sprung_fever/blob/gh-pages/public/js/entities/person.js#L13-L29

Second, you must be very careful about when you call setCurrentAnimation. Every time it is called, it will reset the timer responsible for advancing to the next frame. So it is very easy to get stuck on a single animation frame if you are resetting that timer every game frame. For this, you should use isCurrentAnimation to first check if the named animation is already playing. E.g. https://github.com/blipjoy/sprung_fever/blob/gh-pages/public/js/entities/person.js#L58-L59 If you want it to be a little faster, you can put this logic directly into your entity; so it remembers which animation is playing without calling any methods to determine.

[Paul]

Thanks - I've applied the logic check to not reset the animation type and it's working as I had hoped.

As for Idle animations - I hadn't considered that - perhaps I will look into the idle states too!

thanks

[Jay Oster]

I order the walking animations so that the "standing" frame is always first. Then it's very easy to create the idle animations by including only that single frame in the animation definition.