Topic: Eric's art thread

[Eric]

UPDATE: You're going to have to wade through a few posts of crap before you get to anything that looks good, but as of March 7, this is the best I've done:



Hi folks. I'm a new member here, and have enjoyed looking through this sub-forum more than any other part of the site. There are some amazingly talented people congregated here.

...Which is why I'm a little embarrassed to share my learning process with you. I'm slowly, slowly attempting to make a small game of my own, and by far, the most daunting part is animation. Tonight, I decided to start learning by trying to animate the key frames of a walk cycle. Results were not that great, but I have made some process.  At midnight, I had never animated a walk cycle before, and now I've made several tries at it:

I hand drew 1/2 of the walk cycle just to sort of get my bearings. Very very loose doodles here, and throughout my other attempts below as well.



Toned down the extreme frame where it looks like the character looks like he's about to break into a run, did a doodle-over second draft, and tossed on some color in Photoshop:



With this version, I was also trying to deal with the physics of the body. This character has a bit of a paunch that I wanted to see bounce a little when he took steps. This is me trying to get my head 'round the effects of gravity and inertia that happen as we take steps. Here's a version with a faster framerate:



The arm swing and gait are still a bit extreme here. After this draft, I thought it might be helpful to break things down to an abstract level, and did a sticks n' shapes version, making the swing and gait not so exaggerated:



Still lots of issues, but I think it doesn't look too bad if you cover up the stick feet (wish I'd done the joint on the ball of the foot). I also think that the figure should lean forward slightly.

I've found a number of the tutorials linked in the sticky'd post useful, and I especially wish the Biomotion lab app allowed you to advance through their motion capture walk cycles frame by frame. I'm still looking around at some other resources, and hopefully will find some time to improve later this week. I feel like being able to do something like this is a hurdle I have to clear before thinking seriously about making a game of any length.

Anyway, thanks for checking in on my learning process so far. Hope you aren't too horrified!

[Eric]

Well, I found a better walk cycle template by Eric Colossal, who, coincidentally, lives just down the hill from me. This one was tucked away in the contribution thread, whereas the older version, which was not as good, is the only one linked in the tutorial thread.

I stretched the cycle template out, because I'm working with a tall, gangly character, and started a...you guys call it a paintover?...process. I've done torsos, heads and arms for 1/2 of the cycle, and two pairs of legs. Thought I'd share a little more with you guys. I feel like I'm not doing horribly, but I'm prepared for when you all find this thread and show up to throw tomatoes at me. My posts here will hopefully serve to keep me accountable, and keep me making progress.

100%:



200%:



I kept Mr. Colossal's template in the background at a lower opacity to show where I've followed and where I've deviated from it.

[Anian]

If you're going for a serious walkcylce (as in not a comedy game), you might want to soften the walk - make the character take a shorter step and not bend the knees so much.
Also his hands are wobbly, like there's no bones in them and is being electrocuted, I'd turn that into a simpler swing of the hand.
The example/template is good, but it's kind of exaggerated so you can notice the movement of limbs, for more natural walk the movement would a lot less pronounced.

Btw. the look of the sprite seems really nice. Though the hands could be a few pixels longer (or shorten the torso a bit)

The first walkcycle also had the problem of the legs being too in front (the legs were not going backward enough so it looked liked the character was off balance)

[Eric]

Thanks very much for the feedback, anian!

If you're going for a serious walkcylce (as in not a comedy game), you might want to soften the walk - make the character take a shorter step and not bend the knees so much. Also his hands are wobbly, like there's no bones in them and is being electrocuted, I'd turn that into a simpler swing of the hand.

This is actually reassuring, because, if this works, I will attempting a humorous game. This character, when I draw him elsewhere, is somewhat physically based on Disney's Goofy. His arms are a bit spaghetti-er, and his structure and poses exaggerated. That's why I started the gait and the arm swing so extreme, but what works in a static illustration doesn't always work in animation, so I'm learning.

This is also the reason for the "snap" of the hands. I'm thinking you're right, and it doesn't work, but I might try it through the other half of the walk cycle just to see. Also, if I thought I sucked at drawing hands when I could outline them in black, I'm downright hideous when it comes to trying to suggest them through pixel coloring.

Btw. the look of the sprite seems really nice. Though the hands could be a few pixels longer (or shorten the torso a bit)

Thank you. I think I might need to lighten the sweater a bit if I actually intend to use this sprite with backgrounds. I'll need to figure out values of the backgrounds, I guess.

Funny that, you're right, the arms are short. In real life, my arms are, for some reason, each two inches shorter than they should be. I found out in a statistics class when the teacher was using the, "Most people's bodies are square, head-to-toe = arm span," example, and I threw off the teaching model with a deformity I'd never realized I'd had up until that point!

The first walkcycle also had the problem of the legs being too in front (the legs were not going backward enough so it looked liked the character was off balance)

This is what I was picking up on when I wrote above that I thought the character needed to lean forward more. I knew there was a balance issue somewhere.

Thanks so much for the feedback!

[Wafflle Bombs]

Very nice! The sprite is wonderful and has loads of character by itself! The walking animation is very loose, which is perfect since you're going for a humorous game. I do agree that the hands could be a little longer, since they look a bit small in relation to the rest of his body.

Nice attention to detail, too! The little lock of hair that bounces with each step is a nice touch, and the gut is perfect. Overall, a very nice piece which I look forward to seeing more of!

[Khris]

Mr Colossal's template is fine, but you might want to take a look at this:
http://www.bigbluecup.com/yabb/index.php?topic=14864.msg583836#msg583836

[Eric]

WaffleBombs - Thanks for the compliments and the advice. I think, like me, you are new here. So welcome!

Khris - I saw that, and stupidly thought, "Well, I want to animate something more than 50px tall," not even thinking that it's a stick figure that I can enlarge. I think I'll stick with the Colossal method for the side views of this particular try, and maybe adapt the ratios of this for the front/rear views. Thanks!

[Eric]

Another try. I'm not very good at pixel art, I'm discovering. Especially on the pants.

I fixed the issue with the hands by realizing that I was drawing a cycle that was twice what it should be for my leg motion.

Then, I matched the wrong arm motion to the leg motion, and had to move everything around. Thank god for layers.

I forgot to adjust the tie in the second row for when the torso turns toward the camera (player?), so there's a weird shoulder shimmy.

