如何将点阵汉字矢量化

作者:eastecho
2016-11-01
27 59 9

点阵汉字

点阵字体(Dot Matrix Fonts,也叫 Bitmap Fonts)的使用已经是很久之前的事情,目前公认的最早的点阵字体出现在世界上第一台全电子自动排字机上,它就是 1966 年德国发明家 Dr. Ing. Rudolf Hell 发明的 Hell 50T1 Digiset [1]

Hell-50T1-Digiset

Hell 50T1 Digiset [2]

而中文点阵字体的使用也有几十年了,那时候比较流行软/硬汉字系统(看你是否知道 CCDOS,UCDOS,213 什么的?),常用到 16 和 24 点阵的汉字。由于以前屏幕的分辨率比较低,点阵汉字还是相当的够用。后来,随着图形化操作系统的普及,矢量字体(Outline Fonts, Vector Fonts)大行其道,其矢量渲染的方式能够显示出平滑的字体,体验大大超过了传统的点阵字体,理所当然的成为了当前的主流。

那么是不是点阵汉字就已经退出历史舞台了呢?并没有。现在街上能常常见到的简易 LED 屏,很多都还是用的点阵汉字。很多工控或者简易屏幕上,也都还在使用点阵汉字,这是因为同矢量字体相比,点阵汉字占用的空间极小,这是由于点阵汉字的特性所决定的,一般一个点阵汉字是这样的:

Han

如上图所示,没有像素的点的值设为 0,有像素的点的值设为 1,那么一个 16 点阵汉字就可以用 16x16 位,也就是 32 个字节(Byte)来表示,所以非常节省空间,因此它非常适合用在早期的电脑系统以及需要低成本使用的情况下。尽管它放大之后既不平滑也不利于阅读,但是在文字尺寸比较小的情况下,却有着超过矢量字体的清晰度。所以,在今天的某些汉字字体中,也还包含有多组点阵字库,在特定文字尺寸的时候(比如:12px - 16px),就会使用这些点阵字体来代替矢量字体。

点阵汉字应用场景还是非常广泛,那么上面还没有提到的一点就是:使用在像素游戏中。

在游戏中使用点阵汉字

要想在游戏中使用点阵汉字,有两种方法:

  • 一种是使用早期的 GB2312-80 的汉字库,然后编写程序自行解析或者绘制,这里有一篇文章可以帮助您了解解析的方法。
    
使用这种方法相对繁琐,而且要想换成其它语言也要写相应的代码,但是好处也是显而易见的:那就是可以控制点阵汉字的每一个点(Pixel),可以轻易显示出多彩的汉字,甚至可以针对每一个点制作动态的效果,想象力够的话,可以将汉字表现得很炫。(如果今后有机会我会写一篇相关的教学,不做保证 :D)

  • 还有一种方法就是使用带有点阵字库的字体,这样可以轻松的支持多种语言,而且在需要平滑字体的时候也可以使用。不过呢,只有特定尺寸的汉字可以显示成点阵汉字。不过这种方法是做不到对汉字的到点(Pixel)的操作。

目前大家使用比较多的是直接使用带有点阵字库的 True Type 字体,不过由于限定在固定尺寸的汉字才能显示出点阵字体,所以当想要任意尺寸表现的点阵汉字的时候,就受到很多限制。虽然可以使用各种方法来达到目的,但是如果有一种字体它既是矢量的又表现得跟点阵字库一样的话,可能用起来就自由多了。所以,这就有了另外一种方法:将点阵字体矢量化成一个新的矢量字体,无论怎样使用都是表现出某一点阵字体的特性。比如,著名的 04 Bitmap 字体,就是这样的:

04

这种方法虽然见仁见智,有利也有弊,但是,也不失为一个解决方案。尤其是在本地化海外游戏的时候,如果原游戏使用了像素字体,而在中文化之后如果直接使用矢量化的点阵字体,就会是一个非常棒的选择。

所以,我们今天就来试着自己做一套像素汉字字体。

准备工作

