《Dragon Crashers》的2D艺术创作

Jarek Majewski是一名2D美术和编程的自由职业者，也是负责我们最新2D示例项目《Dragon Crashers》美术和动画的创作者。在与Unity 2D团队的Eduardo交谈时，Jarek谈及了他的创作过程，分享了制作精灵、2D光照和动画的技巧，及他偏好的艺术与设计软件Affinity Designer和Photo。 

你可以在Twitter（@mindjar）或他的个人网站上找到Jarek。

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

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

起初我的灵感来源于《地心之旅》、《帝国时代：城堡围攻》和海盗船，但是在最后我提出以一个水晶矿作为背景，里头有一条龙睡在一堆黄金上。demo团队最终选择了这一条作为项目的主体构想，   

因为它能很好地展示Unity的创作功能，比方说用于制作矿车铁轨的Sprite Shape，及2D光照。项目中还包含了多个各具特色的双足和四足角色，每个都充分展示了精灵骨架绑定（sprite rigging）的功能。这个构想非常的完美，可以将故事性、艺术性和技术力很好地联系起来。

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

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

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

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

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

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

所有图层仅在导出时会合并成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精灵上通常可以忽略不计。  

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

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

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

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

在绘制法线贴图时，你需要知道各个角度会呈现出哪些颜色。在《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）。于是我为每个角色保存了两份文件，一份是矢量图源文件，另一份是光栅化文件。如此一来如果我想做出一些调整，便能轻松找到可编辑的文件。

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

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

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

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

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

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

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

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

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

这一阶段的首要任务是构思出最终的环境。我在开始之前已经对整个环境的氛围和展开，包括视效、游戏性和情绪，有了一个清晰的构想。这种基础性的构想是所有工作的中心，让我能有目的地放置预制件，其它细节则可以随后跟进。

起初我将环境资源导出至Unity并保存成预制件，在凑齐所有场景中所需的资源后，再开始尽情发挥。Unity在制作流程上显得非常灵活：我可以用Tilemap“画出”基础环境、用Sprite Shape添加精灵图案、手动摆放精灵，加入光照和雾气、粒子等特效。同样的，因为我已经对关卡布局有了清晰的想法，所以可以更加专注于视效。

另外在设计关卡流程时还需要将游戏性摆在第一位。在这种方法下，我们需要着重注意在互动层面上的几何形，首先摆放好所有平台、墙壁和房间，再添加敌人、障碍物和拾取道具等互动元素，然后进行测试和迭代。 

从总体上看，本阶段一个较为恰当的做法是将互动层与视觉元素分开。先搞清楚核心的游戏性，然后再添加视觉效果，这样你就能节省大量的时间和精力，当你（或关卡设计师）想重做游戏时，就不必重新摆设所有精心布置的装饰了。

这些相互兼容的功能让精灵和次级贴图的配置变得非常轻松，还能与normal sprite、Tilemaps、精灵着色器和Shader Graph等其他功能协同运行。 

2D光照

在打光时，一个不错的方法是将2D光照和遮罩贴图与2D骨架结合使用。这种方法类似于搭建3D环境的流程，我会先创建简单的不受光精灵、法线贴图和用于轮廓光的遮罩贴图，这样便不需要再根据环境和光照条件来重新绘制精灵了。精灵的光照正如绘制出来的贴图，并且本身也带有十足的手绘风，可以很好地融入周围环境。

这一优点简直改变整个制作流程，这种新式流程甚至可以用来制作产品营销中所用的资源。你可以重复使用建好的游戏环境，在里头摆上新人物、重新设置光照，结果看起来仍会非常惊艳，而这些都毋须我们为人物额外制定姿态、绘制光影效果等等。在此基础上，你甚至能用后期处理效果来改变场景的氛围。

就我个人来说，我尤其喜欢用2D光照来添加阴影。当光照应用了Use Alpha Blend on Overlap设定且强度很低时，它就会在环境中生成阴影，成为一块阴影区域。我用这种方法制作了恶龙身下的阴翳。  

Sprite Shape功能

如果没有Sprite Shape，要我做2D游戏简直可以说是“无米之炊”。功能的设置和编辑都非常简便，你可以在几分钟内做出一个关卡，非常快速地完成原型的制作。它不仅仅能用于制作关卡内的几何形，我还用它制作了矿车铁轨、桥梁、吊索、背景里的脚手架和前景中的各种形状。