Thanks again everyone for your guidance. It's not the best, but, like I said, at the start of this week, I'd never really animated anything, much less a walk cycle, so I'm happy with my progress.

EDITED LATER IN THE EVENING TO ADD:

Learned a very, very important lesson, I think. Started a test game, made a very basic room, trying to start learning the AGS system. The lesson is this: smudging the edges is a horrible substitute for anti-aliasing by hand, and renders sprites useless!

AND A SECOND EDIT:

...Learned a second lesson. If I use 32-bit true-color, I can use alpha channels, which makes everything OK again, I think?

[Bernie]

I really like the sketched look of the pants. What seems to stand out to me is his more pixelled-looking upper half.

The walk cycle itself is very well done. Looks like a lot of effort went into that. Characters that large are quite hard to draw and animate.

[Dualnames]

if his back foot was sliding, then he would be SHUFFLING. I think it looks fantastic. Very fluent, ver unique walkcycle.

[Eric]

I really like the sketched look of the pants. What seems to stand out to me is his more pixelled-looking upper half.

I think maybe the issue here is that they're slightly mismatched in style. I really like the pixelized head, and the torso and arms seem to match it. Also, the pants/legs took me about eight times longer than anything else, and so I'm probably always going to hate them.

if his back foot was sliding, then he would be SHUFFLING. I think it looks fantastic. Very fluent, ver unique walkcycle.

Thank you guys so much for the compliments and support. I think I've proven to myself at this point that I can do it, so now I suppose I should start thinking about making a short game. Last night, I whipped up a quick background and started practicing with the programming language:



I was stumped on what to really do, because I just wanted to mess with the code, so looking at each of the portholes gave a track name, and using them played one of four songs I've been working on lately. It took a lot of Googling "site:bigbluecup.com '(name of function I don't completely understand)' (general idea of I want to do with it)," but I got things working eventually.

Before progressing, I also sort of want to try doing a version of this sprite that starts in Illustrator as well, where I feel my art style is on less shaky ground (and taking as an inspiration the sprites seen in this thread), but there are a number of things I want to fix about this one too. Lots of pondering to do about my next step.

In any case, thanks again for the encouragement and criticism!

EDITED IN THE DEAD OF NIGHT TO ADD:

So I went ahead and tried working in Illustrator, and I like the results. With the caveat that I still have to redo the head and add some of the details, here's a comparison:



What do I lose from going the new route? Does the sprite lose its charm (this might have to remain to be seen until after I redo the head)? Will the animation be less smooth? Do I lose that nostalgic feeling?

What do I gain? Does it look better, or am I crazy?

[Eric]

As you can see above, made some more progress while the forums were down!

[Eric]

Some flickering around the shoulder where I need to tighten up the linework, I need to be more consistent with his tie/dress shirt area, and the pin on his chest jumps in one frame. I think I might need one more frame of movement just before the up step too, as it's a bit jerky.

Still, I don't want to toot my own horn, but I think this is damned good considering I hadn't done this two weeks ago. Don't worry, though, I'm sure working on the front/back walking sprite will kill any feeling of accomplishment I have at this point!

[Anian]

The hands are still a bit too twitchy for my taste, I think the followthough might be too exagurated.
Plus the hand that is closer to the viewer kind of rotates for no reason - it seems on the swing back, the palm rotates towards the camera and forward...which doesn't make sense. Look at how the hand that's further away from the camera looks, thumb inwards (towards the body) and palm backwards and slightly towards the body, the closer hand should do the same, but it kind of does the opposite.

[Eric]

Plus the hand that is closer to the viewer kind of rotates for no reason

You're right on this one. I got it right in the pixel version, inasmuch as you can tell what those hands are doing. I'll dig up some more hand reference and fix that when I do the handful of other corrections I need to do.

Thanks!

[Eric]

Fixed the hand and a handful of other things. Made new things to fix.

In tightening up the arms, I've lost some of the wild spaghetti arm floppiness that I was going for, which makes the one frame with the not-humanly-possible angle stand out. I still need to lower the hump on the shoulder in that same frame, and I need to get my shadows tighter by laying the frames overtop each other, instead of in a strip, to be more consistent as the sprite moves.

I think I might let this be for now and move on to some other aspect of making the game, before I get too bogged down. When I started this thread, all I wanted to do was prove to myself that it was possible, and as I noted before, I think I've done that.

Now I might move on to testing some GUIs or something before considering fixing this sprite / making the other views. Otherwise, I will wind up with one really nice looking sprite and...that might be all.

[Bernie]

I think he looks great. I take it you'll  give him 4 directions?

By the way, there will always be a point where you have to make a quality/time compromise. It helps keeping your spirits up.

[Eric]

I think he looks great. I take it you'll  give him 4 directions?

Thank you. Four is L/R/U/D? I plan to do at least those. I'm not sure I have my head around diagonal motions yet (nor, really, up and down, to be honest), but I might should start considering it if I'm going to do any backgrounds, I guess? How horrible does it look when L/R are used for diagonal walking?

By the way, there will always be a point where you have to make a quality/time compromise. It helps keeping your spirits up.

Thanks for this too. Right now, I'm able to balance the newness of animation with drawing some backgrounds, learning a little programming, making some music, and developing puzzles. I'm the proto-typical Gemini who serially abandons projects once I've figured them out completely, so dealing with so many different media and new concepts is good for me.

I think I may abandon the cel-shading on the sprite. I did a simple reverse in the game in the room I'd made and realized that the shadows won't always be, unless I'm really tight with it, consistent with the light sources in the backgrounds. I'm looking at the Journey of Iesir preview art, and their sprites are flat colored with little detriment to the character's appearance against the backgrounds. So perhaps I don't need the shadows to make the character look life-like.

Then again, neither my sprite nor my backgrounds are up to the standard that they've set, so...more questions to consider!

[Grim]

This is a great sprite. Hats off to you, sir;) The only problem you will encounter is that when you'll find that you need to animate this gigolo a hundred times over to make him interact with environment and other characters, you will likely get really really tired... It seems like a task for Disney's 20 finest animators, not one man alone. My advice- simplify. It might seem like a bad idea if you're just starting, but trust me- by the room 35 you will be cursing all that cell-shading goodness...

[Eric]

This is a great sprite. Hats off to you, sir;) The only problem you will encounter is that when you'll find that you need to animate this gigolo a hundred times over to make him interact with environment and other characters, you will likely get really really tired... It seems like a task for Disney's 20 finest animators, not one man alone. My advice- simplify. It might seem like a bad idea if you're just starting, but trust me- by the room 35 you will be cursing all that cell-shading goodness...

