如何为2D游戏做出空间感和3D感？

这是我之前在cowlevel中写的一篇回答。

这个专栏刚刚开辟，内容少的惨不忍睹，所以搬运了过来。AngerForce: Reloaded在开发过程当中有一些有意思的事情比较值得记录，后面有时间的时候，我会慢慢整理出来。这里先提前挖个坑。

cowlevel的提问是“如何为2D游戏做出空间感、3D感？”，以下是原回答，略有删减。

有的奶牛提到了光影、视差场景、还有一些动画技术。我也分享一些自己的经验。

针对静态素材：

• 透视准确。
• 不同层级的对象位置得当。
• 适当的光线和阴影。
  

素材其实是基础，如果2D的素材绘制的问题一堆，将很难做出好的效果。

动画实现上的一些技巧：

• 动画对象的部件充分拆解。
• Free Form Deformation。（近几年非常流行的2D动画技术，不太清楚官称是什么。我们使用Spine作为动画解决方案，官网上这么叫的。上面有奶牛提到了。我也听过一些其他名字：Live2D、网格形变动画、Mesh动画、XX变形等等等等无所谓叫什么，总之是指通过变形2d纹理来实现动画的技术。）
• 适当设计“遮蔽物”（障眼法）。
• 混合位移和部件关键帧，制造整体的立体效果。
• 必要时使用一些3D技术进行辅助。
  

场景方面已经有奶牛提到了视差滚动场景、动态光源、阴影等内容，我知道就这么多也就不献丑了。单位的动画我结合自己的游戏举些例子吧。

我们的游戏(AngerForce-Reloaded)是一个2D的顶视角纵版卷轴射击游戏，九十年代调调的STG（简单说就是打飞机(??ω?`) ），一些方案希望可以对其他开发者有参考作用。

动画对象充分拆解

2D的骨骼动画要出效果，需要把单位拆解成足够细分的单元，这样制作动画时分开操作不同关节可以表现出良好的前后层关系，制造3D的错觉。

上图是近些年比较流行的动态角色立绘；


这是动画所用的Atlas。这个动画有用到Free Form Deformation，用于模拟3D状态下的关节透视变化时的形态，比如，乳摇……

自由网格形变Free Form Deformation

这项功能目前主流的动画编辑工具基本都有支持，技术上没有什么难点。

我们为游戏中的每个Boss设计了一个这样的出场动画，类似九十年代电影的角色介绍。


这部分我们采用Free Form Deformation模拟制造了一个近似3D的转身的动画。这个角色设定上有很多规整的几何图形，在进行形变时产生了非常好的效果，甚至有同学以为我们的游戏是3D实现的，实际上只用一张纹理。



这是纹理的网格方案和所用Atlas。


这个动画单独播放是这样的效果，如果仔细看还是有很多瑕疵的，能够发现并不是由3D实现的，但在游戏实际应用中，由于动画播放时间很短，足够以假乱真。

Free Form Deformation的原理很简单，但具体实现所展现出的效果取决于上面提到过的因素：透视准确、适当的阴影、前后层部件适当的缩放和位移、运动规律以及充分的拆解。

遮蔽物

有时“鸡贼”点，适当设计一些遮蔽物是比较理想的做法，无论是优化纹理，还是为了减少工作量。

我们有一个车造型的Boss，想给他设计一个在镜头前漂移着呼啸而过的出场动画。

基本过程设想是下图这样：


车尾在镜头前漂移驶过，而后再加速向前方驶去，在最后时再来一个慢镜头特写，配合Boss名字砸在屏幕上，欧耶，完美！（这得画到什么时候（╯－＿－）╯╧╧ ）

用2D帧动画的话，从①到③的过程需要很多帧，得画尿血，3转2最后也会是一张超大Atlas。后来我们讨论了一下，决定做的“偷”一点，使用了如下方案——加入遮蔽烟雾。


车尾在屏幕右侧进场，在镜头前滑过，这整个过程车子只有位移和缩放，没有任何透视的变化。但由于大部分画面车子都有烟雾的帧动画进行遮挡，配合上位移和镜头的晃动，车子最后的”慢镜效果“是使用Free Form Deformation，整体看上去是不是有了3D的景深和立体感？

换了没有烟雾的效果再看下：


遮蔽物的使用原则是——用小的素材进行动画去遮蔽大的素材，或是用简单的动画去遮蔽一个复杂的动画。此处烟雾的应用减少了关键帧，营造了“漂过的似乎车子真的有透视变化”的效果，并且烟雾还有一个关键作用，就是作为“遮眼法”，过渡了“漂移的大车”这一帧替换“向前驶去的小车”帧的镜头，观众会根据前摇和后摇的运动轨迹去脑补被遮蔽的中间的过程。（看到车子先向左划过的前摇，和冲出去的后摇，把没看到的过程自动脑补成S弯，其实就是平移和缩放。）

混合使用位移和部件关键帧

仅关键部件使用不同透视的纹理而其余部件仅采用位移，有时能产生“似乎整体都有透视变化”的错觉。


图中机甲的移动只有大腿和膝盖两个关键部件拥有不同透视的帧动画，其余部件仅仅使用位移，让观众觉得似乎小腿、脚、胸部和头似乎都有一些透视上的变化。用这种要注意动作符合运动规律，被遮挡的部件可以大幅移动（脚和小腿），较大的和暴露在最顶的层部件不适合做过大幅度动作（胸口和头），毕竟它们没有透视变化，大位移容易穿帮。

这部分内容，日系的2D游戏提供了很多范例，就不献丑了。

使用3D技术辅助

想要3D的感觉最简单的方式就是直接用3D（废话…（⊙＿⊙；）… ）。这部分无需多言，一些透视要画准的话是2D，必要时也需要一些3D的工具的辅助，比如草图大师，甚至是建模。


2D做出3D感其实就是用2D的素材来模拟3D世界的运动规律，但2D游戏毕竟是2D的纹理，想要百分百的3D效果那说明使用3D来制作游戏是最经济的。2D只是用技巧制造一些视觉表现力，达到欺骗眼睛的效果就够了。

最后，丢个过场动画的GIF，使用2D素材和Free Form Deformation实现。