Applied Art: Made a Videogame

[Covenant]

I'm an animator, even though I'm currently stuck doing Video Editing work, but recently a game I did the art for just shipped, and I thought it'd be cool to show. I'm not a historian or a scientist so this is kinda what I've got.

I realized as I was asking Melchior about his lighting setup that I might actually have some experience to share with the board if people are interested in pixel art, photoshopppery, and animation. I'm not much of an illustrator, but I did learn some usable techniques that I'd be happy to pass on.

There's a ton of in-game art, but it's all super huge, so I figured the best way to link was via the little thingie we made to show off the various critters. As Monster Manual is apparently copyrighted by some random company we called it the Critter Compendium. There's screenshots and stuff as well, but I've got a photobucket account so I can post things like the raw character sheets or bits of in-game art showing the in-progress work. Actually, here's one of the progress pieces I'm pretty stoked about, I'd never done an inked illustration (digital or otherwise) so this way above what I thought I could do:



Before this version I had done a sketch... god it was awful. The inked one is on the site, just for reference. My main focus was always 3D animation, but I had to learn a shitload of different techniques to do this. I made the art for the website, for the GUI, for the characters, and I learned a lot illustration techniques for the box art as well. I've got a ton of Work In Progress stuff (including the original pencil sketch) I could post on that if people wanted to see how it's done. I did it all in Photoshop: web stuff, game stuff, and illustration, so these aren't skills that should be hard for anyone to learn.

[salm]

Hey, congrats on the release. Looks great.

I´d be interested in how you animated the pixel art thingies, esspecially the character.
Also, what engine did you use?

[Covenant]

I´d be interested in how you animated the pixel art thingies, esspecially the character.

I did each one in layers manually and then saved 'em as "redDragon_attack_01" or such, threw 'em in Dropbox, and then the coders took them and arranged them onto spritesheets like this:



This is slightly reduced in size and cropped so as not to be too large, some of these spritesheets are really massive. The actual one is wider and has a few more rows for the attack, wounded, and dying animation poses. This is the idle animation for the red dragon, so when he's not doing anything it'll call the upper left sprite first, and run until it hits the last one, then call the next row and so on and so forth, repeating. If you get in combat it stops, obviously. For a long time I was unhappy with the animation since it just looked OFF. It seems that the game hadn't been properly coded to actually call the second row! I learned a bit of C# fixing up this guy's idle animation.

So every animation was called through a loop. One of the issues was that per-critter loops were so code-intensive that the timer was a bit sloppy, and some of the animation suffered from it. It's an annoyance for me but I doubt most people will catch it. IE, it is difficult to have per-frame delays on animations, so things generally play one after another after another to avoid people getting their cycles broken and hanging the game indefinately. Which means that if you have 3 seconds to perform an action, each frame may (often) take an equal amount of time to produce. So some guys feel like they have a faster pacing than others.



It also means that they had to all be roughly the same bounding box. So the Dwarf Scouts can't topple backwards if the Fighters step forwards, or at least, they can't do it too far. We massaged it a bit but it still gives me fits. It's also why I had to clip the dragon's wings!



These aren't cleaned up, but they were partially colored. The dragons were originally going to be in "boss" rooms but again, the code to make those run was so problematic we had to drop it. While I had to wear a lot of art hats, my coder had to pick up an entirely new language (XNA, C#) and was picking it up as we went. Yeesh.

The actual animation design was all by eyeball. I'd plan it out in my head, make the final pose (starting was always frame 1 of idle) and then make the middle one, and fill out from there in a process called Keyframing. The absolute hardest thing was getting the Dwarfs feet to move right. Short legs without much room to 'view' them can be really rough. I have an entire massive Feet.psd that's nothing but foot timings for the Dwarfs.

Also, what engine did you use?

