Need help. 2D Text with transparency, without using ID3DXFont

Started by
12 comments, last by umbo 8 years, 6 months ago

With the premise that tessellation doesn't scare me... if ID3DXFont *really* uses textures, then it means it can be done, and it can be done fast.
And so it means that I want to do it as well.

If you just want to draw screen-space text, you should use GDI to draw each character into a texture, then use that as a texture atlas for drawing text. I believe this is what you originally intended, and I've also already explained how you can deal with your alpha-blending problem in my first reply.

And after investigating a bit, it seems that this is also how ID3DXFont works - it can only be used for screen-space fonts.

Done. See the attached picture below.


The top row is printed by me. The bottom row is from ID3DXFont.
The text you see is Arial, standard size (in Windows Wordpad this would be 24pt), no bold, no italic, all stock properties as enumerated by Windows.
The black shadow is because the text is printed twice. First time in Black (a255 r0 g0 b0), second time over it in Yellow (a255 r255 g255 b0) with a slight offset (1 pixel to the left, 1 to the top). The light blue background is: r127 g191 b255.
Transparency Alpha is no longer a concern. I'm just not showcasing it because it's pointless.

And now, for the problems...

Notice my characters' placement. The f and r are vertically misaligned. And my chars tend to offset to the right as the string length increases (see where my ! ended up).

Now let's speak of the offset between the black print and the yellow print. The difference is just 1 pixel for x and y. As you can see neither text is perfect.
My uppercase H shows perfect separation between Black and Yellow. ID3DXFont's H instead shows blurring.
But then look at my lowercase l (el). This time my font shows blurring, while ID3DXFont's is perfect. I believe this has to do with where the character picture ends up within the atlas texture, but it's hard to investigate because I can't replicate ID3DXFont's atlas. Might even be using multiple atlases for all I know (for example, I would if you asked me a font size 50 -- a single texture for it would be huge, whereas multiple smaller textures would more likely find a place in VRAM).

Finally, notice the extension of the f and r character glyphs to the right. My chars appear to be cut, while ID3DXFont's chars are not.
The cut (or clipping) obviously happens against the quad's boundary. Whatever ID3DXFont is doing with its characters, it isn't clipping them to the right.

However, ID3DXFont is still clipping them to the left. I can't show you this anymore, because my code has profoundly changed, but if you drawn the text using a single DrawText() call and a single textured quad to hold the whole string, you'd see how GDI extends the j glyph further to the left.

Or just launch Wordpad, pick Arial 24, write a lowercase j and observe it real good.
ID3DXFont clips the characters to the left just like my font does with the f and r to the right. We can say that not even ID3DXFont is perfect.

My main concern now is about the characters' misalignment. The smaller the size of the sampled text the stronger the misalignment becomes, on both axii. Do you know what I'm doing wrong?

Advertisement

Making progress... with weird stuff thrown in.
See the attached pic.

All params from previous pic apply. Worth remembering is that the top row is from my Font class; the bottom row is from ID3DXFont.
Notice my lowercase j glyph: it's perfect. It's not cut on the left side. ID3DXFont's *is* instead -- hehe.
The f and r glyphs also look much better, though the f still appears to be cut some at the far right, while the r can still appear slightly off on the vertical axis. See the r in the World word (but that very r is glitched. The previous r (in jfr) is not and is perfect, so I wonder if the vertical misalignment isn't being caused by something else in this specific case).

Nevermind the tiny imperfection at the right of the , (comma) glyph. I know where that's from, but I'm concentrating on getting a bigger issue solved.

I'm positive you've noticed the weird shapes plaguing a few glyphs. They appear to be a partial copy of the uppercase S [edit: on second thought, might also be a 6 (six) glyph], which I've drawn at the end of the string for comparison.

Now, you gotta believe me when I say that even if I don't draw the S glyph, those glitches still make an appearence exactly where you're seeing them. And you gotta believe me when I say that if I insert spaces in the string at every other character, like this jfr H e l l o , W o r l d ! _ _ S S, those freaking S glithes are stamped all over the place, even on glyphs that aren't being affected right now.

[edit: I uploaded a 2nd pic. Believe your own eyes]

I know what you're thinking, but no, those S-things are not on the atlas texture, I checked it. The texture is perfect. Then how can it be that an S is partially stamped like that???
And why an uppercase S, no matter the printed string, of all glyphs it could pick from? The atlas texture dimensions don't seem to make a difference, whether I use a 4096x128 texture or a 512x512 one. So I would exclude a glitch sparking from extreme texture UV coords.

First time I get something like this :-/

On a positive side, notice the correct character placement on the horizontal axis. Took me a while to figure that out. I'm so happy it works.

Also my Alpha channel appears to be slightly better than the one used by ID3DXFont. See the ! and W glyphs.

It's getting better. And better looking than ID3DXFont too.

See the pic.

Font is 'times new roman', standard size. Like before, top row is printed by my Font class, bottom row is printed by ID3DXFont.

I definitely get the whole glyph's shape, see the lowercase j character. ID3DXFont doesn't.

And my Alpha channel never looks worse than ID3DXFont's. At the very least it looks as good, and in some case better.

The texture glitch is cured. It was being caused by funny texture coordinates, offspring of a negative integer that I wasn't accounting for. The problem was exposed when I tried to render the ò and ù glyphs. They wouldn't appear on screen although the glyphs were in the texture.

My font class looks almost perfect. I still have slight misalignment issues (see the 2 and the ) glyphs). More -but minor- side effects show up if I reduce the font size. The font texture is perfect, and the glyphs are correctly aligned in it, there's no chance to mistake. I think my misalignment bugs root in some stupid thing like a +1 or a -1 somewhere. I'll get this sorted when I have more time.

It's done smile.png

All misalignment problems are solved for good. Any font, any size, any glyph, any color, any alpha -- it's always pixel-perfect.

Bye bye!

This topic is closed to new replies.

Advertisement