Jarek Majewski 是一名 2D 美术和编程的自由职业者，也是负责最新 2D 示例项目《Dragon Crashers》美术和动画的创作者（点击回看）。Unity 2D 团队邀请 Jarek 分享了他的创作过程，包括制作精灵、2D 光照和动画的技巧，及他偏好的艺术与设计软件 Affinity Designer 和 Photo。

我打小就喜欢画画，沉醉于用想象力来创造自己的世界、故事和人物。在接触电子游戏后，我便被其深深迷住了，于是我把自己对艺术和游戏的热情结合了起来。

用铅笔作画比较简单，我能用最少的力气将描绘出自己的构想。我不需要准备什么，不需要打开软件，也不需要选择工具或色彩——纸笔能完美地将艺术构思与实物联系起来。

Jarek Majewski 的一些早期草图

起初我的灵感来源于《地心之旅》、《帝国时代：城堡围攻》和海盗船，但是后来，我提出了一个水晶矿作为背景，里头有一条龙睡在一堆黄金上的设想。这个设想被 Demo 团队选作为项目的主体构想，因为它能很好地展示 Unity 的创作功能，比方说用于制作矿车铁轨的 Sprite Shape，及 2D 光照。项目中还包含了多个各具特色的双足和四足角色，每个都充分展示了精灵骨架绑定（sprite rigging）的功能。这个构想非常的完美，可以将故事性、艺术性和技术力很好地联系起来。

https://docs.unity3d.com/Packages/com.unity.2d.spriteshape@5.1/manual/index.html

https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@12.0/manual/Lights-2D-intro.html

https://docs.unity3d.com/Packages/com.unity.2d.animation@5.0/manual/index.html

我首先会研究精灵的实际形象，即使是高度风格化的画作也需要一定的真实感。

在为一个新游戏创作第一个精灵时，你可以多画几个不同风格的精灵，再最终选定用哪种美术风格。如果是为一个风格成熟的游戏制作精灵，你就需要以精灵周遭的环境作为参考，为精灵选择正确的比例、色调和观察角（这一点在俯视等距视角等镜头角度略微向上倾斜的游戏中尤为重要）。

如果你的作品还带有外轮廓，轮廓的宽度就必须与环境中的其他物体相一致。这些要点在像素美术中同样关键：如果精灵的色调与游戏不匹配，可以在随后进行修改，但如果像素大小不对，整个精灵就需要从头重做。

在有了草图和环境参考后，就可以开始制作了。

我先画出粗略的形状或剪影，然后再加入细节。图片的格式主要为矢量图，矢量图具有灵活、易于编辑的优点，精灵在修改颜色、形状或尺寸时不会损失图像质量。

我喜欢尽可能保留精灵的可编辑性，光栅化或矢量图像都一样。我于是会在考虑到性能的前提下，尽可能多地使用图层。这样做的优点在于，我可以随时用这些原始文件创造一个不同的精灵。

所有图层仅在导出时会合并成 PNG 格式的图片。图片导出主要借助 Affinity Designer 的 Export Persona 功能完成，功能支持一键导出多个精灵，可以将多张精灵合并成一个文件。导出功能还带有一个 Continuous 连续导出模式，当精灵有了任何变动时，导出文件便会自动更新。该功能可节省大量的时间。

一张好的法线贴图可以让 2D 精灵看起来就像 3D。法线贴图中的每个像素会存储纹理的呈现角度。红、绿、蓝（RGB）通道存储了 XYZ 坐标上的角度。那么 RGB 这三个值是如何影响法线贴图的呢？

上方图例就是一张平面的法线贴图，其中的像素都面朝着摄像机。贴图的 RGB 值分别为 127、127 和 255，每个颜色通道的数值范围为 0 到 255，而 127 接近于中间值。如果我想让某个表面朝向左边（即角度为-90度），则需将 R 通道设置为 0；如果想让它朝向右边，则需将 R 通道设置为 255。表面如果想向下或向上改变角度，可将 G 通道的数值分别设置为 0 或 255。