The engine was XNA with a crapload of extra code, I forget but we had like 85,000 lines of code by the end of the project or something, a lot for one guy. XNA was picked solely because we wanted to publish it to the XBox, and we had originally started in a 3D framework (so we could do some things we decided not to) which meant no end of trouble getting the sprites to display properly. But the 3D camera did make some things interesting, and it made the layered backgrounds easier to do. The backdrops are generated dynamically--stairs, backgrounds, foregrounds, lanterns, and wooden supports are all on separate layers, and combining them helps make things feel less repetitive.

[salm]

Very interesting. I´m allways impressed by doing animations by hand. I never got a hang of that.

How does designing the level with XNA work? Does XNA come with an integrated editor or do you have to use extarnal level editors?

[adam_grif]

I threw together a hierarchical sprite for my games project this year. Describing movement mathematically is a pain, but it does end up looking pretty sweet with all the individual components moving.

I wish I could produce art like that though. It takes me hours and hours to do simple shit.

[Losonti Tokash]

Wait, so is this on the 360 yet? If so, I'll buy it once I get a chance. Looks pretty good.

[Covenant]

I wish I could produce art like that though. It takes me hours and hours to do simple shit.

I went to school for it, but even so, picking up a new style is really hard, which is part of why I'm offering to share knowledge now. Pixel art is really finicky. I started off by looking at other people's stuff, trying to understand why they chose the colors they did, how they faked lines where there weren't any, and trying to recreate it. Eventually I got a hang of how the things worked. The first characters I did were the Dwarfs--I always try to do the hardest possible thing first, because you learn so much from it. I mean, this is what the stone hex sheet looked like originally, when we were still considering it in board-game terms and playtesting with paper cutouts:



So you can tell there was a bit of a learning process. You can also tell we originally had a 'dead end' hex, but nixed it in the final version. We wanted to encourage vicious tunnel design, not safety. :p

Wait, so is this on the 360 yet? If so, I'll buy it once I get a chance. Looks pretty good.

Should be soon. XBox has an approval process we need to sit through, which requires people to vote on it, blah blah blah. We'll get in, but there's a little muckin' about that's required.

How does designing the level with XNA work? Does XNA come with an integrated editor or do you have to use extarnal level editors?

Oh, I see what you mean by engine. My art brain didn't distinguish between the various code jobbies that handle the parts of the game that confuse me. Actually the "engine" that drives the game was hand-made, so designing the levels was actually a hideously labor intensive process, as they needed to be typed into what is essentially a verbose hex editor, and then manually spaced and edited. Here's a sample map that I handed to our coder to turn into a real map:



Thankfully each individual hex could be generated by the game once the level builder told it what shape we needed, and at what depth to draw it (dirt, stone, or deep). That was, afterall, the entire purpose of the game--which started off as board-game style experience inspired by Carcassonne. People have called it a remake of the Diggers game or the Digger genre but I'd never heard of those before recently--I can only presume they're similar to lemmings. Anyway, because of that we can specify what we need in a hex via the level editor, and then let it build one itself, like this:



This is actually six different layers, created dynamically. You have the Background (currently a density 4 Gemstone mineral layer), the Stairs (left side, top half only) Incidental (Gnomish banker), Supports (normally picked randomly, Bankers have a unique wooden support setup) the Lamp, and the Foreground (The Y shaped tunnel shape). There'd be more but we don't have any Dwarfs/critters, Light Cones, or Particle Effects on there.

Each of these sits on their own spritesheet somewhere, and are assembled randomly (or nearly randomly, we weight to avoid repetition) as you drop a hex. The level compiler handles that on-the-fly since that's how the game goes, but to make it manually... well, it's storing a lot of values. We did it manually before, and then streamlined the process when we built the Levelbuilder which you get with the PC version of it. That was all custom code. XNA was anything but helpful with that. Only half of our levels were build with the benefit of the new Levelbuilder, but I can tell you it makes it ten times as fast and easy. I'm curious to see what customers will come up with.

