Pixelation
Critique => Pixel Art => Topic started by: daramon on June 03, 2019, 09:53:18 am
-
So I'm very new to pixel art. I've looked at a course or two on Udemy and I've been fiddling around with background tiles for a while (the usual: grass, rocks, that kind of thing).
I felt like I was making some headway, so thought I'd have a go at some character animation.
This is my first attempt at a spaceman. He's small as I want the pixels to look chunky in the final game. This cycle contains run, jump and idle. The animation frames were inspired by the walk and jump cycles in a Preston Blair book on cartoon animation (you can find the cycle images all over Google as well.)
(https://i.imgur.com/Kt5eDD9.gif)
This is an earlier iteration without shading, and just the run cycle.
(https://i.imgur.com/rUmgkQ4.gif)
So questions:
- It all looks very simplistic, and the shading seems uneven between the head and the body. How can I better shade the character to be more space-suit-like? (I'd like to keep a slight orange tint to the player, as the majority of the environment will have an orange hue.)
- The game concept involves the suit sometimes being empty, controlled remotely by an AI (in game of course. In reality the player is always in control.) In this case, a "breathing" style idle animation doesn't really make sense. What else could I use for an idle animation to add interest? Breathing seems to be so ubiquitous.
- I'm not overly happy with the "Jet Set Willy" style side-on idle. What kind of poses are there that aren't the "overly dramatic 45 degree to the camera posed" look?
-
Your images aren't working. You may want to use a service designed for hotlinking images, such as Imgur, instead of Dropbox.
-
That's disappointing, Dropbox used to be great for that and the preview seemed to be working fine for me. I even made sure I wasn't logged in.
OK, I've updated using Imgur. Are they visible now? :)
-
Yep, the images are working now!
What's the environment for this character? That should determine how you colour them.
In space, there's very little scattering of the light, so shadows tend to be very stark, even on rounded objects. On a planet or inside of a space station, the lighting will of course be different, with more bounce-light and diffusion.
In addition to the shadow quality, the environment would affect the colours. The colours you're using now suggest something like a dusty Martian surface.
For the AI idle, you could have the helmet look left to right and back (or up and down) very smoothly, as the AI scans its environment. Having different idles for AI vs human would be pretty neat, and help remind the player what's going on even if the gameplay doesn't change much.
Turning the body 45 degrees to the camera (or at least some angle that isn't a profile) is very effective for communicating the pose clearly, which is why it's so common. Showing both legs and both arms allows you to have all of those for communicating the character's personality, and allows for interesting silhouettes even with very relaxed, simple poses. Achieving the same with the character in profile would require a more dramatic pose xP
-
> What's the environment for this character? That should determine how you colour them.
There will be inside and outside environments. (Futuristic exoplanet moon base, surface, caves). I may need to create different sprites for the different locations, by the sounds of it.
> In space, there's very little scattering of the light, so shadows tend to be very stark, even on rounded objects.
Great point, I'll have a play with some harder shadows. The surface will have to have some kind of atmosphere though, as there will be life, so even if it's not nitrogen/oxygen there would probably be some kind of scattering I guess.
> For the AI idle, you could have the helmet look left to right and back (or up and down) very smoothly, as the AI scans its environment. Having different idles for AI vs human would be pretty neat, and help remind the player what's going on even if the gameplay doesn't change much.
Excellent idea! Thanks.
I'll get to work on those, and a decent idle pose.
Thanks for your time!
-
Also, a dusty Mars style surface was kinda what I was going for. :)
-
You can edit your posts, you don't have to double-post.
You probably won't need to create different sprites, you'll just have to come up with colouring generic enough to work for all of them. You could, perhaps, apply some palette swaps or a colour overlay though, to help ground the character colour-wise in the various settings.
You're right that on a planet surface, there will be scattering and thus softer shadows. Even if the atmosphere is thin or otherwise nothing like Earth's, the dust, and just light reflecting from the surface of the planet will serve to soften the shadows. Interiors often aren't that different from exteriors, aside from colours. Both typically have a dominant light source direction (e.g. from above) and perhaps some secondary light sources (bounce light from the ground/floor, maybe some extra lights in the environment). It would not be difficult to create shadows that work for all of these, by e.g. having a sprite lit from above. Since it doesn't look like your character will be doing any space-walks, you probably don't need to worry about having a stark shadow version.
The hard part will likely be, as it often is, making sure the character's colours feel like the character is in the setting that's around them, when you have a lot of different locations. With a white-ish suit, which is likely to reflect environmental colours, this may be tough. You can simplify things by giving all your environments the same dominant light colour. With clever design, this need not result in samey environments, as you can use different accent colours and different shapes to create different visual identities for each location. Alternatively, you can use palette swaps or colour overlays to make the character match environments with very different colour schemes.
-
Thanks, this is all great advice! Especially the palette swaps. I want most areas to have a similar dominant color, but there will be one or two that I really want to look different for story reasons.
I was playing a game recently that got the main character lighting wrong in some areas. The "80s Superman" feel of being cut and pasted in to the environment pulled me out of the immersive experience of the game briefly, so this stuff is important. :)
-
OK, here's a first attempt at breathing. I like the look of how the legs bend, but it's a bit OTT.
(https://i.imgur.com/XUaOhOK.gif)
Breathing attempt 2:
(https://i.imgur.com/gwyBDGZ.gif)
Better, but I'm still not sure. Any ideas for improvement would be really welcome.
(https://i.imgur.com/OK9rLWm.gif)
AI controlled space-suit scanning left-right. I'm not sure the glint on the faceplate is doing the right thing.
-
Hi daramon!
That's an adorable little spaceman.
Here are some thoughts about the animations:
It appears as though the spaceman is stopping for a frame as his foot hits the ground. I think it would be helpful to make sure that for every frame that the spaceman's foot (do this for each foot) is touching the ground even partially, it is moving a specific amount of pixels. While the foot is in the air, though, definitely give it a bit of a pendulum motion.
In most cases, a person's gait is pretty constant throughout the entire cycle, and it's especially true for games where the sprite moves at a constant rate. Keeping the foot movement (while it's touching the ground at least) the same across all frames will help prevent a conveyor belt/stutter sort of effect from happening while the character is moving in the level.
Right now the spaceman appears to be jumping forward. I'm not sure how the game is going to use the jumping mechanic, but usually, the animation is designed to be used for jumping straight up into the air as well as forward. If you're designing the jump mechanic to act like other platformers, I'd say try a straight up and down jumping animation because it'll look the best in-game while the player is bunny-hopping around and switching directions mid jump.
Your spaceman is breathing too quickly for it to look natural at the moment. I'd say pause the animation for three frames at the point where his lungs are completely full and the point where his lungs are completely empty.
Also, it looks like his head is tilting back a frame before his lungs are full. Try swapping that so that the head tilts back one frame after his lungs are full instead. His diaphragm should be doing most of the work here, and his head should follow it not pull it.
If you want to be a little extra, you could shorten the length of the reflection on the middle frame by a pixel or two to try to account for the curve of the visor, but I don't think it's necessary. I think you handled the reflection on his helmet great. :y:
-
Thanks! That's all really useful stuff. I'll have a play with the foot movement in the run to see if I can remove the judder.
Jump: you're probably right. I like the animation, but it probably won't work for a platformer. I'll see what I can do with something like a push off from one leg and a raised knee on the other...
Breathing: I'd worked out that I needed extra rest frames in there, but I'm a little bit limited by my editor (Pyxel Edit) and laziness. Adding extra frames is an annoying task, which I'm happy to leave until I get to the Unity animator (where it's really easy.) I hadn't worked out that the sequence was wrong though, I'll have a play. There was something that bothered me and it could easily be that.
Scanning: I tried shortening the reflection but I couldn't manage to make it look convincing. It came across a bit flickery, but there may be some options I haven't tried. I might try halting the movement and making it less intense at the extremes as well, as it annoys me that it gets so near to the edge of the visor for some reason. It could help suggest a shape as well, like a glass visor that protrudes a bit from the front of the helmet.
-
(https://i.imgur.com/vFvq2kZ.gif) New smooth running
(https://i.imgur.com/aGK83KX.gif) Rearranged breathing
(https://i.imgur.com/OW1GoxK.gif) Scanning with new glint. I prefer this as it's asymmetrical.
(https://i.imgur.com/Cxvrj9k.gif) New upwards jump
Huge thanks for the tips. In particular, the smooth running issue would have had me scratching my head for ages. Amazing insight!
-
Timing of the running needs to be adjusted, now it's more of a fast walk or a stomp.
Running, you use the last step to launch yourself, but I see no midair frames and the vertical timing/bobbing is many frames off here.
ptoing made a diagram of this ages back (running vs walking), in pixel art and even with the same proportions as your fellow here, I'll go digging for this.
Would also push the shading more...
-
You're right, it's a walk! I'm using the wrong term, apologies!
I'm good with that though; I don't feel a need to change the whole animation for the sake of semantics. However, if the game ends up playing like it needs a run mode to get about more quickly, I'll definitely draw one up.
I have a couple of different sets of run cycles lying around for inspiration, but if you have a good one to share I'm all eyes! :) More information is always welcome, and I'm using books about traditional drawing media rather than pixel art specifically.
Shading: yes, I'd like to get more detail in here, but I this is kinda where I'm stuck.
When you say "push the shading" do you mean I should use darker shades or cover more of the surface area with shading? I'm worried I'd lose the lightness of the figure, who's supposed to be wearing a light-colored material.
There are areas that I could put into shadow because of the positioning of the helmet, or the bend of a leg though. I'll have a go at some of those.
I work well by being visually inspired. Do you have an example of a well shaded character I can learn from?
-
(https://i.imgur.com/s5c4kIO.gif)
I've added extra shading so the helmet now actually blocks some light and the legs and arms have deeper shadow areas. Is this what you mean? :)
-
RE: the jump, his feet shouldn't be paralell with the ground through the motion. Instead, try giving them more diagonals. People land heel-first in a good jump.
(http://theinspirationroom.com/daily/commercials/2008/8/nike-moon-jump.jpg)
-
Thanks for that! Great idea, diagonal feet look a lot more dynamic. I'm updating, I'll post the results.
I mean, the pose in the photo is very realistic, obviously, but I'm not sure I like it. I'll see if I can take elements from it. The heel thing is a really good point, I need to make the landing have a bit more impact.
-
yes, I'd like to get more detail in here, but I this is kinda where I'm stuck.
This is just my take but try out something like this:
(https://i.postimg.cc/fTN7C0k1/spacemanedit.png)
The key is usually less detail, not more actually. Especially at small rez. Just keeping it simple, a lot of core shadows which look nicer and are actually easier to animate. Some small changes to the design in that vein too.
-
(https://i.postimg.cc/fTN7C0k1/spacemanedit.png)
That's just adorable! And there's a lot I love in there. The way the helmet visor looks indented is pretty genius, and the arms look like they grow in width as they reach the hands in a pleasingly cartoon-like way. And it definitely has a lot of shape and weight. Which is great.
I have my work cut out. Back in a few... months?
Oh, and thanks for putting the time in, it really means a lot!
-
(https://i.imgur.com/JMZLrQx.png)
OK, so something like this. I tried to give it my own twist, but I love the rim you got around the visor so much! Let me know if you think I'm too close.
After looking at a few photos of space helmets I decided to use more pin-prick style reflections on the visor to emphasize the shininess. And the grey band is there to represent the reflections of a generic landscape.
I might try adding some more red detail. It feels like the whole thing has solidity and shape now, so detail will make sense.
Thanks again, you've set me off in a really interesting direction! I feel like I've learned a very important lesson.
Now I've only got, what, 51 more frames to shade up? :o
E2A: I may have missed the point a bit. I'm using way more shades so it'll probably take a lot longer to animate him. And you specifically mentioned simplification.
Oh well, I like the look of him now. It comes down to whether I can pull it off for positions where you haven't kindly provided me a template... And whether it turns out to be fun or not.
-
(https://i.imgur.com/b35HMsV.gif)
This is a rework of the jump animation using the deeper shading inspired by Pistachio and a more dynamic jump inspired by Mystery Meat, followed by a hard landing.
I can see a few issues still, but I'm really excited about this development. Massive thanks to everyone who's commented on this!
-
(https://i.imgur.com/vLHQ6IW.gif)
Legs paused in an awkard spot and his jump didn't kick his leg far forward enough! Hopefully this helps illustrate that!
-
Ah yes, looking at it the landing doesn't really make sense on mine. I see where you're going with yours and the more extended leg combined with the shortening of the knee protrusion at the end helps a lot.
The pauses are to represent the three stages of the animation: up, down and land. I'm working on the movement code right now, and the plan is to trigger animations on jump (obvs), reversing direction at the top and reverting to grounded state. I don't know if the animation would make sense playing out completely on the way up, and there aren't enough frames to spread it out evenly.
If you're saying the first paused frame just looks awkward then then that's a shame as I kinda liked it. Still, I could relax the leg a bit and make it more of a right angle rather than tucked in. Or I could generate a lot more frames and make it smoother, at which point I could probably get away with just triggering it on jump and leaving it.
Food for thought. Thanks (again) for your time!
(I have a feeling that I won't have finished working on this character's movement until I finish the project...)
-
I actually took that into consideration, try implementing the frames as I've posted as a sequence of pauses Along a jump arc
-
I will do, thanks!
I'm currently battling with wayward Unity character controllers, I'll let you know how it goes once I've bashed out something stable to hang it on.
-
Just wanted to add your progress is looking neat, kind of beats even my edit there :P
MysteryMeat is right, building off of his advice I'd tweak the first few frames of that jumping anim to be less linear. Probably I will make an edit much later to demo this, but look up animation terms like slow-in and slow-out.
-
Thanks Pistachio! That's very kind. I wouldn't have been able to get anywhere near those results without your edits.
With "slow in" and "slow out" are you talking about what I'd call "easing" in web UI design?
-
Thanks Pistachio! That's very kind. I wouldn't have been able to get anywhere near those results without your edits.
With "slow in" and "slow out" are you talking about what I'd call "easing" in web UI design?
Yeah, ease in and ease out was the lingo, and yeah, it is everywhere right now even way beyond web design. :huh:
BTW there's good stuff in The Animator's Survival Kit, not only easing but about arcs and timing. Look into those two on the side, it's gonna help your other animations.