I've been contemplating the same thing, and trying to figure out ways that I can cut corners. I have my Illustrator file set up in layers based on the walk template that I made before, but I think for the next time, especially now that I have the colors and line weights worked out, I'm going to try to segment the body, so make a standard torso for front/rear views, and draw the limbs around it.

It is surprising, but drawing this version took me significantly less time than trying to do the pixel version. Part of it was that I had the base already made, but part of it too is that I have a lot of experience drawing lines, and not as much finessing tiny dots. I'm definitely dropping the shading too, which will cut down on some time, and I plan on doing a very primitive style of rotoscoping / trace-overs for some if not most of the animations. I've got a nice little face modeling program so I can have consistency of skull shape across my movements and phoneme animations, and that will help as well.

This is a one-man operation, and my priority list goes something like: raise a baby, finish a dissertation, find a job, buy the groceries, etc. etc., and way down on the list is make a game. But I'm having a lot of fun so far!

[Eric]

Here's a pause menu. Ignore that Kickstarter option. That's wishful thinking that (1) I'll be able to get a campaign together for a multimedia project I've been planning by next year, (2) that I'll be able to finish a small game to promote that campaign, and (3) that Kickstarter will even still be around.

[Shane 'ProgZmax' Stevens]

I think you should narrow down the selection of fonts.  All the different styles detracts from a cohesive result.  The overall design looks clean and easy to look at, though.

[Eric]

I think you should narrow down the selection of fonts.  All the different styles detracts from a cohesive result.  The overall design looks clean and easy to look at, though.

Thank you for the critique. May I ask a few clarifying questions?

1. The goal of the menu design, aside from usability of course, is verisimilitude. So with the stamp, and the "PAR AVION," I'm striving to copy the actual usage of those two items. Do these add to the muddle? Would it help if I blurred the letters on those items somewhat so that they were more easily identifiable as mere design elements, and not text that's relevant to using the menu?

2. The Music/Speech volume labels were intended to mimic handwriting as one might see on the outside of an envelope. Of course, it's hard to find a handwriting font that is both legible and doesn't look like it was created by a computer. This idea might not work anyway, as the presence of the sliders definitively distinguish the labels as something other than writing on an envelope. Should I carry over the font from the left hand menu for these labels?

