애니메이션 기초

 

 

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

 

기본 캐릭터 구현

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

 

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

 

 

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

 

 

그 다음은 콘텐츠 브라우저 패널에서 신규 추가 버튼을 누르고, 새 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