Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

보간

보간법은 그래픽 프로그래밍에서 매우 기본적인 작업입니다. 그래픽 개발자로써의 시야를 넓히기 위해 이와 익숙해지는 것이 좋습니다.

기초적인 개념은 상태 A를 B로 전환하는 것입니다. 이 때, 값 t 는 그 둘 사이의 상태를 나타냅니다.

예를 들어 값 t 가 0이라면, 그에 해당하는 상태는 A입니다. 마찬가지로 값 t 가 1이라면 해당하는 상태는 B가 됩니다. 이 둘 사이의 모든 값들을 보간값 이라고 합니다.

두 실수(부동소수점)에 대해서, 단순한 보간식은 보통 다음과 같이 기술됩니다:

interpolation = A * (1 - t) + B * t

또한 종종 다음과 같이 간략화됩니다:

interpolation = A + (B - A) * t

한 값을 다른 값으로, 일정한 속도 로 전환하는 이러한 보간법을 선형적 (linear) 이라고 합니다. 즉, 선형 보간법 (Linear Interpolation) 이라고 하면 위의 단순한 식을 의미한다고 할 수 있습니다.

이 밖에도 여러 유형의 보간법이 있지만, 여기에선 설명하지 않겠습니다. 이 글을 읽은 뒤에 베지어를 읽어보는 것을 권장합니다.

벡터 보간

벡터 값 (Vector2 와 Vector3) 또한 보간될 수 있습니다. 이들은 보간을 수행하는 편리한 함수들을 갖추고 있는데, 각각 Vector2.linear_interpolate() 와 Vector3.linear_interpolate() 가 있습니다.

삼차 보간법의 경우엔, Vector2.cubic_interpolate() 스타일의 보간을 수행합니다.

다음은 점 A를 점 B로 이동하는 간단한 의사 코드입니다:

var t = 0.0

func _physics_process(delta):
    t += delta * 0.4

    $Sprite2D.position = $A.position.lerp($B.position, t)

private float _t = 0.0f;

public override void _PhysicsProcess(double delta)
{
    _t += (float)delta * 0.4f;

    Marker2D a = GetNode<Marker2D>("A");
    Marker2D b = GetNode<Marker2D>("B");
    Sprite2D sprite = GetNode<Sprite2D>("Sprite2D");

    sprite.Position = a.Position.Lerp(b.Position, _t);
}

위의 코드는 다음과 같은 모션을 보여줍니다:

변형 보간

변형 전체를 보간하는 것도 가능합니다 (이 경우 균일한 스케일, 또는 적어도 같은 비균일한 스케일을 가지고 있는지 확인하세요). 이 때는, Transform.interpolate_with() 함수를 사용할 수 있습니다.

아래는 원숭이 모델을 Position1에서 Position2로 변형하는 예입니다:

../../_images/interpolation_positions.png

다음 의사 코드를 사용하면:

var t = 0.0

func _physics_process(delta):
    t += delta

    $Monkey.transform = $Position1.transform.interpolate_with($Position2.transform, t)

private float _t = 0.0f;

public override void _PhysicsProcess(double delta)
{
    _t += (float)delta;

    Marker3D p1 = GetNode<Marker3D>("Position1");
    Marker3D p2 = GetNode<Marker3D>("Position2");
    CSGMesh3D monkey = GetNode<CSGMesh3D>("Monkey");

    monkey.Transform = p1.Transform.InterpolateWith(p2.Transform, _t);
}

아래와 같은 모션을 볼 수 있습니다:

부드러운 모션 만들기

위치나 회전 등 움직이는 목표값을 부드럽게 따라가기 위해 보간법을 사용할 수 있습니다. 각 프레임 ``lerp()``는 값 사이에 남아 있는 차이의 고정된 백분율만큼 현재 값을 목표 값 쪽으로 이동합니다. 현재 값은 목표를 향해 부드럽게 이동하며 가까워질수록 속도가 느려집니다. 다음은 보간 평활화를 사용하여 마우스를 따라가는 원의 예입니다.

const FOLLOW_SPEED = 4.0

func _physics_process(delta):
    var mouse_pos = get_local_mouse_position()

    $Sprite2D.position = $Sprite2D.position.lerp(mouse_pos, delta * FOLLOW_SPEED)

private const float FollowSpeed = 4.0f;

public override void _PhysicsProcess(double delta)
{
    Vector2 mousePos = GetLocalMousePosition();

    Sprite2D sprite = GetNode<Sprite2D>("Sprite2D");

    sprite.Position = sprite.Position.Lerp(mousePos, (float)delta * FollowSpeed);
}

결과는 다음과 같습니다:

이것은 부드러운 카메라 움직임, 여러분을 일정 거리 내에서 따라다니는 동료, 그 밖의 수많은 일반적인 게임 패턴을 구현하는 데 도움이 됩니다.

참고

delta``를 사용함에도 불구하고 위에서 사용된 공식은 프레임 속도에 따라 다릅니다. 왜냐하면 ``lerp()``의 ``weight 매개변수는 *절대적인 변경량*이 아니라 값의 남은 차이의 *퍼센트*를 나타내기 때문입니다. ``_physics_process()``에서는 물리학이 일정한 프레임 속도를 유지할 것으로 예상되므로 일반적으로 괜찮습니다. 따라서 ``delta``는 일정하게 유지될 것으로 예상됩니다.

``process()``에서도 사용할 수 있는 프레임 속도 독립적 버전의 보간 평활화의 경우 대신 다음 공식을 사용하십시오.

const FOLLOW_SPEED = 4.0

func _process(delta):
    var mouse_pos = get_local_mouse_position()
    var weight = 1 - exp(-FOLLOW_SPEED * delta)
    $Sprite2D.position = $Sprite2D.position.lerp(mouse_pos, weight)

private const float FollowSpeed = 4.0f;

public override void _Process(double delta)
{
    Vector2 mousePos = GetLocalMousePosition();

    Sprite2D sprite = GetNode<Sprite2D>("Sprite2D");
    float weight = 1f - Mathf.Exp(-FollowSpeed * (float)delta);
    sprite.Position = sprite.Position.Lerp(mousePos, weight);
}

이 공식을 도출하는 것은 이 페이지의 범위를 벗어납니다. 설명은 `개선된 Lerp 스무딩 <https://www.gamedeveloper.com/programming/improved-lerp-smoothing->`__을 참조하거나 `Lerp 스무딩이 깨짐 <https://www.youtube.com/watch?v=LSNQuFEDOyQ>`__을 시청하세요.