AuthorTopic: Creating Pixel-Art Fonts (or Fontfiles)  (Read 5181 times)

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage

Creating Pixel-Art Fonts (or Fontfiles)

on: February 26, 2015, 12:25:48 am
Hey Guys,

I Just wanted to ask a few questions, since I have no experience with creating a pixel art font out of an existing set of letters.

So far I always put the typography down on my own, however in a game environment and/or the graphics program it would be pretty cool to use the fonts I created earlier as files, so that I actually can write with them like with any other font.

My problem is now that TTF files seem to be restricted to a single color (black) - which makes this file format useless for shaded or hand-AA'd font-types.

So is there another file type you can use to set pixel perfect sized and colored letters via keyboard?
"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: Creating Pixel-Art Fonts (or Fontfiles)

Reply #1 on: February 26, 2015, 01:12:25 am
The closest to a 'standard' as far as I know is SFont, a convention for storing fonts in bitmaps (eg PNG, GIF). (S standing for SDL here)
Here's an example font I made:



This is using GrafX2's SFont variant, which I don't really know how it differs from others.

But the basic idea of SFont is:

* Begin with a blank (index #0 filled) canvas.
* All characters on one horizontal line in ascii order, starting with character #33 : '!'
* Minimum of 1 pixel gap with a 'spacer' color (#1 is used here, but whatever color is in the top left corner of the image can be determined to be the spacer color).  Larger gaps are okay.
* Characters are variable width but fixed height, to simplify rendering.
* Characters are a minimum of 1px wide (there is no way to notate 0px-wide characters)
* Characters can contain any palette indices except the spacer color. These indices are interpreted normally (ie. each color remains distinct, you can alter palette entries when rendering to get different tinted characters, etc.)
* No kerning or line spacing information is included.
* No specific UTF-8 / Unicode support. Accented characters etc are normally done using a particular codepage (== extension of the ASCII standard). The fonts that come with GrafX2 include some examples of support for accented characters.

This will allow you to use your font in full color in GrafX2 or any game that uses SDL for rendering. It's a simple enough format that any half-decent programmer should be able to hack together something that handles it in relatively little code.
(BTW: GrafX2 does not make palette-swapping the font super easy, but you can do it by opening the font file in the spare page, editing the palette, and re-saving (GrafX2 uses the updated font next time you use text tool). Or you can just generate 'multiple' font files that are simply different palette swaps as you need.)

 As far as I know, no 'high end' programs like PhotoShop or GIMP support non-monochrome bitmap fonts. There is no 'proper' standard yet -- SVG fonts exist and support similar features to pixel fonts as well as the features of vector fonts, but support for SVG fonts is currently poor.

EDIT:
http://blog.symbolset.com/multicolor-fonts has some interesting information on this subject. Apparently there -is- some system support for multicolor fonts, but it's not consistent. FreeType supports Google's format and Apple's format, so Linux support for both of those is probably available.; Adobe+Mozilla's format is most powerful but is only supported by Firefox; Microsoft's format, as you might expect, is only supported on Windows; and MPEG are working on creating an open multicolor font standard unifying ideas from all these different implementations.

How to actually author this kind of bitmap font is still a mystery to me. I'm also unsure whether these font formats are intended for general use or for web only use.

EDIT2:
Apparently Type3 fonts (a subset of OpenType, which is what TTF uses) support multicolor glyphs. It's unclear whether you can easily render Type3 OpenType fonts to screen or not.
« Last Edit: February 26, 2015, 02:12:59 am by Ai »
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline Crow

  • 0011
  • **
  • Posts: 647
  • Karma: +0/-0
  • Technicanimal
    • View Profile

Re: Creating Pixel-Art Fonts (or Fontfiles)

Reply #2 on: February 26, 2015, 08:36:56 pm
I have previously used this tutorial to create a pixel font. Very informative. In regards to AA, there's a neat trick. Instead of using certain sized cubes, as described in the tutorial, just use a triangle for a pixel spot you want at 50% alpha (or any other shape that fills that space only by a certain percentage instead of completely). If done correctly, and if the font settings are all correct, it should be possible to use this effect at multiple sizes as well.
Discord: Ennea#9999

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: Creating Pixel-Art Fonts (or Fontfiles)

Reply #3 on: February 27, 2015, 02:37:58 am
I have previously used this tutorial to create a pixel font. Very informative. In regards to AA, there's a neat trick. Instead of using certain sized cubes, as described in the tutorial, just use a triangle for a pixel spot you want at 50% alpha (or any other shape that fills that space only by a certain percentage instead of completely). If done correctly, and if the font settings are all correct, it should be possible to use this effect at multiple sizes as well.
Isn't that technique limited to opacity variation, not actual color control? The 0xA000 font family uses those techniques for some variants and it only effects opacity.

That's basically why my previous reply is so long.. there doesn't appear to be a single standard way to achieve *real* multicolor fonts, only application specific (SFont, texture atlas) or OS specific (Bitmap-in-TTF, Layered TTF) ways.
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline Crow

  • 0011
  • **
  • Posts: 647
  • Karma: +0/-0
  • Technicanimal
    • View Profile

Re: Creating Pixel-Art Fonts (or Fontfiles)

Reply #4 on: February 27, 2015, 07:07:05 am
It is, but I figured it was enough for AA for some fonts at least.
Discord: Ennea#9999

Offline API-Beast

  • 0010
  • *
  • Posts: 292
  • Karma: +0/-0
    • beast_pixels
    • http://pixeljoint.com/p/35725.htm
    • View Profile

Re: Creating Pixel-Art Fonts (or Fontfiles)

Reply #5 on: February 27, 2015, 09:41:45 am
So called Bitmap fonts are the de-facto standard for non-web games, they are efficient and don't need a vector renderer. Basically handle it like a sprite sheet, every frame is a different glyph. Since they are so simple each game has their own way of managing them.

Now there are multiple different ways of arranging the glyphs.

Simplest is if you use a grid and give every glyph the same size. This way all you need to tell you application is the grid size (e.g. 12x12) and the order of glyphs. (e.g. "ABCDE") Many games even just use one row in which case you just need width and glyph order.

(GNU Unifont, clipped, full version contains almost all Unicode symbols)

The other option is free form. In this you need to either manually denote each glyphs position and size, or use a algorithm that automatically detect the glyph boundaries, in which case you only need to pass the order of glyphs.

(modified from Frogatto)
Code: [Select]
a=0,0,7,11
A=0,21,7,11
b=8,0,7,11
etc.
« Last Edit: February 27, 2015, 09:51:22 am by Mr. Beast »

Offline wzl

  • 0010
  • *
  • Posts: 298
  • Karma: +1/-0
    • View Profile

Re: Creating Pixel-Art Fonts (or Fontfiles)

Reply #6 on: February 27, 2015, 10:16:12 am
Even if it doesn't apply to pixel fonts directly, there's a way to get really good results for smooth font rendering, scaling, rotating etc.
Applying distance fields (basically inner and outer glow on the actual glyphs) you can use different thresholds to apply boldness , dropshadows, glows etc all from within a pixel shader.

http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

Offline yrizoud

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
    • View Profile

Re: Creating Pixel-Art Fonts (or Fontfiles)

Reply #7 on: March 01, 2015, 01:21:00 am
If somebody wants to create or convert his font within Grafx2, see my earlier post on PJ, there's a helpful Lua script to organize characters.
http://www.pixeljoint.com/forum/forum_posts.asp?TID=20672

Offline Rebel

  • 0001
  • *
  • Posts: 2
  • Karma: +0/-0
    • View Profile

Re: Creating Pixel-Art Fonts (or Fontfiles)

Reply #8 on: March 01, 2015, 11:32:21 pm
I'm sorry this is no help, but what you're trying to do is so easy with an Amiga, having built-in support for colour bitmap fonts in the OS and graphics applications that use those fonts as well (and being able to load those font files into games to use). Even the font editing software is everything you could want from such a program. I just feel sorry for you guys.

Offline Cyangmou

  • 0011
  • **
  • Posts: 929
  • Karma: +3/-0
    • cyangmou
    • http://pixeljoint.com/p/32234.htm
    • cyangmou
    • View Profile
    • Pixwerk Homepage

Re: Creating Pixel-Art Fonts (or Fontfiles)

Reply #9 on: March 07, 2015, 10:49:00 pm
Thanks to everyone for taking time to share some crucial information,

What I looked for where bitmap-fonts and with the name it was possible to get to a good solution (with ASCII sheets etc.)

"Because the beauty of the human body is that it hasn't a single muscle which doesn't serve its purpose; that there's not a line wasted; that every detail of it fits one idea, the idea of a man and the life of a man."

Dev-Art
Twitter