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

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

之前我曾撰文分析过《动森》中的界面字体设计 ... 如何在《动物森友会》中设计字体？3type_三言 关注专栏/游戏/单机游戏/如何在《动物森友会》中设计字体？如何在《动物森友会》中设计字体？ 单机游戏 2020-04-2016:53--阅读· --喜欢· --评论 3type_三言粉丝：2.4万文章：42 关注要说《集合啦！动物森友会》（以下简称动森）最吸引我的一点，无疑是里面自由度极高的自定义设计系统了。

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

那么好的：上图中出现的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软件图标中采用了自家的AdobeClear字体，其中的曲线极其圆润。

这样一款字体要在《动森》的画板中还原，其实并不容易。

大写字母A的斜线角度较陡，根据以上【规则4】，是无法获得光滑斜线的，只能凑个大概。

这里我用了4×1的阶梯，最终结果就是这样锯齿状的斜线。

A内部中央的尖角也是一个重要的细节。

如果想获得尖锐的角，那么它只能是一格宽——两格宽的话就会多一条水平线。

加上A本身是对称的，因此总宽度也被限定成了奇数。

这款字体的另一个特征是i、j上圆形的点。

但由于我们的笔画粗细是两格，因此点的大小也必须是2×2。

在这个大小下，点只能是方形。

由于A左侧是一个尖角，而i右侧是垂直线，因此要想让整个图标看上去是居中的，那么左边的边距要更小。

这也是字体设计中常用的视觉修正手段。

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

Ps的难点则在于s复杂的曲线。

而且比较细节的是，s的上下两个圆弧是不对称的——上面的要稍小一些。

但对于《动森》画布的精度而言，要实现这样微妙的大小差距并不容易，很容易就会显得做过头了。

在这里我选择将左侧的弧形退进去一格，虽然和原图标差得有点多，但整体还算协调。

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

于是P由于左边是竖直线所以边距多空一格。

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

设计中文字体中文字体自然要复杂得多，但是对于32×32的画布来说，发挥的空间还是很大的。

（甚至可以写出点花样。

）我尝试了一下相对较高的难度：一张画布里写四个字。

比如这个「童叟无欺」。

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

在这样有限的条件下设计中文字，无论是像素字还是《动森》的画布，最好的办法都是从横竖向的等分开始。

因为多数情况下，好看的汉字中横画的间距基本是相等的。

如果遇到无法等分的情况，就要稍微变通一下。

通常上紧下松做出来的字比较有精神（道理和前文的s类似），比如「欺」字左边几横的处理。

如果横非常多，甚至可以合并一部分，比如这里的「童」。

汉字的识别并不需要每个笔画都准确无误，我们在地铁中、街道上常见的16×15点阵字中，就有一部分字像这样合并了笔画。

GB5199-201016×15点阵字中，一部分「减省笔画的汉字」。

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

汉字的笔画多寡悬殊，在设计时也需要注意边距大小，让不同的字看上去大小协调一致。

比如这里的「无」字，因为笔画最少，所以设计时不能撑满格子。

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

（Adobe宋体）撇的尖端是一个难点。

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

这里我选择了后者。

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

不过这里问题不大。

当然了，我这里是有意尝试了（看上去比较正经的）宋体字。

如果顺应这里面的抗锯齿规则，相应地做一些由直线、斜线构成的字体，效果肯定会更好。

还能设计点什么字？作为 3type 的字体设计师，我还在岛的入口处设置了多语言的「欢迎光临」。

整个标语图案占了四个「我的设计」格子，包含中文「歡迎光臨」、阿拉伯文「」、英文「Welcome」、日文「ようこそ」、天城文（印地语）「स्वागत」和泰文「ย*นดีต้อนรับ」。

这里的泰文采用了比较传统的造型，尽量还原了那些小圆圈结构。

如今很多泰文字体设计都大幅度地简化了字母造型，有的甚至设计得和拉丁字母差不多了。

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

