iDevGames Forums
Sprite borders - Printable Version

+- iDevGames Forums (
+-- Forum: Development Zone (/forum-3.html)
+--- Forum: Designer's Studio (/forum-6.html)
+--- Thread: Sprite borders (/thread-9425.html)

Sprite borders - Carlos Camacho - Oct 14, 2011 03:42 PM

I'd like to hear how you all go about making your 2D sprites especially their 'outlines.' For example, if you simple scale down your original art to a sprite size, you'll end up with 'fringes.' So I assume many of you convert the final size sprite to index mode and save. To 'fix' any anti-aliased pixels on the edges of the sprites, I will apply a black outline. This allows a clean edge without any fringes. If my game's backgrounds were blue, I would make said border blue. And black if most of my screens were black.

Hmm, looking at some Japanese pixel art. I see some using dark outlines and some just making the edge color a darker color than its inside neighbor.

Anyways, outside of working completely in index color, how do you go about your sprite creation. Specifically if the sprites started off as 3D models, which were rendered and then turned into 2D sprites.


RE: Sprite borders - AndyKorth - Oct 14, 2011 09:57 PM

Ideally, most sprites are made at their end size. I think it's a bit tricky to stick a border around a sprite to eliminate anti-aliased pixels on the edges. I mean, it takes a bit of talent to do that and still get a good representation of the sprite.

As for the color choice.. I'm not sure about matching the game backgrounds...? No matter what you're using to draw, you can get 8 bit alpha working properly to draw. So I'm assuming that's a stylistic choice, right?

[Image: KM6oO.png]

So h ere it depends on what style you've got. Here's a mix of styles. A consistent one pixel black outlines makes those weapons and items really pop out from the background. A few of the other ones I made are softer sprites, these edges are alpha blended, and they draw fine, although the style is different.

[Image: qQIXX.png]

A third approach you mentioned is to choose a darker version of one of the main colors used in the sprite and make an outline around that. Look at the stone chairs and the bushes. The chairs are outlined in dark grey and the plants in a dark green. This is a great time to use the B in HSB, in your color picker- darken the color easily.

I think your situation might be a little different if you're going from a 3D model to a 2D sprite. If you are rendering big images and shrinking them, you can avoid antialiasing artifacts by using nearest-neighboor interpolation instead of bicubic or bilinear resampling. This will give you hard edges and clean pixels.

Although I think often when you're turning 3D images to sprites, antialiased sprites are not a bad thing. You won't automatically get a tigsource/Super Nintendo pixel-art style by turning a 3d image into a sprite.

Hope that helps!

RE: Sprite borders - skyhawk - Oct 14, 2011 10:13 PM

Perhaps you should play Killer Instinct and Donkey Kong Country on the SNES and see what they do Smile

RE: Sprite borders - Carlos Camacho - Oct 15, 2011 04:20 AM

SkyHawk, funny you should mention that. I was looking at the Donkey Kong Country sprite sheet yesterday. They don't do anything unique on their sprite's outlines. My guess is because old TVs were not so sharp, they could get away with it.

RE: Sprite borders - Frank C. - Oct 15, 2011 01:28 PM

(Oct 15, 2011 04:20 AM)Carlos Camacho Wrote:  My guess is because old TVs were not so sharp, they could get away with it.

Pixel-editing the edges to clean things up is pretty much required IMHO, but plenty of games and emulators use CRT aperture/blur FX for that "olde time" look - hides imperfections nicely too Wink

RE: Sprite borders - Charybdis - Oct 16, 2011 05:01 AM

This may or may not be pertinent here, but if you do have antialiased edges, from a programming perspective you should look into using 'premultiplied alpha'
I began using it in my system recently and have never looked back. it turned out to be the ideal solution for me.

RE: Sprite borders - tcIgnatius - Oct 19, 2011 08:19 PM

I've used software programs like P.O.V ray to convert 3D models to sprites. (rendering each frame against a backdrop, usually magenta) There are probably easier ways to do this, but I've done this before and it worked well. Games like DK Country use pre-rendered 3D sprites in a similar fashion. For going from 2D art to 2D sprites, I recommend you create line art then pixel it in from the ground up. Taking a piece of artwork and shrinking it down tends to yield bad results aside from the edges having AA. (you could shrink in photoshop with image interpolation set to "nearest neighbor", but that still won't look good imo)
For my sprites I tried to do some "sel out" (selective outlining) which can look pretty good. Here's a tutorial on it.