使用手绘法线贴图为2D精灵添加深度


像素艺术是永恒的,但这并不意味着使用像素艺术的工具和技术应保持在1993年的水平。

英国游戏开发者Cardboard Sword正在研究使用Paper2D在Unreal Engine 4中创建的二维隐形平台游戏The Siege and Sandfox。 团队发布了一系列开发日记,向其他开发人员介绍了如何在自己的游戏中使用这些工具。

The Siege and Sandfox的主要技术特征之一是将手绘的图块和精灵与法线贴图结合使用,从而使您可以在这款游戏中使用具有传统二维像素艺术的三维照明方法。

Cardboard Sword的艺术总监之一,凯特·杜克-科克斯(Kate Duke-Cox)最近告诉Gamasutra,该公司如何使用这种技术,为何适合该游戏以及如何在自己的2D游戏中应用类似的技术。

增添深度感


与2D游戏中的传统平面照明相比,法线贴图有什么好处?

凯特·杜克-科克斯(Kate Duke-Cox) :艺术总监的任务完全致力于寻找个人风格并达到理想的效果。 我们希望我们的艺术丰富,深刻且“凸”。 法线可以达到这个目标,给世界及其物体一种形式和力量的感觉。


这张图片由Keith Duke Cox于 2017年8月在Twitter上发布 ,是该技术的惊人例子。

例如,使用法线可使危险源看起来更加真实。 光线对表面的反应更正确,并且没有法线,就产生了非常平坦的“纸”的感觉。


如果使用正确,法线贴图可以将平面2D图像无法实现的深度和重量感添加到场景中的对象。

使用法线贴图是一种视觉解决方案,而不是功能性的游戏选择。 我们希望玩家能够深入到环境中,以便跑酷给人以深度和真实感的感觉,而不是某些像素游戏所特有的剪纸图案。 如果您坚持明亮,简单的颜色或复古风格,则平面照明非常适合。

最初吸引您使用法线贴图进行2D照明的是什么? 您是如何找到它的?或者在哪里看到了质量实施方案?

将法线应用于2D图形是它们在3D中使用的自然延续,这在我们创建样式时受到启发的旧系统上是不可能的。 当然,我们并不是第一个在现代像素艺术游戏中使用它们的人,但是结果却有所不同。

首先,我们拒绝使用此效果,因为在我们看到的许多效果中,它破坏了像素艺术的魅力和美感,给了它太多的金属光泽。 在我们为像素艺术创建手绘的像素的法线贴图的首次尝试中,我们获得了非常详细的法线-毕竟,这是其在3D图形中的主要目标。 但是我们游戏中的每个图块的大小仅为32x32像素,因此没有太多的像素可以传输表面信息。 结果,结果变成了嘈杂的混乱。

但是随后我们看到了格温纳尔·马塞特(Gwenael Masset)的《 死细胞》艺术,其中法线像素艺术做得非常好,因此决定给他第二次机会。 [这里是有关在此二维游戏中使用3D模型的文章 。]这次,我们使用的是法线贴图,而不是3D图形中可以看到的细微表面细节。 现在,法线贴图用于“塑造”大型像素艺术。

使用法线贴图雕刻表单


您能否简要谈谈开发资产的过程,特别是与创建类似的简单Sprite 2D资产的区别?

通常在绘制像素图时要考虑到光的“一般”方向。 在我们的案例中,对于大多数子画面和前景图块,主光线从上方倾斜,并稍微向右倾斜,而背景图块具有更一般的“摄像机光”,以模拟暗室而不会使玩家分散前景。

这意味着在渲染精灵和图块的法线时,已经选择了表面的细节和材质。 我们发现这种方法实际上效果很好。 他的意思是我们必须在法线中模仿的所有形式和细节已经非常明显和引人注目。

根据添加法线的精灵的性质,我们使用了从“法线贴图球”绘制法线的角颜色的方法(实际上,这是一个球,可作为所有可能的角度的调色板,可以在切线法线图上绘制)并在单独的RGB通道中绘制使用ND,Crazybump或AwesomeBump等其他工具进行灰度处理。 他们以某种形式提供帮助,并将法线的不同部分正确混合在一起。


