Sign in to follow this  

Custom font with D3DX

This topic is 4370 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

Okay a, I don’t know where else to ask this, so I came here. I need to draw text in my game using font I created in a paint program (Photoshop, go figure). Basically, my needs are to use this font I created using the ID3DXSprite & ID3DXFont interfaces. The reason for those choices are because the DirectX SDK states that a ID3DXSprite interface should be used with the font IF many subsequent call are made to the font’s “DrawText” method. I will be calling this quite a lot in some cases where it may cause issued because I’m scrolling the text and also using adding glared or flares I should say. But my question is how I rig up the sprite and font interface to use the font I created and save to a bitmap. Should this be done, or am I barking up the wrong tree for this purpose?

Share this post


Link to post
Share on other sites
No takers huh? Well I found this Bitmap Font Builder program. I generated font using it and customized it a bit in Photoshop. So it’s pretty much the same thing at my other font.

The part that I don’t get is how this all works. I created a sprite and a texture. I also created a font with the same parameters as what’s on the bitmap. I start the batching (if that is what you call it) with ID3DXSprite::Begin( ), then I use the ID3DXFont::DrawText the number of times I need to. Then I end all the batching with the ID3DXSprite::End( ). And some how the font interface uses my sprite and texture map? I don’t see how this works, so I’m going to take for the minute it doesn’t.

I done something similar to all this before using a routine that generated the correct rectangle on a bitmap (This was in DirectDraw by the way) for a character. I had only a limited set of characters. Because I wanted to use a different set of colors I made the fonts with their different colors and simply used the function with a special flag the specified what type of color to use. I added an offset to the color with the flag that gave the correct location on the bitmap. Pretty cool, but also pretty lame because I only had Aa-Zz && 0-9, plus a few punctuation marks (i.e. “. ! ‘ _”).

I don’t want to do this again because it was so limiting. The font I want is in a 32-Bit TGA file. The alpha channel is the exact match of the font it’s self. The font has a little shading or glare applied to it via chrome gradient. It looks pretty nice and has all the characters (that I know of) that I should use.

So I must simple pre-compute the source rectangle again and use the sprite class for the rendering of the characters. I draw a string with formatted output via variable argument list and traverse the resulting string, rendering each character’s character via offset into the array by value. Something like " " - Char.

Share this post


Link to post
Share on other sites
I'd personally suggest you just go with a True Type font and avoid the bitmap fonts all together. Save some headaches, in my experience, there's about a billion free fonts on the net, and DX will load 'em right up for ya.

Share this post


Link to post
Share on other sites
Looking at the documentation of ID3DXFont and its factory functions, it doesn't support what you want.

Quote:
So I must simple pre-compute the source rectangle again and use the sprite class for the rendering of the characters. I draw a string with formatted output via variable argument list and traverse the resulting string, rendering each character’s character via offset into the array by value. Something like " " - Char.

Yep, you can do this. Don't use variable argument lists - do it the C++ way. Much safer.

Share this post


Link to post
Share on other sites
Quote:
Original post by Instruo
I'd personally suggest you just go with a True Type font and avoid the bitmap fonts all together. Save some headaches, in my experience, there's about a billion free fonts on the net, and DX will load 'em right up for ya.

Yea, I recommend this as well. Just search google for "free fonts", and browse through a bunch of the pages. Actually finding cool fonts isn't hard - but finding something that you are looking for is pretty tough. This is because the sites always store them alphabetically, and their names really give no indication of the font itself. But nonetheless, it is a good route to take.

Share this post


Link to post
Share on other sites
Make sure you read the licences that come with any free fonts...

I think it was somewhere on these forums (month or so back) that someone had built their entire game using a free font off the net, then checked the licence and found that it was for "personal use only" and you couldn't redistribute it in a commercial product [oh]

Jack

Share this post


