리듬 게임의 기술적 요소3, AnimationPlayer와 Tween - 고도 배우기, Godot

"리듬 게임 분석하기" 글에 이어서 여러 가지 기술적 요소를 살펴보고 있다. 2D 요소든 3D 요소든 움직임을 표시하는 것은 생동감 있는 게임을 만드는 데 있어 핵심적인 요소라 할 수 있다. 이번 포스팅에서는 2D 요소에 대한 움직임을 표현하는 데 사용하는 AnimationPlayer와 Tween 클래스를 다루고자 한다.

 

 

■ AnimationPlayer 클래스

위의 그림은 리듬 게임에서 리듬 비트에 따라 표시되었다가 없어지는 터치 및 드래그 게임 요소를 표시하기 위해 AnimationPlayer 클래스를 사용하고 있는 모습이다.

 

애니메이션 플레이어는 여러가지 자원을 가지고 애니메이션을 수행하는 클래스로 인스펙터 창에 있는 대부분의 요소에 대해서 애니메이션이 가능하다. 트윈의 경우에도 애니메이션 플레이어가 하는 기능을 수행할 수 있지만 트윈은 원하는 모든 것을 코드를 통해서 수행해야 하지만 애니메이션 플레이어는 위의 그림처럼 편집기에서 제공하는 애니메이션 도구를 통해서 간편하게 작업할 수 있다는 차이점이 있다.

 

위의 그림과 같은 애니메이션 플레이어 도구를 사용하려면 우선 Node> AnimationPlayer로 노드를 추가한다. 추가한 도구를 선택하고 하단의 애니메이션 패널을 클릭하면 애니메이션 도구를 사용할 수 있다.

 

애니메이션 도구는 위의 그림처럼 크게 네 부분으로 나눌 수 있다. 어도비 플래시 편집기와 유사하다. 각각에 대한 설명은 아래와 같다. 

 

a) 애니메이션 컨트롤

    ◇ 맨 앞에 있는 버튼들로 차례대로 현 위치에서 역방향 재생, 맨 끝에서 역방향 재생, 재생 멈춤, 처음부터 재생, 현 위치에서 재생이다.

    ◇ 현재 애니메이션 위치를 표시 한다(초).
        타임라인 상단 시간바를 클릭하여 위치를 조정하고, 위치 표시 컨트롤 우측의 위아래 화살표로 미세 조정할 수 있다.

    ◇ [애니메이션] 버튼을 클릭하면 위와 같은 메뉴를 통해 추가, 삭제, 불러오기, 저장 등을 수행한다. 

    ◇ 현재 편집 중인 애니메이션의 이름을 표시한다. 클릭하면 위의 그림처럼 애니메이션 목록이 표시되며 편집 대상 애니메이션을 바꿀수 있다.

    ◇ 씬 로드시 자동 재생 플래그. "A+" 아이콘을 클릭하여 On/Off로 상태를 토글 할 수 있다. On 상태일 때는 좌측 애니메이션 이름 앞에 아이콘이 붙는다. 스플래시 등에 사용할 수 있다.

    ◇ [편집] 버튼을 클릭하면 위의 그림처럼 트랙 편집 명령을 비롯한 기타 애니메이션 편집 기능을 사용할 수 있다.

https://godotengine.org/article/introducing-onion-skinning-godot-game-engine

    ◇ 어니언 스키닝 플래그. 위의 그림과 같은 반투명의 잔상 효과를 줄 것인지 여부를 나타내는 플래그. 클릭하여 적용 여부를 On/Off 토글 한다. 

    ◇ 어니언 스키닝 플래그 옆의 점 3개를 클릭하면 위의 그림처럼 잔상 효과를 위한 여러 옵션을 지정할 수 있다.

    ◇ 핀 모양의 창 고정 플래그. 아이콘을 클릭하여 상태 토글. On이면 편집 도구가 닫히지 않도록 한다.

 

b) 트랙 목록

    ◇ [+트랙 추가]를 선택하면 위의 그림처럼 여러 형태의 트랙을 추가할 수 있다.

위치와 크기, 색상등을 변경하는 일반적인 애니메이션의 경우 통상 속성 트랙을 사용하게 되는데, 속성 트랙 추가를 선택하면 위의 그림과 같이 먼저 어떤 노드에 애니메이션을 적용할지, 대상 노드를 선택해야 한다. 

노드를 선택한 다음에는 위의 그림처럼 어떤 속성을 통해서 애니메이션을 수행할지를 선택한다. 만약 위치를 이동시키는 애니메이션이라면 position 속성을 선택하면 된다. 하나의 노드에 여러 개의 속성 애니메이션을 적용할 수도 있고 예제의  함수 호출 트랙처럼 서로 다른 형태의 애니메이션을 적용할 수도 있다. 트랙 맨 앞에 있는 체크 박스를 이용하여 트랙 자체를 켜고 끌 수 있다.

 

c) 타임라인과 키 프레임

어도비 플래시나 프리미어와 같은 저작 도구를 사용해본 사용자라면 친숙한 인터페이스로 타임 라인 영역 우측 상단에는 애니메이션 길이를 초 단위로 보여주고 입력 창에서 길이를 수정할 수도 있다.

애니메이션은 두개의 키 프레임 사이에서 이루어지는데 키는 여러 개 삽입할 수 있다.

키 프레임을 클릭하면 위의 그림처럼 인스펙터 창에서 시간 위치와 애니메이션을 위한 속성 값을 조정할 수 있다.

