Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (497)
Games in Android Showcase (114)
games submitted by our members
Games in WIP (563)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1] 2
  ignore  |  Print  
  FontPacker - Pack TrueType fonts into your game  (Read 7805 times)
0 Members and 1 Guest are viewing this topic.
Offline SHC
« Posted 2013-07-23 15:15:58 »

This is my first productive application in C#. It allows to export specific truetype font into a folder with different colors and sizes as bitmaps. Exports the selected glyphs in PNG format so that they can be used in OpenGL games. Here's the screen shot.


GitHub

SriHarshaChilakapati/FontPacker

WebSite (Downloads)

Transfer2pc.weebly.com/FontPacker.html

Using the Fonts


After you create a
.fntpack
file, you need to use it as XML. Here's the structure of the file.

The xml file starts normally with the xml declaration. Then comes the root tag
<FontPacker>
which contains the
<Font>
tag with an attribute
name
.

1  
<Font name="Microsoft Sans Serif"> ... </Font>

Then comes the
Glyph
tags in the font tag with the following attributes.

  • char      
    - The character value
  • data      
    - The Base64 encoded PNG image of that glyph
  • xadvance  
    - The pixels to move forward after drawing that glyph

Here's an example overview.

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
<?xml version="1.0" encoding="utf-8"?>
<FontPacker>
    <Font name="Microsoft Sans Serif">
        <Glyph char="A"
               data="....Base64 encoded PNG image here..."
               xadvance="33" />
        <Glyph char="B"
               data="....Base64 encoded PNG image here..."
               xadvance="30" />
    </Font>
</FontPacker>

The XML files have no indentation which is included in this sample. When using in C#, you can use the pre-made FontPack library available in the git and in binaries.

Changes


  • Added progress bar and font tester
  • Fixed the packer to give correct values for xadvance
  • Fixed the glyph width measuring algorithm
  • Supports Italic Fonts and Script fonts

Offline davedes
« Reply #1 - Posted 2013-07-23 17:50:22 »

Sounds neat -- I am working on a similar tool at the moment.

What does it export to? Any common formats like AngelCodeFont? Does it pack the bitmaps into a texture atlas?

Offline Sammidysam
« Reply #2 - Posted 2013-07-23 19:14:41 »

It looks interesting and I will test it under Mono in Linux when you post it unless it is not open source.  D;

The fact that this is written in C# is really tempting me to put some of my non-Java programs in this forum...
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline SHC
« Reply #3 - Posted 2013-07-24 01:17:44 »

@Sammidysam

Yes I'm going to make this open source. I'll git it when I had my first productive version without any glitches, probably this afternoon.

@davades

I'll use XML to describe the font the same contains the glyphs. Here's a sample XML file.

1  
2  
3  
4  
5  
6  
<FontPacker>
    <Font name="Monotype Corsiva">
        <Glyph char="a" data="...base64 encoded image data here..."/>
        ....
    </Font>
</FontPacker>

Offline SHC
« Reply #4 - Posted 2013-07-24 05:42:30 »

Now, this can export into XML and also can load them.

Offline SHC
« Reply #5 - Posted 2013-07-24 06:33:02 »

Now added the binaries. These are compatible with Mono 2 and more.

Had to write the loader for LWJGL.

Offline princec

JGO Kernel


Medals: 378
Projects: 3
Exp: 16 years


Eh? Who? What? ... Me?


« Reply #6 - Posted 2013-07-24 08:08:23 »

Does it output kerning information too?

Cas Smiley

Offline SHC
« Reply #7 - Posted 2013-07-24 08:12:13 »

@princec Can you clarify what is kerning?

Offline pjt33
« Reply #8 - Posted 2013-07-24 08:22:38 »

@princec Can you clarify what is kerning?
The separation between letters. For text to look balanced, you don't want the same advance between every pair of letters.
Offline princec

JGO Kernel


Medals: 378
Projects: 3
Exp: 16 years


Eh? Who? What? ... Me?


« Reply #9 - Posted 2013-07-24 08:25:14 »

 Emo

Back to the drawing board!

Cas Smiley

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline SHC
« Reply #10 - Posted 2013-07-24 08:33:31 »

