| Manning Leonard Krull ( @ 2006-08-25 19:27:00 |
In all the time I've been working on pixel art and video-game-style sprites, one thing that's always nagged at me is that in most of the games whose sprites I really like (for example, Ghouls N' Ghosts, Castlevania: Symphony of the Night, etc.) don't use black outlines around their sprites, whereas using black outlines is pretty much the only way I know how to do sprites. I've spent hours searching the web looking at monster sprites from all these beautiful games and trying to figure out how the hell to design sprites like that without the black outline. I never even knew where to begin, so I never really tried. But every time I look at my monster sprites, for example, it really bothers me that no matter how neat they are, they still don't really look like actual video game sprites, because of the ubiquitous outlines.
I think the main reason my brain is stuck always wanting to use black outlines is that I'm an illustrator first and foremost, and I'm used to drawing with black lines. The sprites I look at from the more recent Castlevania games, for instance, almost look more like sculpture or paintings than like drawings. But even if you look at a more cartoon-style game, like the Street Fighter Alpha series, they're still not using black outlines, for the most part. And that reminds me, I should clarify here, I'm not talking about black outlines specifically. I'm talking about any dark-colored outlines that go all the way around the figre. It's easy enough to take my black outlines and switch them to a dark color that matches the area they're surrounding, but the effect is the same: you've got a sprite that's very separate from the background because it's got this border around it. My goal is to be able to create the kinds of sprites that blend right into the background and look pretty natural.
So, anyway, I mention all of this in order to set up the fact that I've had a minor breakthrough in designing sprites without black outlines. The only method that ever occured to me to try before was to simply delete my black border and see how the sprite looks. It always looks terrible. So that was that, and I didn't try again for a long time. But I think I've got a new technique (which is barely even a technique) that works really well...
And they key is (in my case)... designing the sprite with outlines, and then carefully deleting some of them. And that's just about it. It was a lot easier than I expected, and I feel like an idiot for avoiding even trying for, like, years.
I figured out I should try something like this while I was looking at a sprite of Arthur from Ghouls N' Ghosts. I zoomed in and noticed that he did have some black edges, but they were all on the edges that were facing away from his lightsource, i.e. the black edges were opposite the highlighted parts. They were mostly bottom edges (like the bottom of an outstretched arm, or under a knee) and back edges (like his back and the back of his legs). Same for some of the monsters from the same game.
So I decided to do an experiment with the big devil sprite I'd just made (the old-fashioned way with black outlines) -- Figure 1 below. I selected all the black and went through carefully with the eraser tool (set to the Pencil brush) and deleted the black lines that were bordering highlighted parts of the guy. The top edges of his arms and shoulders, the front of the horns, the top edge of the tail, the light edge of the pitchfork, etc. I left the black lines within the body, and the black outlines on the underside of the shadowed areas, like under the arms, under the shins, etc. See Figure 2 below.
Here's before and after:
Fig 1. With outlines. |
Fig 2. Without outlines. |
Now, for sprites like from the Castlevania games, many of them have no black at all, and to achieve an effect like that I'd try the same as above, i.e. deleting the outlines near the hightlights, but instead of leaving the black outlines near the shadows, I'd change them all to the darkest color in the pallete. Like I mentioned above, just deleting all the black outlines doesn't work; it leaves the thing looking like a mess, with some areas too skinny-looking, and jagged edges in all sorts of bad places.
I'm not sure which look I actually prefer in my own sprites while they're floating in a web browser. Maybe the black-outlined ones. But I think if I were ever commissioned to design a real game (a highly unlikely scenario, especially since sprite-based games aren't so big anymore, save for Gameboy and cellphones) I'd probably try to do the whole thing with minimal black outlines.
Whew. I realize this community isn't too active and not a lot of people here are even going to try this, but I hope somebody maybe finds some use for this idea somewhere down the line. I know all the time when I'm stumped on pixel art stuff, I'll just do a Google search for whatever I'm having a problem with and I usually find a brief tutorial somewhere about it, or at least some good examples. I'd like to encourage anybody else in the community to write about their own processes any time.
Bonus junk:
I finally animated the scorpion guy's tail! I would not like to do that again.