Interpolation(補間)

補間は、グラフィックプログラミングの非常に基本的な操作です。グラフィックス開発者としての視野を広げるために、これに慣れることは良いことです。

基本的な考え方は、AからBに移行することです。値 t は、中間の状態を表します。

たとえば、t が0の場合、状態はAです。t が1の場合、状態はBです。中間はすべて補間です。

Between two real (floating-point) numbers, a simple interpolation is usually described as:

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

多くの場合、次のように簡略化されます:

interpolation = A + (B - A) * t

一定の速度で値を別の値に変換するこのタイプの補間の名前は"線形(linear)"です。したがって、線形補間について聞いたとき、あなたは彼らがこの単純な式を参照していることを知っています。

他のタイプの補間がありますが、ここでは説明しません。後で Bezier のページを読むことをお勧めします。

ベクトル補間

ベクトルタイプ(Vector2 および Vector3)も補間できます。それらはそれを行う便利な関数を備えています Vector2.linear_interpolate() および Vector3.linear_interpolate() です。

For cubic interpolation, there are also Vector2.cubic_interpolate() and Vector3.cubic_interpolate(), which do a Bezier style interpolation.

補間を使用してポイントAからBに移動するための簡単な擬似コードを次に示します:

var t = 0.0

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

    $Sprite.position = $A.position.linear_interpolate($B.position, t)

次のモーションを生成します:

../../_images/interpolation_vector.gif

幾何学変換(変形)の補間

また、変換全体を補間することもできます(使用するばあいは、均一なスケール、または少なくとも同じ非均一なスケールを持っていることを確認してください)。このために、関数 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)

また、次のモーションを生成します:

../../_images/interpolation_monkey.gif

スムージングモーション

補間は、動きや回転などを滑らかにするために使用できます。これは、滑らかな動きを使用したマウスに追従する円の例です:

const FOLLOW_SPEED = 4.0

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

    $Sprite.position = $Sprite.position.linear_interpolate(mouse_pos, delta * FOLLOW_SPEED)

次の様に見えます:

../../_images/interpolation_follow.gif

これは、カメラの動きを滑らかにしたり、仲間を追いかけたり(一定範囲内にとどまるようにしたり)、その他多くの一般的なゲームパターンに役立ちます。