如何在《动物森友会》中设计字体？

Original 微梨 3type 2020-09-28

要说《集合啦！动物森友会》（以下简称动森）最吸引我的一点，无疑是里面自由度极高的自定义设计系统了。

之前我曾撰文分析过《动森》中的界面字体设计，这次，就让我们利用游戏中的自定义设计功能，实际地做点东西出来。

那么好的：

上图中出现的 Adobe 全家桶、Glyphs 软件图标以及地面上的标语，都是通过游戏中「我的设计」直接画出来的（而没有借助网上的转换工具）。我会首先介绍一下我到目前为止总结出的一些技巧，然后以其中的中英文字体为例，介绍一下在《动森》中做中英文字体设计的过程。

动森的设计系统概述

动森的设计系统分为「我的设计」和「专业设计」两部分，其中「我的设计」可以作为画架、地面贴图、背心图案、脸部彩绘；「专业设计」则在稍后期解锁，可以绘制不同款式的服装。本文全部在「我的设计」中完成，但两者在实际制作时的原理是一样的。

用于绘制的画布为 32×32 的「像素」网格，以及「15 色+透明」色板。绘制工具和其他设计软件大同小异，提供了全局移动和对称绘画功能，但没有局部选择（套索）功能（这也和多数像素画板一致）。

初看上去这个系统和 8-bit 像素画差不多，都是低分辨率+索引色板，但最终呈现的效果并不是像素画，因为《动森》中采用了一种相对复杂的「抗锯齿」规则。

在本文写作时（游戏版本 1.1.4a），设计画板遵循以下抗锯齿规则：

1. 单一格子会变成圆点。（上图红色）

* 同样，细线条的端头为圆形。

2. 1×1 格的阶梯会转换为 45° 斜线。（上图绿色）

* 同理，直线上的 1 格落差会变为斜坡。

* 斜向相邻的两个像素会发生粘连。

* 两条相邻的 45° 斜线会彼此分开，仅保持微弱粘连，但三条以上相邻时，中间的部分就会保持棋盘格。

* 在 3×3 的范围内只要构成局部棋盘格，就不会发生斜线转换。（上图 8 字形图案的中心点）

3. 2×1 格的阶梯会转换为 26.5° 斜线。（上图蓝色）

* 同前，两条相邻的 26.5° 斜线会彼此分开（微弱粘连）；但三条以上相邻时，中间的部分就会保持棋盘格。

4. 3×1 格以上的阶梯不会转换为斜直线，而是在搭接处发生 26.5° 粘连（局部 2×1 阶梯）。（上图棕色）

5. 1 格的缺口会转换为圆角，而非 45° 倒角。（下图）

* 更大半径的圆角遵循【规则 2、3】的结合，表现为折线，最终效果也呈圆角。

* 再大半径的圆弧无法画得光滑，即使使用自带的「圆形工具」绘制，得到的结果也是以上【规则 2、3、4】的组合而成的多边形。

6. 以上规则适用于单色绘图（底色+单一前景色）。

* 如果是多色，需要对每种颜色逐个分析；且较为接近的颜色会被归为一类。（下图 GIF，注意橙色变化时左下角的预览）

这样的规则还是比较巧妙的，基本符合像素画绘制过程中的布点方式。可以获得较为完美的斜直线（45° 和 26.5° 是像素画中最常用的斜线），同时也能实现完美的棋盘格，用在服装面料上。

但是，由于几个斜线抗锯齿的特殊规则存在，实际绘制时就不能直接沿用像素画的习惯。否则，就可能让原本不相干的造型发生粘连，甚至糊成一团。

了解规则之后，我们再来做设计的时候就可以少走一些弯路。当然了，有些时候实际试错一下也挺好的。

设计西文字体

工欲善其事，必先利其器。我们先准备好练习西文书法的文具，以及安装了设计软件的电脑。

……电脑挺贵的，要 70000 铃钱。前景桌上的「西文书法用具」实际上是「漫画用具组合」。哈哈哈哈哈哈哈

我们以大家都喜欢的 Ai 和 Ps 的图标为例。

Adobe 软件图标字体为 Myriad，一款人文主义无衬线体，也是 Adobe 公司的品牌字体。其造型特征温润友好，这样一款字体要在《动森》的画板中还原，其实并不容易。

大写字母 A 的斜线角度较陡，根据以上【规则 4】，是无法获得光滑斜线的，只能凑个大概。这里我用了 4×1 的阶梯，最终结果就是这样锯齿状的斜线。

A 内部中央的尖角也是一个重要的细节。如果想获得尖锐的角，那么它只能是一格宽——两格宽的话就会多一条水平线。加上 A 本身是对称的，因此总宽度也被限定成了奇数。

Myriad 字体的另一个特征是 i、j 上圆形的点。但由于我们的笔画粗细是两格，因此点的大小也必须是 2×2。在这个大小下，点只能是方形。

由于 A 左侧是一个尖角，而 i 右侧是垂直线，因此要想让整个图标看上去是居中的，那么左边的边距要更小。这也是字体设计中常用的视觉修正手段。

