애니메이션(Animations)

소개

Godot의 애니메이션 시스템은 매우 강력하고 유연합니다.

시작하기 위해서 지난 튜토리얼의 씬(스플래시 화면)을 사용하겠습니다. 목표는 "점진적으로 선명해지는(fade-in)" 애니메이션을 스플래시 이미지에 적용하는 것입니다. 다음은 만일의 경우에 대비한 복사본입니다: robisplash.zip.

애니메이션 플레이어 추가하기

먼저, AnimationPlayer 노드를 "background"(루트 노드)의 자식으로 추가하세요:

../../_images/robisplash_anim_inspector.png

이 타입의 노드가 선택될 때, 애니메이션 에디터 패널이 나타납니다:

../../_images/robisplash_anim_editor.png

애니메이션 에디터 패널은 수동으로 숨기지 않는 이상 표시됩니다.

애니메이션 만들기

새 애니메이션을 만들 시간입니다! 애니메이션 버튼을 누른 다음 메뉴에서 새로 만들기(new)를 선택하세요. 대화 상자가 나타나면 애니메이션 이름을 "intro" 라고 지으세요.

../../_images/robisplash_anim_button.png ../../_images/robisplash_anim_new.png

이제 애니메이션이 있으므로 속성 에디터가 "애니메이션 편집(animation editing)" 모드로 들어갑니다. 이 모드에서는 속성 편집기의 모든 속성 옆에 키 아이콘이 나타납니다. Godot에서 객체의 모든 속성에 애니메이션을 적용할 수 있습니다:

../../_images/robisplash_anim_property_keys.png

애니메이션 편집하기

로고는 화면 위쪽에서 나타납니다.

애니메이션 에디터 패널이 열린 상태에서 "Logo" 노드를 선택하고 "Rect / Position" 속성을 (118, -400)으로 설정한 다음 속성 옆에 있는 키 버튼을 눌러 키프레임을 추가하세요:

../../_images/robisplash_anim_logo_inspector_key.png

대화 상자가 나타나면, 새 트랙을 만들겠다고 확인하세요.

키프레임이 애니메이션 플레이어 에디터에 나타납니다:

../../_images/robisplash_anim_editor_keyframe.png

여기를 클릭해서 에디터 커서를 앞으로 이동하세요:

../../_images/robisplash_anim_editor_track_cursor.png

Logo 위치를 (118, 0)으로 변경하고 키프레임을 다시 추가하세요. 두 키프레임에 다른 값을 주면 애니메이션이 적용됩니다.

../../_images/robisplash_anim_editor_keyframe_2.png

애니메이션 패널에서 "선택한 애니메이션을 처음부터 재생합니다(Play selected animation from start)" 버튼 (또는 키보드의 Shift+D)를 누르면 로고가 내려갑니다.

../../_images/robisplash_anim_editor_play_start.png

"불러올 시 자동으로 재생(Autoplay on Load)" 버튼을 눌러 씬이 시작될 때 애니메이션이 자동으로 시작되도록 설정하세요.

../../_images/robisplash_anim_editor_autoplay.png

그리고 마침내 씬을 실행시키면 애니메이션이 다음과 같이 보입니다:

../../_images/out.gif