개발단에 가입하여 베르의 게임 개발 유튜브를 후원해주세요!

 

 

베르의 게임 개발 유튜브

안녕하세요! 여러분들과 함께 게임 개발을 공부하는 베르입니다! 게임 개발에 도움이 되는 강좌들을 올리는 채널입니다! [투네이션 후원] https://toon.at/donate/637735212761460238 [유니티 어필리에이트

www.youtube.com

 

안녕하세요! 여러분들과 함께 게임 개발을 공부하는 베르입니다!

이번에는 유니티 애니메이션 시스템의 기본이 되는 애니메이션 클립에 대해서 알아보도록 하겠습니다.

 

사용 엔진 버전 : 2020.3

 

타임라인

0:00 인트로

0:16 애니메이션 클립

1:05 외부프로그램에서 만든 애니메이션

2:26 유니티 에디터에 만든 애니메이션

6:04 아웃트로

인트로

안녕하세요. 여러분들과 함께 게임 개발을 공부하는 베르입니다.

이번에는 유니티 애니메이션 클립에 대해서 알아보도록 하겠습니다.

본격적인 강좌에 들어가기 전에 필요한 리소스들을 영상 하단의 링크에서 다운로드받아서 임포트합니다.

애니메이션 클립

이제 지난 애니메이션 개요 강좌에서 가볍게 이야기 했던 애니메이션 클립에 대한 이야기를 복습하면서 좀 더 자세히 알아보도록 하겠습니다.

지난 강좌에서 이야기 했듯이 애니메이션 클립은 애니메이션의 가장 기본적인 단위이며 오브젝트가 어떻게 움직여야 하는지에 대한 정보들이 포함되어 있는 것입니다.

그리고 이 애니메이션 클립을 만드는 방법으로는 크게 두 가지가 있습니다.

외부에서 만들어서 임포트한 애니메이션

첫 번째 방식은 3ds MAX나 Maya, 블랜더 같은 외부 프로그램으로 애니메이션을 만들어서 임포트하는 방식입니다.

이렇게 외부 프로그램에서 애니메이션을 만들어서 임포트하는 방식은 보통 3D 프로그램으로 만들어진 3D 모델의 애니메이션을 만들고자 할 때 주로 사용합니다.

외부 프로그램에서 전문 툴을 사용해서 만드는 애니메이션이니만큼 유니티의 기능만으로 만드는 애니메이션에 비해서 좀 더 복잡한 애니메이션을 만들 수 있습니다.

임포트된 FBX 파일은 프로젝트 뷰에서 이렇게 박스 모양 아이콘의 에셋으로 보이게 됩니다.

이 FBX 에셋을 선택해보면 인스펙터 뷰에서 Model, Rig, Animation, Materials 탭을 볼 수 있습니다.

이 중에서 Animation 탭을 선택해보면 이 FBX 파일이 가지고 있는 애니메이션에 대한 정보를 볼 수 있습니다.

물론 FBX 파일이 애니메이션을 전혀 포함하고 있지 않다면 이 탭은 활성화되지 않을 겁니다.

여기서 이 애니메이션이 어떤 애니메이션인지 재생해 볼 수 있으며, Loop Time 옵션을 통해 애니메이션이 끝까지 재생된 이 후에 동작을 멈출지 아니면 처음으로 돌아가서 반복 재생할지를 결정할 수 있습니다.

이외에도 애니메이션 이벤트를 추가하는 등의 작업을 할 수도 있습니다.

그리고 3D 팀에서 애니메이션을 넘겨줄 때 애니메이션 동작마다 FBX 파일을 따로 나눠서 주지 않고 한 FBX 파일에 여러 동작을 넣어서 주는 경우가 있습니다.

그럴 때는 여기 Clips에서 [+] 버튼을 눌러서 클립을 추가해주고 해당 애니메이션의 시작 지점과 끝 지점을 나눠주면 됩니다.

그리고 이렇게 나눈 애니메이션의 이름이 헷갈리지 않도록 이름을 설정해줍니다.

