How to perform vectorization on the Chinese bitmap font

Author: eastecho
2017-03-01
8 0 1

The Authors

  • Original author: eastecho
  • English translator: powup333
  • Proofreader: Will Beckett

Chinese Bitmap Characters

The use of Bitmap Fonts (also known as Dot Matrix Fonts) started a long time ago; the current commonly accepted first appearance is on the world's first fully electrical automatic typesetting machine, the Hell 50T1 Digiset [1], made by the German inventor Dr. Ing. Rudolf Hell in 1966.

Hell-50T1-Digiset

Hell 50T1 Digiset [2]

The Chinese bitmap font has been used for decades now, but has seen changes over the years. The popular Chinese operating systems (e.g. CCDOS, UCDOS and 213) back in the day usually used 16 and 24 bitmap characters; because during that time the resolution of the screens were fairly low, these did the job sufficiently. But then came the graphical operating systems and the Vector Fonts consequently joined the party. Vector rendering allows smoother fonts to be displayed and after experimentation users found that these greatly surpassed the traditional bitmap fonts, leading to Vector Fonts quickly becoming the popular choice.

Does this mean that bitmap characters are doomed to fade into obscurity? The answer is no. Many of the LED screens that we see on the streets are still using bitmap characters. Factories across the industrial world still employ them for use on control screens and simple displays compared to vector fonts, the bitmap characters take less space to store. A bitmap character usually looks something like this:

Han

As the image above shows, the value of a point with no pixel is set to 0, and the ones that do are set to 1, meaning a 16 bitmap character will need 16x16 bit or 32 Bytes to store. This is very space-efficient, and suitable for early computer systems or situations where there's low budget. When enlarged it’s not smooth or clearly readable, but when the font size is small, it does have better resolution than the vector font. So in some of today's Chinese fonts, there are still many from the bitmap family available and they tend to be used when aiming for a specific font size (12px - 16px) to replace the vector fonts.

The application of bitmap characters is fairly broad; one not mentioned above is in pixel games.

Using Bitmap Characters in Games

