[Godot] Tween의 사용법.

개요
이 글은 Godot Engine에서 Tween을 사용하는 방법에 대해 설명합니다.
Sprite 구성Sprite를 Tween 이동의 객체로 사용합니다.

소재의 이미지는 다음과 같은 것을 사용한다.

에 할당됩니다.

Tween 노드 추가Sprite > Texture 노드 아래에 걸기Sprite 노드.

구성은 다음과 같다.

스크립트에서 Tween 애니메이션 제어하기Tween 노드에 대한 스크립트는 다음과 같다.
Sprite.gd

extends Sprite

func _ready():
    # Tweenノードを取得する
    var tween:Tween = $Tween

    # アニメーションパラメータを設定
    tween.interpolate_property(
        self,             # 自分自身を登録
        "position",       # positionパラメータを制御
        position,         # 開始座標は現在地
        Vector2(200, 64), # (200, 64)に移動
        1,                # 1秒間で移動
        Tween.TRANS_EXPO, Tween.EASE_OUT # ExpoOutで移動
    )

    # ループ設定
    tween.repeat = true # 1回再生して終わる場合は指定不要

    # 再生開始
    tween.start()

Sprite 애니메이션 매개변수를 설정합니다.
확인을 위해 순환 설정을 사용하지만, 보통 설정할 필요가 없습니다
매개변수를 설정한 후Tween.interpolate_property() 애니메이션을 시작합니다.
런타임 시 애니메이션을 볼 수 있습니다.

Tween 노드를 미리 만들지 않고 애니메이션 사용하기
Tween 노드를 구성하지 않고 애니메이션을 동적으로 생성할 수도 있습니다.
이 경우 다음과 같습니다.
Sprite.gd

extends Sprite

func _ready():
    # Tweenノードを生成する
    var tween:Tween = Tween.new() # ①

    # アニメーションパラメータを設定
    tween.interpolate_property(
        self,             # 自分自身を登録
        "position",       # positionパラメータを制御
        position,         # 開始座標は現在地
        Vector2(200, 64), # (200, 64)に移動
        1,                # 1秒間で移動
        Tween.TRANS_EXPO, Tween.EASE_OUT # ExpoOutで移動
    )

    # ループ設定
    tween.repeat = true # 1回再生して終わる場合は指定不要

    # ②どこかのノードにぶら下げる必要がある
    add_child(tween)

    # 再生開始
    tween.start()

두 가지 변경점이 있습니다.Tween.start()에서 인스턴스, Tween을 생성합니다.start () 를 호출하기 전에 var tween:Tween = Tween.new() 장면에 추가
매개변수 지정 고려 사항
애니메이션에서 지정할 수 있는 매개변수는 개체의 바로 아래에 있는 매개변수뿐입니다.
따라서 아래의 지정이라면 정상적으로 일할 수 없다.

    # ■X座標のみアニメーションしたい
    # アニメーションパラメータを設定
    tween.interpolate_property(
        self,             # 自分自身を登録
        "position.x",     # positionパラメータを制御
        position.x,       # 開始座標は現在地
        20,               # x=200に移動
        1,                # 1秒間で移動
        Tween.TRANS_EXPO, Tween.EASE_OUT # ExpoOutで移動
    )

X 좌표만 이동하려면 Vector2를 교부하여 제어해야 한다.
커브 유형 정보
다음 커브 유형을 지정할 수 있습니다.

TRANS_LINEAR

TRANS_SINE

TRANS_QUINT

TRANS_QUART

TRANS_QUAD

TRANS_EXPO

TRANS_ELASTIC

TRANS_CUBIC

TRANS_CIRC

TRANS_BOUNCE

TRANS_BACK

곡선의 일람은 아래 페이지를 참고할 수 있다.
https://easings.net/ja
많은 사용법이 고민이지만, 개인이 자주 사용하는 것은 다음과 같은 것들이다.

TRANS_LINAR: 고속 이동

TRANS_EXPO: 빠른 커브

TRANS_ELLASTIC: 흔들림

TRANS_CUBIC: 느린 커브

TRANS_BOUNCE: 점프

TRANS_BACK: 시작 또는 끝을 약간 초과

TRANS_LINAR: 고속 직선 이동
등속 직선 이동이기 때문에 동작이 재미없지만 눈에 띄지 않는 애니메이션을 할 때 매우 편리하다

TRANS_EXPO: 급커브

이것은 개인이 가장 자주 사용하는 곡선이다.메뉴의 UI에 이걸 적용해 종목별로 어긋나면서 입장하면 좋은 느낌이 든다.

이 라인이면 너무 뾰족하잖아요.큐빅은 느린 곡선이라 추천해드려요.

TRANS_엘라스틱: 흔들림
엘라스틱은 심하게 흔들리는 곡선입니다.

확대된 객체에 적용하면 코믹함이 발생합니다.

TRANS_BOUNCE: 점프
TRANS_BOUNCE는 반등하는 행위다.
사용처는 어렵지만 벽에 부딪히거나 떨어지면서 입장하는 UI가 어울릴 것 같아요.

TRANS_BACK: 시작 또는 끝을 약간 초과
백은 약간 범위를 벗어난 동작이다.


IN/OUT 및 호출 종료 설정 방법
그리고 IN/OUT 지정이지만 OUT는 입장이고 IN은 퇴장할 때 사용하기 편합니다.
다음은 ExpoOut 애니메이션 종료 시 콜백되는 ExpoIn 애니메이션 코드입니다.
Sprite.gd

extends Sprite

func _ready():

    # 開始を少し待つようにしてみる
    yield(get_tree().create_timer(2), "timeout")

    # Tweenノードを生成する
    var tween:Tween = Tween.new()

    # アニメーションパラメータを設定
    tween.interpolate_property(
        self,             # 自分自身を登録
        "position",       # positionパラメータを制御
        position,         # 開始座標は現在地
        Vector2(200, 64), # (200, 64)に移動
        1,                # 1秒間で移動
        Tween.TRANS_EXPO, Tween.EASE_OUT # ExpoOutで移動
    )

    # ループ設定
    #tween.repeat = true # 1回再生して終わる場合は指定不要

    # 終了時のコールバックを設定   
    tween.interpolate_callback(self, tween.get_runtime(), "tween_end")

    # どこかのノードにぶら下げる必要がある
    add_child(tween)

    # 再生開始
    tween.start()

func tween_end():
    # Tween終了時に呼び出されるコールバック
    # Tweenノードを生成
    var tween:Tween = Tween.new()

    # アニメーションパラメータを設定
    tween.interpolate_property(
        self,             # 自分自身を登録
        "position",       # positionパラメータを制御
        position,         # 開始座標は現在地
        Vector2(800, 64), # (800, 64)に移動
        1,                # 1秒間で移動
        Tween.TRANS_EXPO, Tween.EASE_IN # ExpoInで移動
    )
    add_child(tween)

    # 再生開始
    tween.start()

입장은 아웃으로, 퇴장은 인으로 설정하면 좋은 느낌을 준다.

참고 자료

GODOT DOCS » Godot API » Tween