我前几天发了一个我最近的游戏开发短片：

(相关资料图)

这个短片中内容的灵感来自于我这段时间在玩的《雨世界》这款游戏。我发现它的动画十分有特点：

如果有对游戏动画比较了解的朋友，那么可能会发现《雨世界》中的美术动画有两个特点：

程序化动画：通常来说，游戏动画需要在开发的过程中就将角色每一帧的姿势画出来。但是在《雨世界》中，开发者采用了程序化动画(Procedural Animation)。“程序化动画”是什么意思呢？它会将角色手、脚、还有每一个关节的位置都在游戏中实时计算出来。比如说，如果我们希望角色的左脚踩在某一个石头上，程序化动画就会根据左脚的位置计算出小腿、膝盖、大腿等等的位置，并将他们在游戏中渲染出来

像素风的角色骨骼：如果要做程序动画的话，那么2D角色的骨架必不可少（可以参考第三张GIF）。简单来说，2D骨骼就是将角色的每一个身体部分分开然后串联在一起，形成一个完成的骨架。在非像素游戏中，2D骨骼技术不罕见。不过在像素风游戏中，2D骨骼的应用还是比较少见的。

玩到《雨世界》这款游戏后，我也打算尝试将它的美术风格在我自己的Unity独立游戏项目中呈现出来。这将会是“重现雨世界”开发日志里面的第一期。我将会在这个日志里面记录我是如何为一个2D角色创建骨骼并且实现像素化渲染的。

第零步：准备工作

我在这个项目中用的是：

Unity 2021.3.16f1

Universal Render Pipeline (URP) 12.1.8

如果你想跟这一期日志在你的游戏里面也实现2D像素化渲染的话，那么推荐提前了解以下的知识点：

Unity的基本操作

URP

渲染纹理(Render Texture)

和着色器(Shader Graph)

第一步：为2D角色增加骨架

制作程序化动画的第一步就是为我们的角色创建一个骨骼。

B站上有不少视频详细地介绍了在Unity中生成骨骼的过程。比如下面这两期视频就介绍了绑定骨骼和创建IK(Inverse Kinematics，“反向动力学”)在这里我就不展开讲了。

在为我们的2D角色绑定好骨架后，它就会看起来像这样：

第二步：将角色渲染到渲染纹理（Render Texture）上

想要实现像素化的视觉效果，其主要的思路就将角色的分辨率降采样。我们将会用到Unity的渲染纹理(Render Texture)和着色器(Shader Graph)。

渲染纹理，简单来说，就是将游戏内渲染出来的画面临时保存下来。这个临时保存下来的画面则可以在后期拿来调用。

在Unity中新建一个摄像机(Camera)，将它作为我们想要渲染的游戏角色的子对象(Child Object)。

为了让这个相机只渲染角色本体，而不渲染背景物体，我们需要在Unity中单独创建一个图层(Layer)。我在这里将这个图层命名为"Pixelate"（也就是“像素化”图层）。然后我们将游戏角色和它所有的子对象都转移到这个图层。

接下来，我们希望我们新创建的这个摄像机只渲染游戏角色。我们可以去到摄影机"Rendering"部分中的"Culling Mask"，只勾选我们在上一步新建的"Pixelate"图层。

现在，我们新建的这个摄像机只会渲染我们的游戏角色，而不包含别的背景画面了。接下来，只需要将这个摄像机渲染出来的角色存进一个渲染纹理里面就可以方便后期调用了。

在Unity项目中，新建一个渲染纹理素材("Create→Render Texture")。注意这个渲染纹理的画面比例最好跟游戏内的画面比例一致。比如我的游戏是16:9的画面，那么我的渲染纹理的分辨率就是1920*1080的。

接下来，在我们刚才创建的摄影机中找到"Output→Output Texture"。将这里设置为我们刚才创建的渲染纹理。

那么现在，我们创建的渲染纹理就可以在游戏中实时渲染出角色的动作了。

第三步：降低角色的分辨率

在这一步，我们将会用到Unity的着色器(Shader Graph)。在进行这一步之前，我们需要先确认我们使用的是Unity的Universal Render Pipeline (URP)。

我们在项目中新建一个着色器文件："Create→ShaderGraph→URP→Unlit Shader Graph"。我们将它命名为“Pixelate”（像素化）。

然后，我们将会在这个着色器里面定义如何将我们的角色降采样。有耐心的朋友可以将下面的这个着色器一步步在Unity中实现，没耐心的朋友可以在下面的链接直接下载Shader Graph文件：

https://github.com/Merxon22/Rain-World-Animation/blob/main/Pixelate.shadergraph

在这之后，我们回到Unity项目中去新建一个材质："Create→Material"，并将它命名为"CharacterPixelate"（角色像素化）。将这个材质的Shader选择为我们刚刚创建的"Pixelate"着色器。

这个材质有四个参数：

材质(Texture)：将我们在第二步中创建的渲染纹理拖进来。

像素分辨率(Pixel Count)：这个数值越低，我们的角色就越“像素化”。这个参数的X和Y的比例要和我们渲染材质的分辨率比例一样。因为我渲染材质的比例是16:9，所以我在这里也要设置16:9的像素分辨率比例（比如192*108或者96*54）。

轮廓线颜色(Outline Color)：正如其名。

轮廓线粗细(Outline Thickness)：轮廓线的粗细，以像素为单位。

到了这一步，我们已经做了差不多80%的工作量了。

接下来，新建一个2D平面物体(2D Objects→Sprites→Square)并将它作为游戏角色的子对象。将我们刚刚创建的"CharaterPixelate"材质拖到这个2D平面的Sprite Renderer中作为它的材质。我们还要记得将这个2D平面的图层设置为一个不是"Pixelate"的图层（比如这里我设置它为默认图层），这样角色摄像机就不会去渲染它了。

接下来，我们在游戏的窗口中将这个2D平面重新进行平移和缩放，确保它和我们原角色的大小一致。这个2D平面的X:Y比例在我这里也应该是16:9的比例。

最后一步，去到我们的主摄像机里面（注意这里不是我们刚才创建的专门渲染游戏角色的摄像机，是主摄像机！），找到"Culling Mask"，将"Pixelate"图层勾掉。这样，主摄像机就不会渲染我们原来那个没有像素画后的角色了。

现在我们就可以通过拖拽角色的关节来生成像素版的角色动画了。

第四部：降低渲染帧率

这一步可做可不做，不过如果做了的话就可以让我们的动画看起来更像手绘的动画。

在Unity中使用2D的骨骼动画的时候，角色动画的渲染帧率往往是跟游戏帧率同步的（一般是60帧或者更高）。但是手绘的动画一般只有12帧。

（左边：60帧，右边：12帧）

为了降低我们的分辨率，我们将会关闭角色摄像机。取而代之的是每1/12秒通过代码让它渲染一次。在Untiy项目中新建一个C#代码，命名为"CharacterCamera"（角色摄像机），然后将下面的代码粘贴进去：

这段代码只有一个参数：帧率(frameRate)。我将它设置为了12，当然你也可以设置为别的数值。

将这个代码添加到我们在上面创建的角色摄像机里面。这样当我们点击“Play”，的时候，像素化后的角色就会以12帧的帧率来渲染了。

那么以上便是我重现《雨世界》美术动画的第一步。在这里我们为2D角色增添了骨骼并且将它进行了像素画渲染。在下一部分中，我将会通过算法来计算角色每一个身体关节的位置，从而实现程序化动画。

如果有想法或者疑问的话欢迎在评论区留言哦。

记得关注我来获得最新的游戏开发进度~