이렇게 외부 프로그램에서 만들어서 임포트한 애니메이션은 유니티의 애니메이션 뷰에서 Read Only로 표시되며 보통은 유니티에서 수정하지 못하기 때문에 외부 프로그램에서 다시 수정해서 임포트해야 합니다.

유니티 에디터에서 만든 애니메이션

유니티의 또 다른 애니메이션 클립 방식은 유니티 에디터에서 직접 애니메이션 키를 잡아서 클립을 만드는 것입니다.

유니티 에디터에서 직접 키를 잡아서 애니메이션 클립을 만드는 것은 비교적 간단한 애니메이션이나 UI 애니메이션을 만들고자 할때 사용하는 빈도가 높습니다.

유니티 에디터에서 애니메이션을 만드는 방법은 아주 간단합니다.

먼저 하이어라키 뷰에 우클릭해서 애니메이션을 만들 오브젝트를 하나 생성합니다.

그리고 그 오브젝트를 선택한 상태로 [Ctrl + 6] 단축키를 눌러서 애니메이션 뷰를 열어줍니다.

그러면 아직 애니메이션이 없는 상태이기 때문에 애니메이션 클립과 애니메이터를 만들라는 문구와 함께 Create 버튼이 표시되는 것을 볼 수 있습니다.

여기서 Create 버튼을 누르면 방금 생성한 오브젝트에 대한 애니메이션 클립을 생성할 수 있습니다.

Create 버튼을 누르고 애니메이션 클립을 생성합니다.

그러면 프로젝트 뷰에서 방금 생성한 애니메이션 클립과 이 오브젝트에 대한 애니메이터 컨트롤러가 생성되는 것을 볼 수 있습니다.

애니메이터 컨트롤러는 이 오브젝트가 가진 여러 개의 애니메이션 클립을 관리하고 어떤 상황에 어떤 애니메이션을 재생할 것인지를 결정하는 내용들을 담는 에셋입니다.

이에 대한 자세한 내용은 애니메이터 컨트롤러에 대해서 다루는 강좌에서 이야기하도록하고 지금은 애니메이션 클립에 좀 더 집중해보겠습니다.

애니메이션 클립이 생성된 이후에 애니메이션 뷰를 보면 텅 비어있는 프로퍼티 패널과 애니메이션 타임라인을 볼 수 있습니다.

먼저 애니메이션을 만들기 위해서는 Add Property 버튼을 눌러서 동작을 만들어줄 프로퍼티를 추가해야 합니다.

이 프로퍼티에는 컴포넌트와 관련된 대부분이 추가될 수 있지만 기본적으로는 트랜스폼 컴포넌트에서 크기, 회전, 위치 등을 주로 사용하고, UI인 경우에는 이미지나 색상과 같은 값들을 다룰 수 도 있습니다.

먼저 트랜스폼 컴포넌트에서 Rotation 프로퍼티를 추가해보겠습니다.

그러면 Rotation 프로퍼티가 프로퍼티 목록에 추가되며 타임라인의 0초 지점과 1초 지점에 마름모 꼴의 키가 추가되는 것을 볼 수 있습니다.

이 때 타임라인의 중간을 선택하고 프로퍼티의 값을 변경하면 새로운 키가 추가되는 것을 볼 수 있습니다.

그리고 키를 클릭해서 드래그하면 키의 위치를 옮길 수도 있고 여러 개의 키를 동시에 선택해서 동일 비율로 줄이거나 늘일 수도 있습니다.

이렇게 타임라인에서 키를 옮기면서 값을 입력하는 기본 방식을 Dopesheet라고 하고 애니메이션 뷰 아래 쪽의 버튼에서 다른 방식인 Curves를 선택할 수 있습니다.

Curves 방식에서는 그래프를 보면서 키의 위치를 조절하고 베지어 곡선 각도를 바꾸거나 더블 클릭으로 키를 추가할 수 있습니다.

이 외에도 타임 라인 끝 부분에 [...]으로 표시된 버튼을 눌러서 이 애니메이션이 초당 몇 프레임으로 애니메이션을 재생하게 만들지도 결정할 수 있습니다.