开始教程之前,需要先准备好如下几项:

  • FontForge
    FontForge(2004 年 3 月前称为 PfaEdit)是一款全功能的支持所有通用字体格式的字体编辑器,主要由 George Williams 开发,FontForge 是自由软件,并以 GNU 通用公共许可证第 3 版及三句式 BSD 许可证授权。该软件用于多个操作系统(包括 Linux、Windows 和 OS X)并翻译成 12 种语言。[3] 具体的安装方法请看这里,我们不做赘述。

  • ImageMagick
    ImageMagick 是一个用于查看、编辑位图文件以及进行图像格式转换的开放源代码软件套装。它可以读取、编辑超过 100 种图象格式。ImageMagick 以 ImageMagick 许可证(一个类似 BSD 的许可证)发布。[4] 各个系统下的下载安装方法请见这里

  • 一个包含有点阵字库的字体,或者通用格式的点阵字库
    可选择的带有点阵汉字库的字体还是不少的,大家在 Windows 下常用的 SimSun 就包含有多种尺寸的点阵字体。为了便于涵盖各个不同平台的读者,我们这里选择的例子是著名的开源字体文泉驿的正黑体。

    该字体包含了所有常用简体中文、繁体中文,日文及韩文所需要的汉字(最新版本包含超过 27842 个汉字,完整覆盖 GB2312/Big5/GBK/GB18030 标准字符集)。该字体同时还包含了英文、日文、韩文和其他多种语言符号。该点阵字体包含五个屏幕常用字号(9pt-12pt),逾 21 万汉字点阵。Windows 版需要下载文泉驿正黑体,正黑体嵌入了所有 GBK 汉字点阵,在9-12pt范围内,将自动使用点阵宋体显示。[5]

  • Python 环境支持


我们要求的这几项都是可以跨 Windows,Mac OSX,Linux 平台的,而且均为开源项目,便于大家亲自尝试。

我们的教程是基于 Mac OSX 撰写的,其它平台也基本上一致。

制作字体

一、提取点阵汉字

首先,我们要做的是提取点阵汉字。虽然文泉驿已经提供了 9pt - 12pt 的 pcf 格式的字体,可以直接使用,但是为了让大家能够随意处理自己选用的字体,所以还是先讲讲怎么提取点阵汉字。

我们打开 FontForge,选择导入文泉驿正黑 wqy-zenhei.ttc,这其中包含有三个项目,我们选择带有点阵字库的 WenQuanYi Zen Hei Sharp 导入。接下来就会询问是否要导入某一尺寸的点阵字库,在本教学中,我们选择 16 点阵的。

open-font

按照这个步骤读取想要的点阵字库

完成选择后,字体就会正常导入到 FontForge 里面了。

opened

打开的字库

目前在 FontForge 中打开的字体包含了点阵和矢量两部分,其实我们只需要点阵部分,所以要再做一次输出,将其中的点阵字体库输出成 BDF 点阵字库。

选择 File | Generate Fonts… 然后按照如下的设置选择“No Outline Font”以及“BDF”格式,点击 Generate 就可以生成提取的点阵字库了。

generateBDF

输出点阵字库

这个字库会留着备用,但是如果您愿意的话可以用 FontForge 打开看一下,可以看到已经只是点阵字体了。

bdf-font

得到的 16 点阵字库

二、配置 Auto Trace

由于 FontForge 的自动矢量化插件并不是自带的,所以我们要安装第三方的插件,我们推荐的是 Potrace(应该是效果最好的),在前面也提到过,安装了 Potrace 之后要注意,需要设置 AUTOTRACE 的环境变量,以便 FontForge 能够找到它。

Windows 下直接安装即可,Mac 和 Linux 下如果没有使用 port 等方式安装的话,也就需要简单手动处理下。下面就说一下我在 Mac 上的安装过程。

1、下载并打开 Potrace 的包以后,将 potracemkbitmap 移到可以直接访问的地方,个人建议是 /usr/local/bin

2、然后将 potrace 设置为 AUTOTRACE 的目标

export AUTOTRACE=/usr/local/bin/potrace

3、另外,如果安装了多个矢量化插件的话,为了确保使用 Potrace,我们还需要在 FontForge 中设置一下。选择 File | Preferences 打开设置面板,选择 Apps,将 Prefer Potrace 设置为“On

4、另外根据我在 Mac 下的经验,由于是通过 X11 启动的 FontForge,所以应该先关闭 FontForge,通过 X11 的终端命令行执行 export,然后再通过终端打开 FontForge,比如我这里是:

/Applications/FontForge.app/Contents/MacOS/FontForge

如果配置正确,那么 Autotrace 将在后面可以使用了,请看下一步。

三、准备我们的新字库

