Sign in to follow this  

Drop Shadow Fonts

This topic is 2352 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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:
[url="http://blogs.msdn.com/b/shawnhar/archive/2007/04/26/bitmap-fonts-in-xna.aspx"]http://blogs.msdn.co...nts-in-xna.aspx[/url]

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.

Share this post


Link to post
Share on other sites

This topic is 2352 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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