타임라인 각 트랙의 맨 우측에는 트랙 설정을 위한 컨트롤 들이 배치되어 있는데 차례대로 업데이트 모드, 보간(interpolation) 모드, 루프 래핑 모드, 트랙 삭제 버튼이다. 연속적 업데이트는 매 프레임마다 속성을 업데이트한다는 의미이고 비연속적 업데이트는 키 프레임에서만 업데이트한다. 트리거는 키프레임과 트리거에서 업데이트하고 캡처 모드는 현재 속성 값을 가지고 있다가 첫 키프레임을 만나면 값을 적용한다.

보간 모드는 키 프레임 사이의 프레임 값을 어떻게 계산할 지를 지정하는 것으로 "가장 가까움"은 가장 가까운 키 프레임의 값을 적용한다는 의미이고 직선형은 두 키 프레임 사이를 선형 함수로 프레임 값을 계산하고 입방형은 삼차 함수로 계산한다. 삼차 함수로 계산하면 키 프레임에서는 느리고 키 프레임 사이에서는 빠르게 계산되어 좀 더 자연스러운 움직임을 보여준다.

루프 래핑 모드는 애니메이션에 루프가 설정된 경우의 루핑 방식을 지정하는 것으로 루프 보간 고정은 왔다 갔다 하는 방식으로, 래핑은 끝에 도달하면 처음으로 돌도록 루핑 한다.

 

d) 트랙 및 타임라인 컨트롤

맨 하단의 컨트롤은 차례대로 "트리에서 선택한 노드만 트랙에 표시", "노드별로 트랙 모아 보기/묶어서 보지 않기", "스냅 켜기/끄기"와 스냅 단위, 타임 라인의 확대/축소 컨트롤이다.

 

■ Tween 클래스

위의 그림은 게임 플레이 중에 리듬 비트에 따라 스피커의 움직임 효과를 내는 데 사용하는 Tween 클래스의 모습이다. Tween 클래스를 편리한 AnimationPlayer 대신에 사용하는 이유는 최종 목적지를 미리 알 수 없는 경우이다. 리듬 게임의 음악이 달라지면 스피커의 움직임 또한 달라지는 것이 당연한 것이므로 서로 다른 움직임을 하나의 코드로 처리하는 것이다.

 

func _ready():
	Events.connect("beat_incremented", self, "_pulse")


func _pulse(msg: Dictionary):
	if msg.half_beat % 2 == 1:
		return

	var _beats_per_second: float = msg.bps

	_tween.interpolate_property(
		self,
		"scale",
		_start_scale,
		_end_scale,
		_beats_per_second / 4,
		Tween.TRANS_LINEAR,
		Tween.EASE_OUT,
		_beats_per_second / 32
	)
	_tween.start()

위의 코드는 음악의 비트에 따라 움직임을 다르게 하여 애니메이션을 수행하는 예제이다. Tween 클래스의 속성은 다음과 같다.

◇ playback_process_mode : 어떤 프로세스로 애니메이션을 처리할지 지정. TWEEN_PROCESS_PHYSICS으로 설정하면 _physics_process 함수로 업데이트하고 TWEEN_PROCESS_IDLE(기본값)으로 설정하면 _process 함수로 처리한다.

◇ playback_speed : 재생 속도. 1.0이 기본값. 2.0이면 2배 속도 재생.

◇ repeat : 반복 여부. 기본값은 false이고, true면 루프 수행.

 

트윈 클래스와 관련하여 다음과 같은 시그널을 사용할 수 있다.

→ tween_all_completed : 트윈 내 모든 프로세스가 종료되었을 때

→ tween_completed : 특정 트윈이 끝나면 해당 정보 전달
→ tween_started : 특정 트윈이 시작하면 해당 정보 전달
→ tween_step : 특정 트윈의 매 스텝마다 해당 정보 전달

 

트윈 클래스에서 사용하는 주요 함수들은 다음과 같다.

▽ interpolate_property ( Object 오브젝트, NodePath 속성, Variant 시작값, Variant 종료값, float 수행시간, TransitionType trans_type, EaseType ease_type, float 대기시간=0 ) 오브젝트의 속성을 시작 값부터 종료 값까지 수행 시간 동안 애니메이션 하고 대기 시간만큼 대기하는 형태이다. 위의 예제에서는 "scale" 속성을 애니메이션 하고 있다.

trans_type은 보간 값의 계산 방식으로 TRANS_LINEAR(기본값, 선형), TRANS_SINE(사인 함수 사용), TRANS_QUINT(5차 방정식), TRANS_QUART(4차 방정식), TRANS_QUAD(2차 방정식), TRANS_EXPO(지수 함수), TRANS_ELASTIC, TRANS_CUBIC(3차 방정식), TRANS_CIRC(제곱근), TRANS_BOUNCE(끝에서 튕김), TRANS_BACK(역방향)으로 지정한다.

ease_type은 EASE_IN(느리게 시작, 끝에서 빨라짐), EASE_OUT(빠르게 시작 끝에서 느려짐), EASE_IN_OUT(기본값, 양 끝단에서 느려짐), EASE_OUT_IN(양 끝단에서 빨라짐)으로 지정한다.

▽ follow_property ( Object 원본 오브젝트, NodePath 원본 속성, Variant 시작값, Object 대상 오브젝트, NodePath 대상 속성, float 수행시간, TransitionType trans_type, EaseType ease_type, float 대기시간=0) 원본 오브젝트의 속성을 대상 오브젝트의 속성에 시작 값 부터 수행 시간 동안 적용한다.

▽ interpolate_method : interpolate_property의 속성 대신 메서드를 사용한다.

▽ follow_method : follow_property의 속성 대신 메서드를 사용한다.

▽ start(), stop (Object object, String key=""), stop_all() 트윈 시작 및 종료