绘制法线贴图的一种方法是将不同受光角下的精灵画出来，然后将其合并成一个纹理。精灵将在 R 通道中接收一个来自右边的光，在 G 通道中接收一个来自上方的光，在 B 通道中接收一个来自前方的光，但为了简单起见，B 通道在 2D 精灵上通常可以忽略不计。 

这种方法可能需要修改至少两次着色器，比较耗时。

将精灵从Affinity Designer导出到法线贴图生成应用Sprite Illuminator

另一种方法是使用自动的法线贴图生成应用。你只需在应用中打开精灵文件，在点击几下就能生成一张法线贴图。贴图生成应用并不会参考精灵本身的角度信息，所以不宜整个精灵都使用自动生成的贴图。你可以用它来生成斜面部分的法线贴图，如链条、电缆或龙尾。先将这部分精灵导入生成程序，调整数值后导出，然后再自行添加必要的部件和细节。

我在《Dragon Crashers》中采用的方法是直接在精灵上涂色。在解释这个方法之前，我想先提一下基本色（base-color）的几个特点。如果你打算在游戏中大量使用 2D 光照，并充分发挥法线贴图的作用，就不要把光影画在精灵上。

2D 光照在已有光影效果的精灵上并不好看。并且你还要在法线贴图中画出光照，让工作量成倍增加。不过，我们确实可以画出一些不定向阴影（即ambient occlusion，环境光遮蔽），让精灵看起来更美观，但最好不要画出那些定向光线，比如太阳光。

在关闭2D光照时，我们可以观察到精灵的确有色彩信息（即albedo，反射率），但由于确少光影效果，看起来过于扁平

在绘制法线贴图时，你需要知道各个角度会呈现出哪些颜色。在《Dragon Crashers》里，这些都是我参考网上的法线贴图调色板做出来的。我接着在 Blender 中自行制作了一个调色板，并将其导出为 .PNG 文件。这个调色板是一个简单的球体，球体各角度的色彩都由我挑选并涂抹。在制作出调色板的形状后，我会使用矢量图进行颜色填充。你也可以像平时画画那样，用选好的画笔涂抹色彩，或者在作品上一个像素一个像素地画。

不同角度的色彩不需要 100% 准确，差几度并无大碍。不过，精灵的整体形状必须足够真实。如果某个角度的颜色不匹配周围的元素，那么整个形状在受光时就会显得四分五裂。

法线贴图的绘制要求我们有较强的空间想象力，因此在一开始可能比较困难。你可以先从盒子、木桶这种简单的形状开始，摸索正确呈现光影的方法，在长时间的实践中熟能生巧。

这里有几条值得注意的小捷径：在为球体绘制时，你可以直接粘贴球形的调色板；在为圆柱体绘制时，你可以截取球体的一部分粘贴后再进行拉伸。

注意，复制粘贴、旋转部分法线贴图可能会破坏着色效果，不过这一点偶尔也能加以利用。例如，如果你需要的是一个凹陷的球面，就能把球体旋转 180 度来形成一个洞。

具体的要求有具体的用法。一款游戏通常会用到大量的资源，而时间是有限的，所以我们要重点关注那些长时间出现在视野中的物体，简化其他部分，并且选择那些能让你事半功倍的技术。我个人推荐的工具有：

Normal Painter、Krita's Tangent brush、Sprite Illuminator 、 Laigter、Sprite Lamp。

我习惯于提前规划动画，明确在一定条件的限制下自己能做出什么。

在《Dragon Crashers》中，我大量选取了首个人物的资源，以此为基础制作其他角色的动画。我主要执掌了三名玩家角色和一名敌人的动画制作（恶龙的动画按下不表）。这些角色使用了相同的精灵蒙皮骨骼，并采用 Unity 2D Animation 软件包的 Sprite Swap（精灵替换，目前处于实验状态）功能。同时，每位角色都需要有独特的视觉风格，避免看起来千篇一律。

在设计人物时，所有角色必须要有近似的形体，好使用相同的骨架，因此我在 Affinity 中做了一个简单的骨骼覆盖图。如此一来，我就能实时查看角色的四肢是否匹配上底层的骨骼结构。最终效果挺好，每个角色都能有自己的特色：一位戴着宽大的魔法帽，一位穿着厚重的胫甲，还有一位狼人。