이 애니메이션 프레임 수에 대한 내용은 애니메이션 샘플 레이트 영상에서 확인하실 수 있습니다.

그리고 애니메이션 클립 이름이 적힌 드롭 다운을 클릭하면 이 오브젝트가 가진 애니메이션들을 볼 수 있고 제일 아래의 [Create New Clip] 항목을 선택하면 새로운 애니메이션 클립을 추가할 수 있습니다.

이렇게 유니티에서 만들어진 애니메이션 클립은 프로젝트 뷰에서 이런 아이콘으로 표시됩니다.

이것을 선택해보면 FBX 에셋에 담긴 애니메이션보다는 결정할 수 있는 옵션이 거의 없고 애니메이션의 반복 여부를 설정하는 LoopTime만 있는데 이것은 대부분의 작업을 애니메이션 뷰에서 할 수 있기 때문입니다.

아웃트로

이렇게 외부 프로그램에서 만들어서 임포트하거나 유니티 엔진에서 만든 애니메이션 클립은 애니메이터 컨트롤러를 통해서 하나의 애니메이션 구성을 만드는데 사용하게 됩니다.

이번 영상에서는 유니티 애니메이션 시스템의 기본 구성 요소인 애니메이션 클립에 대해서 알아보았습니다.

이 강좌는 구독자 여러분들의 시청과 후원으로 제작되었습니다.

이상 베르의 게임 개발 유튜브였습니다. 감사합니다.

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

애니메이션 기초

 

 

이 섹션에서는 언리얼 엔진에서 캐릭터에 애니메이션을 추가하는 방법을 알아볼 것이다.

 

기본 캐릭터 구현

모델링과 애니메이션을 추가하기 이전에 그것들을 사용할 캐릭터 클래스를 구현해보자.

 

우선 새로운 프로젝트를 추가한 뒤 언리얼 에디터의 편집 드롭다운 메뉴에서 프로젝트 세팅 창을 연다.

 

 

그리고 엔진 섹션의 입력에서 입력 매핑을 다음과 같이 설정한다.

 

 

그 다음은 콘텐츠 브라우저 패널에서 신규 추가 버튼을 누르고, 새 C++ 클래스를 선택하여 부모 클래스 선택 창을 연다.

 

그리고 Character 클래스를 부모 클래스로 선택하고 다음을 클릭한다.

 

 

클래스 이름은 AnimTestCharacter로 하자.

 

 

이제 캐릭터를 움직일 함수를 만들고 앞에서 설정한 입력 매핑과 바인딩할 차례다.

 

우선 캐릭터를 움직이기 위한 다음 함수들을 AnimTestCharacter.h의 클래스 안에 선언한다.

 

UFUNCTION()
void MoveForward(float AxisValue);

UFUNCTION()
void MoveRight(float AxisValue);

 

AnimTestCharacter.cpp에서 위 두 함수를 다음과 같이 구현한다.

 

void AAnimTestChararcter::MoveForward(float AxisValue)
{
    AddMovementInput(GetActorForwardVector(), AxisValue);
}

void AAnimTestChararcter::MoveRight(float AxisValue)
{
    AddMovementInput(GetActorRightVector(), AxisValue);
}

 

방금 만든 함수와 입력 매핑을 바인딩하기 위해서, InputComponent를 사용해야하기 때문에, AnimTestCharacter.cpp 상단의 전처리기에 다음 코드를 추가한다.

 

#include "Engine/Classes/Components/InputComponent.h"

 

그 다음엔 SetupInputComponent() 함수에 입력 매핑과 함수를 바인딩하는 코드를 추가한다.

 

InputComponent->BindAxis("MoveForward", this, &AAnimTestChararcter::MoveForward);
InputComponent->BindAxis("MoveRight", this, &AAnimTestChararcter::MoveRight);
InputComponent->BindAxis("Turn", this, &AAnimTestChararcter::AddControllerYawInput);
InputComponent->BindAxis("LookUp", this, &AAnimTestChararcter::AddControllerPitchInput);

 

코드를 모두 작성했다면 변경사항을 저장하고 솔루션 탐색기에서 빌드를 진행한다.

 

 

