Problem with BM Font (Glyph Designer) & automatic scalling

Tom2012 · October 2012

Hello again,

I can get all of my game working in retina resolution except for bmfont. I've created the @2x image and have the @2x .fnt file (created in Glyph Designer) but when testing the text is not correct.

Has anyone got any experience with retina and bmfont please?

Tom2012 · October 2012

As an update - I just bought BMGlyph for the Mac (on Mac store) $9.99 and it creates the hd versions for you and does work in both resolutions. Would still like to hear from anyone using GlyphDesigner though.

Unknown · October 2012

Hi this is Mike of 71squared. If you can drop an email to support@71squared.com with the problems your seeing we can take a look.

Mike

moopf · October 2012

Hi @Miked, I use GlyphDesigner as well but have had to drop it for an alternative for the time being.

The problem is that the @2x version of the font I create doesn't display correctly, basically it's showing incorrect areas of the texture for each character. I think I know why - Gideros uses the standard version of the image to work out sizing for higher res imagery, so it will expect a 128 x 128 at sd, to be 256 x 256 at hd. But that's not how GlyphDesigner works, the textures are completely different if you export the font at different sizes (texture dimensions are different and glyphs will not be in the same places either)

I've been trying bmGlyph from the mac app store and this outputs all the different resolution versions as the same image, rescaled - so the glyphs are all in the same place and the actual texture dimensions relate to each other correctly. That's why that one works.

Hope that helps. If you need any more info just let me know.

hnim · October 2012

i think that @2x.fnt version is not be loaded. If i scale image font up to 2x and dont use @2x.fnt, it display correctly. So i guess, if you want to use high resolution image, you need split each character into single image, then put they on scale version in same position.

moopf · October 2012

i think that @2x.fnt version is not be loaded. If i scale image font up to 2x and dont use @2x.fnt, it display correctly.

Not sure that's the case, unless Gideros is not loading the higher res version because it's got different dimensions that don't relate to the SD version. If I use bmGlyph everything displays as it should in higher and lower resolutions and it's the same code in Gideros - just the .fnt and .png are different.

hnim · October 2012

i didnt use bmGlyph, but i think it works like ShoeBox. 2 fnt version use same data style, in hd version, it simple multiple all values to scale ratio.

moopf · October 2012

Bingo, I think you're right actually. Going to try something now.

moopf · October 2012

Right, it's a combination of the two as it turns out - I can get it to read the right fnt file in depending on the scaling of the app but, unfortuantely, Gideros is still scaling the higher resolution image according to the dimensions of the sd image. So, the way around it is to pad the higher resolution image so it does match the same dimensions and make a change to BMFont to scale when picking texture regions for the glyphs. I'll try and post something here later with more detail.

It's wasteful on texture memory but it works.

moopf · October 2012

OK, here goes. I've attached an updated version of BMFont which includes an additional variable on the call to BMFont to include a scaling value.

Use this to call BMFont:

<pre>
local sc = math.floor(application:getLogicalScaleX())
local ext = ""
if sc == 0 then
	sc = 1
end
if sc == 2 then
	ext = "<a href="http://forum.gideros.rocks/profile/2x%26quot" rel="nofollow">@2x&quot</a>;
end
if sc == 4 then
	ext = "<a href="http://forum.gideros.rocks/profile/4x%26quot" rel="nofollow">@4x&quot</a>;
end
smallfont = BMFont.new("fonts/small"..ext..".fnt", "fonts/small.png",true,sc)

This basically gets the current X scale to determine which .fnt file to load - you may need to alter the logic here depending on your app and your scaling mode, this is just an example.

It then calls BMFont, including the extension in the .fnt filename and adding the scaling amount, sc, to the call. The sc addition is then used when creating the text to display to scale all the values from the .fnt file.

In order for this to work correctly, dimensions of font images *must* be related, e.g. if your sd image is 256 x 128, your hd image must be 512 x 256 and super hd 1024 x 512, for example. This is because Gideros uses the sd version to determine the scaling on higher resolution images - see my thread about that here: http://www.giderosmobile.com/forum/discussion/1906/how-gideros-processes-higher-resolution-images#Item_1

If all that's in order you can use GlyphDesigner to create your fonts and get the higher resolution ones showing correctly.

NOTE: This is rough and ready, so there may be problems, there may not be. Caveat Emptor!

hnim · October 2012

*agree with moopf*

moopf · October 2012

There's no need to add the ext part into the image variable of the BMFont call, Gideros does this automatically when BMFont loads the texture, based on your project properties so it will automatically load in the higher res version already. Also I'm not keen on messing with scaling as a setup thing unless you absolutely need to, as this can then interfere with other scaling you might want to do, e.g. tweening the scale of the BMTextField object up and down as an effect etc.

atilim · October 2012

I haven't read the entire thread yet but here is some more information: http://www.giderosmobile.com/forum/discussion/comment/12479#Comment_12479 (I have used GlyphDesigner in that thread)

moopf · October 2012

Hi @atilim, I posted a solution above that works above that doesn't need you to scale the BMTextField nor modify the glyph data

atilim · October 2012

Here I can't understand one point: Are you creating the both resolutions with GlyphDesigner or creating only the high resolution and downscale to get the low resolution one?

moopf · October 2012

Hi @atilim - I'm creating both (or all three) in GlyphDesigner and just ensuring that each one is a fixed size which you can do in the app. So if the sd version is 128 x 128, I make sure that the hd version is 256 x 256 and a super-hd 512 x 512. That way the way Gideros scales higher res artwork based on the sd artwork doesn't mess up the reading and rendering of the glyphs. Does that make it any clearer?

atilim · October 2012

I understand now. But doesn't GlyphDesigner change the order of glyphs when you create different resolution bitmap fonts?

atilim · October 2012

oh you've already said this: " (texture dimensions are different and glyphs will not be in the same places either)" I think this is the main problem (and not the problem of GlyphDesigner) at the first place.

still confused :-/

moopf · October 2012

@atilim It doesn't matter if the glyphs are in different places using this method at all, as the change I've made to BMFont uses the right .fnt file with the glyph positions for the right resolution png file and then internally scales the glyph positions to fit in with the logical scaling you do in Gideros.

Would it help if I uploaded a full project example?

atilim · October 2012

aha! I understand now

I've just missed the point that you're also scaling the glyph positions.
no need to upload the full project. thanks.

moopf · October 2012

@atilim - Great, it's actually pretty simple. Although it did lead me to start another thread today about the basics of why Gideros uses the sd image at all when working out higher resolution scaling. If you could take a look when you have a moment and explain it a little, I'd appreciate it. Thread is here:

http://www.giderosmobile.com/forum/discussion/1906/how-gideros-processes-higher-resolution-images#Item_2

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Problem with BM Font (Glyph Designer) & automatic scalling

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Problem with BM Font (Glyph Designer) & automatic scalling

Comments