I'm measuring the width of each character by using
Graphics.MeasureString()
and trimming the image so that they have only the visible character and no empty space between characters. You can see that in the screen shot.

Offline kevglass

JGO Kernel


Medals: 164
Projects: 23
Exp: 18 years


Coder, Trainee Pixel Artist, Game Reviewer


« Reply #11 - Posted 2013-07-24 08:34:38 »

Kerning tells you how closely you're meant to place those images next to each other, it's how you get nicely rendered fonts. It's not about the width of the characters as much as its about the gap you're meant to place between any given pair of characters.

Cheers,

Kev

Offline pjt33
« Reply #12 - Posted 2013-07-24 10:17:04 »

I'm measuring the width of each character by using
Graphics.MeasureString()
and trimming the image so that they have only the visible character and no empty space between characters. You can see that in the screen shot.
Look at your first screenshot: Sample Text. Use the font you exported there to draw Sample Text, and I bet that you will introduce a massive gap between the l and e of Sample, and between the T and e of Text.
Offline SHC
« Reply #13 - Posted 2013-07-24 11:56:21 »

@pjt33

Thanks for mentioning. This test proved it.



I don't know why the letters are moved up.

Can you point me a tutorial on how to use kerning?

Offline Sammidysam
« Reply #14 - Posted 2013-07-24 13:18:16 »

Is the Window supposed to be slightly transparent?  I find it kind of distracting.

The .exe file runs perfectly on Mono on Fedora 19 64-bit.  Smiley
Offline SHC
« Reply #15 - Posted 2013-07-24 13:22:12 »

@pjt33

Managed to fix the bug in which the letters go up sometimes. Here's the new screenshot.



@Sammidysam

Glad that it's working on mono. Thanks for testing. That transparency is due to me setting the form's opacity to 95%.

Offline pjt33
« Reply #16 - Posted 2013-07-24 13:30:57 »

Can you point me a tutorial on how to use kerning?
I don't know any. You could start by looking at the Wikipedia page (and maybe browsing some of the other pages in the Typography category).

If you measure individual characters and then pairs of characters you should be able to build up a table of advances which would work for a first approximation. Of course, then you get into issues with sub-pixel placements, and you might be worried by ClearType patents...
Offline davedes
« Reply #17 - Posted 2013-07-24 13:44:18 »

How are you parsing TTF information? Most frameworks offer some sort of kerning data along with the glyph size.

Some other notes:

- For LWJGL applications, it's usually desirable to have a single image (PNG or other format) that holds all glyphs. This way we can take advantage of texture atlases which improves sprite batching. Right now it seems like each glyph holds RGBA data, which seems useful for a CPU-based renderer, but would involve a bit more work for a GPU-based renderer (i.e. packing into a texture). You can look into Black Pawn packing algorithm for a fast and easy to implement texture packer. Or you can look into a tool like TexturePacker2.

- What's up with the transparency? It looks a bit choppy around the edges and doesn't seem to blend well with the background.


Smiley

Offline SHC
« Reply #18 - Posted 2013-07-24 13:50:17 »

@davades

I'm not parsing the ttf files manually. I'm using the
FontFamily
class in the .Net Framework to load the fonts. I'm saving each character in PNG format and writing it's
Base64
encoded string into the XML file.

For the choppy images, I haven't yet turned on Anti-Aliasing and so the effect. I'll enable it once when I learnt about kerning.

Offline SHC
« Reply #19 - Posted 2013-07-24 14:31:11 »

That problem exists only with fonts with Italic style. Here's the screenshot with normal font. Added Anti-Aliasing and it's even looking smoother now.


Offline princec

JGO Kernel


Medals: 378
Projects: 3
Exp: 16 years


Eh? Who? What? ... Me?


« Reply #20 - Posted 2013-07-24 14:39:14 »

The only way to easily calculate kerning using normal Java APIs is to draw every pair of letters next to each other and see how the advance between them differs from the normal advance. For any difference != 0.0, that's the kerning for that pair of letters.

Cas Smiley

Offline davedes
« Reply #21 - Posted 2013-07-24 17:03:24 »

