Platformer Sprites (WIP)

[ericbloom]

I'm new to this, and am having a lot of fun. I could use some feedback on a couple of walk cycles :

This guy is still rough. I really want this enemy to feel *heavy* when walking, and it's not quite there yet. His attack will be a smash attack:



I'm much happier with this enemy walk, though it's more of a traditional walk and easier to plan out. (Really huge shout out to Tsugumo's Mage Knight thread for giving me the smoke and spark idea:http://wayofthepixel.net/index.php?topic=3421.0)



And here he is shooting and resting:



I'd show them at the original sizes too, but I'm at work. I'll update with the main character's run when I get a chance.

[Grimsane]

great weight with the little guys, and nice movement and the particles and auxiliary animation works well

the way you posted made it hard to do this edit because it wouldn't scale back very friendly, but here's an attempt, get in the habit of animating with timing (xxxms) most game engines can load the timing from gifs if you load it like that, constant frame rate animations is quite a hindrance when you try doing subtle and even snappy motions


took a frame out and added a bounce divided into two half speed frames

[wurfle]

The body of the first one looks very soft to me, not like metal at all. Stiffening up that big middle section should help a lot.

[Tourist]

Here's a pretty good tutorial on making characters seem more massive:

http://brendanbody.blogspot.com/2010/04/weight-problem.html

The short version is that:

• All things fall at the same rate
• Not all things are the same size.
• You can indicate how large or massive something is by changing the rate at which it falls relative to it's visual size.
• The same applies to horizontal motion.

Hope this helps,
Tourist

[buddy90]

Well, I noticed your big dude walks a lot like a gorilla. Maybe you can use that as reference

[ericbloom]

Grimsane, yes! That small change really added an oomph that I was trying to get.

Tourist: Thanks for the link, I'll keep this in mind on my next revision, since Wurfle is right about the bendyness.

Here are original sizes as well as the main character himself:





Edit Updated Smasher:

[ericbloom]

A rough of the attack. I'm learning the importance of the roughs and playing with the blur frame.





Updated. Anyone have any tricks for the blur effect?

[Lazycow]

Yeah, great!

-
old - new

What about not using one continuous motion blur, but fragment it a bit. This could simulate individual animation frames, merged into one.

Other than that: Although all the moves of the robot are superb, I think motion blur and "heavy-movement" are mutual exclusive. Would you expect fast movement from a massive house-hight unit? Hm... I don't know. Maybe not.

PS: the forum has an included zoom function, just click on the image.

[ericbloom]

That's a really good point, and I think I was too interested in making a smashing blur attack that I hadn't considered if it felt right. While it isn't meant to be house-high, I do want it heavy. I think a slow wind-up attack would make a lot of sense.

I'm gonna keep working on this. Thanks for the tip on the blur as well.

The one problem with the zoom (on chrome at least) is that it anti-aliases the image. Can that be shut off?

[Lachie Dazdarian]

Not sure about the color depth you are using, but for these sort of blur animations what works the best (IMO) are sections that start with 0 opacity and go to full opacity as the object/limb moves in a certain direction. Or maybe it can be done with dithering instead manipulating transparency.  Full color sections just feel a bit too solid to me to illustrate swooping movement effectively.

[ericbloom]

Just because I like filling this thread with updates:





Still missing a lot of the details and effects, but I like the slow wind-up fast movement idea. Not sure if what I did with the raising of his arms is gimicky or actually makes it smoother, but it feels smoother than simply doing the frames in sequence. The blurs are not quite there yet, but might be adequate once the smoke and dust is added to obscure it a bit.

[PypeBros]

I'm a bit perplexed by the framerate you picked (5 second for the last giant both attack and recover, at least)... as if it was voluntarily slowed down.
Imho, it makes judging of the animation smoothness impossible, but that could just be me ...

[ericbloom]

Can you explain what you mean by that? I'm just doing these by the seat of my pants.

[TheMonsterAtlas]

He's saying the animation seems very slow, like each frame takes a while before it goes into the next. I think it's alright when we are viewing the frames and making sure each animation flows into the next with accuracy.

[ericbloom]

Ah thanks. Yeah, I'm putting these together in Photoshop and kinda arbitrarily made the frames speed in the timeline what it is. To implement them I use a sprite sheet and import them to Stencyl.

[ericbloom]

And here the Smasher is in his current state.

[PypeBros]

It works much better at this speed. The only part where it seems that some more intermediate frame could help is when he recovers his arms before standing up.

A second item that looks curious is the smoke during the "walk" cycle. There's a first puff (greyish - dust? ) when landing and a second one (blue-ish -- steam ?) when lifting. My concern is that the two puffs seem to come from the same place and behave the same, as if produced by the same cause, while the cause obviously can't be the same.



I note these frame have 170ms delay (opposed to 30ms for other part of the animation that are equally dynamic).
(Btw, it looks like you could easily opt for vector animation of that bot's arms with no loss of detail).

[ericbloom]

It works much better at this speed. The only part where it seems that some more intermediate frame could help is when he recovers his arms before standing up.

A second item that looks curious is the smoke during the "walk" cycle. There's a first puff (greyish - dust? ) when landing and a second one (blue-ish -- steam ?) when lifting. My concern is that the two puffs seem to come from the same place and behave the same, as if produced by the same cause, while the cause obviously can't be the same.



I note these frame have 170ms delay (opposed to 30ms for other part of the animation that are equally dynamic).
(Btw, it looks like you could easily opt for vector animation of that bot's arms with no loss of detail).

Thanks for the input. The first puff is meant to be dust, the second steam. Maybe a more extreme color shift could keep these separate.

How would I go about adding vector animation?

[PypeBros]

Thanks for the input. The first puff is meant to be dust, the second steam. Maybe a more extreme color shift could keep these separate.

I think the color shift is sufficient the way it is. I'd rather work on the steam's source point and whirls.

How would I go about adding vector animation?

That's something to sort out with your programmer/game engine, I'm afraid. "Another World" and "Prince of Persia" (Apple II) illustrate what I had in mind. On a NDS, I'd simply turn on 3D layer and instruct one polygon to be drawn where the robot's arm should be, and update the coordinates of the corners accordingly. (Maybe some rotated sprite overlaid could do the trick too).

[ericbloom]

You're right, the shapes of the dust  / steam would help differentiate them.

Here's an update to the runner. These animations are just stringed together in Photoshop, so the timing and spacing might look a little funky.





We also opened up a website, so check it out if you'd like some overall progress on the game! http://www.saturdaygames.net/

[PypeBros]

I love most of those animations. There are two points that looks a bit odd,
- arms are curiously arked in the "idle" and the "falling" animations, with no obvious relationship between the rest of the animations (e.g. holding helmet while running).
- the jump and the slide static frames introduce a significant shift against the other animations. Granted, your body doesn't move that much during those phases, but not having the slightest detail that moves makes it a bit odd. I'd suggest that either some part of the clothes flap with the wind or that the helmet moves a little bit to keep some movement and say "no, this is no mistake, this is no ATARI 2600 sprite used where some other sprite should have been".

[snake85027]

just wanted to say really awesome animation, I can feel the physical force in it.

[||||]

just wanted to say really awesome animation, I can feel the physical force in it.

Just wanting to 2nd that. I like the little explorer sprite too. The jump is simple yet effective.

[ericbloom]

@snake85027 & |||| : Thanks! That means a lot. Animation has always been really interesting to me, and it's a lot of fun to have a project to get into.

@PypeBros : I'm not sure what happened, I typed up a response a week or so ago and it seems to have been lost. Basically: Thanks. That was really helpful feedback.

I've gone into all the sprites and made the arms with continuity in mind. The earliest sprites had the more stylized arms. I did so thinking it would create a nice silhouette. In practice I found giving the arms more substance (on a sprite this size that means another pixel in width) made for better animations. Here are a few cleaned up versions:



Note: The army crawl is unchanged. I'm posting it to show all his movement states. The sprints are pushed a little more to add some oomph. I added a more detailed idle too. Idles are a lot of fun, and I might pack more into it.

I'm still scratching my head as to what I can add to the single frame slide and hurdles since there's minimal amount of shading to add subpixel animation, and they're really small sprites to jitter an entire pixel. I might add dust effects to the slide?

[Mr. Fahrenheit]

I'd add some more contrast to all of your sprites, some details are hard to see even at the upscaled resolution. I, like most everyone else, love the trench guy! Keep up the good work! 

[ericbloom]

Not an animation yet, but check out the tank I'm working on.



Well, not a tank, per se, but a robot with treads. This fella' will act as out moving platform. On top we can add different environmental objects like pillars, barbed wire, or enemies. That's the plan, at least.

It's pretty close to animation time, every relevant piece is layered (the wheels and cogs are actually fully rendered separately under the treads, the treads are several layers for easy animation and texturing, etc).

The hangup I'm having now is rethinking my palette.

On the right I've used the greyscale range I've used on the other robots. It's very soft. On the right is a quickly adjusted fix with deep shadows and highlights. What do you all think? Can this be added with extremes in shadow and reflection and still fit in the 'world'?

[Mr. Fahrenheit]

Its really nice but the style seems quite different then the rest of the enemies.

[yaomon17]

I agree. The dithering, sharp highlights and reflected light makes the style very different. I think it would be more consistent if the robot were to look something like this:

I wouldn't suggest changing the robot though since you have already animated it. I simply edited it instead of the tank since it would be faster in showing the point of the style inconsistency.

[ericbloom]

Good point. I got pretty carried away. The larger size gave me more room to play, plus I'm getting more comfortable making these and I think detail is a natural feature creep.

Edit:

Here is a current WIP of the background by another artist. We still need to tweak colors to get characters working with the background. The idea behind the additional detail on the tread creature was to make it more of a background element having the same level of detail.

Any advice on keeping the character visible on the background?



The background artist, Harry, also has a webcomic worth checking out! http://demonsmirror.com/

[yaomon17]

Increase the character's saturation and maybe up the contrast a bit.

[Mr. Fahrenheit]

The detailed and busy background will definitely draw attention away from the sprites. If you need to keep the detailed background clean up the lines and desaturate it.

[PypeBros]

?

Yet, imho, your darkest BG layer is still too dark and might have to be linked to the level design so that it never clutters the playable area


(I assume that resolution mix is not intended and results from the quick-mockup nature of the posted picture)

[Mr. Fahrenheit]

Sorry, by background I meant the playing area tiles and stuff like that 

[Decroded]

...
(I assume that resolution mix is not intended and results from the quick-mockup nature of the posted picture)

As in this case, I find it hard to even look straight at something with mixed resolution.

[ericbloom]

Oh wow, that makes a world of difference, PypeBros. Thanks for illustrating Mr. Fahrenheit's suggestion.

The different resolutions are actually intentional. The intent is to create a more detailed background with simplified characters on top, kind of like an animated cartoon. Doubling the resolution for the background gave this effect. By the reception it sounds like this is a big no no.

---

Going to edit this in as to not bump the post. Here's the now nicknamed "Treads" as he might exist in the game. The plan is to use him for any moment we might want a horizontal moving platform / wall of death / what have you.

[ericbloom]

A little hiatus, but here's some fun with subpixel animation. Learning pixel animation has a definite feature-creep to it:



One trick was to keep the central portion from moving at all, yet still conveying movement. This will let us use it as a moving platform on the central portion without worrying about pixel jitter.

[PypeBros]

One trick was to keep the central portion from moving at all, yet still conveying movement. This will let us use it as a moving platform on the central portion

dampers at work ?

Pixel-wise, it's a bit weird not to see those treads moving. This one is perfect for idle, but imho wouldn't work for moving platform.

Another thing about the two balancing cogs/wheels on the top. I'd rather see them balance (i.e. one's movement is countered by the other's) rather than move up/down syncrhonously

[ericbloom]

Yeah, currently it's just idling. Movement will have treads animating fully + smoke from the stacks.

Good idea about the support cogs. That's a missed opportunity to break up the uniformity.