Drop Shadow Fonts

Started by
1 comment, last by IntegralKing 12 years, 9 months ago
Ok, so I use a bitmap font system. I store all my glyphs in a greyscale bitmap and use my shader to color the glyphs to my liking.

Now, I have no idea how to go about putting in those fancy drop-shadow fonts that many games seem to use.

My first idea was to render the font twice, onto a NON-greyscale bitmap with different colors. Then use the shaders to mod each color to my liking (drop shadow color and font color).

I might run into some issues getting the drop shadow offset to look the same for differnet font sizes...

But, would this even work??? Could somone who has done this before (or thinks they know the 'best' way) help me out?
Advertisement
Well if you can use shaders, you could do it as a post process. Do something similar to an edge blur / glow, but only blur the edge you want the drop shadow to be on. Instead of making the area lighter or blurring the color of the font, you would just darken the pixels that lie outside of the font.

Or you could do it just by drawing the same exact text slightly lower and behind, but make it black and slightly transparent. it won't by soft but it's probably the easiest way.

*edit* As for how to make sure the shadow works no matter the size.
1: allow whatever is using the font to pass a weight value to determine the size of the shadow.

2: or find a good ratio to the weight of the shadow and font size, then just use that to adjust the size of the shadow depending on the given font size.

shadowWeight = fontSize * ratio
[ dev journal ]
[ current projects' videos ]
[ Zolo Project ]
I'm not mean, I just like to get to the point.
A common way to do drop shadows are to draw the font twice, the first time drawing the text in black with an offset, the second time drawing the font in white (or whatever color that is brighter than the drop shadow) without an offset.

However, that is not the *best* way.

The defacto way to do a font with an outline (and other effects), is to create a font that already has the outline (or other effect).

You can create a font that already has drop shadows. This will save you draw call time, and give you the freedom to create any effect you like, including soft shadows, which drawing the font twice will not do for you, unless you do a lot of draw to rendertarget + blur work.


Here is the relevant info for creating such a font bitmap:
http://blogs.msdn.co...nts-in-xna.aspx

You can use your favorite font and apply whatever effect you want in photoshop, place all the characters that you want, and then use the utility to map the bitmap out.

This topic is closed to new replies.

Advertisement