字体设计中所谓的 overshoot，三角和圆弧要超出直线的高度，显得视觉上大小一致。

Ps 的难点则在于 s 复杂的曲线。而且比较细节的是，s 的上下两个圆弧是不对称的——上面的要稍小一些。

但对于《动森》画布的精度而言，要实现这样微妙的大小差距并不容易，很容易就会显得做过头了。在这里我选择将左侧的弧形退进去一格，虽然和原图标差得有点多，但整体还算协调。

Ps 左右的边距可能做成一样的其实也可以，但我这里主体的宽度是奇数，与其让 P、s 之间的距离更远一些，我还是选择调整左右边距。于是 P 由于左边是竖直线所以边距多空一格。

哦对了，这里的 Ps 是已经变成圆角的 CC 2020。

设计中文字体

中文字体自然要复杂得多，但是对于 32×32 的画布来说，发挥的空间还是很大的。（甚至可以写出点花样。）

我尝试了一下相对较高的难度：一张画布里写四个字。比如这个「童叟无欺」。

一个字的字身大小是 16×16，但是还需要留有字距，那么合适的字面大小就只有 14×14 了。

在这样有限的条件下设计中文字，无论是像素字还是《动森》的画布，最好的办法都是从横竖向的等分开始。因为多数情况下，好看的汉字中横画的间距基本是相等的。

如果遇到无法等分的情况，就要稍微变通一下。通常上紧下松做出来的字比较有精神（道理和前文的 s 类似），比如「欺」字左边几横的处理。

如果横非常多，甚至可以合并一部分，比如这里的「童」。汉字的识别并不需要每个笔画都准确无误，我们在地铁中、街道上常见的 16×15 点阵字中，就有一部分字像这样合并了笔画。

GB 5199-2010 16×15 点阵字中，一部分「减省笔画的汉字」。

在字标（logotype）设计中，合并省略笔画也是一种相当常见的手法，这里就不赘述了。

汉字的笔画多寡悬殊，在设计时也需要注意边距大小，让不同的字看上去大小协调一致。比如这里的「无」字，因为笔画最少，所以设计时不能撑满格子。

如果让笔画较少的字和笔画较多的字实际尺寸完全相等（右），就会显得呆板。（Adobe 宋体）

撇的尖端是一个难点。在这里，如果只保留一个独立的格子作为尖端，那么出锋的角度必定是 45°，会有向下耷拉的感觉；如果使用 2 格以上长度的水平线段，那么就会产生一个较为粗大的末端。这里我选择了后者。

前文中的【规则 2】（直线上的 1 格落差会变为斜坡）是一把双刃剑：一方面，利用这个规则，很容易在横画右上做出好看的宋体装饰角；另一方面，对于某些细节就很容易「翻车」，比如「欺」的撇和竖相碰的地方：在像素字体设计中这是很正常的处理方式，但是《动森》的抗锯齿系统会认为撇尖端的那个格子是和竖画一体的。不过这里问题不大。

当然了，我这里是有意尝试了（看上去比较正经的）宋体字。如果顺应这里面的抗锯齿规则，相应地做一些由直线、斜线构成的字体，效果肯定会更好。

还能设计点什么字？

作为 3type 的字体设计师，我还在岛的入口处设置了多语言的「欢迎光临」。整个标语图案占了四个「我的设计」格子，包含中文「歡迎光臨」、阿拉伯文「مرحبا」、英文「Welcome」、日文「ようこそ」、天城文（印地语）「स्वागत」和泰文「ยินดีต้อนรับ」。

这里的泰文采用了比较传统的造型，尽量还原了那些小圆圈结构。如今很多泰文字体设计都大幅度地简化了字母造型，有的甚至设计得和拉丁字母差不多了。

泰国售卖的「曼妥思」糖，商标文字实际上是 เมนทอส。

另外，我还为自己的岛上设计了一套导视图标，这样朋友来岛上就可以很方便地找到商店和服装店了。说到这样的图标设计，虽然不是传统意义上的「字体」，但如今很多网页图标都是以字体的格式实现的——消耗带宽更小，还可以灵活缩放，不会失真。

我岛的这套导视系统由一系列风格一致的图标和四个方向的箭头组成，贴到地上。模仿了一种粉笔字的感觉，所以不算很规整。

主线通关后，就能够铺设路面。贴图和路面可以叠加，但是会被路面的边缘切割掉外圈约 6 格的宽度。因此升级过一版后，所有的图标都缩小了一些，这样可以在路面的范围内完整显示出来。

我有个朋友还为自己的每一棵果树打了地标用以区分，我下一步也打算设计一套水果图标了。

再加一点色彩

本文中说到的都是单色图标，但其实充分利用《动森》中 15 种颜色的色板，可以做出更加有趣的设计。

虽然在现代计算机字体设计中，彩色字体算是个新奇玩意儿（我们熟悉的 emoji 就属于彩色字体），但在早期基于像素「图块」技术的街机游戏中，色彩缤纷的字体是一种常规操作。街机游戏中的字母大多占据 8×8 像素的图块，在这样有限的尺寸下，再加入色彩，游戏美术设计师们创造出了数千种字体。