There are two ways to use bitmap characters in a game:

  • One is to use an early version of the GB2313-80 Chinese character library, and write a program to automatically analyze or render. Here's an article that helps with how to analyze it.
    This approach is relatively complicated, as you need to write corresponding code for converting different languages, but the benefit is also clear: we can control every pixel in the bitmap, allowing us to create colorful characters and even have dynamic effects for every single pixel - with enough imagination, it can make the character look awesome. (If there's a chance I will write a tutorial on it, but no promises. :D)
  • The other way is to use a font that has bitmap libraries, this way we can easily support multiple languages and also use it when we need smoother fonts. However, only specific sizes of characters can be shown as bitmap characters, and it does not allows us to manage characters on a pixel scale.

These days people usually directly use the True Type font that already has bitmap libraries, but because of the constraints of only specific character sizes being shown in bitmap, we face a lot of limitations when we want to show bitmap characters in a range of of different scales. There are many approaches to accomplishing this goal, but if there's a font that is a vector but looks like the bitmap library, maybe we can use it more freely. So here comes the idea: use vectorization to transform the bitmaps to a new vector font; but no matter how we use it some aspects of the bitmap font are going to show. And that is how the famous 04 Bitmap font does it:

04

Although different people have varying opinions on the 04 Bitmap font, and it has its own pros and cons, it is nonetheless a solution. It is especially handy when we are localizing a foreign game; if the original game uses pixel fonts and if we choose to use the vector version of the bitmap font when it is localized, it usually works out perfectly.

So, today we are going to make our own vector version of the characters in bitmap font.

Preparation

Before we start the tutorial, several things need to be prepared:

  • FontForge

    FontForge (PfaEdit before March of 2004) is a full function font editor that supports all common font formats, mainly developed by George Williams. FontForge is a free software licensed under GNU General Public License and the 3-clause BSD License. The software supports multiple operating systems (including Linux, Windows, and OS X) and has been translated to 12 languages. [3]Specific installation steps are shown here, and we will not spend time going over it.
  • ImageMagick

    ImageMagick is an open source software collection that is used to view and edit bitmap files and perform image format conversion. It can read and edit more than a hundred image formats. ImageMagick is licensed under Apache 2.0 license.[4] The installation process for each operating system can be found here.
  • A font that has bitmap libraries or a bitmap library in common format.

    There are many choices of fonts that have bitmap characters; SimSun, which people generally use in Windows has different sizes of bitmap fonts. To cover readers using different platforms, the example we chose is Zen Hei from the famous open source font WenQuanYi.
    This font contains all everyday use Chinese characters needed for Simplified Chinese, Traditional Chinese, Japanese, and Korean (the newest version contains more than 27,842 characters, perfectly covering the GB2312/Big5/GBK/GB18030 standard character set). This font also contains English, Japanese, Korean, and other languages' punctuation marks. The bitmap font contains five commonly used screen sizes (9pt - 12pt), over 210 thousand character bitmaps. Windows versions need to download WenQuanYi Zen Hei font; the Zen Hei font contains all GBK character bitmaps, and in the range of 9-12pt, it will automatically display in bitmap Song.[5]
  • Support in Python environment

The requirements all work across Windows, Mac OSX and Linux platforms and are all open source software, so everyone can give it a try.

Our tutorial is written based on Mac OSX, but it is nonetheless the same on other platforms.

Font making

1. Extract the bitmap characters

First, we need to extract the bitmap characters. Although WenQuanYi already provides 9-12pt fonts in pcf format that can be used directly, to let everyone freely process the font they choose, we will go over the procedure.

Open up FontForge, choose to load in WenQuanYi Zen Hei file wqy-zenhei.ttc, it contains 3 fonts in it, and we are going to choose to load WenQuanYi Zen Hei Sharp which contains the bitmaps. Then the program will ask if we want to load a font library of a specific size - in this tutorial, we will choose 16 bit.

open-font

Follow the steps to load in the bitmap library that you want

After the selection, the font library will be loaded into FontForge.

opened

The font library loaded

Currently the font in the FontForge contains both bitmap and vector. Since we only need the bitmap part, we need to do an export to have the whole bitmap font library to be exported as DBF.

We choose File | Generate Fonts... and follow the settings below. Choose "No Outline Font" and "BDF" format, hit Generate and we can generate the extracted font library.

generateBDF

Export bitmap font library

This library will be used later, but if you want you can open it with FontForge and have a look - you’ll see that there is only bitmap fonts left.

bdf-font

The resulting 16 bit bitmap font library

2. Configure Auto Trace

Because FontForge doesn't come with an auto vectorization plugin, we need to install a third-party plugin. The one we recommend is Potrace (should have the best effect) - as mentioned before, we need to take care after installing Potrace to set the environment variable in AUTOTRACE so FontForge can find it.

In Windows we just need to install it directly, in Max and Linux if we did not use port or another method installing it, we just need to manually set it. Now I am going to talk about the installation process on Mac.

  1. Download and open the Potrace package, put potrace and mkbitmap to somewhere that can be directly accessed, personal advice would be /usr/local/bin
  2. Then set potrace as the target of AUTOTRACE
    export AUTOTRACE=/usr/local/bin/potrace
  3. Also, if we installed multiple vectorization plugins, to ensure we are using Potrace we need to change the setting in FontForge. Open File | Preferences, choose Apps, and set Prefer Potrace to "On".
  4. Based on my experience with Max, because we are opening FontForge via X11, we should first close FontForge, use X11's terminal command line to run export, then use the terminal to open FontForge. From my computer it would be:
    /Applications/FontForge.app/Contents/MacOS/FontForge

If we configured it correctly, then we can start using Autotrace. Let's move on.

3. Preparing Our New Font Library

After completing the preparations above, we can open up FontForge once again (after configuring potrace, Mac/Linux users use command to open it), then follow these steps:

  1. File | New, create a new font;
  2. Choose menu: Encoding | Reencode | ISO 10646 (Unicode BMP), this is because under the default setting, the new font encoding is ISO 8859-1 (Latin1);
    reencode
  3. Now import the bitmap font library in the BDF format that we extracted before: File | Import. Don't rush to import after opening up the import window - we need to remember to proceed as the image shows, to import the bitmap font library as background.
    import-as-background
  4. After importing, we will find that some part of the font content has changed color - this means we have successfully imported it to the background. Double click on any character and it will open up a detailed window, and we can make sophisticated operations to the fonts here. Coming up, we are going to use the imported background bitmap to perform auto vectorization.
    imported

4. The Correct Way to Perform Vectorization on Bitmaps

If configured correctly, then the Autotrace function under the Element menu should be functional, we can click on Element | Autotrace in the character window, and it should automatically trace out the frame of the new character. However, it might look like this right now:

bad

The effect of vectorization is incomplete

This does not match our requirements at all, we want to have bitmap style but auto vectorization gave us smooth curves. This seems like a tricky problem, but through Google we found someone (Ben Morris) that has solved this issue: he renamed potrace to potrace-bin, and wrote a script named potrace.sh as the vectorization entrance. In this potrace.sh script, the bitmap is enlarged ten times, traced, and changed it back, and now we can get some beautiful bitmap characters.[6]

This is how we do it:

  1. Rename potrace to potrace-bin;
  2. Create potrace.sh

The code for potrace.sh is shown below:

# get the last parameter passed by fontforge - the name of the temp img file
for last; do true; done
# get all of the other parameters
length=$(($#-1))
array=${@:1:$length}
array="`echo "$array" | sed -E 's/ -r ([0-9]+)/ -r 10/g'`"
# get the size of the passed image
size=$(identify $last | grep -Eo "[0-9]+x[0-9]+" | head -1)
# multiply that size by 10
newsize=$(python -c "x = '$size'; print('x'.join([str(int(i)*10) for i in x.split('x')]))")
# scale up 10x and then use potrace to trace the pixelated outline
cat $last | mkbitmap -s 1 | convert -scale $newsize - - | potrace-bin -a 0 $array

(There is some tweaking in this code, the original can be found here)

Note: This code has been tweaked for Mac, if used under other systems, we need to change grep -Eo to grep -Po, and sed -E to sed -r.

Remember to make sure potrace.sh has executable privilege.

chmod 0755 potrace.sh

Now let’s use Element | Autotrace once again and see the result:

good

Perfect!

Vectorization and Export

Now let’s close the character window, hit Ctrl+A on the font list, and then choose Element | Autotrace. Wait a few moments, and the vectorization for all fonts should have been completed. It is simple to check if the font has been completed, we just need to see if there are character outlines appearing in places that use to be blanks.

trace-all

Performing vectorization on all fonts

There might be some problems with the generated font, such as missing a stroke or constrain - we just need to do some tweaking on our own. Normally these imperfections appear in the English part and the Chinese punctuations starting at position 65281 [7], but most other Chinese characters are fine. Either way, some post-processing will be needed, but this is specifically based on your needs.

missed

Missing or incomplete characters

After processing these imperfect fonts, we are basically done. If you want to add some special symbol or characters, there's a lot of empty space for them.

After these are all done, we can go to Element | Font Info... and start setting the attributes for the font, such as Font Family and Font Name. Then we can just export it via File | Generate Fonts...

output

As shown above, choosing "True Type" and "No Bitmap Fonts", then clicking Generate will generate a new True Type font that is converted from the bitmap characters. This font can be directly used in Unity or other software, and can even be used as the system font and the bitmap font will be always displayed.

Conclusion

I am not a professional in fonts, nor did I study more about them than anyone else; I only know a thin layer of it. The main purpose of this article is to provide everyone a way to extract and make vector bitmap character, so if there is inappropriate content, criticism and correction are welcome.

Also the WenQuanYi font we used in the tutorial needs to follow the GPL license, so modification and derived content also needs to follow the GPL license. Another font, named FireFly, does support dual license: GPL / APL[8]. Please be careful while using them. And when using other fonts also pay attention to the licensing and avoid infringement on the legal rights of the original copyright party.

Appendix

Like 8 liked

Add to favorites 0 favorites

Recent liked by users

eastecho 

从前的边城浪子,现在的路人乙 

Comments

No comments yet

You need to sign in or sign up to make comments

Sign In / Sign Up