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...
2D 스프라이트 애니메이션
소개
이번 튜토리얼에서는 2D 애니메이션 캐릭터를 만드는 두 가지 방법을 배우게 됩니다. 전형적으로 애니메이션 캐릭터를 만들거나 다운로드 할 경우 두 가지 유형 중 하나일 것입니다: 개별 이미지 또는 애니메이션 프레임을 모두 담긴 단일 스프라이트 시트. 애셋 유형에 따라 다음 해결책 중 하나를 선택할 수 있습니다.
첫 번째는 AnimatedSprite 를 사용하여 개별적인 이미지들을 애니메이션으로 만들 겁니다. 그 다음 스프라이트 시트를 사용하려면 Sprite 의 Animation 속성과 함께 AnimationPlayer 를 사용합니다.
참고
https://opengameart.org/users/ansimuz 및 tgfcoder의 다음 예제에 대한 예술입니다.
AnimatedSprite2D를 사용한 개별 이미지
이 시나리오에서는 당신은 캐릭터의 애니메이션 프레임들을 포함하는 이미지 컬렉션을 가집니다. 이 예제에서 다음과 같은 애니메이션을 사용합니다:
여기에서 이미지를 다운로드할 수 있습니다: 2d_sprite_animation_assets.zip
이미지 압축을 풀고 당신의 프로젝트 폴더에 넣으세요. 다음과 같은 노드를 씬 트리에 설정하세요:
참고
루트 노드는 Area2D 또는 RigidBody2D 도 될 수 있습니다. 애니메이션은 여전히 똑같은 방법으로 만들어질 것입니다. 애니메이션이 완성되면, CollisionShape2D 를 할당할 수 있습니다. 자세한 정보는 Physics Introduction 를 참고하세요.
이제 AnimatedSprite2D를 선택하고 노드의 SpriteFrames 속성에서 "새 SpriteFrames"를 선택하세요.
새 SpriteFrames 리소스를 클릭하면 편집기 창 하단에 새로운 패널이 나타날 것입니다:
왼쪽의 파일시스템 독에서 8개의 개별 이미지를 SpriteFrames 패널의 중앙 부분으로 끌어다 놓으세요. 왼쪽에서 애니메이션의 이름을 "default"에서 "run"으로 변경하세요.
애니메이션을 미리보려면 애니메이션 필터의 오른쪽 위에 있는 "재생" 버튼을 사용하세요. 이제 뷰포트에서 애니메이션이 재생되는 것을 보아야 합니다. 하지만 꽤 느립니다. 이를 고치기 위해서는 SpriteFrames 패널에서 속도 (FPS) 설정을 10으로 바꾸세요.
"새 애니메이션" 버튼을 클릭하고 추가 이미지를 추가해서 추가 애니메이션을 추가할 수 있습니다.
애니메이션 제어하기
애니메이션을 완성하면 play() 와 stop() 메서드를 사용하여 코드로 애니메이션을 제어할 수 있습니다. 여기 오른쪽 화살표 키를 누르고 있으면 애니메이션을 재생하고 떼면 중지하는 간단한 예제가 있습니다.
extends CharacterBody2D
@onready var _animated_sprite = $AnimatedSprite2D
func _process(_delta):
if Input.is_action_pressed("ui_right"):
_animated_sprite.play("run")
else:
_animated_sprite.stop()
using Godot;
public partial class Character : CharacterBody2D
{
private AnimatedSprite2D _animatedSprite;
public override void _Ready()
{
_animatedSprite = GetNode<AnimatedSprite2D>("AnimatedSprite2D");
}
public override void _Process(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animatedSprite.Play("run");
}
else
{
_animatedSprite.Stop();
}
}
}
AnimatedSprite2D를 사용한 스프라이트 시트
AnimatedSprite2D 클래스를 사용하여 스프라이트 시트에서 쉽게 애니메이션을 적용할 수도 있습니다. 우리는 다음 공개 도메인 스프라이트 시트를 사용할 것입니다:
오른쪽 마우스 버튼으로 이미지를 클릭하고 "다른 이름으로 저장" 선택해서 다운로드 하세요. 그 다음 당신의 프로젝트 폴더에 이미지를 복사하세요.
이제 AnimatedSprite 를 선택하고 노드의 SpriteFrames 속성에서 "새 SpriteFrames"를 선택하세요.
새 SpriteFrames 리소스를 클릭하면 편집기 창 하단에 새로운 패널이 나타날 것입니다.
파일을 열라고 요구할 것입니다. 스프라이트 시트를 선택합니다.
스프라이트 시트를 보여주는 새 창이 열립니다. 가장 먼저 해야 할 일은 스프라이트 시트의 수직 및 수평 이미지 수를 변경하는 것입니다. 이 스프라이트 시트에는 가로로 4개의 이미지, 세로로 2개의 이미지가 있습니다.
다음으로 애니메이션에 포함할 스프라이트 시트의 프레임을 선택합니다. 상위 4개를 선택한 다음 "4개 프레임 추가"를 클릭하여 애니메이션을 만듭니다.
이제 하단 패널의 애니메이션 목록 아래에 애니메이션이 표시됩니다. 점프할 애니메이션의 이름을 변경하려면 기본값을 두 번 클릭하세요.
마지막으로 SpriteFrames 편집기의 재생 버튼을 확인하여 개구리 점프를 확인하세요!
AnimationPlayer가 포함된 스프라이트 시트
애니메이션 프레임을 모두 포함하는 스프라이트 시트를 가지고 있는 경우에는 간단하게 AnimatedSprite 를 사용할 수 없습니다. 대신에 텍스처를 보여주기 위해 표준 Sprite 노드를 사용한 다음 AnimationPlayer 로 텍스처에서 텍스처로 변경사항을 애니메이션 할 수 있습니다.
6개의 애니메이션 프레임이 포함된 스프라이트 시트를 고려하세요:
오른쪽 마우스 버튼으로 이미지를 클릭하고 "다른 이름으로 저장" 선택해서 다운로드 하세요. 그 다음 당신의 프로젝트 폴더에 이미지를 복사하세요.
우리의 목표는 이 이미지들을 차례로 반복해서 보여주는 것입니다. 다음과 같이 씬 트리를 설정하여 시작하세요:
참고
루트 노드는 Area2D 또는 RigidBody2D 도 될 수 있습니다. 애니메이션은 여전히 똑같은 방법으로 만들어질 것입니다. 애니메이션이 완성되면, CollisionShape2D 를 할당할 수 있습니다. 자세한 정보는 Physics Introduction 를 참고하세요.
스프라이트 시트를 스프라이트의 텍스처 속성에 끌어 놓으면 전체 시트가 화면에 보여집니다. 개별 프레임으로 자르려면 인스펙터에서 애니메이션 부분을 확장하고 가로프레임을 6으로 설정하세요. 가로프레임과 세로프레임은 스프라이트 시트에서 가로 및 세로 프레임의 수입니다.
이제 Frame 속성 값을 변경해보세요. 0 에서부터 5 까지의 값의 범위를 보게 되고 변화에 따라 보여지는 스프라이트 이미지도 바뀝니다. 이 속성이 우리가 애니메이션으로 만들 속성입니다.
AnimationPlayer 를 선택하고 "애니메이션" 버튼을 클릭한 다음 "새 파일"을 클릭하세요. 새 애니메이션을 "walk"로 이름을 지으세요. 애니메이션 길이를 0.6 로 설정하고 "Loop" 버튼을 클릭해서 애니메이션이 반복되도록 하세요.
이제 스프라이트 를 선택하고 열쇠 아이콘을 클릭해서 새로운 트랙에 추가하세요.
타임라인 각 지점(기본 0.1 초)에 0에서부터 5까지 모든 프레임들을 계속 추가하세요. 애니메이션 트랙에 프레임들이 실제로 나타나는 것을 볼 수 있을 것입니다:
애니메이션에서 "Play" 를 누르고 어떻게 작동하는지 보세요.
애니메이션 제어하기
애니메이션을 완성하면 play() 와 stop() 메서드를 사용하여 코드로 애니메이션을 제어할 수 있습니다. 여기 오른쪽 화살표 키를 누르고 있으면 애니메이션을 재생하고 떼면 중지하는 간단한 예제가 있습니다.
extends CharacterBody2D
@onready var _animation_player = $AnimationPlayer
func _process(_delta):
if Input.is_action_pressed("ui_right"):
_animation_player.play("walk")
else:
_animation_player.stop()
using Godot;
public partial class Character : CharacterBody2D
{
private AnimationPlayer _animationPlayer;
public override void _Ready()
{
_animationPlayer = GetNode<AnimationPlayer>("AnimationPlayer");
}
public override void _Process(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animationPlayer.Play("walk");
}
else
{
_animationPlayer.Stop();
}
}
}
참고
애니메이션과 별도의 속성을 동시에 업데이트하는 경우(예를 들어 캐릭터가 '회전' 애니메이션을 시작하는 동안 회전할 때 플랫포머가 스프라이트의 h_flip/v_flip 속성을 업데이트할 수 있음) ``play()``가 즉시 적용되지 않는다는 점을 명심하는 것이 중요합니다. 대신, 다음에 :ref:`AnimationPlayer <class_AnimationPlayer>`이 처리될 때 적용됩니다. 이는 결국 다음 프레임에서 발생하여 속성 변경이 적용되었지만 애니메이션이 적용되지 않은 '결함' 프레임이 발생할 수 있습니다. 이것이 문제가 되는 것으로 판명되면 ``play()``를 호출한 후 ``advance(0)``를 호출하여 즉시 애니메이션을 업데이트할 수 있습니다.
요약
이 예제들은 2D 애니메이션에서 마주치게 될 두 가지 가장 흔한 상황을 보여줍니다. 각각 장점을 가지고 있습니다. AnimationPlayer 로 하게되면 꽤 복잡하지만 추가적인 기능들을 제공합니다. 다른 위치 또는 크기와 같은 속성들을 애니메이션 할 수 있습니다. 실험해보고 어느 방법이 당신의 필요에 알맞는지 알아보세요.