Link to post
Share on other sites
You're definitely NOT wasting your time! Bitmapped fonts are a great option because you can do SO much with textured quads in D3D. I can post my font bitmap and measurement file if you are interested (I have two, actually). I get REALLY nice quality results, including a build in drop shadow (that you can eliminate by rendering with additive blending.) Plus you can scale/color/rotate/fade( <-important!) your text just like any other sprite/quad.

Quote:
Original post by Instruo
I'd personally suggest you just go with a True Type font and avoid the bitmap fonts all together. Save some headaches, in my experience, there's about a billion free fonts on the net, and DX will load 'em right up for ya.


I think this advice is misguided. Not only do you have to redistribute the font (which can be a headache) but the font must be rasterized at SOME point anyways. Video cards do not accept TTF files, they take vertex and texture data (etc... correct me if I'm wrong...) Plus the memory requirements are not large for modern cards. I spend a 512x512 PNG (w/ alpha, = 64x64 pixels per character, I use about 110 characters) and can scale up to roughly "70 point" size before you can see pixellation.

If you rasterize the font into a bitmap, you are free to redistribute your artwork with your game under most any font license, commercial or otherwise. As a bonus, you can only include the characters you care about, color them in complicated ways if you choose, and include extra characters (such as arrows, small scroll bar pieces, whatever fits) so that you can just add another instance of your 'label/text' class to show those symbols, as a convenience.

Edit: render with a dynamic vertex buffer (if you have effects like fading, rotating, etc.) or a static vertex buffer if the text isn't changing, and you'll get blazing speed using texture coordinates because you can render all the characters in one pass.

You can do all this by using your bitmap/texture with the Sprite interface as necessary, as well. Sorry if this doesn't directly answer your question!

Share this post


Link to post
Share on other sites
I'm with MasterWorks, bitmap fonts rock when used well. They let your text become part of your game art. You can also do nice things like stroked or shadowed fonts for increased readability.

My bitmap font class was designed to be used with the fonts created by Bitmap Font Builder. You can check it out here:

http://www.drunkenhyena.com/pages/projects/dhfastfont.cgi

Share this post


Link to post
Share on other sites
A finally some one agrees with me! So bitmap fonts it is. I knew they would be good because it’s a texture and not vector/spline related fonts to worry about. Besides, I see a lot of games include Quake use that type of font.

So any ways, yes Maters, gives us you fonts. (hehehe)

Is there a program or way to build them? I’m not talking about Bitmap font builder because it won’t let me choose the chars I want. Also, Photoshop (that I know of) doesn’t have a tool that will help me much. It’s little font thingy might help, but not much. I can never get the characters to space out right. I think this is because the font I would be using isn’t mono space.

So like, in Photoshop I KNOW I can make some cool fonts. Photoshop is all I have for graphics tools. But I need a way to measure the font and place the characters in their correct cells. But most importantly I need to be able to render them correctly.

Masters, how do you mean, use a vertex buffer? This would only work for mono space with out showing distortion via characters spacing out to much, would it? Also, I will be fading, scaling, rotating and all the like with the font. And I will most likely be drawing multiple lines. So ah… how did ya pull that off?

I want to use a 32-Bit TGA or BMP. In Photoshop, the TGA seams to hold the little glares and stuff I put in the font. I haven’t tried using BMP version yet. Actually, the characters that I rendered screwed all up. I had the source rectangles wrong and I gave up shortly after reading some of these posts until I seen yours and Hyena’s.

I’ll be doing lost of scene transitions and special effects with the text.

Share this post


Link to post
Share on other sites
If you want to do cool tricks with your text, you should look into using sprites with dynamic vertex buffers. It is THE fastest way to render dynamic (changing every frame) quads. It's no different for text than for sprites; my text class actually just has length(String) number of sprites inside it. I've posted the details before, as have many others... I can't get into it all now, but make sure you're using the right vertex buffer flags or you can get into trouble.

For combining font images, I use two custom programs. First I take my alphabet string (100+ characters of your choice) and paste it in Photoshop in the font I want and rasterize it. My first custom ('Graphics Destructor') program splits the long image into individual files. The second custom program (Graphics Processor) recombines the images into a 1024x512 texture (sorry, I got the size wrong before). Lastly I use Photoshop to tweak the image, add a drop shadow, and fix any stray pixels. I then create a sprite for the text (using my Sprite Editor) and set up the different 'profiles'. For instance, I might have a 'red' profile or a 'fade in' profile or a "50% transparent" profile, etc. which describes how the text is rendered. This is the same as for all sprites in the game.

As a side note, the Graphics Processor is pretty cool; if you have a 300 frame animation, it can average the frames together to make an animation of any arbitrary number of frames and output a PNG. I get motion blur and save memory; very very useful. Unfortunately this program is really annoying to install or else I would share it; it requires registry keys and the .NET framework. Let me know if you want to tackle it. I can't say enough about the power of custom tools for things like font engines and other textured quad tasks.

The alphabet string is:

"!â#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ˆ·®™©¼½¾¿"

Here is the final output alphabet PNG file (using Arial for now. The drop shadow is a little sloppy, I might fix it later, but the text is usually scaled down enough or rendered additive so you don't easily notice the flaws):


If you want you can get the text file that has the character widths (using yet another custom program, 'Font Measurer'. Each line is the width of the character in pixels so you can know how far to 'scoot over' as you place the characters. Not necessary if you use a fixed width font, but it might look inferior.

www.planetflux.com/flux2/fontwidths.txt

Here is a screenie of my next project, Flux 2 (still in its infancy, dont take anything from this shot), but it does demonstrate the text being used some different ways. I had to resize it down a bit for file size:



Hope this helps.

Share this post


Link to post
Share on other sites
Here's another one for you to try (Century Gothic), used for my (about to be released) game Impact. The alphabet string is the same, no postprocessing effects.



and the corresponding text file:

http://www.planetflux.com/flux2/impactfont/fontwidths.txt

Share this post


Link to post
Share on other sites
I forgot to add, the most tedious part is the spacing. After you paste the alphabet string into Photoshop, you have to rasterize the text onto a layer. Then what I do is make a pattern and fill the background in. The pattern is a 64x64 box with marks down the center so that I can align each character (and then delete the background.) Then I manually position each character in the center of each box. You really have to do this manually because you can't just crop each character. For instance, 'c', 'p', 'q', 'g', 'b', 'o', and 'd' should, I believe, be centered such that the 'o' part of each letter would overlap if they were overlayed. This might not happen if you just auto-cropped and saved/centered each character.

Share this post


Link to post
Share on other sites
My approach is more general and much easier to get going, as with all things you have to find the right solution for your project.

Bitmap Font Builder creates a full font page, but also generates the widths of each character so they aren't rendered as monospace (though you can do that as an option too).

Then when you render a string it just draws a textured triangle sourcing the appropriate subrect of the font. Though I use texture triangles you could use D3DXSprite instead if you prefer, they essentially do the same thing.

The biggest limitation of this approach is that you're somewhat limited in how much you can mess with the font. Since the font widths are generated from the basic font, if you added a really wide dropshadow it might not look quite right.

At any rate, the full source is included in mine so you can check it out to see how I do it. If nothing else it might give you some ideas on the calculations involved.

Share this post


Link to post
Share on other sites
Quote:
Original post by DrunkenHyena
Since the font widths are generated from the basic font, if you added a really wide dropshadow it might not look quite right.

Could you not just add the drop shadow after you perform the measurements? Or is the measurement performed at run time? Or maybe you could just have two textures and use only the basic one (no shadows) to compute spacing for BOTH types.

Share this post


Link to post
Share on other sites
That’s nice font, I wish I could paste mine…

Anyways, I have created my font with a full 512x512 image. The widths I tried to use screwed the spacing all up. I used them wrong or something. I added the widths to the spacing each time I iterated through the string and drew a character. What’s the formula to get the font’s to space right? I guess I could figure that out after trial and error.

But um, I use ID3DXSprite because it’s simple. I could use a quad or triangle strip of some kind. I need my font to just font…. and to change colors. I currently use the color parameter in the sprite’s draw function. Lame, but it works.

I want the text to be animated. I need certain strings to zoom, scroll and fade into a scene. Scrolling is easy, zooming, I guess, would be adjusting sprite size and the fading would probably do with alpha. I use a BMP instead of TGA now.

I’m trying to get the alpha channel of the bitmap blurred off the edges of the font a little so that the black background of the bitmap will be used as a shadow. I don’t think it’s working. I mean, the back buffer is clear to black, so I guess I have to change it to something else so I can make sure the shadow appears. I would like to use the same cheap shadows for other things to.

I guess if I really wanted too! I can look up text effect and tricks in Java or javascript and probably find thousands of examples to do what I want. Most of them I think I might be able to clown up.

This brings me to my next point, animation frames. I would like the font to be animated because it goes with the transitions amongst other stuff. All these fades and things or bogging me down and I’ve been having problems completing a technical design on the topic because each test looks like crap and usually doesn’t work.

I’ll start with the font because that is the most complicated animation. Basically, I need to animate the text scrolling in, bounce a bit, and lastly scroll out. Other cool stuff happens too. But I have lots of transitions, do I really need to hard code them? If I do, how? I don’t have to make a ton of if’s so I figured I would use a global array defined in the program or else were for the effect. Each frame has a time value and a list of properties. Weather or not if the frame does anything with them, they still have them. Then I just interpolate between the frames. I only change the frame indices for interpolation if the time has passed the time of the second interpolant (frame B). Sound good? I know I didn’t explain much but animation issues keep holding me back. I must lean more.

Cool Effect 1:
I used the chiller font to make this really creepy FPS counter. Every frame I randomly generates two numbers between -3 and 3. I added those numbers to the X and Y values of the string (16 and 8) and also randomly generated the [u]red only[/u] color from 96 – 220. The font jumps around a lot and with the constant color change made it look like it was almost distorting. Pretty cool but if got really annoying after a bit.

Share this post


Link to post
Share on other sites
Quote:
Original post by MasterWorks
Quote:
Original post by DrunkenHyena
Since the font widths are generated from the basic font, if you added a really wide dropshadow it might not look quite right.

Could you not just add the drop shadow after you perform the measurements? Or is the measurement performed at run time? Or maybe you could just have two textures and use only the basic one (no shadows) to compute spacing for BOTH types.


The font size measurements are done from the actual font glyph so it won't take into account any changes made to the bitmap after it's generated. Relatively small changes work well, the drop shadow in your font page would probably work because it doesn't add much relative to the size of the font. More elaborate things (which your system probably handles) are unlikely to work. A really long drop shadow, for example, would get drawn over by the next characters which probably isn't the desired effect.

I have a much better system planned out, but this one is great for simplicity and turn around time. You can get some decent effects out of it too as long as you keep its limitations in mind.

Share this post


Link to post
Share on other sites
Quote:
Original post by sakky
That’s nice font, I wish I could paste mine…

Anyways, I have created my font with a full 512x512 image. The widths I tried to use screwed the spacing all up. I used them wrong or something. I added the widths to the spacing each time I iterated through the string and drew a character. What’s the formula to get the font’s to space right? I guess I could figure that out after trial and error.


How did you get the font widths? Are you sure they're right? If you look at my source you can see how I calculate the rectangles and such and copy that.

Quote:

But um, I use ID3DXSprite because it’s simple. I could use a quad or triangle strip of some kind. I need my font to just font…. and to change colors. I currently use the color parameter in the sprite’s draw function. Lame, but it works.


If you're comfortable using D3DXSprite then that's fine. Once you have everything working, if it looks like you need to optimize things you can look into other solutions then. D3DXSprite performs pretty well though so I wouldn't worry.

Quote:

I want the text to be animated. I need certain strings to zoom, scroll and fade into a scene. Scrolling is easy, zooming, I guess, would be adjusting sprite size and the fading would probably do with alpha. I use a BMP instead of TGA now.

Most standard text system focus on standard text rendering, left to right, top to bottom (for Western languages anyway :) ). It sounds more like you're interested in Demo-style effects. You can still use the same basic methods, but rather than thinking of them as text, think of each character as an individual sprite that just happens to make a word.

Quote:

I’m trying to get the alpha channel of the bitmap blurred off the edges of the font a little so that the black background of the bitmap will be used as a shadow. I don’t think it’s working. I mean, the back buffer is clear to black, so I guess I have to change it to something else so I can make sure the shadow appears. I would like to use the same cheap shadows for other things to.


If you want nice shadow effects you really need them as part of the texture and they're fairly easy to do in Photoshop. If you have the background cleared to transparent, adding a drop shadow should be nicely blended for you. You need to make sure you save the image in a format that supports alpha though. I recommend PNG.

Share this post


Link to post
Share on other sites
Nearly any font system you're going to implement in a modern 3D game is essentially going to boil down to rendering bitmapped fonts using textured quads. Even the the D3DX library's font stuff does it this way, although the creation of the bitmaps is done behind the scenes. The main alternative would be to lock your rendering target and draw your font glyphs directly onto it, but that approach would suffer some pretty major speed penalties on a lot of hardware.

Essentially what goes on behind the scenes is that the font renderer will take a TrueType font and render its glyphs in a particular format (size, bold, underline, etc...) into a texture. Then that texture is used to render a bunch of quads on the screen. I personally rolled my own font renderer using the FreeType font rendering library. Works quite well.

Share this post


Link to post
Share on other sites
Quote:
Original post by Shinkage
I personally rolled my own font renderer using the FreeType font rendering library. Works quite well.


A bit of an aside, but what's so special about FreeType? I understand it's cross-platform, but I've heard people rave about it for projects that aren't intended to be crossplatform. So what's the deal? I scanned (briefly) the feature list and nothing jumped out at me. Is it really so much better than using the Win32 calls? If so, why? Inquiring (and lazy) minds want to know!

Share this post


Link to post
Share on other sites
What I mean by the shadows is that I blur the characters in the alpha channel so that they overlap the original characters in such a fashion that they look like shadows. Have you ever read the book titled “The Dark Side of Game Texturing”? The author describes making blood textures (or the like) using a flat color but the actual sprite in the alpha channel. The result should of the alpha blended and/or alpha tested texture should result in what looks to be a blood stain or what ever the sprite mimics.

Essentially, this is how I would like to achieve my shadows. Actually, one could call them shadows, but also call them glows, but composed only in the alpha channel and not the color (RGB) channels of the sprite. When blending using the alpha channel, parts of the background should show were ever the blurred alpha values are. In fact, I could find an image format or build my own, that can support multiple alpha channels that are used to make dropped shadows or glows.

I would accomplish this by creating several alpha textures (similar to the above described blood textures) for a set of sprites or characters. Then, simply render the alpha sprite with alpha blending first, then the non-alpha sprite next. By properly configuring a few render states in Direct3D, I can change the color of the rendered alpha sprite. Using this effect, I can make glows, shadows, or what ever overlay types of effects I need. Better yet, I can adjust the alpha test or blend factor to oscillate between two specified parameters to even further similar a glowing effect.

Now, onto the actual animation:
What I need to accomplish uses lots of text effects and transitions (text & screen). When I was writing out the technical design of exactly what I wanted I found my self wondering how this would all work—smoothly! With so many different animations running at one time it further complicated things. I thought, “How would I show all these animations correctly. I wonder if I should use some sort of timeline or framing mechanism.” So now I find my self having problems managing the animation for all I need. I would like the frame work to be some what robust in such a way that all animated objects are though of that same way via common interface. This would enable me to write a callback system that would attach to correct implementation to the correct “identified” animated object.

This sounds most pleasing and proper to me. So I have figured many ways to accomplish the callback system. It’s quite easy, just a list of enumerated constants that are caught in a switch block that assigned function pointers to the correct rendering routines. The animated object also other information and variables, but most are common traits that can be used by most objects. For example, position, scale, rotation, color, texture (uses a texture matrix to achieve this NO! direct access to texture coordinates).

Next, I need to complete the framework with the animation components for frame basic animation across a given timeline. How would I accomplish this? This is my most correct problem and what I’m having problems with. Some objects may appear in a timeline that were not originally their. So an event system that stores reference to these objects is used to signify how many objects are actively being animated. I would like to use a set maximum of them that use my list-array.

Hmm… Maybe I’m actually answering my question as I write. The frames are bothering me mostly. For example, a fade start and pauses, then resumes and finally ends. The start pause, resume and end can all be represented with frames, but how? I have just those frames, but the stretch across a lengthy timeline, well 4 seconds if you consider that lengthy. The actual animation frames will most likely be hard-coded. (TODO: <- Fix hard-coded mess) I would like my animations to be described with an outside source so I don’t have to recompile each time I need to test them.

Hmm… Maybe if in my transition phase I use a queue method that sets an animation to be processed via push->list-array data. This would be the initialization. Then I simply perform the necessary loop checking for input, window messages and the like while processing and rendering the animation. But most importantly, I need to check if the queue is empty. If the queue is empty, this means all the animations have stopped and this signifies that transition is over.

But during the actual game I won’t be waiting for those animations to end at all. I just continue on like with out a care. But, this also brings up another interesting topic: How do I switch to a transition while not affecting objects currently existing in the queue? I bet I just need to have another cup of coffee and think about it.

Share this post


Link to post
Share on other sites
I think I know one of my problems. I'm trying to through everything together. But I can’t because each type of thing I want to animate needs to be handled in a different way.

Doo!

But I can use just lists of frame indices and a time in which to render them all. Yep, that’s it for the sprites. Now onto fade and what not.

Share this post


Link to post
Share on other sites
Quote:
Original post by DrunkenHyena
A bit of an aside, but what's so special about FreeType? I understand it's cross-platform, but I've heard people rave about it for projects that aren't intended to be crossplatform. So what's the deal? I scanned (briefly) the feature list and nothing jumped out at me. Is it really so much better than using the Win32 calls? If so, why? Inquiring (and lazy) minds want to know!


FreeType provides direct access to not only individual anti-aliased glyph bitmaps that can be rendered using a number of different font file formats, but also the typographical information necessary to use them properly in a custom rendering engine. The Windows API, so far as I'm aware, just doesn't have the tools to easily get access to the information you need to render text in a per-pixel typographically correct manner (for example, taking into account kerning between invividual letters).

Share this post


Link to post
Share on other sites
Quote:
The Windows API, so far as I'm aware, just doesn't have the tools to easily get access to the information you need to render text in a per-pixel typographically correct manner (for example, taking into account kerning between invividual letters).


Uniscribe would be the Windows API to use for getting at this kind of information. This is what D3DXFont uses to layout text.

xyzzy

Share this post


Link to post
Share on other sites
Hello,

I also use a bitmap font in my Dx8 game. I came up with a different way to generate the bitmap in order to eliminate the problems with texture coords. I use Dx8 DrawText to render to an A8R8G8B8 texture. I render my char list one at a time and store the coordinates using the DT_CALCRECT flag for the calculation. This method also allows you to generate any font you want at run-time. Just something else to consider :)

Good luck.
-Mike

Share this post


Link to post
Share on other sites

This topic is 4370 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