Manning Leonard Krull ([info]manningkrull) wrote in [info]pixeljam,
@ 2006-08-25 19:27:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
The black outline problem
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.




(Post a new comment)


[info]calamityjon
2006-08-25 06:13 pm UTC (link)
I'm gonna revisit my monster over the weekend, maybe storyboard the fuckin' thing. I am not happy with it overall ...




2x size


Animated:



Also, man, why ain't I making Doc H pixelart, if I'm gonna make anything?

(Reply to this) (Thread)


[info]manningkrull
2006-08-26 12:48 am UTC (link)
Haha, man, awesome! I love that guy! Plus, bracelets! Holy shit, I always wanna put bracelets on every sprite. Why is that?

(Reply to this) (Parent)


[info]indy1725
2006-08-25 06:19 pm UTC (link)
Have you tried using a colored outline? Just use a darker shade of the fill color for an area - you get that separation of objects without the harshness of the black outline. I'll try to remember to post some static designs I did for a fantasy-based game I never finished years ago.

(Reply to this) (Thread)


[info]manningkrull
2006-08-26 12:51 am UTC (link)
Yeah, like I mentioned somewhere in the fifty thousand words above (you didn't memorize them?!) I kind of lump the colored outline thing in with the black outline thing in that, in most cases, it still sort of makes the sprite stand out like it's not really part of the scene, like it's floating in front. Which still looks great in a lot of cases! However, the sprites I'd like to be able to emulate are the ones that have no outline, or just a few sparse outlines to accentuate really shadowed areas.

Please do post those designs for the fantasy game! I'd love to see. I'm tempted to try some backgrounds for this horror game I'm designing in my head, but that's just so much pixels...

(Reply to this) (Parent)(Thread)


[info]indy1725
2006-08-26 06:01 pm UTC (link)
I found the page I'd set up to show off all the old character designs, and posted it to my site:

http://www.lunarbistro.com/games/old-old-old/labyrinth/vault/stdchars.html

man, i feel old... I completed three of the characters, with full animations and 11 variations of each (the idea was that it would be a networkable game, so I wanted to make sure there were plenty of basic options for all those players).

(Reply to this) (Parent)(Thread)


[info]manningkrull
2006-08-29 05:44 pm UTC (link)
Oh man, these are awesome! Don't you find that you could design little monsters and warriors and stuff like that within a set of simple parameters, like, forever? I sure do.

(Reply to this) (Parent)


[info]the_never
2006-08-25 06:28 pm UTC (link)
I guess you would really have to control what goes on in the background to get a decent non-black outline deal going on. I love the pumpkin guy and the mouse though.

I took a shot at something real quick to figure out whats the deal with outlines. It's annoying because things like circles or shapes that you want close together end up getting boxed off in weird places if you use the black. But to me the black lines just look more tactile. On the removed-outline figure.. Maybe if the highlight color was a little less contrasting (like more of a creme than a white?) it would blend in more?
I dunno.

Here's my beholder: 24x24






I kinda suck at the animation..

(Reply to this) (Thread)


[info]manningkrull
2006-08-26 12:53 am UTC (link)
Haha, man, I love beholders! That guy's great; I love the way his little face-tentacles squish up when he descends there. If you're interested, try adding a few frames at the end that just do the same exact animation but backwards, and you'll probably get a more natural-looking bobbing movement.

(Reply to this) (Parent)(Thread)


[info]the_never
2006-08-26 12:30 pm UTC (link)
Hey , he looks a little smoother now! I only had three frames originally so I only ended up tacking on frame 2 again. But it did help. Thanks for the tip.

(original)
(+1 frame)

(original)
(+1 frame)

(Reply to this) (Parent)


[info]petit_chou
2006-08-25 06:51 pm UTC (link)
OH MAN. Chompy Vampire Manning in his coffin is the cutest thing ever.

(Reply to this) (Thread)


[info]manningkrull
2006-08-26 12:54 am UTC (link)
Yeah!!! That guy's not exactly supposed to be me, but of course the stuck-in-a-broken-coffin concept is the same. I'm just realizing right now that I really should have had a door on that Halloween costume...

(Reply to this) (Parent)


[info]gjj
2006-08-25 07:29 pm UTC (link)
Congratulations, you discovered sel-out =) (or "selective outlining"). My internet connection currently sucks, so I can't get you any links, but googling for "selout" or "sel-out" should get you some tips.

Basically you just AA the outline of your sprite as if it was against a darker background (letting lighting and such affect it, etc).

(Reply to this) (Thread)


[info]asataylor
2006-08-25 08:23 pm UTC (link)
Yeah, I found this one by googlin' "sel-out pixel" which led me to ...

Fighter Sprite tuts at Spriteart.com. Manning, you seen these before? Cuz, man.

(Reply to this) (Parent)(Thread)


[info]manningkrull
2006-08-26 12:57 am UTC (link)
Man, yeah, I found that SpriteArt site a couple days ago! Unfortunately, there wasn't too much new stuff for me in the tutorials, but I sure do enjoy looking through at all that stuff. They do explain reverse-anti-aliasing pretty well though.

(Reply to this) (Parent)


[info]manningkrull
2006-08-26 01:00 am UTC (link)
Sel-out! Awesome! I guessed a bunch of other wrong terms and found nothing, so this is great. Thanks!

(Reply to this) (Parent)


[info]zombiepatrick
2006-08-25 09:44 pm UTC (link)
Oh man, those are all awesome!
Also, you may notice that lots of the GBA games (e.g. Castlevania, Metroid games) in fact do use black outlines - since the sprites show up so small on the screen, I imagine it's to give a rough outline at what the player is looking at.

(Reply to this) (Thread)


[info]manningkrull
2006-08-26 12:58 am UTC (link)
Fascinating! I had no idea, but it totally makes sense. The black outlines become more offensive to me the more I blow stuff up (while the non-outlined sprites still look pretty good), so maybe they're perfect for tiny screens.

(Reply to this) (Parent)


[info]drninja
2006-08-27 08:34 pm UTC (link)
I really dig the animation on the devil fellow. The animation itself gives the character a sense of history and context. I'd all be walking in to a boss battle thinking it'd be a cake walk, then I'd probably wind up shouting some curse words and maybe running behind the couch. Maybe.

(Reply to this) (Thread)


[info]manningkrull
2006-08-29 05:45 pm UTC (link)
Yeah, that's the idea! We've all had those moments playing video games. Especially when you think you've killed some guy, and the controls freeze up and the screen shakes and you know they're going to show you something terrible happening and then you'll have to fight somebody even harder...

(Reply to this) (Parent)


Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…