Custom font for Draw String

[Mlok]

Hi, I'm trying to make a 32 bit custom Draw String font by editing an image of DejaVu font. Everything seemed well, but now here is a minor flaw.. the Draw String just dont display it. I tried several tricks, like decreasing number of charcters in the header to avoid possible overflow of the image width in case of a mistake in character widths in header.. but nothing helped.
Any ideas what I'm doing wrong? :(

This is the font file (1259x21 px):

And this is the code:

Code: Select all

#include "fbpng.bi"
#include "fbgfx.bi"

Dim As any Ptr font
Dim As Integer x

ScreenRes 800,600,32
Paint (0,0),RGB(192,192,216)
font = png_load("DejaVu20.png",PNG_TARGET_FBNEW)
Draw String (10, 40), "DejaVu",, font, alpha
Put (1,1),font, alpha

ImageDestroy font
sleep
end

The font should have 135 characters.

[anonymous1337]

You need a font header. FBgfx has to know the width of each and every character, as well as what character range you support.

FBgfx Font Tut

Code: Select all

  '' Create a font buffer large enough to hold 96 characters, with widths of 8.
  '' Remember to make our buffer one height larger than the font itself.
Dim As FB.Image Ptr myFont = ImageCreate( ( NumChar * 8 ), 8 + 1 )
  '' Our font header information.
  '' Cast to uByte ptr for safety and consistency, remember.
Dim As UByte Ptr myHeader = Cast(UByte Ptr, myFont )

  '' Assign font buffer header.
  '' Header version
myHeader[0] = 0
  '' First supported character
myHeader[1] = FirstChar
  '' Last supported character
myHeader[2] = LastChar

  '' Assign the widths of each character in the font.
For DoVar As Integer = 0 To NumChar - 1
    '' Skip the header, if you recall
  myHeader[3 + DoVar] = fontWidth
Next

A font buffer also won't work with FBgfx I don't think unless you skip the first row (where the header information is stored).

[Mlok]

The header should be alredy in the file. see that line of pixels at the top? Each of those pixels in the first row determine 4 bytes of header (as the image is 32 bit) ..up to 138th byte, as the size of the header should be 3 bytes (0, starting charceter, ending character) + ending character - starting character.

[Mlok]

For example, the corner pixel has the ARGB value of (0,32,167,6)
-> 0 for draw string version
-> 32 as the first character in the font is the space
-> 167 as there are 135 characters in the font
-> 6 is the width of the first character (space, in this case)
..I thought this is how it works?

[Mlok]

While your tutorial is very nice, anonymous1337, I believe this is slightly different approach. I would like to have a pre-prepared font in a PNG file, which can be just loaded and used as a Draw String font immediatley. That sounds to me like a useful a nd handy thing, and I believe it is perfectly possible.. right?

[MichaelW]

On my system png_load is failing (returning null), and Draw String appears to be using the standard font.

[anonymous1337]

That sounds to me like a useful a nd handy thing, and I believe it is perfectly possible.. right?

I would imagine that it is. I can't really track down what problems are occurring though. I'd try printing the data from the header once you load your PNG.

[yetifoot]

Hi, the problem looks to be that when you created the header, you put the data in as uintegers, instead of by bytes, and got the order the wrong way around.

This program should show this, look where it prints out p[0], p[1], p[2], p[3], they are in the wrong order.

I did some quick hacky code to reverse them, and it almost looks ok.

Code: Select all

#include "fbpng.bi"
#include "fbgfx.bi"

screenres 640, 480, 32

dim as fb.image ptr font = png_load( "dejavu20uf1.png", PNG_TARGET_FBNEW )

dim as ubyte ptr p = cast( ubyte ptr, font ) + sizeof( fb.image )

print p[0]
print p[1]
print p[2]
print p[3]

p[0] = 0
p[1] = 32
p[2] = 166
p[3] = 6

p = @p[4]

for i as integer = 0 to (166 - 32) \ 4
	asm
		mov ecx, dword ptr [p]
		mov eax, [ecx]
		bswap eax
		mov [ecx], eax
	end asm
	p += 4
next i

sleep

draw string ( 0, 200 ), "WORLD HELLO", , font

sleep

[Mlok]

Oh.. thank you lotsa much, yetifoot.
You're right, I've put the data in as uintegers.. I don't really know how it happened that the bytes inside those integers seems to be in completely reversed order.. :-o If I understand the problem correctly, that is.
I probably mixed up those damn RGBA/ARGB/GRRR.. formats or something, I'll look into it. Thanks again.

With your hack, some light background and Alpha method, it works! There seems to be some minor spacing imperfections, but that will be a piece of cake, once it works :)

MichaelW: Hmm.. Maybe that is because that hosting service renamed the file a bit? Sorry about that, I didn't knew about it.[/code]

[notthecheatr]

I wrote a library for that... it isn't compatible with the Draw String font, but it's a pretty complete font library... you might try it out: http://www.freebasic.net/forum/viewtopic.php?t=9423

[Mlok]

Thanks, notthecheatr, I'll check that out.
But after all this, I'm going to finish this the Draw String way.. so I'll probably appreciate your library later.

Anyway, I do have the correct PNG now.. I will edit it a bit more, to get rid of several artifacts and spacing problems. Then I'm going to upload it somewhere, as I believe such a quick and simple font may be useful for more people. I'll probably arrange a smaller version too, this size is more for headlines etc.

[dani.user]

I've noticed you are using a variable width font. This will be problematic or?

[Mlok]

Uh.. what exactly is to be problematic?

[notthecheatr]

Nothing, actually. The Draw String custom font header allows for variable-width.

[dani.user]

Nothing, actually. The Draw String custom font header allows for variable-width.

:) Didn't know that