Image fonts are distorted?

BlitzMax Forums/BlitzMax Programming/Image fonts are distorted?

JoshK(Posted 2010) [#1]
I thought it would be easy to match the text Windows uses for its GUI, but it's turning out to be very hard. I have smoothing and blending enabled, and that is working. However, the image fonts do not resemble their "real" counterparts. I am trying to load segoeui, and the font is displayed wide and short, compared to what it is supposed to look like. Any tips on this? Why is this happening?


ziggy(Posted 2010) [#2]
Becouse BlitzMax does not use ClearType technology to draw fonts on the graphical contexts. I'm afraid there's not much you can do...


JoshK(Posted 2010) [#3]
I'm talking about the dimensions of the text. The Blitz version is wide and short. It's obviously distorted.


ziggy(Posted 2010) [#4]
It is also the same. Blitzmax string rendering is not using a grid fit for text and this changes proportions. You can pre-render system fonts using the fontmachine editor if you are in a hurry. It supports cleartype and antialias properly.


JoshK(Posted 2010) [#5]
Thanks, that sounds like just what I need.

Last edited 2010


JoshK(Posted 2010) [#6]
Why does SegoeUI 12 pt with cleartype look like this?:



Last edited 2010


ziggy(Posted 2010) [#7]
Enable alpha blending and export it over white background. Clear type is calculated also using the background color where it is rendered (not transparent).


ziggy(Posted 2010) [#8]
Also disable border and shadow in the renderer

EDIT: FontMachine clear type renderer is assuming a black background for internal interpoloation. I'm changing this right now, give me 5 minutes and I'll send you a fixed version (Please, send me an email so I can send you a fixed version)

Last edited 2010


ziggy(Posted 2010) [#9]
It will take a bit more than I first tought, as it is not possible to render alphablended characters with ClearType. Nothing that can really be done here... I'm sorry.


JoshK(Posted 2010) [#10]
Why would you use a black background for clear type rendering?


ziggy(Posted 2010) [#11]
The think is that I'm using a transparent background and the Windows API treats transparent pixels as black pixels. That's the problem. The only way to solve it is by providing a solid background BUT then ther's the problem with characters overlapping their backgrounds, wich looks nasty too. I can send you a Segoe font renderer with white background and if you modify the fontmachine module to add a maskcolor of 255,255,255 it'll look properly. That's the only solution I can think of now...


JoshK(Posted 2010) [#12]
I need to get this done, so I would definitely appreciate that.


ziggy(Posted 2010) [#13]
Send me an email and I'll reply with the font buit on white background


ziggy(Posted 2010) [#14]
You can update your fontmachine module with the latest one (I've just uploaded it). The new version allow to set a maskcolor before loading a font.
before loading the font set:
font.MaskColorRed = 255
font.MaskColorGreen = 255
font.MaskColorBlue = 255
Font.UseMask = True

Whenever I get an email from you, I'll send you the font. I've tested it and it works.


JoshK(Posted 2010) [#15]
Regarding the original issue of fonts being distorted:

I spent a few days implementing FreeType 2, the same library BlitzMax uses. Here are my results, compared to Paint Shop Pro text, which was added to the image, and BlitzMax. Leadwerks and Paint Shop Pro match perfectly, and BlitzMax text is very clearly different:


All of these use Tahoma, size 11.

Take a look at this tutorial:
http://www.freetype.org/freetype2/docs/tutorial/step2.html



I used 96 for the DPI settings and that seemed to produce correct results. Clear Type is also apparently supported by FreeType, but I have not got it working yet.

Last edited 2010


TaskMaster(Posted 2010) [#16]
It probably has to do with the way BlitzMax handles graphics internally. If an image is not a power of 2, BlitzMax converts it to one, but then draws the image too small. I don't know the specifics of the problem, as I have never researched it enough to figure out exactly what the problem is. But, i always use images with a power of 2 size with BlitzMax to avoid the problem or draw them the correct size myself using DrawSubImageRect. I had my own version of DrawSubImageRect before it was added a few versions ago.

When the font is broke down into its parts, BlitzMax is probably creating a bunch of TImages for the font (one for each letter/number), and it is resizing them all to a power of 2 size.

I had a couple of threads here about it a long time ago. One when I discovered it, and another when I asked Mark why it worked that way. He had and explanation, having something to do with how it solved some complicated issues.

If you force the library to use power of 2 sizes instead of letting BlitzMax scale them, it will probably solve the problem.

Last edited 2010


beanage(Posted 2010) [#17]
Josh - could you please publish your Freetype code?

[edit:]Oh well, its cpp right?

Last edited 2010


JoshK(Posted 2010) [#18]
This is the important part, that tells you the x and y offset to draw the letters at:
charpos[c].x = face->glyph->metrics.horiBearingX/64;
charpos[c].y = face->glyph->metrics.horiBearingY/64;
charsize[c].x = face->glyph->bitmap.width;
charsize[c].y = face->glyph->bitmap.rows;
charspacing[c] = face->glyph->metrics.horiAdvance/64.0;


JoshK(Posted 2010) [#19]
The BLide font machine module is very good, and will do what you need without any hassle. Internally, it works the same as the BMX font commands.