完成绘制法线贴图后,我们使用Nvidia TextureTools for Photoshop来调整/规范化矢量。

使用诸如Sprite DLight之类的预构建工具绘制这样的手动法线贴图有什么好处?

当我们开始寻找在没有高多边形模型的情况下为2D对象创建法线的方法时,我们发现在某种程度上可以执行此任务的应用程序。

我们研究了这些教程以查找法线贴图的创建方式,但是发现它们要么基于像素的颜色值做出假设,但不能给出完全准确或完全不正确的结果,要么需要多个灰度图像来模拟来自不同光源的光线方向,实质上是独立创建法线贴图通道。

该程序无法知道像素在子画面中的高度和角度,尤其是当像素艺术游戏的调色板非常有限时,其中一种颜色用于指示对象的许多深度和角度。 但是,值得补充的是,我们实际上并没有使用这些程序,而只是评估了它们的应用前景。

有两种用于加速自动生成法线贴图的标准方法-灰度转换和形状识别。 我们使用这三种方法进行了测试,发现手动绘制方法绝对可以提供最佳结果。



灰度转换和形状识别可以产生比此处所示更好的效果,但是即使付出大量的人工和时间成本,它们仍然不如手动绘制的准确和好。

在本机2D游戏中使用法线贴图


您可以给想要走自己的路的开发人员什么建议?

手动创建准确的2D法线并非易事。 在所有前景和背景磁贴集上的工作大约花费了3个工作月。 因此,要获得高质量的结果,请准备投入大量时间。

快速创建的2D图形法线,尤其是像素图,通常看起来很糟。 诸如“用一个按钮创建解决方案”之类的系统通常会导致创建弱资产,当在游戏中进行渲染时,这些资产看起来会比不发光的像素艺术还要差。 在游戏的一小部分(前景色,背景,对象和角色的一小部分)上进行测试,找出适合您的风格以及游戏风格。

另一方面,在渲染方面,向我们的世界添加法线的成本非常小。 在几乎整个游戏世界中,我们有两个2k法线贴图。 它们不会占用太多内存,并且普通渲染过程的一些其他纹理不会过多影响绘图调用。 光源仅动态地执行照明,它们不会在游戏中的所有物体上投射阴影,因此它们也非常便宜。

如果您还不了解切线空间的法线是如何工作的以及它们的含义,那么即使是简短的研究也可以使您更轻松地绘制它们。

要使用此方法,您必须调整现有资产,而不是从开发开始就实施它。 您能为那些试图用法线贴图补充现成的精灵图形的人提供建议吗?

如果必须重新执行此操作,则将执行以下操作:首先创建漫反射图形,然后使用像素图作为参考绘制法线。

也许我们将某些对象绘制得有些不同。 当一个像素可以指示例如钉子或铆钉时,像素领域存在问题,但是法线贴图中的该像素只能对应一个角,因此我们可以使某些元素更大以更好地传达图像中的角度。

如果您使用的分辨率比我们的图块集中的分辨率低(32x32),则尺寸可能会限制您太多。 分辨率为16x16或8x8时,仅当一块瓷砖不是石头或混凝土块之类的大部分时,您才可能无法传递形状或体积。

在像素艺术中,清晰的渐变看起来不如具有锐角的大量表面好。 如果您的图形样式允许,那么我建议在正常表面上使用比倾斜更多的角度。 例如,如果您有一个枪管,请确保其所组成的每个单独的板都具有自己的角度,并且枪管本身比八角形更八角。

对于那些想在Unreal之外使用这些技术的开发人员,您有什么建议吗? 例如,在Unity或Gamemaker中。

开始之前,请检查法线贴图的方向。 对于所有引擎,绘制法线的方法都是相同的,只是贴图的每个颜色通道的含义不同。

通常,在不同的引擎中,只有Y轴(绿色通道)发生变化。 Unreal使用DirectX的Y侧坐标系的法线,但是Unity使用右侧的坐标系OpenGL的法线Y +(在我们看来),因此绿色通道应上下颠倒。

但是,如果您绘制不正确,则通常只需简单地翻转绿色通道即可。 如果图像亮起与预期结果相反,您将看到通道混乱。

Source: https://habr.com/ru/post/zh-CN430754/


All Articles