Scaleable Text Using Bitmap Font Control
by David Laurie · 04/27/2005 (9:35 am) · 17 comments
Download Code File
I've been pondering for a while on how I could make my GUIs scale up and down for different resolutions, yet always maintain the same proportions. I don't want to mess about with torque's entire gui renderer to reorganize it exactly how I want it, so for now I've come up with a pretty decent solution: Bitmap Fonts.
Instead of using torque's font system, the control loads the font from the bitmap you give it. (see image)
There's a utility which can make such images, and it can be found at www.lmnopc.com/bitmapfontbuilder/.
The control can scale the text so that a specified number of lines will fit in vertically, which will make it scale like so. (Compares 640x480 with 1280x1024, with 640 resized up using nearest pixel filtering)
Alternately you can play with the parameters:
size - Size in pixels of each character, if nonzero
scale - If size is zero, and this is nonzero, this is the number of character lines that will be made to fit into the control vertically
wrapping - Whether we wrap text or just let it disappear off the control
charspacing - Distance between the left of two adjacent characters is size * charspacing
charaspect - Width of each character is size * charaspect
The above information is also commented in the code itself. (in initPersistFields definiton)
To round up - it's not a perfect solution, but it should be a good base for anything you want to do with it, and enjoy. I plan to make this into or merge it with a bitmap button control.
I've been pondering for a while on how I could make my GUIs scale up and down for different resolutions, yet always maintain the same proportions. I don't want to mess about with torque's entire gui renderer to reorganize it exactly how I want it, so for now I've come up with a pretty decent solution: Bitmap Fonts.
Instead of using torque's font system, the control loads the font from the bitmap you give it. (see image)
There's a utility which can make such images, and it can be found at www.lmnopc.com/bitmapfontbuilder/.
The control can scale the text so that a specified number of lines will fit in vertically, which will make it scale like so. (Compares 640x480 with 1280x1024, with 640 resized up using nearest pixel filtering)
Alternately you can play with the parameters:
size - Size in pixels of each character, if nonzero
scale - If size is zero, and this is nonzero, this is the number of character lines that will be made to fit into the control vertically
wrapping - Whether we wrap text or just let it disappear off the control
charspacing - Distance between the left of two adjacent characters is size * charspacing
charaspect - Width of each character is size * charaspect
The above information is also commented in the code itself. (in initPersistFields definiton)
To round up - it's not a perfect solution, but it should be a good base for anything you want to do with it, and enjoy. I plan to make this into or merge it with a bitmap button control.
About the author
#2
04/27/2005 (11:08 am)
Cool, you got it working :) Nicely done.
#4
Anyway, useful stuff.
04/28/2005 (7:43 am)
Whats wrong with just fixing the scaling support into the torque fonts? Those are bitmap fonts too (just paged into PNG files).Anyway, useful stuff.
#5
@Phil
I forget exactly why, but I looked through the font code and decided it would be way too hard to make them scaleable. I could've been looking in the wrong place though, maybe it would've worked to change the font size in all the gui profiles.
04/28/2005 (9:40 am)
*fixed*@Phil
I forget exactly why, but I looked through the font code and decided it would be way too hard to make them scaleable. I could've been looking in the wrong place though, maybe it would've worked to change the font size in all the gui profiles.
#6
04/30/2005 (2:26 am)
I clicked on the linked for the font builder and Nortons went nuts. It started with a version of the bloodhound virus and then went to several different types of trojans. was just wondering if anyone else had this problem or if it is just me. Also when clicking the link it said page could not be displayed so i tried the home page and thats when all the fun started. Just thought I would bring this to everyones attention. I love the idea of the bitmap fonts makes things a lot easier for me.
#7
05/06/2005 (8:28 am)
Doesn't scaling the fonts as you do cause a lot of artifacts? Note the artifacts on the left version of your sample image.
#8
05/06/2005 (8:41 am)
That artifact is caused because the underscore above the o on the source image is a bit too near the bottom edge of its tile. Putting a one-pixel border around each character on the image would fix the problem - that could be done by making the font smaller and hoping, or by manually editing the image.
#9
I've also done some work on this problem and have a solution that just needs more testing. It will probably work its way into ThinkTanks but might eventually find it's way into Torque. What I do is change the projection matrix so that the gui system always thinks it is rendering to some virtual canvas size. Then I change the font code to select a scaled version of the font (a different font size) so that in the end the font bitmap is drawn to the screen with no stretching. The changes amount to tiny tweaks throughout the engine (input, window, gui, dgl). Debugging amounted to tracking down a bunch of off by one and rounding errors. This solution also gives the app control over how displays which are not 4:3 are dealt with. E.g., my desktop res is 1920x1200, so in ThinkTanks the shell is letterboxed s.t. the display area is 4:3 so the shell can be scaled appropriately, but in the game I get my desktop aspect ratio with an adjusted fov.
Anyway, sorry for hijacking your resource thread. But I just wanted to point out that the problem isn't as simple as this. I wish it were.
05/06/2005 (9:11 am)
No, I'm looking at the other left. :) I'm looking at the Q, in particular. The only way you are going to get rid of that is by choosing a different version of the font bitmap depending on what resolution you are drawing to (double the resolution, double the font size, increase the resolution by 50%, better hope your font has an even number of pixels). Scaling fonts directly like you do will always cause aliasing artifacts. If you can live with the artifacts, though, then you are golden.I've also done some work on this problem and have a solution that just needs more testing. It will probably work its way into ThinkTanks but might eventually find it's way into Torque. What I do is change the projection matrix so that the gui system always thinks it is rendering to some virtual canvas size. Then I change the font code to select a scaled version of the font (a different font size) so that in the end the font bitmap is drawn to the screen with no stretching. The changes amount to tiny tweaks throughout the engine (input, window, gui, dgl). Debugging amounted to tracking down a bunch of off by one and rounding errors. This solution also gives the app control over how displays which are not 4:3 are dealt with. E.g., my desktop res is 1920x1200, so in ThinkTanks the shell is letterboxed s.t. the display area is 4:3 so the shell can be scaled appropriately, but in the game I get my desktop aspect ratio with an adjusted fov.
Anyway, sorry for hijacking your resource thread. But I just wanted to point out that the problem isn't as simple as this. I wish it were.
#10
The comparison indicates another minor flaw in my code - 1280x1024 is a slightly different aspect ratio to 640x480, meaning the text appears slightly wider on the right hand side. That would be simple to remedy though.
I'm interested in your solution though, it's more where I wanted to be heading. My ideal would be to let the user specify the actual aspect ratio of their display. Then I'd have a virtual screen as far as scripting was concerned, which would match the aspect that the user specified, but the width would never be less than 640 and the height would never be less than 480 - eg a square would be 640x640, while 16:9 would be 853x480. That way I could design a ui that fitted together nicely at 640x480, but whose components would pull apart either horizontally or vertically as needed for different display aspect ratios.
Or the other alternative would be to keep the ui at 640x480, centred and scaled to fit completely inside the display area, leaving blank/background edges around the outside.
05/06/2005 (9:32 am)
But the Quit button is torques existing font code, and the left side is a portion of the 640x480 screenshot, scaled up with no filtering to match the dimensions of the 1280x1024.The comparison indicates another minor flaw in my code - 1280x1024 is a slightly different aspect ratio to 640x480, meaning the text appears slightly wider on the right hand side. That would be simple to remedy though.
I'm interested in your solution though, it's more where I wanted to be heading. My ideal would be to let the user specify the actual aspect ratio of their display. Then I'd have a virtual screen as far as scripting was concerned, which would match the aspect that the user specified, but the width would never be less than 640 and the height would never be less than 480 - eg a square would be 640x640, while 16:9 would be 853x480. That way I could design a ui that fitted together nicely at 640x480, but whose components would pull apart either horizontally or vertically as needed for different display aspect ratios.
Or the other alternative would be to keep the ui at 640x480, centred and scaled to fit completely inside the display area, leaving blank/background edges around the outside.
#11
05/06/2005 (10:56 am)
Heh, ok my bad. I guess that's probably the jpeg image compression. But you will see artifacts that look a lot like that when you stretch the text. 
#12
Also - I installed the bitmap font generator and it passed through my virus scanner just fine, in case anyone was wondering due to one of the comments above.
05/25/2005 (5:54 am)
So I have been trying this out for a couple days now and a problem I see is that every character takes up the same amount of space, so you end up with the letters looking oddly spaced in the words. Is there a solution o this? Playing with the spacing factor helps a little, but it seems to just push the problem around.Also - I installed the bitmap font generator and it passed through my virus scanner just fine, in case anyone was wondering due to one of the comments above.
#14
05/30/2007 (6:05 pm)
Excellent work ! :) You did exactly wath I was going to do. Thx for the saved time ! 
#15
05/04/2008 (9:53 pm)
where can i paste this "guiBitmapTextCtrl.cc" file in TGB installation folder?
#16
01/13/2009 (12:01 am)
is this control compatible with TGB 1.7? 
#17
Just one thing, in the file guiBitmapTextCtrl.cc I think the line
#include "gui/guiTextCtrl.h"
should be:
#include "gui/controls/guiTextCtrl.h"
for that is the correct path for the file, if I am not mistaken.
03/27/2009 (3:05 pm)
I have not tested yet, but it sounds very good.Just one thing, in the file guiBitmapTextCtrl.cc I think the line
#include "gui/guiTextCtrl.h"
should be:
#include "gui/controls/guiTextCtrl.h"
for that is the correct path for the file, if I am not mistaken.
Torque 3D Owner Brandon Maness
B--