在《Dragon Crashers》里，为了营造前景模糊的效果（该效果会大量耗费移动设备的机能），我甚至制作了一张模糊化的边缘纹理。可以说Sprite Shape的作用只有你的想不到。一个精灵形状只需要几秒钟即可完成修改，使得环境微调可节省大量的时间；几何形既可以非常尖锐，也可以借助Continuous Mirrored Point Mode使其变得圆润；Sprite Shape还能生成2D碰撞体，节省手动设置碰撞体的时间。 

如果你还没有用过Sprite Shape，快来尝试下，它能极大地改善你的工作流。 

Timeline时间轴

Andy Touch（Unity的资深内容开发者）使用Timeline制作了几乎所有《Dragon Crashers》的系统。时间轴的特点使得创作过程非常流畅：我可以直接在任意一条时间轴上做出小改动，不必担心会损害其它内容。Timeline系统高度模块化的特点让人惊喜，在时间轴上编辑过场动画及其他元素也非常容易，可嵌套的特性也能让整个流程更加高效。

Affinity Designer兼容Mac、Windows和iPad三种平台，支持2D游戏美术的矢量和光栅绘图流程与工具。  

应用中的Pen功能包含许多实用的快速绘制功能，可在软件中绘制出任何形状。你可以先从窗口底部的快捷功能开始熟悉。

尽可能提高作品的可编辑性。你可以多多使用可编辑的Compound功能。通常在合并颜色通道时，图像将保留一条固定的通道，无法在未来进一步编辑。如果我们在按住Alt键（Mac上则为Option键）的同时点击工具栏上的几何形按钮，Compound路径将形成一个组，图层将能保留一个影响效果的选项，包括Add（叠加）、Intersect（交集）、Subtract（剔除）和X模式，非常的方便！

使用Document调色板。这个调色板中设定的是文件全局的色彩，一旦有某种颜色被修改，任何使用该颜色的对象也会更新。这一点对制作物体和人物变体来说很方便。

上图显示了一名蓝色的战士角色，他腿部、胳膊、头盔和武器都是蓝色的。如果我们想将其改为绿色，只需在需要修改的部分应用document颜色，然后在色板进行修改，就能立即生成一名不同的角色。 

使用Symbols。通常来说，画布上会用到许多重复的对象，必如关卡环境图块或地砖。这时，如果你想修改这些对象要怎么办？你可以使用Symbols（符号图案），先将一个对象保存为一个Symbol，再大量复制填充，而只要有一个图案有了修改，其他同类型的图案也会更新。

善用Assets面板管理项目。Assets面板可显示出面板内所有游戏元素的概览，并且支持以所在关卡、类型、颜色等等分类标准对对象进行分组。你还能将这些对象拖到任意文件中，再检查图像的一致性、比例、在另一关卡中的呈现方式等等。你还能模拟游戏的屏幕显示或截取“屏幕截图”。

甚至，你可将按钮图案、开关和图标等UI元素放入面板，用于游戏界面的设计。

Affinity Photo是一整套的图片编辑方案，兼容macOS、Windows和iOS平台。 

Affinity旗下的应用可互相兼容，在其它应用中保存的文件完全可以在Designer或Photo中打开。文件可用Designer的File > Edit菜单选项（或Photo的File > Open选项）打开编辑。 

这两个应用程序共享大多数功能，Affinity Photo同样支持Asset Panel和部分矢量绘图功能，且两者的界面相似，方便了切换使用。 

而每个光栅绘图应用绝对少不了画笔功能，Affinity Photo有一个使用流畅、功能齐全的笔刷引擎，还支持数位板作画，你也可以导出和导入自定义笔刷。我很喜欢画笔稳定功能，功能可让线条变得非常流畅，对轮廓的绘制很有帮助。

除了超棒的光栅化图形和笔刷外，我另一个爱用的主要功能是Live Filters（实时滤镜），这种滤镜可以大幅修改作品观感的同时保留可编辑性。我特别喜欢多视角滤镜，它可以根据不同的视角来让图层变形，非常适用于摆放建筑物的窗户、墙上的海报或各类表面上的纹理。Live Filter内含Live Adjustments Layers和Blend Modes两种功能，可让你立即看到修改成果。 

最后要提的是Layer Effects（图层效果），它能够在图像上加入渐变色、投射阴影、内阴影、外轮廓、3D立体等众多效果。只要发挥一点创造力，你就能用这些效果做出任何东西，并且还不会损坏原图。

感谢Jarek能抽空分享2D美术、Unity、Affinity Designer和Photo的使用心得。 想要学习Unity的初学者可在此处详细了解Unity的2D工具集。