Bitmap Fonts

Scouser · April 2012

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 · April 2012

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

atilim · April 2012

@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 · April 2012

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 · April 2012

@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 · April 2012

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

Scouser · April 2012

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 · April 2012

@Scouser love your implementation without bitwise operations.

(Also, I can recommend adding _ to the local variable list as r,g,b,_)

Scouser · April 2012

@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 · April 2012

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 · April 2012

@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 · April 2012

@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 · April 2012

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

OZApps · April 2012

@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 · April 2012

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

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Bitmap Fonts

Comments

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

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Bitmap Fonts

Comments