2D 빛(lights)과 그림자(shadows)

소개

This tutorial explains how the 2D lighting works in the lights and shadows demo project. It begins with a brief description of the resources used in the final demo and then describes how to make a scene like the demo step by step.

../../_images/light_shadow_main.png

이번 튜토리얼에서 사용된 모든 리소스(resources)는 공식 데모 저장소 깃허브(github)에서 찾아볼 수 있습니다. 저는 시작하기 전에 데모를 다운로드 하기를 추천합니다. 프로젝트 매니저에서 다운할 수도 있습니다. Godot을 실행하고 상단의 바에서 "템플릿"을 선택해서 "2D Lights and Shadows Demo"를 검색합니다.

Setup

이 데모에서 우리는 4가지 텍스쳐를 사용할 것입니다. 두 개는 빛, 하나는 그림자 캐스터(shadow casters), 그리고 나머지 하나는 배경입니다. 데모로부터 개별적으로 다운로드하고 싶을까봐 여기에 모든 링크를 포함시켰습니다.

첫번째는 데모에서 사용되는 배경 이미지(bg.png)입니다. 꼭 배경이 필요한 건 아니지만 우리는 데모에서 이 배경을 사용합니다.

두 번째는 그림자 캐스터 오브젝트로 사용하기 위한 평범한 검은 이미지(caster.png)입니다. 탑다운 게임의 경우 그림자를 드리우는 벽이나 다른 오브젝트가 될 수 있습니다.

Next is the light itself (light.png). If you click the link you will notice how large it is. The image you use for a light should cover the area you want your light to cover. This image is 1024x1024 pixels, so you should use it to cover 1024x1024 pixels in your game.

Lastly, we have the spotlight image (spot.png). The demo uses a blob to show where the light is and the larger light image to show the effect of the light upon the rest of the scene.

노드(Nodes)

이 데모에서는 다음과 같은 네 가지 노드를 사용합니다:

CanvasModulate 는 씬을 어둡게 하는데 사용됩니다.

Sprites are used to display the textures for the light blobs, the background, and for the shadow casters.

Light2Ds 씬을 비추기 위해 사용됩니다. The way a light typically works is by adding a selected texture over the rest of the scene to simulate lighting. But it can be used in other ways, for example masking out parts of the scene.

LightOccluder2Ds are used to tell the shader which parts of the scene cast shadows. 그림자는 Light2D 로 덮여진 부분에만 나타나고 그림자의 방향은 Light 의 중심에 기반을 둡니다 .

빛(Lights)

Lights cover the entire extent of their respective Texture. They use additive blending to add the color of their texture to the scene.

../../_images/light_shadow_light.png

Lights 는 네 가지 모드 를 가집니다: Add, Sub, Mix, and Mask.

Add 는 빛 텍스쳐의 색깔을 씬에 추가합니다. 빛 아래에 놓인 영역을 밝게 합니다.

Sub 는 씬에서 빛의 색을 빼냅니다. 빛 아래에 놓인 영역을 어둡게 합니다.

믹스 는 빛의 색과 밑에 있는 씬을 섞습니다. 결과적인 밝기는 빛의 색과 그 아래의 색 사이의 중간입니다.

Mask is used to mask out areas that are covered by the light. Masked out areas are hidden or revealed based on the color of the light.

For the demo the lights have two components, the Light itself (which is the effect of the light), and a Sprite blob which is an image showing the location of the light source. A child Sprite is not necessary to make a Light work.

../../_images/light_shadow_light_blob.png

그림자

Shadows are made by intersecting a Light with a LightOccluder2D.

기본적으로 그림자는 꺼져 있습니다. 이것을 키려면 Light 를 클릭해서 그림자 부분에 있는 Enabled 를 체크하세요.

데모에서 "그림자 캐스터" 를 만들 때 텍스쳐로 Sprite 를 사용하고 있지만 실제로는 LightOccluder2Ds 만 있으면 됩니다. LightOccluder2D 는 그 자체로 어두운 장소로 보이고 이 데모에서 Sprite 는 단지 검정 사각형입니다.

단계별

사용 중인 노드의 기본을 다뤘으니 이제 데모에서 보여지는 것과 같은 장면을 만드는 과정을 차근차근 걸을 수 있게 되었습니다.

첫번째로 Sprite 를 추가하고 스프라이트 텍스쳐는 background image <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/bg.png> 로 설정합니다. 당신의 게임을 위해서라면 아무 배경이나 선택해도 됩니다. 이런 그림자 유형은 대부분 바닥 텍스쳐일 가능성이 가장 높습니다.

../../_images/light_shadow_background.png

다음으로 Light2D's 를 3개 만들고 텍스처를 빛 이미지 <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/light.png>`_로 설정하세요. 빛의 색깔은 상단 부분에서 바꿀 수 있습니다. 기본적으로 그림자 옵션은 꺼지고 모드는 ``add` 로 설정됩니다. add 는 각각의 빛이 밑에 있는 모든 것에 고유의 색을 더하는 것을 의미합니다.

../../_images/light_shadow_all_lights_no_blob.png

