게임에 생동감을 불어 넣어줄 애니메이션. 스프라이트로 어떻게 이것을 구현하는지 알아보자
개요
3D 게임의 경우, 움직임(애니메이션)은 모델링의 관절(조인트, 리깅)과 물체를 이루는 버텍스와 폴리곤의 이동을 기록 함으로서 구현되었다.
2D의 경우는 이와 달리 이미지인 스프라이트를 기준으로 구현된다. 이를 스프라이트 애니메이션이라 한다.
Sprite Animation
- 스프라이트 애니메이션
캐릭터의 움직임에 대한 스프라이트를 가지고 있는 아틀라스를 기반으로 만들 수 있다
움직이는 이미지(GIF)처럼 애니메이션을 구현하는 기능.
스프라이트 아틀라스
여러 개의 스프라이트들을 하나의 큰 텍스쳐로 결합한 형태. Unity 엔진이 필요에 따라 여러 파일을 호출하는 것 보다 효율적인 엑세스를 한다. 일전에 다룬적이 있으므로 넘어가도록 한다
움직이는 캐릭터
- 해당 캐릭터 에셋으로 플레이어를 구현해보자
압축 파일을 풀면 나오는 폴더를 프로젝트 창에 드래그&드롭 하면 임포트 된다.
구현하고자 하는 애니메이션에 해당하는 아틀라스를 하나 선택하면 인스펙터 창에서 아래와 같이 확인 가능하다
모든 임포트된 이미지는 Texture Type을 Sprite로 바꿔주면 스프라이트가 된다
Pixels Per Unit은 커질 수록 보여지는 크기가 작아진다. Unit은 유니티 에디터에서 Transform 좌표를 1만큼 옮겼을 때의 크기를 생각하면 된다. 해상도 개념으로 이해하면 된다. 2의 제곱수로 설정하는 것이 좋다. 그것도 아니라면 2의 배수로 하자. 보통 32, 24를 많이 선호한다.
선택한 아틀라스와 같이 여러 이미지가 포함된 경우, Sprite Mode를 Multiple로 선택 해줘야 한다
Pivot은 Bottom으로 설정한다.프로그래머 입장에서, 게임 오브젝트는 피벗이 발바닥에 있어야 한다
아틀라스 속의 이미지들을 스프라이트로 바꿔 쓰고 싶으니 Sprite Editor를 누르자
Sprite Editor
- 스프라이트 편집기
오늘은 다른 기능들은 제쳐두고, 가장 기본이 되는 기능으로 스프라이트를 만들어본다
Pivot을 BottomCenter로 바꿔준다.
-
Sprite Editor: 현재 우리가 사용하고자 하는 기능. 아틀라스에서 스프라이트를 나누는 기능을 담당한다
-
Custom Outline: 잘려진 스프라이트는 기본적으로사각형이다. 메시 처리를 할 때 부정확할 수 밖에 없다. 이 문제를 해결하기 위해 쓰는 기능. 점들을 추가해 직접 메시 모양을 잡아줄 수 있다
-
Custom Physics Shape:콜라이더와 같이 물리 처리를 담당하기 위한 영역을 직접 수정해 줄 수 있다. Rigidbody 2D에 적용된다.Polygon Collider 2D를 사용하면, 여기서 편집한 모양대로 콜라이더가 잡힌다
더 자세한 설명
Slice -> Type은 오늘은 Automatic을 사용한다. 자동으로 잘라준다. Pivot은 Bottom으로 한다
다른 타입들
이렇게 직접 스프라이트 범위를 지정해 줄 수 있다.
초록색 선은 Border 선으로, UI로 사용하는 스프라이트 일 때 UI요소가 들어가는 가이드라인이 되어준다
그다음 Slice를 누르면, 자동으로 그림의 크기에 맞게 잘라준다. 이는 Alpha값(투명도)를 기준으로 나누는 것이다
프로젝트 창에서 아틀라스 옆의 삼각형을 눌러 확장하면, 우리가 만든 스프라이트들이 순서대로 나온다.
애니메이션 창을 키고, 편집하고자 하는 게임 오브젝트를 하이라키 창에서 선택하면, 활성화된다.
넣고자 하는 이미지들(스프라이트)을 선택해서 드래그&드롭으로 넣으면 된다.
키 값들을 전체 선택하고, 드래그로 적절하게 배치하면 된다.
애니메이터 창에서 상태는 위와 같이 관리한다.
Parameter는 bool형 변수 두 개로 Transition을 수행한다.
이에 앞서 해시 값으로 애니메이션을 재생하는 구현해보자. Parameter를 쓸 일이 없어진다
애니메이션 해시
애니메이션 트랜지션을 스크립트 상에서 구현해보자.
애니메이터 컴포넌트를 스크립트상에서 참조하고, 애니메이터의 기능으로 애니메이션을 재생할 수 있다.
// 애니메이터 창에서 상태로 지정한 것과 이름을 동일하게 하면 된다
// 애니메이션의 이름이 아님. 상태 이름!
private readonly int IDLE_HASH = Animator.StringToHash("Idle");
Animator animator;
void Start()
{
animator = GetComponent<Animator>();
}
void PlayerMove()
{
// 애니메이터 창에서 Idle 이름을 가진 상태의 애니메이션이 재생된다
animator.Play(IDLE_HASH);
}이 방식을 사용하면, 상태 간의 Transition을 만들지 않아도 된다! 애니메이션을 원하는 타이밍에 재생 시킬 수 있는 장점이 있다.
스프라이트 반전
이동 방향이 달라 질 때, 스프라이트를 반전 시키면 더욱 자연스러울 것이다.
float inputX;
SpriteRenderer spriteRenderer;
void Start()
{
spriteRenderer = GetComponent<SpriteRenderer>();
}
void Update()
{
inputX = Input.GetAxisRaw("Horizontal");
// X축을 기준으로 회전시킬 수 있다
// bool형 이라서 조건식으로 설정 가능하다
spriteRenderer.flipX = inputX < 0;
}
이동방향에 따라 스프라이트가 좌, 우 반전이 된다
캐릭터를 새로이 교체했다. 록맨 X4의 얼티밋 아머 X다
카메라 위치 유동적으로 바꾸기
이동 방향에 따라 카메라가 유동적으로 위치를 바꿀 수 있게 해보자
// 에디터 상에서 직접 참조 시키는 가상 카메라
[SerializeField] public CinemachineVirtualCamera virtualCamera;
public CinemachineFramingTransposer cinemachine;
void Start()
{
// 가상 카메라의 컴포넌트를 가져옴
cinemachine = virtualCamera.GetCinemachineComponent<CinemachineFramingTransposer>();
}
void Update()
{
if (player.inputX < 0)
{
player.spriteRenderer.flipX = true;
// 이동 방향에 따라 카메라 위치 조정
player.cinemachine.m_TrackedObjectOffset = new Vector3(-2, 2, 0);
}
}
이제 카메라가 유동적으로 따라온다
