二维灯光和阴影

介绍

本教程解释了二维照明如何在 lights and shadows 演示项目。它首先简要描述了在最终演示中使用的资源,然后描述了如何一步一步地制作一个类似演示的场景。

../../_images/light_shadow_main.png

本教程的所有资源都可以在 official demo repository 在Github上。我建议你在开始之前下载它。或者,也可以从项目经理处下载。启动Godot,在顶部的栏中选择“模板”,然后搜索“二维光和影演示”。

安装程序

对于这个演示,我们使用四种纹理:两种用于灯光,一种用于阴影投射器,一种用于背景。如果你想从演示中单独下载它们,我在这里提供了所有链接。

第一个是背景图像 (bg.png )在演示中使用。您不一定需要背景,但我们将其用于演示。

第二个是纯黑色图像 (caster.png )作为我们的影子施法者对象。对于一个自上而下的游戏,这可能是一堵墙或任何其他投射阴影的物体。

接下来是光本身 (light.png )如果你点击链接,你会发现它有多大。用于灯光的图像应覆盖希望灯光覆盖的区域。这个图像是1024x1024像素,所以你应该用它来覆盖你的游戏中的1024x1024像素。

最后,我们有聚光灯图像 (spot.png )演示使用一个斑点来显示灯光的位置,使用较大的灯光图像来显示灯光对场景其余部分的效果。

结点

演示使用四个不同的节点:

CanvasModulate 用于使场景变暗。

Sprites 用于显示光斑、背景和阴影脚轮的纹理。

Light2Ds 用于照亮场景。灯光通常的工作方式是在场景的其余部分添加选定的纹理以模拟灯光。但它也可以用在其他方面,例如遮盖部分场景。

LightOccluder2Ds 用于告诉明暗器场景的哪些部分投射阴影。阴影只出现在 Light2D 它们的方向是基于 Light .

Lights 覆盖其各自纹理的整个范围。他们使用添加混合将纹理的颜色添加到场景中。

../../_images/light_shadow_light.png

Lights 有四个 ModesAddSubMixMask .

Add 将灯光纹理的颜色添加到场景中。它照亮了灯光下的区域。

Sub 从场景中减去灯光的颜色。它使灯光下的区域变暗。

Mix 将灯光颜色与基础场景混合。产生的亮度介于灯光颜色和下面的颜色之间。

Mask 用于遮掩被灯光覆盖的区域。遮罩区域根据灯光的颜色隐藏或显示。

对于演示,灯有两个组件, Light 自身(光的作用),以及 Sprite 斑点,是显示光源位置的图像。一个孩子 Sprite 不需要做一个 Light 工作。

../../_images/light_shadow_light_blob.png

阴影

阴影是通过相交 Light 用一个 LightOccluder2D .

默认情况下,阴影处于关闭状态。要打开它们,请单击 Light 在阴影区检查 Enabled .

在演示中,我们使用 Sprite 上面有一个纹理,可以做成“影子脚轮”,但实际上你只需要两个 LightOccluder2Ds . 就其本身而言 LightOccluder2D 看起来像一个黑点,在这个演示中 Sprite 只是一个黑色的正方形。

一步一步地

既然我们已经介绍了正在使用的节点的基本知识,那么我们现在可以一步一步地完成创建一个场景的过程,就像在演示中找到的场景一样。

首先添加 Sprite 并将其纹理设置为 background image . 对于您的游戏,这可以是您选择的任何背景。对于这种阴影样式,很可能是地板纹理。

../../_images/light_shadow_background.png

下一个创建三个 Light2D's 并将其纹理设置为 light image . 你可以在顶部改变它们的颜色。默认情况下,关闭阴影,然后 mode 设置为 add . 这意味着每盏灯都会为下面的东西添加自己的颜色。

../../_images/light_shadow_all_lights_no_blob.png

下一步添加子项 Sprite 给每个人 Light 节点,并设置 Sprite's 纹理到 blob image . 每一个都应该集中在 Light 节点。斑点是光本身的图像,而 Light 显示灯光对场景的效果。这个 LightOccluder2D's 将灯光的位置视为 Light 节点,这就是为什么我们希望blob集中在其父节点上的原因。 Light .

../../_images/light_shadow_all_lights.png

注解

在编写时,3.0是稳定的发布版本。3.1开发分支包含对动画系统的许多更改,因此演示中的动画将不在这里介绍。见 二维动画功能简介 更多信息。

现在的场景应该太明亮了。这是因为所有三个灯光都在为场景添加颜色。这就是为什么演示使用 CanvasModulate 在现场。这个 CanvasModulate 将整个视区乘以特定颜色。