完成上面的准备工作以后,我们可以再次打开 FontForge 了(配置好 potrace 后,Mac / Linux 通过命令行打开),然后按照以下步骤:

  • File | New,创建一个新字体;
  • 选择菜单:Encoding | Reencode | ISO 10646 (Unicode BMP),此举是因为在默认设置情况下,新字体的编码是 ISO 8859-1 (Latin1)
    reencode
  • 现在导入我们之前提取的 BDF 格式点阵字库:File | Import。打开导入窗口之后不要着急导入,要记得如图所示,将点阵字库作为背景(Background)导入;

    import-as-background
  • 导入后,就会发现,有字体内容的部分变了颜色,代表已经成功导入到背景。双击某一个字,就可以打开该字的详情窗口,我们可以在这里对字体进行所有复杂的操作。接下来,我们就要通过导入的背景点阵图来自动矢量化字体了。
    imported
  • 四、正确的矢量化点阵

    如果配置正确,那么,在字体的 Element 菜单下的 Autotrace 功能应该是可用了,我们在文字的窗口点击 Element | Autotrace,就会自动跟踪出新的文字轮廓。不过,现在可能是这个样子:

    bad

    矢量化效果不尽如人意

    这根本不符合我们的要求,我们要的是点阵像素的风格,而自动矢量化将其变成了平滑的曲线。这个问题看起来比较棘手,但是通过 Google,发现有人(Ben Morris)解决了这个问题:他将 potrace 更名为 potrace-bin,然后写了一个名为 potrace.sh 的脚本来作为矢量化入口。在这个 potrace.sh 的脚本中,将位图放大十倍,然后再跟踪,最后再恢复回去,就可以得到漂亮的点阵文字了。[6]

    方法如下:

    1. potrace 更名为 potrace-bin
    2. 创建 potrace.sh

    potrace.sh 代码如下:

    # 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

    (此段代码有修正,原文地址在这里

    注意:这段代码针对 Mac 有修正,如果是其它系统下使用,需要将 grep -Eo 改为 grep -Posed -E 改为 sed -r

    之后记得将 potrace.sh 设为拥有可执行权限。

    chmod 0755 potrace.sh

    现在,再做一次 Element | Autotrace 看看效果:

    good

    完美!

    五、矢量化并输出

    接下来关闭文字窗口,在字体列表上用 Ctrl+A 选择所有字体,然后选择 Element | Autotrace,耐心的等待一会儿,全部字体就矢量化完成了。查看字体是否完成很容易,只要看看原来的空位上是否显示出了文字轮廓就可以了。

    trace-all

    矢量化全部字体中

    生成的字体可能在某些地方有问题,比如缺少笔划或者约束(Constrain)等等,根据需要自行调整一下即可。一般这些不完整的内容会出现在英文部分以及最后的位置 65281 开始的汉字标点符号处 [7],而其它的汉字基本上均无问题。总之,后续还是需要少量的处理的,具体的看您的需要。

    missed

    有错过或者缺少的字

    处理好这些有问题的字体以后,基本上就可以了,如果自己想要添加特别的符号或者汉字,也有大量的空位去做这些。

    都处理完毕之后,就可以在 Element | Font Info… 中定义字体的各个属性,比如 Font Family,Font Name 之类的。然后就可以输出(File | Generate Fonts...)了。

    output

    如上图所示,选择“Ture Type”和“No Bitmap Fonts”,再 Generate 就会生成新的点阵汉字转换的 Ture Type 字体了。这个字体可以直接在 Unity 或者其它软件中使用,甚至直接用做系统字体,永远表现为点阵字体。

    结束语

    本人并不是字体方面的专家,也没有更多的研究过字体相关的内容,所了解的都只是皮毛。本文的主要目的是提供大家提取和制作矢量点阵汉字的方法,所以文章之中有不恰当的地方欢迎大家批评和指正。

    另外我们在教学中所使用的文泉驿字体需要遵循 GPL 协议,所以对该字体进行的修改以及衍生也要遵循 GPL 协议。另外有一款字体 FireFly(萤火飞)则是支持双协议:GPL / APL [8]。请大家在使用的时候注意。另外在使用其它字体的时候也同样要注意授权协议,以免侵害原版权方的合法权益。

    参考

    [1] The Birth of Digital Type
    [2] Christoph Knoth, COMPUTED TYPE DESIGN, p.16。
    [3] https://zh.wikipedia.org/wiki/FontForge,来自 WikiPedia
    [4] https://zh.wikipedia.org/zh-cn/ImageMagick,来自 WikiPedia
    [5] http://wenq.org/wqy2/index.cgi?BitmapSong
    [6] Ben Morris,MonsterFace Games: Creating a pixel font for your game
    [7] http://www.unicode.org/charts/PDF/UFF00.pdf,汉字标点符号。
    [8] “文泉驿”用户常见问题解答

    近期点赞的会员

     分享这篇文章

    eastecho 

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

    您可能还会对这些文章感兴趣

    参与此文章的讨论

    1. Humble Ray 2016-11-01

      很强

    2. CrapTears 2016-11-01

      强,无敌

    3. 周松弛onemore 2016-11-02 新浪微博会员

      很有用。

    4. Pea 2016-11-02

      这个有大用

    5. 至尊小夜猫 2016-11-02

      膜拜大触

    6. 膜拜站长!

    7. zixiao 2016-11-03

    8. ChristianTam 2016-12-30

      赞!收藏!

    9. 菇菇大仙人 2018-12-16

      哎呀,我想问下potrace.sh这个文件在Window系统下要怎么才能被执行呀,小白求赐教QAQ

    您需要登录或者注册后才能发表评论

    登录/注册