我花了大量的时间来明确角色应有多少图层、哪块骨骼影响哪一图层，这些元素要在以后修改的话会非常头痛。当然，这一过程也有一些试错，但由于基础角色规划得较好，其他角色的制作可谓是水到渠成。

在导入角色到 Unity 时，我使用了 PSD Importer，它能保留 Affinity 中的图层结构和位置。由于角色制作采用了矢量图，因此每一图层都是由许多路径组成。为了将角色导入 Unity，所有图层都必须栅格化，再导出为 PSD 文件（文件扩展名还得改为 PSB）。于是我为每个角色保存了两份文件，一份是矢量图源文件，另一份是光栅化文件。如此一来如果我想做出一些调整，便能轻松找到可编辑的文件。

PSD Importer：

在将 PSB 文件导入 Unity 后，我使用了 Skinning Editor 进行骨骼绑定。我手动画出了所有的骨骼，再给每个图层自动生成了网格，并使用 Auto Weights 功能来关联各个骨骼。

Skinning Editor：

Auto Weights：

接着我着手优化角色，首先清理了精灵的网格，减少了其顶点数，然后梳理了骨骼权重，保证角色在各个姿态下都比较合理。我然后仔细检查了脚踝、膝盖和肘部这些关节弯曲的地方，小心地放置这些部位的网格顶点、设置骨骼权重，尽量让四肢的弯曲更显自然。

一块骨骼的影响范围以同颜色的色块表示

在绑定完成之后，我创建了一个 Sprite Library Asset，根据 Categories 和独特的 Label 名称对精灵进行划分。如果我需要制作另外的角色，只需将这个 Sprite Library Asset 替换掉即可。我还在眼睛和嘴巴上使用了 Sprite Swap 用于制作面部表情，又为角色的四肢添加了 2D IK，以在制作动画时方便控制角色。

Sprite Library Asset：

Categories：

Label：

2D IK：

Sprite Resolver组件可在动画播放时替换精灵，这里替换掉的是不同的口型

在完成以上步骤后，我把角色保存为预制件，让任意修改能自动应用到其他角色身上：比方说调整 IK、改变分类层、添加武器或附件，或为原预制件添加脚本组件，这些修改都会自动应用到其他角色上。这一点在面对庞大的角色数量时可以节省大量的时间。

至于剩下的角色，我无须制作额外的骨骼，只要直接导入 PSB 文件即可。骨骼可直接复制角色预制件的骨骼，再根据新角色的外形调整其精灵网格的拓扑和权重。

法线贴图和遮罩贴图的导入就更简单了。我可使用快捷键 Ctrl + D（Mac 上为 Cmd + D）将角色复制到 Unity 中，在 Affinity 中打开它，然后将所有图层替换为对应的法线图（或遮罩图）。而法线贴图并非带颜色的纹理，因此需要取消勾选 Advanced > Sprite Import Settings 下的 RGB 选项，接着我便能在 Sprite Editor 中将法线贴图和遮罩贴图设定为次级纹理。

这下角色就为动画制作做好准备了，而所有角色完全可以共享一套动画。角色的大多数动作使用了相同的动画片段，但每个角色都有独特的闲置和攻击动画，这是角色个性的体现。

恶龙的动画制作流程更为直接。龙本身只需要使用一套皮肤，所以没有必要进行过长的制作规划，更多的精力投入到了角色的设计和总装上。大部分时间都用于检查翅膀、尾巴和颈部的绑定是否正确，在动画播放时精灵是否有可见的瑕疵。如果想在随后省去些头疼，你最好在绑定时就测试各种极端的姿势。

其它的过程，像是配置 Sprite Swap、IK 和额外贴图都与双足角色大致相同，除了那两条多出来的腿。

更多动画技巧，以及 Jarek 偏好的艺术与设计软件 Affinity Designer 和 Photo 介绍，已搬运至 Unity 社区专栏，欢迎点击“阅读原文”跳转：

长按关注

第一时间了解Unity引擎动向，学习最新开发技巧