In Java, another simple solution is to use something like LibGDX's FreeType extension to get the font metrics, and use
glyph.getKerning(int other)
to get the kerning information. This is what I'm using for my own font packing tool.

It looks like this:
https://github.com/mattdesl/gdx-fontpack/blob/master/gdx-fontpack/src/mdesl/font/BitmapFontWriter.java#L216

Since this is a C# project, I guess that doesn't really apply. Tongue

Offline SHC
« Reply #22 - Posted 2013-07-25 04:50:19 »

The problem is appearing for Oblique/Italic fonts. See The only error in this screenshot of "Microsoft Sans Serif" is in the word "Text"



I'm browsing the MSDN "How to Obtain Font Metrics" and here's the image they've shown.



I'm unable to find a tutorial for kerning. Most of them says to use
GetCharWidth32()
native function gives how much should we advance after rendering that character but I can't find one that is purely cross platform.

Offline SHC
« Reply #23 - Posted 2013-07-25 04:55:49 »

Here's another screenshot of the font "Mistral"



I've noticed some small gaps between the letters in the bitmap version. However some of these script fonts are rendering nice.

Offline princec

JGO Kernel


Medals: 378
Projects: 3
Exp: 16 years


Eh? Who? What? ... Me?


« Reply #24 - Posted 2013-07-25 07:48:19 »

I'm unable to find a tutorial for kerning. Most of them says to use
GetCharWidth32()
native function gives how much should we advance after rendering that character but I can't find one that is purely cross platform.
Didn't I just tell you how to do it?

Cas Smiley

Offline SHC
« Reply #25 - Posted 2013-07-25 08:05:10 »

@princec Actually I didn't understand. Can you provide me with an example?

Offline pjt33
« Reply #26 - Posted 2013-07-25 08:40:23 »

The problem is appearing for Oblique/Italic fonts. See The only error in this screenshot of "Microsoft Sans Serif" is in the word "Text"

No, all of the letters in Sample are too widely spaced. They may be consistent, but that doesn't make them correct.

Didn't I just tell you how to do it?

So did I.

Actually I didn't understand. Can you provide me with an example?

1  
2  
3  
for (char a = minChar; a <= maxChar; a++)
  for (char b = minChar; b <= maxChar; b++)
    kern[a,b] = g.MeasureString(a + "" + b, f) - g.MeasureString(a + "", f) - g.MeasureString("" + b, f);
Offline SHC
« Reply #27 - Posted 2013-07-25 08:50:44 »

Now, some difference right?



Now I'm just advancing the width of only one char but not the other on top of it.

@pjt33

Thanks. Now I'll try this.

Offline SHC
« Reply #28 - Posted 2013-07-25 09:40:25 »

@pjt

I didn't completely understand that formula but using that for every char pair gives value -33. How can I fix it?

Offline Nate

JGO Kernel


Medals: 147
Projects: 4
Exp: 14 years


Esoteric Software


« Reply #29 - Posted 2013-07-25 10:32:23 »

I have a class here (part of Hiero) that can read kerning from a TTF file. I use some reflection magic here to try to get the TTF file on Sun VMs if all you have is an AWT Font instance.

I wrote this article about the various tools for generating bitmap fonts. We can add your tool if you like. As I wrote there, the BMFont tool does the best job due to supersampling with FreeType, especially at small sizes. I wish Hiero could do this. Sad Hiero4 in gdx-tools is a prototype for a FreeType based tool using MatthiasM's font renderer he made for TWL. It works but isn't really finished and doesn't do supersampling. Also it means no effects, though that can be done in Photoshop if padding is added to the glyphs.

Pages: [1] 2
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

BurntPizza (8 views)
2014-09-21 02:42:18

BurntPizza (9 views)
2014-09-21 01:30:30

BurntPizza (12 views)
2014-09-21 00:34:41

moogie (12 views)
2014-09-21 00:26:15

UprightPath (23 views)
2014-09-20 20:14:06

BurntPizza (27 views)
2014-09-19 03:14:18

Dwinin (40 views)
2014-09-12 09:08:26

Norakomi (70 views)
2014-09-10 13:57:51

TehJavaDev (96 views)
2014-09-10 06:39:09

Tekkerue (49 views)
2014-09-09 02:24:56
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!