3. Do you count the "Back to Game" button as part of the "different styles"? Would it be improved by adding the beveling / shadow that the other buttons have (otherwise, it's the same typeface)? My goal here was to make an easily identifiable "get me out of this menu" button, but perhaps the difference in color is enough?

4. How cohesive do you think I should be across my other standard/out-of-game GUIs (RestoreY/N, Save, etc.)? I'm currently trying to decide whether to keep the airmail envelope as a defining design element across the board, or whether I could use other ephemera (luggage labels, tickets, etc.) so long as I kept the same color scheme and typography.

Thanks again!

[Khris]

Very nice so far, I love the amount of design you're putting into this game.

Using different ephemera (had to look it up ) sounds great and could work very well, provided I don't spend as much time looking for a menu option as actually using it.

Regarding the fonts: I'd use the same style for the "back to game" button but separate it from the others with a thin horizontal line or something like that. Its current style looks out of place to me.
I think the "never more than two typefaces" rule can be sidestepped if you use a font much closer the handwriting, here's a ton of free ones: http://www.dafont.com/theme.php?cat=603&text=Music+Volume&fpp=50&psize=s

Btw, the letter's shadow ends a few pixels short of the envelopes bottom edge.

[Eric]

Very nice so far, I love the amount of design you're putting into this game.

Thank you for saying so!

separate it from the others with a thin horizontal line or something like that. Its current style looks out of place to me.

I'll give this a shot.

Btw, the letter's shadow ends a few pixels short of the envelopes bottom edge.

Seven pixels worth, I'll bet. I know exactly why this is the case! Thanks for pointing it out.

[Shane 'ProgZmax' Stevens]

Instead of trying to force some functionality on the envelope, my advice would be to add an options area to that list and simply have sheets of paper shuffle back and forth over the menu page, each one with the save/load/options and so on.  You could place some kind of stylistic back arrow or whatever at the top of the page to return to the menu and if you did it right you'd only need one extra page (just changing the contents based on which selection was made).  I think something like this will prevent any confusion with the envelope having a purpose other than show.

I think the 'back to game' font looks more natural for a typeface than the beveled font.

[Eric]

Instead of trying to force some functionality on the envelope, my advice would be to add an options area to that list and simply have sheets of paper shuffle back and forth over the menu page, each one with the save/load/options and so on.

Just to let you know, I think this is a great idea, and I'm now trying to learn enough about AGS and animation processes to make the shuffling work. Thanks again for your advice.

[Eric]

Oh lord, here's something horrifying: Googling "diagonal walk cycle" and having the crudely drawn sketch seen in the first post be one of the first five results on Google Images.

Here's a first go at the L-R walk cycle for another character, the chief steward. This is pretty much a sketch. I need to rotate the torso, add some bend to the copy-pasted arms, and tighten up the sketchy legs.



I did this one all by hand, no templates. I started with this even sketchier sketch of half of the walk cycle and drew over it in Illustrator once I verified that it looked OK.



Here's the two walk cycles thus far together:

[Tabata]

He is doing kind of kick steps (by kicking with his heels on the ground inbetween every step).
That looks a bit funny, but somehow it might be the "special thingy" of that char.

I can't help myself - I like it to be a bit weird. 

A good start for becoming an interesting special walkcycle with personality.

[Uhfgood]

As a suggestion you might put an oval down where the bottom of his feet are with lines that go from one end to the other for all the possible walk directions.  Then use this as a guide when placing the feet of your character.  You'll have an easier time of drawing the frames of animation concurrent to the direction he's facing.

[Eric]

He is doing kind of kick steps (by kicking with his heels on the ground inbetween every step).

That probably mostly comes from the fact that those shoes are temporary too, and that I haven't aligned the feet properly. Still, a heel click might not be out of character for this guy so maybe I'll leave it!

As a suggestion you might put an oval down where the bottom of his feet are with lines that go from one end to the other for all the possible walk directions.  Then use this as a guide when placing the feet of your character.  You'll have an easier time of drawing the frames of animation concurrent to the direction he's facing.

Any chance you could provide a graphic example? Do you use the same oval for all views? With the first sprite, I used two parallel lines, slightly offset, to determine where the shoes hit, but didn't formally determine the swing of the foot. That's a good idea though. If you have an image of how you manage it, please share.

I finally got back to this tonight, after spending too much time on competitions and teething baby over the past week or so. I decided to try to start on a front facing view, and in the past hour have knocked out this rough sketch for the Felix character.

EDIT: Took another hour and made an even rougher sketch for the character's back view. Need to improve his posture on that one so it doesn't look like he's gloomy slouching.

[Tabata]

Still, a heel click might not be out of character for this guy so maybe I'll leave it!

[Lad]

 I know this could be a bit late to say, but for me it looks a bit weird. The knees are too low.
 Other then that it is really great. Looks cool.

[Eric]

for me it looks a bit weird. The knees are too low.

Thanks for the crit, Lad. I'm afraid I'm too far along to change his knee-height now, and his legs are on-model for the way I'm drawing him in other (non-game) places.

I think part of what's throwing people off about this sprite is that his face is too realistic. He's much more of a cartoon character. The face that's there is sort of a placeholder until I can figure out how best to transfer my drawing style to the screen and have it mesh with other graphics in the game (I've had several failures at this already -- my drawing style is more reminiscent of the European "ligne claire" artists, somewhere between Herge and Floc'h [but not nearly as talented]). I'm not eager to hand-draw everything, but I'll want the faces to look right.

Unless you mean the same thing as Tabata, whose message I've just seen for the first time. Hmm...I see what you mean about the knees in the front view. I might have to change it some of the below 3/4 views as well? I can't tell right now, I've been staring at them too long tonight already!

I hope you all don't mind me continuing to dump process pics / maybe progress if we're being kind into this thread. Thank you all for reading and supplying suggestions. Here is, again, a very rough frame work for what I believe should get me all eight views for a player character sprite. Now I'm going to start looking at these in transparent layers, cleaning up the sketchiness of the lines and smoothing the 'tweens.

[Uhfgood]

Well I will give an example (although it looks like you're already doing great), but it's pretty poor, but it *should* give you the idea.

[Eric]

AH. That is actually quite useful, I think. I'll use that method with my next set of sprites. Thank you!

It also helped to realize I only needed to animate one leg, and that I could mirror and slightly adjust for the other. Made things much better.

Then I got stricken with strep throat, along with my baby son, and haven't made any more headway. I'll try to get this sprite worked out by the end of the week. I think it's the only one that I'll need all eight directions for. Everyone else pretty much appears in one room, and can be shown in three views. I'll make their heads and uniforms symmetrical too, so I'll only have to draw two views!

[Eric]

Thank you for your continued tolerance of this thread and my work. I had some time and the energy to take a stab at this walk cycle animation again, and so, of course, I started over -- not from scratch, but I completely redid everything but the hands and the shoes on the right-walking sprite. That head is still a placeholder.

As a result of the Spriter Kickstarter thread, I decided to take a stab at the combining isolated parts (e.g. forearm, upper arm, torso all separate vector pieces in Illustrator) and did all of these in one afternoon. So I think I'll be using this method from now on.

There are some wiggly places, especially around the shoulders and, uh...crotches. I also need to add some butt lines for the rear views, and add shadows for depth.



More lessons learned:

1. Never create elaborate footwear for your characters.
2. Make characters as symmetrical as possible.
3. Legs are weird!

[gameboy]

I understand that it's supposed to be a cartoony character and realistic proportions is not what you're after, but I think his body looks a bit too narrow on the front and back view.

[Eric]

I can see what you're talking about. Do you think it's the whole body that's too narrow? I think it might just be that his torso narrows down too much and the hips are too thin. If I widen the top of his pantaloons and the bottom of his sweater, would that look better? I'll give this a shot as soon as I get home.

Thanks, gameboy!

[Andail]

You're bold to create sprites with such high resolution for your very first project
I think you're on the right track, but there's plenty of work ahead... some pointers:
* The right walk cycle - I think he's facing the "camera" too much, making it look like a diagonal view. You would probably see his torso more from the side.
* The down view is too jumpy - instead of a smooth bobbing motion, he's kind of shaking.
* About the cabin background - this is very obviously a photograph painted over. This is fine, but is it a style you're pursuing? The character is rather cartoony, maybe the backgrounds need a more hand-made, cell-shaded look?
* Also, I'd really really suggest waiting with the diagonal views until later. Not only do they require a ridiculous amount of work, they're also not very necessary except for a stylistic touch. Better proceed with story, coding and backgrounds, to give you a sense of progress.

[Eric]

You're bold to create sprites with such high resolution for your very first project

You've obviously seen the first page of the thread where I tried doing a pixel sprite, and that was an incredibly frustrating process, because it's totally different from the way I'm used to drawing. The process I used to make those above was pretty quick and simple...it literally took a single afternoon to redo everything, and I think I'd be faster at doing a second sprite. My only issue was working out the anatomy of the different angles, and I've done some hand drawings since then that show how much I learned just by going through this process. Also, I'll be using a camera from now on to have better reference for angles, proportions, etc.

* The right walk cycle - I think he's facing the "camera" too much, making it look like a diagonal view. You would probably see his torso more from the side.

Agreed here. I was realizing this when drawing the 3/4's from the front view -- there wasn't a lot of difference in the torsos for those two. The legs, I think, are correct, which may be another one of the reasons that right-walking view bugged everyone.

* The down view is too jumpy - instead of a smooth bobbing motion, he's kind of shaking.

I think part of this is my carelessness in lining up the sprites for the .gif (which would be the same process to make the sprites for the game). I've drawn this character's sprite in a line (not even spaced out for a sprite strip), and then stacked them on top of each other after the fact. It's something I'm going to change for the next sprites I do -- I'm going to stack them from the get-go, and that way I can onion skin easier as well. This first sprite has been a massive learning experience, and I took a lot of wrong steps.

* About the cabin background - this is very obviously a photograph painted over. This is fine, but is it a style you're pursuing? The character is rather cartoony, maybe the backgrounds need a more hand-made, cell-shaded look?

I'm incredibly, incredibly flattered that you think so, but the only photographic element in the picture is a generic wood texture that I used to make the base for the dresser. Everything else references photos (except that sink which is actually based on a pain-in-the-ass dual-fauceted bathroom sink), but nothing actually painted over. There'd be less wrong things about it if I'd painted over...like the stupid looking faucets, or the way my "I can draw these once and copy+paste them" chain links don't line up correctly, or the crookedness of some of the art deco lines on the dresser front, or especially the stripes on the bedspread that I tried to cheat and angle using a polar coordinates filter (these sorts of things are the only things I'm able to see in that image now, so I hate it, and now you probably will too).

But again, you're correct that the character and the room don't match. I think I'm going to hand-draw the backgrounds with harder outlines. This was me trying to follow some of the tutorials here on how to paint backgrounds. Also, this left me with a 49-layer PSD file, which is an incredible pain to deal with, so I don't think I'll be using this method again. I also had a two-perspective grid layer to which I rigidly stuck, and I think I'll allow some more play in that to be cartoony next time. I hate drawing backgrounds when doing comics, and so I'm both lazy and have little talent or experience in that arena, and that has, unfortunately transferred to my game making.

I'm going to try again with a different style for this competition (unfortunately, the best room to do for this would be the ballroom I have planned, but I'm afraid it would skew too much toward the sample pic in the thread's opening post.  ). There is actually a background I've seen recently, a dining room with a fireplace...oh crap. Nevermind. I just went to find it, and it's yours!...anyway, I was going to say that the outlined style that people didn't like there might fit better with my style of art. So maybe I'll hand draw the line art and color / add texture in Photoshop.

What was your process in doing these backgrounds, if you don't mind my asking?

* Also, I'd really really suggest waiting with the diagonal views until later. Not only do they require a ridiculous amount of work, they're also not very necessary except for a stylistic touch. Better proceed with story, coding and backgrounds, to give you a sense of progress.

I believe this player character will be the only one in the game who requires diagonals, so it's not too tough to finish these. Also, I'm working on all of those other things, just not sharing them on the forums! There's a reason there's a long period between posts besides all of my other life obligations. I've been working on a design document. Then I threw the first one out, because it seemed too by-the-book for an adventure game. This will hopefully serve as Chapter Zero for a multimedia, but mostly illustrated prose project I've been working on for awhile, so I know where the character needs to start, and where he needs to end, but not exactly what happens in between.

I also have a practice game set up with a bunch of rooms. No one will ever see it, and the rooms are a mixture of doodles, photographs spliced together with broad layers of color, backgrounds I swiped from this blog for fun, and over-sized vacuums of whiteness to look at walk cycles against. When I get an idea for something and I don't know if it will be codeable, I try things out there, ctrl+x'ing around to wherever I need to go. I'd never share that part of the process with you guys. I've already shared my ugliness in the first post of this thread.

Thanks so much for the time and thought put into your critique, Andail. I've taken your advice to heart and will do my best to act on it accordingly.

Edited to add: Best case, and unlikely scenario, I would love for my backgrounds to look like those overseen by Walt Peregoy in 101 Dalmatians. I think this is line art in a layer over paint.

[Andail]

That's a wonderful blog you've found there, really nice to be able to browse those old handpainted backgrounds like that.

I apologise for being a bit presumptuous about your background's origin; I based it on its composition and perspective, which looks very photogaphic to me, in addition to the wood texture.

As for my own backgrounds, the method I've worked out has speed as a key component. My art is usually less constrained in terms of resolution and style, but I also know that if I'm to finish my current project, I will need to be able to produce backgrounds rather quickly. Funny you should mention the outlines, because I've actually removed them, or at least toned them down considerably, in my final version.
The process usually looks like this:
1. I create a basic 3D shell in Sketchup. It's very crude, and just meant to establish a good perspective. The wonderful thing about 3D modelling is how you can change and adjust the viewpoint, so I can experiment around with the perspective.
2. I import a picture of the model in PS. I resize it and start cleaning up edges and details. I use textures very sparsely, since I don't want to lose the handpainted look. If I use a texture, I just find a good big picture somewhere and copy-paste it to the surface in question using Skew or similar re-shaping tool. 
3. I apply shadows and highlights with a custom brush to give it a more realistic look (as opposed to cell-shading).
4. I adjust hues and values, and often employ the Variations-function, to make colours more homogenous. One common error -or feature, depending on the style you're pursuing- in beginners' art is the wide and diverse range of colours. This is usually only found in comics, and not the real world, where there is a dominant light setting that will limit the colour range.

[Eric]

I apologise for being a bit presumptuous about your background's origin; I based it on its composition and perspective, which looks very photogaphic to me, in addition to the wood texture.

Oh no, it's fine. Like I said, I was flattered. It's those things that make me not like that room though, so I'm tossing it. If anyone needs a photorealistic dresser, feel free to ask for this one (the bottom stops at the edge of the bed, though).

Thanks too for the breakdown of how you do your rooms. I really liked your most recent one as well. I might need to learn to use Sketchup.

Here's something different. I gave myself a 40-minute time limit to see if I could come up with a little animation from scratch. This guy is part of a band that will be playing in the background.

I wouldn't bother with a critique were I you-- I barely gave myself time to save the .gif and I know there's a lot, lot, lot to be fixed here. However, as usual, sharing here makes me want to keep working and keeps my typical Gemini attention span focused.

[Eric]

Tried for something a little different with this background for the recent competition. I'm still using Illustrator, but using brushes created from scanned lines to attempt a hand-drawn feel. Does this work at all?

[Ali]

That's a wonderful blog you've found there, really nice to be able to browse those old handpainted backgrounds like that.

Hey, I've been posting links to that blog for years. I demand recognition!

I really like the departure lounge, it almost has the feel of Broken Sword. However, I do feel there is a slight clash of styles on closer examination. The glass effect on the window doesn't quite gel for me and the outline-free central column is more classic Warner Bros than the rest of the room.

Perhaps try using different coloured outlines - perhaps a light colour for the glass in the foreground?

[Eric]

I really like the departure lounge, it almost has the feel of Broken Sword. However, I do feel there is a slight clash of styles on closer examination. The glass effect on the window doesn't quite gel for me and the outline-free central column is more classic Warner Bros than the rest of the room.

Perhaps try using different coloured outlines - perhaps a light colour for the glass in the foreground?

I'm very pleased to hear from you, as the Nelly Cootalot game has beautiful, stylistic graphics, and has been one of my favorite aesthetic experiences in playing AGS games.

I need to start reviewing my posts to point out where I've cut corners or know that I've been lazy beforehand -- the glass effect I assume you're talking about is the view of the buildings in the background? That was, unfortunately, a corner cut so I could meet the deadline of the competition, hastily lasso selected shapes fill bucketed grey. In a better version of this background, I'd hope to draw better buildings, and also make better (animated?) clouds. Would that improve the effect?

I like the idea of things that aren't outlined, but I agree with you that it doesn't mix well with the rest of the image -- the rug is also bothersome for the same reason. A color hold effect on the linework would get me the benefits without being stylistically jarring.

I really like the departure lounge, it almost has the feel of Broken Sword.

This was, by the way, very kind of you to say. So kind that I will ignore the overwhelming sense of modesty that makes me want to reject the comparison (if I could ever achieve backgrounds 1/10th as nice as those in Broken Sword, I'd pack it in and call it a day). The style of this one was inspired by watching The Illusionist on three successive days (if I could achieve backgrounds 1/100th as nice as Sylvain Chomet's, I'd etc. etc.).

Thank you!

[Yoke 2.0]

I like the idea of things that aren't outlined, but I agree with you that it doesn't mix well with the rest of the image -- the rug is also bothersome for the same reason. A color hold effect on the linework would get me the benefits without being stylistically jarring.

The look of the rug doesn't bother me as much as the fact that the corner of the rug seems to be exactly at the edge of the pillar. The two halves don't seem to line up properly, at least not to me, until I traced the lines with my cursor. There's some weird illusion going on that makes me perceive the right half as going further down than the left half.
The lacking outlines on the pillar does not seem that jarring to me as I feel it ads "blurriness" to an object that is not in focus. But then again you would have to remove the outlines for the table and glass as well for that to hold true.

Oh, and art deco elevators always make me think of Grim Fandango for some reason.

[Eric]

The two halves don't seem to line up properly, at least not to me, until I traced the lines with my cursor. There's some weird illusion going on that makes me perceive the right half as going further down than the left half.

!!! Super horrible tangent there. Wow. I wouldn't have noticed if you hadn't pointed it out, but that's horrible.

I'll mess around with the outlines some over the next week and see if I can't figure out a best practice. Thanks for the input, Yoke!

[Frito Master]

Nice job I like the look of your character.

[InCreator]

Sorry to come on hard, but I totally hate hand movement on main (?) character. It's overacted.
He feels like he's not using arms to compensate on body movement nor balance himself, but trying to act carefree.
Way more than needed. So he seems either mentally retarded or trying to look gay.

Uhfgood posted good pencil sketch animation of - I'd say - the extreme limit of normal/natural-feeling hand movement. Anything beyond this is insane and borderline and you pretty much crossed it with yours.

Even if acting most enthusiastic walk, hand shouldn't raise above crotch. And if so, you've just created a new meme.

[Eric]

Yeah, I'm just going to ignore that. Feel free to not post in this thread any more.

[Frito Master]

The walking animation looks pretty good, But something about them hands is off.

I"m still trying to get mine to look right too, Along with everything else.

[Eric]

Thanks for your comment, FritoMaster (Like the corn chips? If so, I might be able to challenge your masterdom. I too am a connoisseur.).

I've figured out what's off about the walk model for Felix, who is intended to have a cartoonish strut. The arm movements match (actually, they're not nearly as extreme) as the sorts of cycles I was drawing influence from, but the rest of the body does not move in the appropriately cartoonish way.

This is because I was influenced by a common walk cycle called the double bounce, of which, as you might guess, the double bounce is the essential part. Coincidentally, that's the part I've left out.

It's also the reason why I haven't checked in with a new walk cycle in awhile -- I'm redoing these again, and I think I'm moving to hand-drawing everything now that my lightbox and scanner are working. Unless I win the lottery and get a Cintiq sometime soon, hand drawn animation will be much quicker for me. This time I'm going to add the double bounce, and slightly more cartoonish anatomy (the way I'm drawing the character when he's not moving in other media).

Here's an example of a double bounce cycle:



...Perhaps that looks "gay" or "mentally retarded" to some of the more crass users here, but I honestly couldn't give less of a f#*k.

[Tabata]

... whatever you may call it, how it looks ...

He's got the groove  - definitely!

 - sooo cool  - 

I can't look at it without a smile! - Just great! 

[Frito Master]

Thanks for your comment, FritoMaster (Like the corn chips? If so, I might be able to challenge your masterdom. I too am a connoisseur.).

I've figured out what's off about the walk model for Felix, who is intended to have a cartoonish strut. The arm movements match (actually, they're not nearly as extreme) as the sorts of cycles I was drawing influence from, but the rest of the body does not move in the appropriately cartoonish way.

This is because I was influenced by a common walk cycle called the double bounce, of which, as you might guess, the double bounce is the essential part. Coincidentally, that's the part I've left out.

It's also the reason why I haven't checked in with a new walk cycle in awhile -- I'm redoing these again, and I think I'm moving to hand-drawing everything now that my lightbox and scanner are working. Unless I win the lottery and get a Cintiq sometime soon, hand drawn animation will be much quicker for me. This time I'm going to add the double bounce, and slightly more cartoonish anatomy (the way I'm drawing the character when he's not moving in other media).

Here's an example of a double bounce cycle:

...Perhaps that looks "gay" or "mentally retarded" to some of the more crass users here, but I honestly couldn't give less of a f#*k.

Honey BBQ or chili-cheese or original?
Anywho back on topic

I think it fits the character and I rather like the pixel version of him but I'm biased since I love that style and not a huge cartoon fan anymore.

I'd say keep doing what your doing and I'm sure once your done the animations will look even better.

[InCreator]

...Perhaps that looks "gay" or "mentally retarded" to some of the more crass users here, but I honestly couldn't give less of a f#*k.

You misunderstood. Emphasis on word (over)acting. You don't see such effort imitating happy-walk even in Tom & Jerry cartoon.
But whatever - it's critics' lounge.

[Misj']

I agree with InCreator on the overacting (not the 'retard' of 'gay' bit though; I don't think the animation evokes that peronality). Now...I am a fan of the more loony and surreal cartoons, and I can certainly appreciate such wacky animations, but...

First of all, I don't think it matches your general art-style. You have a semi-realistic art-direction. Sure, it's cartoony, but it's not that over the top. And as a result, over the top animation would clash with it. I'm not suggesting that you'd make the animation realistic. I'd rather you don't. But remember that your main character is on-screen all the time, and the player will be looking at him walk most of that time. Subtlety will go a long way.

I've taken the liberty of stealing a small section from the intro of Animaniacs. This show thrived on over-acting and wacky animation. In the introduction there's a small walkcycle for most of the cast. While the arm-swing is quite exaggerated, leg-movement and bounce - while over-the-top - are still within constraints.


But...if you feel this animation matches your vision, the art, the personalities. That's the most important thing. Especially - in a cartoon - the personalities should come across. So if you feel this is the way to go, then this is the way to go.

One thing that does bother me a lot, though, was the lack of bones (and consistent volume). So I did a quick, crude, redraw of the character, keeping the same poses (I actually exaggerated them a bit more for the arm-movement) to show you the difference between bones and rubber for this character. I also added a frame that I missed (but that could be due to my extraction of the gif-frames). I've also added some bounce in his hair and shirt.


In short, I would try to make it a bit less bouncy, add some more subtlety, act out his walk before you draw it try to convey the feelings and emotions you had during that walk (rather than the actual movement), convey his personality, and most of all: remember that this is the animation the player will see most.

Misj'

ps. I do like the hand-drawn frame-by-frame animation you've got here.

[Shane 'ProgZmax' Stevens]

The style is looking more and more like a Mickey Mouse cartoon, now .  I have to agree with InC and Misj, though, I don't really see this fitting your art style as you've shown it.  Perhaps if you redraw your character with more exaggerated, cartoonish features you could get away with this sort of strut but as it stands I think it may just jarr with your more realistic character designs (which I thought were pretty nice).  I would be curious to see you try and translate your protagonist into a more whacky art style and then animate him like this, though.  Exaggerated, silly animations tend to be more suitable for absurd comedy so if your game falls along those lines it may be worth a try.

Edit:

Temporarily locking the thread at the post author's request.

Edit:

Unlocked at author's request.

[Eric]

So if you're new to this thread where I quarantine myself, ignore most of what's gone on over the last three pages. That was a learning process, and that game is on the backburner for now, maybe forever.

In the meantime, I've been playing lots of great AGS games that, as a newcomer, I've missed over the years, and it's made me feel like sharing something of my own with you. I call this work-in-progress background "The friscalating dusklight." It's part of a detective game I'm making set in the town where I live. For as many of the locations as I can, I'm going to reference real places, and this is an alternate reality version of such a place. As you may have surmised from the background, the sprites will be much more realistic this time as well.

[Armageddon]

Are you still trying to go with the Disney style backgrounds? The tree kind of seems like it?

[Eric]

I guess sort of, in the sense that I don't do pixel art, 3D, or photorealism, and animation-style backgrounds feel like kind of the catch-all in-between. The tree itself was an experiment inspired by an art museum exhibit on American impressionists. I have no idea how to draw a tree in color (I usually draw them the chiaroscuro Milt Caniff way), and I don't want to draw individual leaves, so I used a big abstract brush with varied scatter and size settings. Does it work at all?

[selmiak]

looking warm nice and clear. But a bit too clear for my tastes, the pavement could need some cracks and little plants growing in the crack and inbetween and some cigarette butts and other trash. posters/skribbles on the walls. And the door and the shop could need a light above them and a doorbell.

[Eric]

Cigarette butts are definitely coming (especially in that gap in the sidewalk around the tree base), and I've got to dirty and grunge up the place up significantly.  I'm also trying to figure out how to get some dead leaves and garbage blowing randomly down the sidewalk. There are lights I need to add as well. A bell's a good idea too! I tried to add some sidewalk cracks, but haven't gotten very far. Everything I've tried so far has looked very drawn-on, much more so than the rest of the image, and any blurring or smudging kills the effect of the crack. It might be a matter of using the right brush, or maybe just using my tablet better (I find non-45-degree diagonal lines really hard to draw digitally -- my hand just isn't smooth enough for it).

Here's the real life place I'm referencing in the pic. I never could get a good front-on photo because U-Haul trucks are always parked in front.

[selmiak]

[Eric]

Does that 'R' stand for revolutionize my f---ing life? How the hell have I gone this long without knowing about this?

[Anian]

You seem to be going in a Disneylike background style but with more texture variance, really digging it so far.

Does that 'R' stand for revolutionize my f---ing life? How the hell have I gone this long without knowing about this?

I'm actually wandering how you haven't come across the need to find such a thing, since you seem to be really good at drawing in PS. Btw Shift+R will give you the 45 angle while rotating.

[Eric]

Thank you! More texture, as I noted, is coming.

I believe the answer to why this skill has evaded me so far lies in two factors: the first is that I'm entirely self-taught in Photoshop, and usually only learn things when I need to do something specific. I really should take a class so I can learn how to use clipping masks and lots of other tools that I only barely have a grasp of now. I have done ridiculous, time-consuming things involving the actual rotate tool and layers to do this.

The second is that my old computer wasn't really strong enough to run the CS that I bought for it, and so I could never enable OpenGL (which the temporary rotate requires) without slowing down Photoshop considerably. I hadn't thought to turn it on again.

[Ilyich]

That's news to me too! Is it a new feature? I only have CS3 and it doesn't seem to work here.

As for the background - I really like it! The colour scheme is wonderful and the style sits nicely between realistic and painterly.
I feel that the it could do some good to bring out the shapes a bit more, though, since it still looks a bit flat, like a theatrical set. I'm not quite sure how to do that, though. I'll probably try to do a little paintover a bit later and see.

[Eric]

I feel that the it could do some good to bring out the shapes a bit more, though, since it still looks a bit flat, like a theatrical set.

Thank you for the compliment and advice. You know the regard in which I hold your work, since I've written about it at length elsewhere, so I'm pleased to hear from you here!

I've been taking a closer look at the image today, and agree that it's flat...and a bit shiny in places where it shouldn't be. I'd like to add some weathering texture to the facade and the visible brickwork, add some variation to the sidewalk (figure out how to shift the plates to slightly different heights even, maybe?). If you'd like to do a paintover, I won't stand in your way! Some guidance by a master would be appreciated.

This image is a cropped version of a basic template I'm using for different views of the office. I've drawn a few stories up, thinking I might use them in subsequent games (haha, you and my inner voice say. Let's see if I can even finish one), but haven't really rendered them yet because I don't see them being used in this first installment. I've been cropping this down, collapsing my layers, and then going over with additional layers and filters to provide different atmospheric and color effects, and selectively blurring and smudging according to the changing light source/intensity. I'm not sure if you'd rather work over the cropped dusky image on the previous page, or the template (or neither!), so I'll share the base model here too.

[Ilyich]

So, I've tried to do a paintover, and there's not much that can be done here without adding new objects. It's hard to make a straight-on view of some buildings not flat-looking, I guess. And it has it's own charm the way it is as well. The only thing I can say (and it's a very boring and obvious thing ) - drawing all the faces of objects is important. So, if you have a slightly extruding column (like the ones on the yellow-bricked part of the building) and you're not standing right in front of it - you'll see two of it's sides and rendering both of them is essential.

Oh, and here's a paintover itself. Best viewed in comparison, since I doubt the difference is very noticeable otherwise.

[selmiak]

Does that 'R' stand for revolutionize my f---ing life? How the hell have I gone this long without knowing about this?

I found out about this only recently myself and thought the exact same thing! And before posting it I was unsure to post it at all, as I thought that you know this already as your picture shows you know what you are doing in PS. Well, I'm glad I have no fear of redundant information that turns out to be good

[Eric]

Ha! Never assume I know what I'm doing, because I'm winging it all the time always.

Ilyich: If I hadn't already used the jaw-drop gif, I'd use it again. That is wonderful, and shows me exactly where I need to improve. I'll send you a PM momentarily.

[Shane 'ProgZmax' Stevens]

Have you tried playing with the color temperature at all?  It's obviously fall but I don't quite get that 'colder' type of atmosphere from the image.  I'm a real stickler for color contrast, though, so it's more a matter of taste.  The background itself is very competent and I hope you finish it.

[Eric]

What's awkwardly funny is I've actually significantly warmed this one up via Photo filters and even, if I remember correctly, a 15% flat rust-colored overlay, because I was shooting for this background to appear during sundown. I had just watched Days of Heaven, which was shot almost completely during the "golden hour," (the whole movie looks like this and am perhaps too easily influenced and probably went too far.

When I finish this dissertation and eventually get a teaching job, I hope to make use of the one-free-per-semester audit class to learn more about the specifics of art that I've not formally learned, especially color theory. Cool = autumn is good to know. I'm trying to find better resources, but Google is only giving me results about the season-colors-as-fashion theory. I'll keep looking, and find some autumn-y photos to analyze too. Thanks, Shane!

[Eric]

Still working on that background and some others. Taking lots of photographs as the seasons change here. Going to the city for New York Comic Con next weekend, and the weekend after, we're going on a drive through Vermont with some art gear in tow, so will hopefully get some better experience working with autumn colors.

Otherwise, I'm going to take a break to try to enter the MAGS competition for October. This will be my first MAGS entry, and, should I pull it off, my first completed game in AGS. It's only going to be a few rooms and two characters, so I have high hopes.

Here's a WIP of one of the characters I spent a few hours on tonight:



Things I see wrong:

* Arms swing too much.
* Forearm needs to have movement -- too stiff now, and makes him look like a robot.
* Need to give the hair some bounce.
* I think he might pick up his foot a little too far when it's in back, or maybe it's not high enough on the frame after?
* Head bounce a little too much on the downstep?
* Hands look like panther paws because I'm horrible at drawing hands and probably always will be.
* Need to outline the boots so they'll stand out better.

Now what do you see?

Thanks all for your continued assistance. Every new thing I do, I feel like I'm improving, and a major portion of that is your collective fault.

[cat]

Looking great!
Two things I notice:
* The upper arms seem to be a bit too short (but this might only look this was because of the shirt sleeves)
* The general movement is smooth, but the bouncing is hard and abrupt (not sure how to say that)

Edit: I love the boots!

[Tabata]

Looks good! 
Just the bouncing is very abruptly and the shoulders are completely stiff - I would like to see some movement at that part.

Edit: I love the boots!

... so do I   

[Eric]

* The upper arms seem to be a bit too short (but this might only look this was because of the shirt sleeves)
* The general movement is smooth, but the bouncing is hard and abrupt (not sure how to say that)

Edit: I love the boots!

Just the bouncing is very abruptly and the shoulders are completely stiff - I would like to see some movement at that part.

Thanks guys for your respective critiques!

It is partially because of the rolled up sleeves that the upper arms seem short. And it's also partially because I was tricked by the rolled up sleeves into making his upper arms too short. Good eye, cat! Elbows should be much lower.

I'll try and smoothen the bounce. Maybe reduce the pixels traveled by the torso and head. Do you think the shoulder movement should be where the sleeve starts, Tabata, or along the curve of his back? I'll make my wife walk around for me and try to see.

Best thing about the cowboy boots -- they curl up on the end, and so when the foot goes back and rolls off the floor, they're already the right shape, and you don't have to animate a joint in the foot! I'm trying to figure out whether I can animate a seam in his jeans without it being jerky. I was also thinking of how to do forearm tattoos, and, with the arms needing to be redone anyway, I think I've figured out the best way to do it.

This fellow will also eventually be the third detective/the receptionist in a detective agency for the longer game I'm working on (and for which the front door of the detective agency can be seen above), but I think his sprite will mostly sit behind a desk in that one. This shorter game will be about one of his toughest cases yet -- as a babysitter.

I tried a trial version of Anime Studio to try to do this, but I'm afraid I didn't quite get it to work. But I did figure out how to set a rotate point in Illustrator, which resulted in the animation being much, much smoother (and quicker!). Start-to-finish, this version took about two hours, which included 3D modeling the face so I can do the other perspectives. If anyone else does vector animation in Illustrator,  alt-click while using the rotate tool does the job. I set up pink points on the places where the joint should be rotated so I can do it precisely, and then just deleted them later. I grouped my limbs in degrees, rotating, for instance, the whole leg first, and then the calf second.

[Tabata]

Do you think the shoulder movement should be where the sleeve starts, Tabata, or along the curve of his back?

Me and explaining - but I'll try :
When the right leg is forward, move the right arm (now being in the middle) slightly backwards completely (- that makes the shoulder become the move) and when the right leg is back, put the complete right arm a bit more forward than the middle (where it is now).
That makes it look as if the upper body is slightly moved/turned while walking.

Edit:
I found something like this explained and made by one of our best over here - it might be easier to understand if you watch the shoulder there

[Eric]

Thanks, you helpful mouse! (And thanks again, Shane, by proxy!)