그리고 에디터로 돌아가서 콘텐츠 브라우저 창에서 Bluprints라는 이름의 새 폴더를 만든 뒤, C++ AnimTestCharacter 클래스에 우클릭하여 AnimTestCharacter 기반 블루프린트 클래스 생성을 클릭하고, BP_AnimTestCharacter 라는 이름으로 블루프린트 클래스를 생성한다.

 

 

이어지는 과정을 수행하기 전에, 캐릭터 모델링을 다운받아 프로젝트에 임포트한다.
TestChar.zip
다운로드

 

TestChar.fbx를 프로젝트에 임포트했다면, BP_AnimTestCharacter를 더블클릭해서 블루프린트 에디터를 열고 컴포넌트 패널에서 Mesh 컴포넌트를 선택한다.

 

 

그리고 디테일 패널에서 Mesh 섹션을 찾아서 없음으로 되어있는 Skeletal Mesh를 방금 임포트한 TestChar로 설정해준다.

 

 

스켈레탈 메시를 TestChar로 설정하고 나서, 뷰포트를 통해 확인하면 다음과 같이 캡슐 콜라이더 크기와도 맞지 않고 방향도 다른 것을 알 수 있다.

 

 

이것을 올바르게 맞추기 위해, 디테일 패널의 트랜스폼 섹션에서 위치 {0.0, 0.0, -90.0}, 회전 {0.0, 0.0, 90.0}, 스케일 {3.0, 3.0, 3.0}으로 설정한다. 설정이 모두 끝났다면 블루프린트를 컴파일하고 저장한 뒤, 블루프린트 에디터를 닫는다.

 

블루프린트를 레벨 에디터에 끌어놓아 배치한다. 그리고 플레이 버튼을 눌러서 PIE 모드로 들어가면 캐릭터에 메시가 추가된 것과 전에 설정한 이동과 카메라 제어가 정상적으로 되는 것을 확인할 수 있다.

 

 

 

하지만 아직 문제는 남아있다. 카메라가 캐릭터의 몸통 한가운데 박혀있기 때문에, 캐릭터의 움직임이 제대로 보이지 않고 부자연스럽다. 이를 해소하기 위해서 새로운 카메라를 배치하고 TPS처럼 구성해보자.

 

 

비주얼 스튜디오로 돌아가서 AnimTestCharacter.h에 다음 멤버 변수를 추가한다.

 

UPROPERTY(VisibleAnywhere)
class USpringArmComponent* TPSCameraSpringArmComponent;

UPROPERTY(VisibleAnywhere)
class UCameraComponent* TPSCameraComponent;

 

그리고 AnimTestCharacter.cpp에서 몇 가지 기능들을 사용하기 위해서 전처리기 리스트에 다음 코드를 추가한다.

 

#include "Engine/Classes/Camera/CameraComponent.h"
#include "Engine/Classes/Components/CapsuleComponent.h"
#include "Engine/Classes/GameFramework/SpringArmComponent.h"

 

다음엔 AAnimTestCharacter::AAnimTestCharacter() 생성자 함수에 스프링 암과 카메라 컴포넌트를 생성하고 세팅하는 코드를 추가한다.

 

TPSCameraSpringArmComponent = CreateDefaultSubobject<USpringArmComponent>(TEXT("ThirdPersonCameraSpringArm"));
TPSCameraSpringArmComponent->SetupAttachment(GetCapsuleComponent());
TPSCameraSpringArmComponent->SetRelativeLocation(FVector(0.0f, 0.0f, BaseEyeHeight));
TPSCameraSpringArmComponent->bUsePawnControlRotation = true;

TPSCameraComponent = CreateDefaultSubobject<UCameraComponent>(TEXT("ThirdPersonCamera"));
TPSCameraComponent->SetupAttachment(TPSCameraSpringArmComponent, USpringArmComponent::SocketName);

 

변경사항을 저장하고 프로젝트를 빌드한 뒤, 에디터로 돌아가서 플레이를 해보면 전처럼 카메라가 캐릭터의 몸 속에 있지 않고, 캐릭터의 등 뒤에 적당히 떨어진 거리에서 카메라가 있음을 확인할 수 있다.

 

 

