Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Bitmap Fonts — Gideros Forum

Bitmap Fonts

ScouserScouser Guru
edited April 2012 in General questions
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
0unknown
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.

Likes: fxone

+1 -1 (+1 / -0 )Share on Facebook

Comments

  • atilimatilim Maintainer
    edited 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.
  • 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.
    WhiteTree Games - Home, home on the web, where the bits and bytes they do play!
    #MakeABetterGame! "Never give up, Never NEVER give up!" - Winston Churchill
  • @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.
  • OZAppsOZApps Guru
    edited April 2012
    ... sorry, should have looked at the link for bmfont on github...
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • ScouserScouser Guru
    edited 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 *

    Likes: atilim

    +1 -1 (+1 / -0 )Share on Facebook
  • atilimatilim Maintainer
    @Scouser love your implementation without bitwise operations. :)
    (Also, I can recommend adding _ to the local variable list as r,g,b,_)
  • ScouserScouser Guru
    edited 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.
  • 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!) :)

    Likes: gorkem, atilim

    WhiteTree Games - Home, home on the web, where the bits and bytes they do play!
    #MakeABetterGame! "Never give up, Never NEVER give up!" - Winston Churchill
    +1 -1 (+2 / -0 )Share on Facebook
  • @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))
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • atilimatilim Maintainer
    edited April 2012
    @techdojo :D

    @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.
  • @atilim: I have to agree. The conversion to strings and then back to numbers is probably slightly less efficient :D
  • @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)
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • atilimatilim Maintainer
    Right to left because if the resulting hex string is more than 8 characters, then the result would be shifted and wrong.
Sign In or Register to comment.