Bitmap Fonts

Scouser

I am currently using a bitmap font but I want to create my own with added shadows or stroke outlines etc. Having looked at the text file I think I understand how most of it works but am a bit confused by the last line of the character glyph data.

char,	Glyph character number
xoffset, yoffset,	u, v coordinates of the glyph within the texture
width, height,	actual size of the glyph
xspacer,	spacing added to width to draw next glyph ??
baseline,	offset added to y position to draw base of glyph ??
????????,	unknown
0	unknown

What does the ?????? do. It appears to be a multiple of 64 but I don't know what it's used for.

Any help would be greatly appreciated.

Scouser

@atilim: @gorkem: Anybody else have this info??

atilim

@Scouser sorry for late reply. The format is:

char,
xoffset, yoffset
width, height,
bearingX, bearingY,
horiAdvance, vertAdvance

Your guess of char, xoffset, yoffset, width and height is correct. The values bearing and advance are described here more clearly: http://www.freetype.org/freetype2/docs/tutorial/step2.html And horiAdvance/vertAdvance are multiple of 64 and vertAdvance is always 0 in our case.

On the other hand, the texture loaded by Font class is transformed internally. Therefore you won't get the result you want.

In this case, using a TexturePack would be equally efficient. There is a project here https://github.com/gideros/bmfont that allows you to use BMFonts in Gideros. Most probably this project solve all your problems.

techdojo

I actually "rolled my own" basic font routine by just using the texture packer tool to create a single page from a list of single images (one per character), I added "word wrapping" functionality by checking the width of individual words (by splitting the string where ever a space appeared).

The only issue I had was that I'd already reserved space around each character in photoshop to add a drop shadow and a stroke however this was easily fixed by just storing a constant "kerning" value with each font which was subtracted from the width of each character to compensate.

The only reason I went this route was because I already had the font split into individual characters, if I was going to do it again in the future I'd probably use the BMFont library as the BMFont tool is really easy to use and works well.

Scouser

@atilim: thanks for the reply. After playing around some more I found I couldn't do what I wanted with the bitmap fonts anyway so I'll try the BMFont library, see if that does what I want.

OZApps

... sorry, should have looked at the link for bmfont on github...

Scouser

I opted for BMFonts in the end but I also added a quick and dirty setTextColor function.

local mf = math.modf function BMTextField:setTextColor(col) local r,g,b,_ r, _ = mf(col / 65536) g, _ = mf(col / 256) _, g = mf(g/256) _, b = mf(col/256)   self:setColorTransform(r/256, g, b, 1) end

* Edited to make change suggested by @atilim *

atilim

@Scouser love your implementation without bitwise operations.
(Also, I can recommend adding _ to the local variable list as r,g,b,_)

Scouser

@atilim: Glad you like it. I have also edited my previous post to apply the suggested change and changed math.modf to a local.

techdojo

He (@Scouser) always was a clever git when it came to all that bit twiddling stuff, something to do with the Z80 he had implanted in his skull many years ago (and I'm not talking about the time his wife hit him over the head with a 48k Spectrum either!)

OZApps

@Atilim, did you know that you can also use the string and tonumber function to convert numbers in lua?

num = 0xf00d00
print(tonumber("0x" .. num))

atilim

@techdojo

@OZApps aha! great trick

local col = 0x102040   local hex = string.format("%08x", col) local r = tonumber("0x"..hex:sub(-6, -5)) / 256 local g = tonumber("0x"..hex:sub(-4, -3)) / 256 local b = tonumber("0x"..hex:sub(-2, -1)) / 256   print(r, g, b)

Edit: But most probably @Scouser's implementation is far more efficient.

Scouser

@atilim: I have to agree. The conversion to strings and then back to numbers is probably slightly less efficient

OZApps

@Atilim, it was not about efficiency. It was just about an alternative and fun way to do things.

In terms of bytecode, yes the math works as

getupval --mf div --col/65536 call --call the function math.modf move --save the value in r move --save the value in _

for the code

r, _ = mf(col / 65536)

and with the string method it is slightly longer

getglobal --String gettable --format loadk --%08x getglobal --col call --call the function

for the code

local hex = string.format("%08x", col)

then

getglobal --tonumber loadk --0x self --self:sub loadk -- -6 loadk -- -5 call --call the function self:sub concat -- concat this to 0x call --call the function tonumber div --256

for the line of code

local r = tonumber("0x"..hex:sub(-6, -5)) / 256

Just a quick question, why would you use the RightToLeft sub strings? I would use them as Left to Right

string.sub(numStr,1,2) string.sub(numStr,3,4) string.sub(numStr,5,6)

or

numStr:sub(1,2) numStr:sub(3,4) numStr:sub(5,6)

atilim

Right to left because if the resulting hex string is more than 8 characters, then the result would be shifted and wrong.