이제 캐릭터를 추가했고, 그 캐릭터의 애니메이션을 제대로 볼 수 있는 뷰를 완성했으니, 본격적으로 애니메이션을 추가해보자.

 

 

 

 

 

캐릭터 애니메이션 작업
 
캐릭터 애니메이션 파트를 시작하기 전에 필요한 캐릭터 애니메이션을 다운받자.

 

애니메이션을 다운받고 압축을 해제하였다면, 콘텐츠 브라우저에서 Animations 폴더를 만들고 파일 창에 우클릭하여 /Game/Animations 에 임포트를 선택하여, TestChar_Idle, TestChar_Move를 선택한다.

 

 

FBX 임포트 옵션 창이 뜨면 Import Mesh 프로퍼티의 체크를 해제하고 Mesh 섹션의 Skeleton 프로퍼티에 TestChar_Skeleton을 설정해주고 모두 임포트를 선택한다.(Import Mesh 프로퍼티의 체크를 해제하는 경우는 모델링과 애니메이션이 모두 있는데, 그 중에 애니메이션만 임포트하려고 할 때이다.)

 

 

 

 

콘텐츠 브라우저 패널에서 신규 추가 버튼을 클릭하고 애니메이션/애니메이션 블루프린트를 선택한다.

 

 

부모 클래스로는 AnimInstance를 선택하고 타깃 스켈레톤은 TestChar_Skeleton을 선택한다. 애니메이션 블루 프린트의 이름은 TestChar_AnimBP로 하자.

 

 

생성한 애니메이션 블루프린트를 더블클릭해서 애니메이션 블루프린트 에디터를 연다. 그리고 내 블루프린트 패널에서 Boolean 타입의 IsRunning 변수를 추가한다.

 

 

변수를 추가한 뒤에는, 애니메이션 블루프린트의 이벤트 그래프로 이동해 다음과 같이 구성한다.

 

 

이 다음엔 내 블루프린트 패널에서 애님 그래프 더블클릭해서 애님 그래프를 열고 우클릭하여 컨텍스트 메뉴를 열어 스테이트 머신을 추가한다.

 

 

새로 추가한 스테이트 머신의 이름을 TestChar State Machine으로 변경하고 최종 애니메이션 포즈와 연결한다.

 

 

생성한 스테이트 머신을 더블클릭해서 스테이트 머신으로 진입하고 바탕에 우클릭하여 스테이트를 추가한다.

 

 

위와 같은 방법으로 아래 이미지처럼 Idle과 Run 스테이트를 만들고 생성된 Idle 스테이트에 더블클릭한다.

 

 

 

그 다음 스테이트 그래프 바탕에 우클릭해서 TestChar_Idle 애니메이션을 불러온다.

 

 

그 다음 추가한 애니메이션과 출력 애니메이션 포즈 노드와 연결시켜준다. 그리고 이와 같은 작업을 Run 스테이트에서도 똑같이 해준다.

 

 

다시 TestChar State Machine으로 돌아와서 트랜지션을 아래와 같이 구성한다.

 

 

먼저 Idle에서 Run으로 향하는 트랜지션을 더블클릭해서 이벤트 그래프를 다음과 같이 구성한다.

 

 

그리고 Run->Idle 트랜지션은 다음과 같이 구성한다. 이렇게 트랜지션까지 모두 구성했다면 애니메이션 블루프린트를 컴파일, 저장하고 닫는다.

 

 

 

다음엔 BP_AnimTestCharacter 블루프린트 클래스를 더블클릭해서 열고 디테일 패널의 애니메이션 섹션에서 Anim Class 항목을 방금 생성한 TestChar_AnimBP를 설정해준다. 그리고 블루프린트를 컴파일, 저장하고 블루프린트 에디터를 닫는다.

 

 

언리얼 에디터로 돌아가서 플레이 버튼을 누르고 테스트해보면 캐릭터의 애니메이션이 잘 적용된 것을 확인할 수 있다.

 

 

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

+ Recent posts