[adam_grif]

I went to school for it, but even so, picking up a new style is really hard, which is part of why I'm offering to share knowledge now. Pixel art is really finicky. I started off by looking at other people's stuff, trying to understand why they chose the colors they did, how they faked lines where there weren't any, and trying to recreate it. Eventually I got a hang of how the things worked.

I think my problem is that I don't look at other people's pixel art for referencing, I just trial & error until it looks like I want it to

This took ~40 minutes to do:



Running off this drawing as a reference:



I am NOT looking forward to trying to draw a body, then doing alternate frames of animation

Any advice on speeding the process up? Good places to learn from etc?

[Covenant]

Any advice on speeding the process up? Good places to learn from etc?

Practice is really the best way to learn, but depending on your level of experience, I'd say go to this place first and see what, if anything, you haven't heard of already:

http://www.petesqbsite.com/sections/tut ... efault.htm

This is very, very rudimentary stuff, so you may want to skip ahead to the sections on making a fighting game sprite. Personally I think he's still making it too hard on himself though, especially with drawing characters. The impulse to draw the outline first is incorrect, an outline is used to refine a shape you've already created in blobs or such. Once you're really cookin' you might be able to jump right to the outline, but most artists get in the habit of building up from simple shapes rather than building down from static black outlines.

Define a body part or a character by the important pieces you need to see, and then fill in the outliney areas once you have a rough blob character. Think of it as sculpting with pixels--you're using finer and finer tools to hew away at a block. I drew the Dwarfs as skeletons first to make sure I had the proportions and shapes correct, and then filled them in by drawing outlines and refining. You should also try to ditch black inking lines for the final draft. As you can see on my sprites, I very rarely put black inking lines on the outside:



Removing black outlines and relying on contrasts is a little harder at first, but it makes things look so much nicer. When you're working at the pixel level, a black line is a lot of real estate, and it adds messy colors. All colors are additive in the brain--if you put two colors adjacent they'll mix. Why do you think so few people actually do outlines? Not a criticism of you, just letting you know. You may really be excited to see how volumetric it feels once you add shades.

Speaking of which, choose a palette of 3-5 colors and stick with it, per section. Best way to figure this out is to look at what other people chose, and compare it versus your intended texture. The king's arms actually look like they have some form of definition because of the way the highlights work, but it's an extremely simple 5-color palette I drew those from. Dark edge, bright highlight, and three 'flesh' tones. Any more would risk making it less easy to comprehend. This may seem like a minor, 'at the end' point, but it's not. Color is HUGELY important for getting it to feel right. You can fake so much detail and even fake shapes by using color properly. Once you get good with colors you can skip the outlining entirely.



Imagine it as a piece of clay that you're sawing chunks off of. You start with a rough blob the shape of the head or the arm you want, and then you add highlights erase pieces, check it, add some more back on, and finesse by adding or removing pieces until it feels right. Once you get over the initial learning curve you'll be much, much faster. It took me hundreds of hours to go from conceptualization to final art on those critters, but then when I came back to add in the Gnomish Gnights as an extra enemy (since we wanted to do something extra for the final release) I was able to work them up within a day or two because of how practiced I'd become. The Royal Jelly and Goblin King were also done later on in the project, and were much better for it.

[Covenant]

Hey, just to expand about what I was talking about, I actually dug through all this stuff and found my original work document from when I was making the Dwarfs. This reminds me why working in outlines is such a bad idea! There are tons and tons of little chunks of this guy that aren't done, but this gives you a bit of an idea how I blocked out the area as I was first learning the pixel art techniques:



The green shaded area is a set of circles with some green pegs to hep me plot out how big a head and body should be. The crossbar is just an example of keeping him lined up properly. For someone trying to do some pixel stuff, you can take this as an instructional stage--setting up your workspace to give you help. I call it a style sheet, since it provides a lot of the same functions. You can see from the hands that there was still a lot of roughness to his shape at this point, and I kept modifying it as I went on:



