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.

Usually the edges of sprites aren't anti-aliased. However if you feel the need, why don't you blend them against a transparent background (max alpha)?

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.

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.

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.

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.

this is very well known problem. Google for "premultiplied alpha". И будет дураку счастье.

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]