TimothyQiu's Blog

keep it simple stupid

凤凰点阵体

分类:技术

做像素风/复古游戏不免要用上点阵字体,之前我用过一阵子 IPix,但它时有缺字,一些英文、数字、以及标点符号的样子和字间距给人感觉也有点奇怪。于是我就自己做了一个像素字体。

做英文字体和中文字体所需要涉及的字形不在一个数量级上,前者撑死了一百个左右,后者则至少要覆盖常用的几千个汉字,非常体力活。IPix 的字模来自于开源项目 BitmapFont,这个项目的作者收集了很多远古系统里的字模数据(感觉从老系统里提取的字模在版权方面界限还是有点模糊),可以直接生成对应的字形。

这些字模数据中,每一个字符都对应一系列的比特位。比如 16 像素宋体的「人」字在数据文件中对应 01000100010001000100010001000280028002800440044008201010200e4004,按照每 16 个比特位换行表示后就成了点阵的「人」字:

       X
       X
       X
       X
       X
       X
       X
      X X
      X X
      X X
     X   X
     X   X
    X     X
   X       X
  X         XXX
 X           X

有了这样的点阵数据,我们就可以很繁琐方便地制作各种格式的字体文件了。

我把制作好的 TrueType 字体放到了 itch.io 上,有需要的童鞋可以自取:

p.s. 其实市面上有一款非常不错的收费点阵字体 丁卯点阵体,支持 7px 和 9px 的大小。

字体

已有 5 条评论 »

  1. 赞诶!准备用凤凰点阵体在自己的项目中了,感谢制作!
    另外请问bitmap转矢量字形是用了什么工具嘛,还是说写了脚本,求分享~

    1. 就是像视频里说的那样,利用的是 FontForge 提供的自动化接口,为对应的像素点画一个矩形框:https://fontforge.org/docs/scripting/python.html

      1. 原来是一个像素一个矩形框吗,这样会有很多不必要的顶点吧,不清楚有没有现成的算法可以合并这些矩形为一个没有多余顶点的svg path..

        1. 确实,目前的凤凰点阵体里就是没有做任何处理的。虽然 FontForge 会把多余的边去掉,但是它不会自己去掉多余的顶点。理论上在根据字模画矩形框的时候,考虑一下邻接的点,就能够去掉很大一部分冗余顶点。

          1. rubick rubick

            https://arthas.me/posts/generate-pixel-font-from-pcf-file
            用JS做了同样的事情~

添加新评论 »