Until you got to something more like this, which I did in grayscale first so that I could more easily control (and learn) the painting techniques to make good, consistent colors and highlights on their gear. By that point I had replaced the black borders and left dark highlights (rim shadows) at the edges to help make him 'pop' and feel three dimensional, and remember that the whole thing is, of course, on layers. Even his nose and his beard are on a different 'layer' so that if I need to, for whatever reason, I can go back later and fix it.

Moving from doing it that way to just doing it freehand is the best way to speed things up--and once you understand how to block it out with blobs first, you'll be MUCH faster. But doing it the hard way first, like this, can certainly give you the tools to make that job. It's called an exploration phase.

[Covenant]

One thing I do have to remark upon being frustrating is the amount of people who confuse a labor-intensive pixel art sprite with bad 'pixelated' graphics. While a lot of the reviews the game has gotten have been glowing, there's a few who clearly don't understand anything at all, read the controls, or go through the tutorial--and these same people call the graphics pixelated, as if they were done in a high-rez painted format and then just badly rendered.

It's quite confusing.

[Dooey Jo]

Well that's just one of the reasons why reviews are worthless. What one reviewer will call "innovative game, nice pixel-art graphics", another will call "gimmicky game, low-res pixelated non-HD herp derp". Even though it is flattering to receive favourable reviews, and negative reviews can be disheartening, one have to remember that it doesn't really mean that much. It's literally just one guy trying give his personal opinion a veneer of objectivity.

This is why there is a need for video game critics who can offer more insight than pretending that words like "innovative" vs. "gimmicky" actually mean something, or trying to give games "scores". Then I'm sure we'll have people complaining critics "didn't like" their favourite game and say that critics suck, like they do with films, and thereby totally missing the point that critics aren't supposed to be reviewers out to either suck developer cock or heap scorn on games they weren't paid enough to like.


