Sign in to follow this  
Sylon

Anti-Aliasing for 2D battle sprites

Recommended Posts

I have a question about designing battle sprites in the form of those of the early 2D Final Fantasy monsters. When I anti-alias the monsters I make (for a game called Hero of Allacrost at www.allacrost.org), it requires for me to blend the edges of the monster onto a white background to "smooth out" the monster's edges. But when I place that monster on a DARK background, the lighter pixels on the edge start to become visible, and it ruins it. If you want a demonstration of my problem, look at the file called "Problem.png" at my art site http://www.rauchart.cjb.net Is there a way to deal with this? (My guess is no, and that I should just draw black lines around the entire monster, perhaps blending the black lines into the monster as well). Is there any other way to AA successfully? Something profound? LOL. Because the BG battle images of the game will be all different colors, I assume.

Share this post


Link to post
Share on other sites
Im presuming you are using a standard masked blit with a color key for this one. And thats your problem, colorkey transparency allows for only 1 transparent color (in this case im guessing white), everything else is a valid color drawn. So in other words, you are not really antialiasing your sprites. It looks like it against the white background, because it is aliased into the color white (not into transparent), but against other backgrounds all the shades of white are shown as pixels. In order to get around this you DO NOT want to antialiase your sprites if you wish to blur the edges, instead do it in the blitting routeein itself. Another option would be to store in a format that supports an alpha channel (such as .PNG), and use that channel to determine the alpha levels.

Share this post


Link to post
Share on other sites
In addition, the early final fantasies looked antialiased because the television screen automaticaly does it for them (notice how TV pixels blur together alot more then monitors do). My recomendation would be to run an antialiasing filter over the screen, or do it with a 3d api and use the built in aliasing.

Share this post


Link to post
Share on other sites
In addition, the early final fantasies looked antialiased because the television screen automaticaly does it for them (notice how TV pixels blur together alot more then monitors do). My recomendation would be to run an antialiasing filter over the screen, or do it with a 3d api and use the built in aliasing.

Share this post


Link to post
Share on other sites
linkage

Quote:
Original post by PaulCesar
Im presuming you are using a standard masked blit with a color key for this one. And thats your problem, colorkey transparency allows for only 1 transparent color (in this case im guessing white), everything else is a valid color drawn. So in other words, you are not really antialiasing your sprites. It looks like it against the white background, because it is aliased into the color white (not into transparent), but against other backgrounds all the shades of white are shown as pixels. In order to get around this you DO NOT want to antialiase your sprites if you wish to blur the edges, instead do it in the blitting routeein itself. Another option would be to store in a format that supports an alpha channel (such as .PNG), and use that channel to determine the alpha levels.



We're not using color keys, we're using PNG format all around.

Share this post


Link to post
Share on other sites
You have to author your sprites in different way. Instead of using greyscale to blend it to the background, you should either create the sprite in double or tripple size, and scale it down to get the transparency.

Or if you paint your sprites in Photoshop, use separate layer mask. That allows you to see th results right away, and the drawing is like the usual pixel by pixel method, but now you will paint alpha. Just use layer under the ony you edit to test the sprite in various conditions. I usuallu prefer to test the transparency in colored grey like #6B5E66.

When painting the alpha, always use the pure colors in the color layer. Sometimes it is also necessary paint few pixels outside the actualy shape to get right antialiasing effect you need since lowering alpha is like taking away. So if you want 30% transparent red, paint red in the color layer and 30% grey in the tranaprency layer.

Another way to imagine that is that you antialias the inner shape, that is, do not add any pizels outside the already painted shape. Anyway once you get started you will figure it out yourself :)

IIRC Photoshop allows to save one layer with alpha mask into TGA or PNG formats correctly with the created alpha channel.

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
this is very well known problem. Google for "premultiplied alpha". И будет дураку счастье.

Share this post


Link to post
Share on other sites
Using anti-aliasing on the edges of sprites (their outlines) is a bad idea from the art perspective. You can see the results of doing this in the image you've posted and once the anti-aliasing is done there is really no programatic way to remove the flaws you see.

If your using direct3d or OpenGL you can use a pixel shader to anti-alias the sprites in real time. This means you'll submit a non anti-aliased version to the programmer who writes a shader (Direct3d has a sample of this in the june SDK) and all the AA is handled for you.

Share this post


Link to post
Share on other sites
When you're making sprites you NEVER AA to a specific background colour. You can use internal anti-aliasing and selective outlining to give the edges of your sprite a more "smooth" look, though. I would also work on a 50% grey background, when making the original sprites. This will set your contrast to an optimal level, especially when you plan to display the sprite on a series of different backgrounds.

I have some examples form a tutorial I did a while back...I'll post them shortly.



Okay, notice how the colours in the sprite are only anti-aliased on the interior of the sprite? Intermediate tones are added in the "steps" of irregular lines in the outline, to make it look more smooth. Also, the outline is broken in places, to give a tapered feel to the line. It takes some practice, especially with selective outlining, but your sprites will look much better on-screen.

If you're using a solid outline, it's much easier, as you just have to anti-alias the inside portion of the outline. I wouldn't double up pixel-width of the outline, though, unless that's a specific look you're going for in the game. Chunkier outlines will give more of a cartoony, Paper Mario feel...

[Edited by - nvision on July 13, 2005 10:59:38 AM]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this