Next add a child Sprite to each of the Light nodes, and set the Sprite's texture to the blob image. Each of these should stay centered on the Light node. The blob is the image of the light itself while the Light shows the effect that the light has on the scene. The LightOccluder2D's will treat the position of the light as the center of the Light node, which is why we want the blob to be centered on its parent Light.

../../_images/light_shadow_all_lights.png

주석

집필 당시 3.0은 안정적인 릴리스 버전입니다. 3.1 개발 분기에는 애니메이션 시스템에 대한 많은 변경사항이 포함되어 있어 데모에 나오는 애니메이션은 여기서 다루지 않을 것입니다. 자세한 내용은 2D 애니메이션 특징 소개 를 참조하세요.

Right now the scene should look too bright. This is because all three lights are adding color to the scene. This is why the demo uses a CanvasModulate in the scene. The CanvasModulate multiples the entire viewport by a specific color.

CanvasModulate 를 추가하고 색깔을 rgb(70, 70, 70) 으로 설정하세요. 이렇게 하면 빛의 효과를 뚜렷하게 볼 수 있을 정도로 씬이 어두워집니다.

../../_images/light_shadow_ambient.png

지금부터는 그림자 캐스터를 추가합니다.

데모에서는 그림자 캐스터를 정리하기 위해 "casters" 라는 이름을 가진 Node 를 사용합니다. Node2D 를 씬에 추가하세요. 이 노드는 모든 그림자 캐스터를 함께 묶는 데 사용됩니다. 이 방법은 동시에 모든 그림자 캐스터를 보여주거나 숨길 수 있습니다.

Each shadow caster is made of a Sprite, with a LightOccluder2D child. For the demo the Sprite has a texture set to the caster image and nothing else. The child LightOccluder2D is where all the magic happens. In a game the Sprite could be more than a black box; it could be an image of whatever object is casting the shadow: a wall, a magical chest, or anything else.

../../_images/light_shadow_sprites.png

LightOccluder2Ds tell the game what shape the occluder has. They hold an OccluderPolygon2D, which is a container for a polygon and some other information. For this demo, since our wall is a square, we set Polygon to a square. The other default settings are fine.

첫 번째 설정 Closed 는 켜지거나 끌 수 있습니다.. 닫힌 폴리곤은 모든 방향에서 오는 빛을 차단합니다. 열린 폴리곤은 한 방향에서만 오는 빛을 차단합니다.

Cull Mode lets you select which direction gets culled. The default is Disabled, meaning the occluder will cast a shadow no matter which side the light is on. The other two settings Clockwise and Counter-Clockwise refer to the winding order of the vertices of the polygon. The winding order is used to determine which side of the line is inside the polygon. Only outward facing lines cast shadows.

To illustrate the difference, here is an image of a LightOccluder2D with Closed set to off in the corresponding OccluderPolygon2D, so that the lines of the polygon can be seen:

../../_images/light_shadow_cull_disabled.png

주석

Cull Mode is set to Disabled. All three lines cast shadows.

../../_images/light_shadow_cull_clockwise.png

주석

Cull Mode is set to Clockwise. Only the top and right lines cast shadows.

../../_images/light_shadow_cull_counter_clockwise.png

주석

Cull Mode is set to Counter-Clockwise. Only the bottom line casts a shadow. If Closed was set to on there would be an additional vertical line on the left which would cast a shadow as well.

When you have added the LightOccluder2Ds the shadows still won't appear. You need to go back into the Light2Ds and under the Shadow section set Enable to on. This turns on shadows with hard edges like in the image below.

../../_images/light_shadow_filter0_pcf0.png

To give the shadows that nice, soft edge look we set the variables filter, filter smooth, and gradient length. Godot supports Percentage Closer Filtering (PCF), which takes multiple samples of the shadow map around a pixel and blurs them to create a smooth shadow effect. The higher the number of samples the smoother the shadow will look, but the slower it will run. That is why Godot provides 3-13 samples by default and allows you to choose. The demo uses PCF7.

../../_images/light_shadow_normal.png

주석

This is a shadow rendered with the demo's settings. gradient length is set to 1.3, filter smooth is set to 11.1, and filter is set to PCF7.

../../_images/light_shadow_pcf13.png

주석

filter is set to PCF13. Notice how the shadow becomes wider, this is because the distance between samples is based on the variable filter smooth.

In order to make use of filtering you need to set the filter smooth variable. This dictates how far apart the samples are. If you want the soft area to extend quite far, you can increase the size of filter smooth. However, with few samples and a large filter smooth, you can see lines forming between the samples.

../../_images/light_shadow_filter30.png

주석

filter smooth is set to 30.

The different Light nodes in the demo use different values for filter smooth. Play around with it and see what you like.

../../_images/light_shadow_filter0.png

주석

filter smooth is set to 0.

Lastly, there is the variable gradient length. For some smooth shadows it is preferable not to have the shadow start immediately on the object, as this produces a hard edge. The gradient length variable creates a smooth gradient to begin the shadow to reduce the effect of the hard edge.

../../_images/light_shadow_grad0.png

주석

gradient length is set to 0.

../../_images/light_shadow_grad10.png

주석

gradient length is set to 10.

You will need to play around with the options a bit to find settings that suit your project. There is no right solution for everyone, which is why Godot provides so much flexibility. Just keep in mind that the higher filter set the more expensive the shadows will be.