But anyway, I have quite a lot of sprite art in my new game, but since I had to do it all by myself (as well as everything else. Well I didn't have to, but I wanted to), and since there was going to be a lot of it, I actually mostly used and animated 3D-models that I then rendered in a certain non-photo-realistic way so as to make them look kind-of like pixel art. I also modelled them so they would look more pixelly when rendered, with way too big eyes and stuff. But I also had to do some cleaning up afterwards, and make for instance the hair of the main character a little more interesting. Here's an example:


I think it turned out pretty okay, even though it's pretty obvious it's a model. But the big part in favour is that I can churn out really smooth animations very quickly. The above animation took like twenty minutes to animate and render in Maya, then maybe forty minutes to draw and tweak the hair and eyes. And I have around 40 animations plus variations for that character so it really helps a lot. Especially when I had to redo the sword animations because the first version sucked. If it would have meant having to re-draw the whole thing I probably wouldn't have bothered, but it really turned out a lot better. Like this:


Those are all almost like they were when straight from the renderer (I made the eyes more obvious, and the sword stuff and staff are separate objects in-game, but I added them here. They look a little better in-game)

[Covenant]

I'm not sure about the 3D sprite look myself--while they're smooth, something about it seems out of place, a problem that a variety of those games suffered from during the era before full 3D environments were easily doable but people still wanted to dabble, like Oddworld. In many ways it feels like that smoothness and depth works against a 2D aesthetic, but I don't want to criticize on the heels of my previous post. It is a clever system. Of the three the top is the hands-down best looking because of the secondary motion on the hair, a really nice touch a lot of 3D stuff doesn't do well. Bounce and followthrough are so necessary to make 3D not feel corpselike.

I'm pretty awful at rigging (never something I enjoyed, never picked up the skill on my free time) so that'd be working against me if I went a similar route. Plus, it would have meant building tons of different models all myself, something I'd personally rather avoid, given my relative lack of rigging skill. Unless Maya has added some serious rigging tools in the past few years I'd want to avoid making that jump to 3D as much as possible. While it took a good deal of time to draw all the critters by hand, creating a similar thing with a model wouldn't be all that faster, even if the subsequent animations are churned out more quickly. For a game centered around a single main character I can see the value though, since a significant investment will be in creating the breadth of animation required for that character to do all kinds of movements, instead of just a handful of movements for lots of types.

Personally, I'd rather just work in strict 3D, but the coding required for that is a bit daunting without an engine to handle it all. It would have made creating the environments a total nightmare though. I should make a Delve Deeper dwarf in 3D just to learn some good rigging techniques. How do you do your rigging? I usually just so the soft bind stuff since all the fancy kinetics stuff blows my mind, it's way over my head, and I feel like I'm already responsible for learning 100 different things a day, busting out some melscript stuff would melt my brain. At least that's how it was originally taught to me a few years ago on an earlier version of Maya.

[Dooey Jo]

I'm pretty awful at rigging (never something I enjoyed, never picked up the skill on my free time) so that'd be working against me if I went a similar route. Plus, it would have meant building tons of different models all myself, something I'd personally rather avoid, given my relative lack of rigging skill. Unless Maya has added some serious rigging tools in the past few years I'd want to avoid making that jump to 3D as much as possible. While it took a good deal of time to draw all the critters by hand, creating a similar thing with a model wouldn't be all that faster, even if the subsequent animations are churned out more quickly. For a game centered around a single main character I can see the value though, since a significant investment will be in creating the breadth of animation required for that character to do all kinds of movements, instead of just a handful of movements for lots of types.

Yeah, modelling takes a lot time if you have to do it scratch, so for sprites with only a few frames of animation I just drew them directly. I also did some multi-part sprites. I have a moth-like thing where only the wings needed to be animated, so I made the body and wings separate sprites, again to save time. With that stuff there's programming time to consider instead of modelling time, but it was largely trivial to implement in my game engine.

Personally, I'd rather just work in strict 3D, but the coding required for that is a bit daunting without an engine to handle it all. It would have made creating the environments a total nightmare though. I should make a Delve Deeper dwarf in 3D just to learn some good rigging techniques. How do you do your rigging? I usually just so the soft bind stuff since all the fancy kinetics stuff blows my mind, it's way over my head, and I feel like I'm already responsible for learning 100 different things a day, busting out some melscript stuff would melt my brain. At least that's how it was originally taught to me a few years ago on an earlier version of Maya.

I just do the soft bind as well (plus a fuckton of skin weights painting and tweaking because the default bind always sucks), then move all bones individually. I can use IK handles and stuff, but they never really move like I want them to, so I'd have to set up a million additional controls to control them, so I think it's just faster to do it all as "forward kinematics" as they call it. Maybe slightly longer animating times, versus way longer setup times.

I'd like some way to animate the clothes better though. They are not as fluid as I'd want them. It's with things like the movements of hair and clothes that pixel art and traditional animation can really shine. And for a 3D character in-game, you can pretty much just forget about having big flowing clothes.

[salm]

Are there no plugins for Maya like Character Studio or CAT?
I´m not good at setting up rigs either but CAT provides pretty much everything you need plus a pretty nice Animation toolset which makes crating walkcycles of all different kinds a breeze, even for someone like me who is not really an animator.
Integrating CAT was probably the most valuable addition they put into Max 2011.

[Covenant]

Not that I know of personally. Character Studio for Max has some really nice functions for creating a pre-made Biped model that works really well, but the process of rigging that to a model is beyond my understanding. Plus, I have an extremely cursory understanding of Max, just enough to animate with it, so I always go to Maya when I need to do something complex. Which is no good, since Maya doesn't seem to have the rigging tools I need! If only there was a Biped plugin for Maya, which I think would be the best of both worlds. There may be some commercial plugins that auto-rig a model.