添加 CanvasModulate 到场景并将其颜色设置为 rgb(70, 70, 70) . 这将使场景足够暗,可以清楚地看到灯光的效果。

../../_images/light_shadow_ambient.png

现在我们添加了影子脚轮。

演示使用 Node 命名为“施法者”组织影子施法者。添加一个 Node2D 去现场。它将被用来把所有的影子种姓者聚集在一起。这样我们可以同时显示和隐藏它们。

每个施法者都是由 Sprite ,带有 LightOccluder2D 孩子。为了演示 Sprite 将纹理设置为 caster image 没有别的了。孩子 LightOccluder2D 是所有魔法发生的地方。在游戏中 Sprite 可能不仅仅是一个黑匣子;它可能是任何物体投射阴影的图像:一堵墙,一个神奇的箱子,或者其他任何东西。

../../_images/light_shadow_sprites.png

LightOccluder2Ds 告诉游戏封堵器的形状。他们持有 OccluderPolygon2D ,它是多边形和一些其他信息的容器。因为我们的墙是正方形的,所以我们设置了 Polygon 去一个广场。其他默认设置也可以。

第一次设置, Closed 要么可以 onoff . 闭合多边形阻挡来自各个方向的光。一个开放的多边形只阻挡来自一个方向的光。

Cull Mode 允许您选择要剔除的方向。默认值是 Disabled 也就是说,无论光线在哪一边,遮光罩都会投射出阴影。其他两种设置 ClockwiseCounter-Clockwise 参考多边形顶点的缠绕顺序。缠绕顺序用于确定线的哪一侧在多边形内。只有朝外的线条投射阴影。

为了说明区别,这里是 LightOccluder2D 具有 Closed 设置为 off 在相应的 OccluderPolygon2D ,以便可以看到多边形的线条:

../../_images/light_shadow_cull_disabled.png

注解

Cull Mode 设置为 Disabled . 这三条线都投下阴影。

../../_images/light_shadow_cull_clockwise.png

注解

Cull Mode 设置为 Clockwise . 只有顶部和右侧的线条投射阴影。

../../_images/light_shadow_cull_counter_clockwise.png

注解

Cull Mode 设置为 Counter-Clockwise . 只有底线会投射阴影。如果 Closed 被设定为 on 左边会有一条额外的垂直线,也会投射出阴影。

当您添加了 LightOccluder2Ds 阴影仍然不会出现。你需要回到 Light2Ds 在阴影部分集合下 Enableon . 这将打开具有硬边的阴影,如下图中所示。

../../_images/light_shadow_filter0_pcf0.png

为了使阴影看起来更漂亮、更柔和,我们设置了变量 filterfilter smoothgradient length . Godot支架 Percentage Closer Filtering (PCF),它在一个像素周围提取阴影贴图的多个样本并使其变蓝以创建平滑的阴影效果。采样数越大,阴影看起来越平滑,但运行速度越慢。这就是为什么godot默认提供3-13个样本并允许您选择。演示使用PCF7。

../../_images/light_shadow_normal.png

注解

这是使用演示设置渲染的阴影。 gradient length 设置为 1.3filter smooth 设置为 11.1filter 设置为 PCF7 .

../../_images/light_shadow_pcf13.png

注解

filter 设置为 PCF13 . 注意阴影是如何变宽的,这是因为采样之间的距离是基于变量 filter smooth .

为了使用过滤,需要设置 filter smooth 变量。这决定了样本之间的距离。如果您希望软区域扩展得很远,可以增加 filter smooth . 但是,由于样本很少,并且过滤器很大,因此可以看到样本之间形成的线。

../../_images/light_shadow_filter30.png

注解

filter smooth 设置为 30 .

不同的 Light 演示中的节点使用不同的值进行平滑过滤。玩玩它,看看你喜欢什么。

../../_images/light_shadow_filter0.png

注解

filter smooth 设置为 0 .

最后,有一个变量 gradient length . 对于某些平滑的阴影,最好不要立即在对象上开始阴影,因为这样会产生硬边。渐变长度变量创建平滑渐变以开始阴影以减少硬边的效果。

../../_images/light_shadow_grad0.png

注解

gradient length 设置为 0 .

../../_images/light_shadow_grad10.png

注解

gradient length 设置为 10 .

您将需要在选项中进行一些调整,以找到适合您的项目的设置。每个人都没有合适的解决方案,这就是为什么Godot提供了如此多的灵活性。记住,越高 filter 设置的阴影越昂贵。