I've got some idea for a technical demo (who knows, maybe some day it will result in a viable game), which demands a top-down view.
Here's my attempt on making a generic animation, a base for other walking animations:
Original size: (http://cave-progz.narod.ru/topdown.gif) 2x: (http://cave-progz.narod.ru/topdown.gif)
And somewhat slower:
Original size: (http://cave-progz.narod.ru/topdown_slow.gif) 2x: (http://cave-progz.narod.ru/topdown_slow.gif)
Has anyone ever concerned themselves with this kind of animation? Any tips on making it better and - frankly speaking - more natural-looking?
And how'd you go with shading with this kind of animation. I tried something on the hair, but I'm not pleased with how it has turned out.
P.S. White borders are GIF imperfections.
1) get rid of the white borders
2) this seems to be a walking man with short hair. His hair won't move that much, the jumping white lines on his head are most irritating. I don't think you will have to animate the shading on the head at all.
3) the rest looks fine to me.
Edit: 4) didn't see the resolution mix first because I was distracted by the flickering hair. Resolution mix is a no-go for me.
Why is the 'original size' awkwardly upscaled (thus having white outlines/AA)? And is it your intention to mix different resolutions (the white hair pixels are obviously smaller than the others)?
EDIT:
Quote from: Vukul on Fri 22/07/2011 11:47:10
P.S. White borders are GIF imperfections.
Nah, they're scaling imperfections. The borders are smoothed out, thus altering the surrounding white.
Maybe round his head a bit more, seems a little square, kinda like he has a helmet on, and his feet could also be rounded a bit.
I think the animation looks pretty good, except for the white border and hair
This is actually surprisingly good already. I worked on a topdown game once but we copped out by having it under the sea so we could create all kinds of weird fishes that swim sideways so we wouldn't have to bother with topdown woes. But your animation looks pretty good. The hair waving is way too strong but I do like it, adds a little extra flair to it. Maybe just turn it into a little horizontal squiggle that moves up and down his head.
Thanks for your responses, they've been helpful.
Yes, actually, AA appears because of quick upscale in PS (I'm not still sure about the final sprite size I need), but still it shows up like this ugly white board only in GIF, otherwise it will merge smoothly with background.
I'm happy you mostly like the animation flow; now there's a need to 'repair' shading. Yes, now it is way too strong on the hair, I'll try to go with less contrast, let's see what happens...
Just a note, to me it doesn't actually look like a complete top-down view, but like it's slightly at an angle (like a bit behind the character), I think that the head is a bit forward. Nothing wrong with it by default, just my observation.
Quote from: Vukul on Fri 22/07/2011 13:23:28
Yes, actually, AA appears because of quick upscale in PS (I'm not still sure about the final sprite size I need), but still it shows up like this ugly white board only in GIF, otherwise it will merge smoothly with background.
First off, you need to upscale pixelated images using
nearest neighbor to preserve the hard edges.
Secondly, you seem to use an alpha channel for the image. GIFs can't handle semi-transparent pixels, it will only use a single color for transparency. But since your piece is pixelart (and shouldn't have any transparent pixels) it shouldn't matter anyway.
So - scale it up properly or (better yet) give us the original image to work with. I'm still wondering about the pixel size, it seems you upscaled the image and
then added the grey hair.
@ anian
Good point, I'll look into it.
@ Matti
Yes, I know about it. I'm working now at some other image based on your corrections so far. I'll provide both animation and original frames, and without any AA.
Sorry for double-post.
Based on your advice, I've redid something in the original image and tweaked animation a bit. Also, there's the latest attempt on shading (I'm quite satisfied with it at the point).
Here's what I've got now (the size is final, so no more awkward upscaling and/or AA borders):
Original size: (http://cave-progz.narod.ru/topdown_bachelor.gif) 2x: (http://cave-progz.narod.ru/topdown_bachelor.gif)
And, as I promised, the frame layout:
(http://cave-progz.narod.ru/topdown_strip.png)
Looking forward to your criticism and/or suggestions.
Ten times better. I honestly don't see anything wrong with it, but I'm not really an expert either.
The shape of his head makes him look like Frankenstein. Aside from that the animation flows well, though I'm not sure why his head is sliding back and forth. It might rotate left or right ever so slightly, but the sliding effect makes it look like he's got a bobblehead. To reduce some of the hair you might try giving him a part in his hair and showing some forehead but it's not strictly needed.