Hi everyone,

I've used D3DXCreateFont() to create a font, and then I use this font to write stuff using DrawText(). When I create the font, I scale the size of the characters to ensure that they don't take up more space on smaller resolutions, etc... (i.e. something like: textSize = baseSize*SCREEN_WIDTH/baseWidth), and it seems to work for character size, but the spacing between the characters doesn't seem to comply, i.e. there is a larger physical spacing between characters for lower screen resolutions. Is there a way to change the character spacing for D3DXfonts, or am I stuck?

Failing that, is there a better way to ensure that my text/overlays are always taking up the same fraction of the screen, regardless of resolution? I've run into this problem when I draw sprites and images on the screen too - I always want my HUD overlays to take up the same fraction of the screen regardless of resolution, but if my HUD consists of, say a 300x300 image, then if my back buffer size is 640x480, the HUD will take up a larger proportion of the screen than if it's 1366x768. At the moment I am scaling the overlays by taking a ratio of the image size to the screen resolution, but maybe there's a better way...

Anyway, thanks!

Welcome to the club

There's a reason why most of even AAA games have their HUD in one [lower] resolution and as you raise the resolution, the HUD becomes smaller and smaller untill you can't even read it.

The amount of work needed to make UI look equally good across all resolutions is just not worth it.

That's not to say you could not do it yourself - but wouldn't it be much wiser to spend the same effort on improving the gameplay/engine/features/levels than this ?

I can't really speak for D3DXCreateFont, since I found it way too limited and slow and just rolled out my own font rendering routines that handle spacing correctly.

But if you plan on spending some time on creation of your own font routine, I suggest you look into kerning. That should keep you busy for a while

Hey - at the moment, I've managed to get a decent looking HUD across most resolutions - I'm using sprites to hold the images/overlays and simply scaling them as follows (in this example SCREEN_WIDTH is the x resolution and IMAGE_WIDTH is the width of the image that I'm using for this part of the HUD):

//I have a particular image which I always want to take up 1/5 of the screen in the x direction regardless of resolution
float sizeFraction = SCREEN_WIDTH/5.0f;
float imageScaleX = sizeFraction/IMAGE_WIDTH;

Now I know the scale factor by which I have to multiply the size of my HUD image in order to get it to fill a chosen fraction of the screen size, ensuring a consistent layout across all resolutions. I use the same principle for choosing my text size when I create my fonts, but there isn't a way to set the spacing, which is where my problem comes in!

The program I'm working on now is a flight simulator (it simulates the Moon landing) and the one thing that you need in this case is a good readout of your velocity, altitude, fuel, VSI, etc... so yes, it's quite an important aspect of the game! The simple scaling routine above didn't take too much time to implement, and it can easily be rolled into a function to easily return the correct scale factors in both the x and y directions. It also means that you can set up the HUD at one resolution, and you can then take a simple ratio of the current resolution against the base resolution in order to find the scale factor too.

The text spacing only really becomes apparent at resolutions below 640x480, so for the time being, I guess it's good enough for my needs. I haven't noticed a speed issue with DrawText yet either, so I will probably stick with it for the time being!

I can imagine this scaling method to give sort-of satisfactory results for a certain visual style of UI, bitmaps of which, don't contain high-frequency details.

Without screenshots it is impossible to gauge that, though.

What I don't get, why would you even care for sub 640x480 resolutions ? We've abandoned those about 20 yrs ago !

Even today's phones run at fullHD, and tablets crossed FullHD many years ago.

So ?

Good question - I'd personally never run a game below 1024x768 on my laptop now - this one in particular looks terrible if I run it at anything below 800x600, but I guess it's a problem that I might aswell solve if it's there! My game's startup works by allowing the user to choose a resolution to play at, and 640x480 is gonna be there on every list, so why not at least try to make it work? If it's not easily possible, then I'll not lose any sleep over it, but if there's a simple way to control the character spacing then it would ensure good fitting across not just the lower resolutions, but the higher ones too.

Here are two screens showing it at 1366x768 and 800x600 - the HUD fits to the screen, but you can see that the text starts to overlap due to the spacing at low resolution:

1366x768:

[attachment=14795:hires.jpg]

800x600:

[attachment=14796:lores.jpg]

Heh, I can't really see any overlap there, so I'm not sure what the problem is ? Can you post the 640x480 screenshot ?

Frankly, if it takes you longer than an hour to fix the 640x480 thing via any other means, just forget about it. This is certainly not something you should try to work around by reimplementing the text drawing routine - that's just too much work for too little benefit.

I understand it sucks, but hey something's gotta give...

I presume the D3DX font thing does not allow to set the spacing between characters at all ?

The overlap's there on the second screenshot - the bottom left lines of yellow text. Compare the two screens and you can see that the lines of text are creeping together. It's even worse on 640x480. Yeah, like you say - if a user was going to play this in 640x480 then the overlapping text would probably be the least of their concerns! On my widescreen laptop, 640x480 is so pixellated it's barely playable.

No, I can't see an option in either D3DXCreateFont or DrawText to set character spacing - only font size.

Thanks for the help!

I think my code takes that into account - I scale the x and y position of the text based on resolution too. This, along with character size, would probably sort that out if the spacing could be controlled.