另外，我还为自己的岛上设计了一套导视图标，这样朋友来岛上就可以很方便地找到商店和服装店了。

说到这样的图标设计，虽然不是传统意义上的「字体」，但如今很多网页图标都是以字体的格式实现的——消耗带宽更小，还可以灵活缩放，不会失真。

我岛的这套导视系统由一系列风格一致的图标和四个方向的箭头组成，贴到地上。

模仿了一种粉笔字的感觉，所以不算很规整。

主线通关后，就能够铺设路面。

贴图和路面可以叠加，但是会被路面的边缘切割掉外圈约6格的宽度。

因此升级过一版后，所有的图标都缩小了一些，这样可以在路面的范围内完整显示出来。

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

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

虽然在现代计算机字体设计中，彩色字体算是个新奇玩意儿（我们熟悉的emoji就属于彩色字体），但在早期基于像素「图块」技术的街机游戏中，色彩缤纷的字体是一种常规操作。

街机游戏中的字母大多占据8×8像素的图块，在这样有限的尺寸下，再加入色彩，游戏美术设计师们创造出了数千种字体。

《太空哈利》游戏截图。

我们可以在《动森》的画布中复现这样的字体。

我建议将四个格子并作一个像素来用，这样可以在一张画布中放下四个字母，还能减轻「抗锯齿规则」的影响，制作出更有「像素感」的设计。

日本字体设计师大曲都市对数千款街机游戏中的字体进行归档分类，选择了其中的240余款字体，收录在其最新著作《街机游戏字体》一书中。

目前，《街机游戏字体》中文版众筹正在火热进行中，欢迎大家前往众筹平台进行支持。

还可以试读《街机游戏字体》的部分章节，了解更多关于彩色像素字体的知识，并将其中的设计用在自己的小岛上！另外，本文中出现的（和字体相关的）设计均已共享，各位玩家可以前往服装店，通过搜索用户MA-8658-1542-2102 下载：中间的四个白色的，可以组成多语言「欢迎光临」地面贴图。

祝大家玩得开心！关于作者 | 刘育黎（WillieLiu）在同济读书，在三言做事。

字体动画影像游戏都有兴趣，并且经常瞎搞。

杂食系玩物丧志型选手。

本文为我原创本文禁止转载或摘编 分享到： 投诉或建议 推荐文章 更多精彩内容战甲瓦喵配色点击进入查看全文>叶子无处落 日常 38 1 0 全新二次元笔刷+色板+线稿+教程套装，轻松Hold住各种效果！二次元目前到底有多火？相必大家都深有体会，因为我们周边有太多二次元的产品，无论是动画、漫画、游戏、小说、虚拟偶像、甚至是设计都随处可见！二次元不仅用户基数大，质量高，而且深受年轻的喜欢，所以作为设计师或者插画师，一定不能忽略二次元市场！但是二次元绘画一般都比较复杂，无论是线稿还是人物，或者环境，都是费时费力的事！那如何能快速出效果呢？本期我我们给大家带来了全新二次元笔刷+色板+线稿+教程套装套装包含Procreate笔刷＋色板+Ps笔刷+色板+1000张精品线稿图+日漫二次元绘画教程，从零基础入后期控 动画技术 72 2 0 如何制作你自己的Minecraft服务器：5件你需要知道的事情你想和你的朋友一起玩Minecraft吗？这里，我们解释在设置服务器时要考虑什么。

你可能听说过一款叫做Minecraft的独立游戏。

你知道，它只是一个在全球拥有1亿多用户的平台。

Minecraft是巨大的，不仅仅因为它的社区，还因为游戏本身是无限的。

多亏了它的服务器，在Minecraft中没有什么是你不能做的。

你也可以通过创建服务器来制作任何你能想象到的东西。

如果你不知道从哪里开始，下面是如何在Minecraft上添加服务器。

1.为什么要创建Minecraft服务器？如果你认为创建MinecraMC资讯网 单机游戏 6 2 0 评论目录------0