So, what one of my little hobbies is redesigning and recontextualising characters. At the moment, I'm making some sprites based off of the Cyberpunk rendition of 'Jakob', my signature character.
Design is here:
Cyberpunk Jakob (http://img27.imageshack.us/img27/5076/cyberpunkjakobsheetfinaxj8.png)
I'm pretty happy with how his design came out on the whole. Flavored punky, but still cartoony and simple. I'm not asking for any advice on him, as he's pretty much finalised (I didn't want too complex a design, as I might have to hand animate him, too). He's a specieless cartoon character (as would be everything else in the game, if there was one) and pretty interesting and fun to draw.
Sprites
(http://img27.imageshack.us/img27/76/cypkjakobshowoz4.png)
- Idle Pose: Yawning (arms unfinished)
- Walking pose is kind of an amble.
Things I'm looking for advice on is how to maximise expression with the minimal space I've got available, colour (I'm not THAT hot on palette picking, so any advice on how to make a more efficient palette is welcome. I already cut him down to 16 colours from 28) and pointers on which frames his body should be moving in the walking animation. x3 Not too happy about the walking one, to be honest. His legs are short in the sprites, but they look kinda freaky in the animation. Dunno why. Mostly the colours are bothering me, though.
Anyone care to C+C on the sprites? There's something wrong with them, I can tell, but my eyes aren't yet critical enough to see what. x3
Thanks, everyone ^^
In my opinion braces should look more like a curve not a straight vertical line (in the walking animation), they also should connect with the pants more in the front, now it looks like he had them on his sides. Besides there is no tail on the walking animation. After adding it and giving it a gentle movement it might look lots better :)
Could you compile the frames into a .gif animation for us to see how fluent it is?
Ok - first of all - the idle animations look great :) (in my opinion at least), the back walk animation is allright when it comes to legs movement but the wings seem to "jump" quickly from frame to frame (there should be more subtle, slower movement). Also I'm not sure about the bounce in his walk, he seems to bounce up+left and down+right and it's not symetrical as it should be...
And still, you havent posted the side walking animation :)
Since Imageshack has failed me...
(http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkjakob_tshirt.gif)(http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkjakob_up.gif)
Seeing it all animated properly, the arms are the things that is wrong, it seems x3
(http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkjakob_yawn.gif)
QuoteOk - first of all - the idle animations look great (in my opinion at least), the back walk animation is allright when it comes to legs movement but the wings seem to "jump" quickly from frame to frame (there should be more subtle, slower movement). Also I'm not sure about the bounce in his walk, he seems to bounce up+left and down+right and it's not symetrical as it should be...
I've tried to make a more subtle curve into the fin animation, but I'm struggling a little making it look natural. I'll keep trying. The bounce up+left appears to be me misaligning the frames when I compiled them into a GIF. I'll try centering the animation on his head rather than 3 pixel from the rightmost foot. x3
And now, some concept art. x3
Jakob and Khato (http://i483.photobucket.com/albums/rr191/Khatoblepas/dinnersonyou_final_FA.png)
I think I shouldn't have combined the shading on the characters with the lighting layer. Makes it look messy.
Yes. The hand movement in the side walk is wrong. It's simply because of that one frame jump to horizontal position. Try walking around a room, you dont rise your hands so high. try lowering them in extreeme frames and it should get better.
I wouldnt mind his tummy beeing one pixel bigger there too :) and some braces movement to the front when he puts his leg forward :)
Quote from: Scavenger on Wed 18/02/2009 16:42:16
And now, some concept art. x3
Jakob and Khato (http://i483.photobucket.com/albums/rr191/Khatoblepas/dinnersonyou_final_FA.png)
:P Nice concept art, I really like it.
(http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkjakob_walkside_big.gif)
Fixed his arms, his hair, made his stomach a little bigger to match his still pose.
See? that's LOTS better :) Great work. I can see you're getting hang of it :) Congratz!
I think there's one dark brown pixel blinking on his shirt.
The gentle movement of the frindge would look nice on the back walk too :)'
Bouncy tummy would be fun but this would probably get too complicated :P
(http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkjakob_walkleft_big_2.gif)
Can't really get it to bounce properly, but fixed the flashing pixel and added in the last details.
The bounce looks a little out. To be honest, on a sprite of this small size, bounce isn't really that necessary, but you should have him bounce in frame 3 and 8 (going off the sprite sheet at the top of the page). They are really the point at where the characters body would be at it's lowest due to leg positioning.
Quick question... what makes this character 'cyberpunk'? He doesn't really have any characteristics I'd associate with cyberpunk. He's just got some flashy headphones. an electronic device on his shoulder and a nifty barcode design on his t-shirt.
That said, the sprite looks better than the source material. *edit* I like the proportions better :)
when the body goes down belly should go up, and when body goes up belly should go down. Kind of opposite force movement. It had it's own name, cant remember it now. You know, like you start runing and if you have long hair they will go back and when you stop or jump back they go forward.
The bounce looks REALLY good to me, it's just off the right frames. It'll be perfect after small correction
*EDIT* Oh and try making this small led light on his headphones blink as in the idle yawn, might look cool :) or maybe even one red blink and then one green blink :)
The walking loop has too many frames for such a simple sprite.
The bounces are off-beat, so to speak. They don't occur regularly, which renders him some sort of limp.
Frame #4 looks unnecessary and out of place. Besides, it's rather un-anatomical; when your legs are the furthest apart, the front feet will point upward, not lie flat on the ground. The foot isn't flat until most of the body weight is over it.
Frame #5 could benefit from having the right leg bend more and the foot lifted, with toes pointing down.
Remove one more frame from the "right" part of the loop to compensate for the loss of #4.
I'm not sure this will look better, as I haven't tried the loop, but those are steps toward a better animation with some more tweakening.
QuoteQuick question... what makes this character 'cyberpunk'? He doesn't really have any characteristics I'd associate with cyberpunk. He's just got some flashy headphones. an electronic device on his shoulder and a nifty barcode design on his t-shirt.
To be honest, not much - though any given definition of cyberpunk may differ (mine's more Snow Crash/Strange Days/Fifth Element than Neuromancer and Cybernetic things - though that's just my preference) - it's the context he's put in that's cyberpunk (so, Jakob-for-use-in-Cyberpunk-setting rather than really-cyberpunked-Jakob) . Besides which, the more overt symbolism of it I wanted to avoid - to give him the connection with the audience that would not be as strong with something a little more immersed in the setting. He would serve as the surrogate for the player, much like Roger Wilco and Guybrush Threepwood, Simon the Sorcerer, et al are more ordinary than their NPC counterparts. (besides which, isn't the point of -punk to defy preconceptions? I dunno x3)
QuoteThat said, the sprite looks better than the source material. *edit* I like the proportions better
Yeah, I'm more confident sculpting the appearance of sprites than I am drawing characters. Shame I'm so rusty at animating :(
QuoteThe walking loop has too many frames for such a simple sprite.
The bounces are off-beat, so to speak. They don't occur regularly, which renders him some sort of limp.
Frame #4 looks unnecessary and out of place. Besides, it's rather un-anatomical; when your legs are the furthest apart, the front feet will point upward, not lie flat on the ground. The foot isn't flat until most of the body weight is over it.
Frame #5 could benefit from having the right leg bend more and the foot lifted, with toes pointing down.
Remove one more frame from the "right" part of the loop to compensate for the loss of #4.
(http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkjakob_walkleft_big_3.gif)
Removing the two frames does look quite nice, I must admit. Renders it somewhat smoother. Might have to fix the tail though, hmm.
Yes, but now you only have one bounce, which is kind of odd :)
Obviously, you need to either have two bounces or none, and considering the simplicity of the animation, you might do without any bounce at all.
The problem I see with the animation isn't the style but the overall 'muddiness' of the design, making shapes very difficult to read. I also agree with Layabout and Andail that the bounce is off and that it could benefit from fewer frames rather than more. Another issue is the belly simply descends too far below the legs even when considering your source image (and it looks like he has pants only on his legs rather than having a waist). Based on the extremely dark and saturated color choices, I can only guess that you drew this character on a saturated or black background, which will throw off your colors every time. With these points in mind, I made an edit:
1. Altered some of the colors, raising their brightness slightly, though it could be improved. I was also able to reduce the color count by one by making the outline a really dark blue and using that instead of black for the other parts of the image.
2. Cleaned up the line work and reduced the confusion of shapes by using darker outlines around the headset and cleaning up the face and legs. Made the hair look less confusing by applying more logical highlights to the top and using black as an additional shade.
3. Altered animation so the left arm is fully forward on a right leg down step and fully back on a left down step. Also made the right arm visible as it goes back.
4. Made the distant leg darker to reduce confusion while viewing the leg motion.
5. Altered wings to make them readable and so they would turn with the shoulder.
6. Changed tail slightly so it turns with the leg motion.
7. Made the sprite move down on a down step and up as the leg is pulled up. This makes for a more consistent appearance of motion.
8. Made the torso twist back and forth rather than bounce so much. With the stomach hanging down so low the bounce makes his stomach literally look disconnected from the body.
(http://i485.photobucket.com/albums/rr218/ProgZmax/cyberpunkjacobcl.gif)
(http://i485.photobucket.com/albums/rr218/ProgZmax/cyberpunkjacobcl.gif)
The main thing I think you should focus on is making your sprite more readable, since many of the parts in the original are undefinable shapes like the headset and wings. I think the character has a lot of potential!
Quote from: ProgZmax on Thu 19/02/2009 15:52:47
(http://i485.photobucket.com/albums/rr218/ProgZmax/cyberpunkjacobcl.gif)
(http://i485.photobucket.com/albums/rr218/ProgZmax/cyberpunkjacobcl.gif)
The main thing I think you should focus on is making your sprite more readable, since many of the parts in the original are undefinable shapes like the headset and wings. I think the character has a lot of potential!
Oh god, that is too awesome. I see what you mean - I knew the colours were off but without the knowledge to fix them, I was a little lost. This sprite is so clean and professional, I am really in awe. Before I go on to do any more animations, I will study how you did this sprite and try and glean what techniques I can from it. Redo the turnabout, and see if I can't tweak the colours further.
And yes, I was working on a green background, like one of the animations above. That was probably a huge mistake.
I will return once I have figured out how I can fix what went wrong.
Thank you, all, for your advice ^^.
Drawing on any kind of bright or saturated background will throw off your colors every time, and it's a common mistake so don't worry about it :). Try for a more bland, neutral color (like the one I used) that is just far enough away from the other colors that your image still stands out. Neutral colors won't negatively impact your art since your eyes won't be affected by a large patch of bright or dark color. I look forward to seeing your update!
(http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkjakob_show.png)
Tried to replicate the techniques ProgZmax did to my sprites - I don't think I did as well, but I'm learning, ma!
Waaaah, as usual, progz makes perfect edit lol. Now I feel that all my pointers were useless X3.
Anyways, nice new av Progz XD made me like "WOAH!", I kinda like it better than the aligator :)
The top versions look much better. I can make out the individual shapes without trouble and it has a cleaner presentation. My only recommendation is to work a bit on the hair in the back view since the shading is a bit strange. Well done!
(http://i483.photobucket.com/albums/rr191/Khatoblepas/gui.png)
Something a little different now - the inventory gui. The buttons disconnected are the up/down scrolling buttons for the invemtory window, with the smaller LCD screen being the text for the items you mouseover. Goes in the bottom right.
For 320x240. Wondering if it's a little big, as I'm going to have a gui in the bottom left, too.
it will be too big (in my opinion). The panel reaches almost to the half of the height of the screen and 1/3 of the width. As it is shown whole the time AND there will be another gui on the right it seems unacceptable to me
Also the arrows on the buttons aren't clear to me.. Didnt know they were arrows until I read about them.
While I figure out how to put an inventory gui onto the screen in a stylish but practical way (and I still have to include Jakob's portrait and a text parser somewhere, argh), here's some characters, and Jakob's 3/4 view. I did them all from scratch (apart from the left view of Jakob, which progZmax did. x3), and I'm pretty happy with how they came out.
(http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkchars_2.png)
Bottom Left: Femme Fatale, wearing a PVC suit and a red fur coat draped around her shoulders.
Bottom Middle: The Courier Girl, wearing a protective and brightly coloured suit, many identitags on her chest, and holding a motorised skateboard. Also of note, a gas mask for all the fumes on the lower levels, and really gaudy hair.
Bottom Right: Surly bartender. Cyborgised.
Portraits/Rough Reference for later sprites: http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkcharacters-1.jpg (http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkcharacters-1.jpg)
Nice 3/4 view :3 good work on that!. And I must say I adore the gas mask girl! I would be happy to see some pixel art or portrait of her. Damn...I might even do it myself lol :3
Okay, here's some more animations up for review.
(http://i483.photobucket.com/albums/rr191/Khatoblepas/femmelook.gif)(http://i483.photobucket.com/albums/rr191/Khatoblepas/femmesmokes.gif)(http://i483.photobucket.com/albums/rr191/Khatoblepas/tshirtpullbig.gif)
For portraiture, I've been working on some quick mockups. Dunno whether to go for flat shading or deep shading, and I don't know if I should add the nine phonemes and make lip synched portraits. (had palette difficulties reducing the below painting down, so I may have to redo it in Pro-Motion) Gonna have Lucasarts-style speech animations as well, though.
(http://i483.photobucket.com/albums/rr191/Khatoblepas/Jakobportrait.png)
from this sheet:
HERE. (http://i483.photobucket.com/albums/rr191/Khatoblepas/cyberpunkcharacters-1.jpg)
(http://i483.photobucket.com/albums/rr191/Khatoblepas/palette.png)
Finally, what colours am I missing from this palette? I might just go with 16 bit colour what with the lack of support for 8bit transparency effects I adore so much, but I want a unified sprite palette to give that same sense of consistency and retroness I love from 8bit games. (Aesthetically speaking, I adore the off-colours, the strange effects translucency has on 8bit. It's so awesome <3)
Speech animations make portraits redundant and vice-versa, so you will save yourself a lot of development hassle by choosing one and doing it well. The left animation of the girl seems awkward because her body stretches as she turns, parts shifting at different points in the frame. The darkest shade has also been made black compared to a more purple shade in the smoking animation. The smoking animation and the shirt adjusting animations both look quite good, though! One thing I would work on, again, is the readability of your sprites. The character with the gas mask is impossible for me to make out the features of, and I didn't know it was a female until you said so. Her legs also seem very short and the torso very flat, so I would bring up her legs and alter the details on the torso enough that they don't interfere with her shape. I think the portrait looks good and you should only worry about the color count if you want the portraits to look hand-pixelled.
It has come to my realisation that highly detailed clothing pieces and tiny sprites do not go together when I do them. And I don't want to waste time redoing whole animations, so I thought it would be prudent to improve the base sprites first.
(http://i483.photobucket.com/albums/rr191/Khatoblepas/updatedcyberpunkgirls.png)
So I redid the gasmask girl from scratch and dropped everything I didn't like about her appearance. I also changed around the shading on Femme Fatale, and also tried to make her look more shapely.
No gas mask anymore T.T? I loved her with that gas mask...She was so hot...T.T
I think it's a step in the right direction, but if you want shapely figures the best way to approach it with such small sprites is exaggeration while sticking to the generic principles of anatomy. I've made an edit of both sprites with your versions below to show you what I mean.
1. Altered the colors to provide more contrast and some lighter shades.
2. Altered pose of left sprite to force her hips to one side since she's resting her hand on her leg. This also gives her a more 'sexy' appreance.
3. Widened hips of both sprites to approach the 'hips as wide as shoulders' rule for women. This also makes them appear more shapely.
4. Reduced size of feet for both sprites. This allows you to taper the legs and adds to the shapely figure.
5. Did some shading with the highlights above and shadows in areas that do not stick out or are beneath areas that stick out.
(http://i485.photobucket.com/albums/rr218/ProgZmax/cyberchickcl.gif)
(http://i485.photobucket.com/albums/rr218/ProgZmax/cyberchickcl.gif)
I think the biggest difference here is that the left sprite now looks built above and below and the right sprite looks less chunky. Hopefully this will help!
Once again, ProgZmax, you've shown me the light. This time, however, I don't want to just crib your work, since that won't help me learn. The Femme Fatale is brilliant, though, I must admit.
Here is my own edit of my sprite.
(http://i483.photobucket.com/albums/rr191/Khatoblepas/couriergirl3.png)
I thought she looked quite good chunkier, as it fit the personality I was writing her as [tomboy] - I don't think waif wound really suit her. Too fragile-looking.