22、物联网产品图形渲染与界面开发全解析

物联网产品图形渲染与界面开发全解析

1. 字体处理

在微控制器上使用TrueType字体进行渲染虽可行但颇具挑战，因其所需的代码量、内存和CPU资源，使得它在很多项目中并不实用。因此，我们通常会使用更简单的高质量位图字体。

1.1 TrueType字体转换为位图字体

可以将计算机上的TrueType字体转换为微控制器易于处理的格式。具体做法是将TrueType字体以特定磅值渲染为位图，所有字符存储在单个位图中。该位图使用4位灰度像素，以保留原始字体的抗锯齿效果。同时，会生成一个 .fnt 文件，用于映射Unicode字符代码和字体位图中的矩形区域。这种结合位图图像和映射文件的字体格式被称为BMFont。

在BMFont格式中，字符并非按照Unicode或ASCII标准顺序排列，而是按高度排列，以减少未使用的空白空间，使位图图像尽可能小。创建这些位图文件的工具并非Moddable SDK的一部分，71 Squared的Glyph Designer是个不错的选择。不过，Moddable SDK包含了一套预建的BMFont格式字体，无需额外工具即可开始开发。

BMFont格式每种字体有两个文件：通常为PNG格式的图像文件和扩展名为 .fnt 的字体映射文件，二者文件名应相同，仅扩展名不同。要将其添加到项目中，需在项目清单中按如下方式包含名称：

"resources": {
    "*-mask": [
        "./assets/OpenSans-Regular-16"
    ]
}