[Unity/유니티] 기초-뱀서라이크: 2D 셀 애니메이션 제작하기[03]

개요

유니티 독학을 위해 아래 링크의 골드메탈님의 영상들을 보고 직접 따라 해보면서 진행 상황을 쓰고 배웠던 점을 요약한다.

https://youtube.com/playlist?list=PLO-mt5Iu5TeYI4dbYwWP8JqZMC9iuUIW2 

📚유니티 기초 강좌

---

뱀서라이크: 2D 셀 애니메이션[03]

1. 방향 바라보기

Sprite Renderer의 Flip X를 사용할 것이다

Flip X를 체크하지 않았을 때

Flip X를 체크했을 때

//Plyaer Script

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.InputSystem;

public class Player : MonoBehaviour {
    Vector2 inputVec;   //키보드 입력 값 변수
	public float speed; //속도 관리 변수

    Rigidbody2D rigid;
    SpriteRenderer spriter;

    void Awake() {
        rigid = GetComponent<Rigidbody2D>();
		spriter = GetComponent<SpriteRenderer>();
	}

    void FixedUpdate() {
		//위치 이동
		Vector2 nextVec = inputVec * speed * Time.fixedDeltaTime;
		rigid.MovePosition(rigid.position + nextVec);
    }

    void OnMove(InputValue value) {
        inputVec = value.Get<Vector2>();
    }

    void LateUpdate() { //프레임이 종료되기 전 실행되는 생명주기 함수
        if (inputVec.x != 0) {
            spriter.flipX = inputVec.x < 0; //왼쪽 방향키는 -1, 오른쪽 방향키는 1이므로 왼쪽 방향키는 참(true), 우측 방향키는 거짓(false)가 됨.
        }
    }
}

• SpriteRenderer의 Flip X 속성을 사용할 것이므로 스크립트에 SpriteRenderer 변수를 하나 만들고 초기화해주었다.
• LateUpdate 함수를 사용해 X축 방향키 입력이 없지 않다면, 즉 이동 중이라면 방향에 따라 Flip X 속성을 체크하고 체크하지 않고 할 것이다.
• 주석에도 있지만 왼쪽 방향키 입력은 최대 -1, 오른쪽 방향키 입력은 최대 1이므로 이를 이용해 if문을 추가적으로 사용하지 않고, 부등호를 사용해서 값을 주는 것도 가능하다.

적용 후 테스트하는 모습

---

2. 셀 애니메이션

애니메이션 생성을 위한 스프라이트 지정

이후 Hierarchy의 Player에 드래그 & 드랍해서 애니메이션을 생성해주자

Stand 스프라이트들도 지정해서 같은 방식으로 애니메이션 파일 생성

Dead 스프라이트도 마찬가지로 진행한다

생성한 애니메이션들과 자동 생성된 애니메이션 컨트롤러

구분 및 순서를 위해서 애니메이션 컨트롤러는 이름을 변경해주자

---

3. 애니메이터 설정

애니메이션 컨트롤러를 클릭하면 Animator 창이 열린다

• 현재 Entry와 연결된 노란색 상태의 애니메이션은 게임 실행시 가장 먼저 기본적으로 실행된다는 것을 의미한다.
• 추후 설정에 적힌 것을 보면 Layer Default State라고 하는듯 하다.

Animator 창을 좀 정리한 뒤, Stand를 Layer Default State로 바꿔주자.

설정을 바꾼 뒤 애니메이션 이름들도 좀 직관적으로 변경해주었다. Inspector 창에서 변경하면 된다.

• 참고로 Animator 화면은 마우스 휠을 클릭해서 화면 시점을 움직이고(휠을 굴리면 확대/축소한다. 클릭해야함.), 마우스 좌 클릭으로 각 상자들을 옮길 수 있다.

이제 각 애니메이션에 맞게 배치한 뒤 우클릭으로 Transition을 만들자

Transition 설정

• AnyState는 어떤 상태든 상관없이 조건이 충족되면 실행한다. 쉽게 말해서 플레이어가 뭘 하고 있었든 죽었다면 Dead 애니메이션이 실행되는 것이다.
• Transition : 상태 이동을 어떻게 할 것인지 설정하는 통로.
• Transition은 Animator 창의 Parameter를 통해서 상태 변경이 가능하다.

Parameter 추가 방법

Float 형 Speed와 Trigger 형 Dead 추가

각 Transition에 Conditions을 추가해주자

Stand -> Run 설정

Run -> Stand 설정

AnyState -> Dead 설정

• 이렇게 각 Transition의 Conditions 설정은 끝났다.
• Dead는 Trigger라서 따로 설정할 값이 없다.

Duration 속성

Has Exit Time 체크 해제, Transition Duration 0.01

• Transition의 Inspector 창에 있는 Duration은 애니메이션이 부드럽게 변환되도록 도와주는 속성이다.
• 이번 프로젝트 같은 셀 애니메이션에서는 사용하지 않으므로 최소화하도록 한다.

플레이어 애니메이션 테스트

• 테스트 전에 Animator를 Project/Console 창에 옮겨두어 파라미터를 직접 조작해 각 상태 변경을 볼 수 있었다.
• 마지막 Dead 애니메이션은 반복하지 않고 한번만 작동해야하므로 이를 좀 수정해주자.

Project의 애니메이션 파일을 선택해 Loop Time을 체크 해제하면 더 이상 반복하지 않는다.

변경된 Dead 애니메이션. 더이상 반복하지 않는다.

---

4. 코드 작성하기

//Plyaer Script

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.InputSystem;

public class Player : MonoBehaviour {
    Vector2 inputVec;   //키보드 입력 값 변수
	public float speed; //속도 관리 변수

    Rigidbody2D rigid;
    SpriteRenderer spriter;
    Animator anim;

    void Awake() {
        rigid = GetComponent<Rigidbody2D>();
		spriter = GetComponent<SpriteRenderer>();
        anim = GetComponent<Animator>();
	}

    void FixedUpdate() {
		//위치 이동
		Vector2 nextVec = inputVec * speed * Time.fixedDeltaTime;
		rigid.MovePosition(rigid.position + nextVec);
    }

    void OnMove(InputValue value) {
        inputVec = value.Get<Vector2>();
    }

    void LateUpdate() {
        anim.SetFloat("Speed", inputVec.magnitude); //Magnitude : 벡터의 순수한 크기 값
        
        if (inputVec.x != 0) {
            spriter.flipX = inputVec.x < 0;
        }
    }
}

• Animator 변수를 추가하고 초기화했다. 그리고 LateUpdate에서 앞서 생성했던 Animator의 float형 parameter Speed의 값을 지정해준다.
• Dead는 아직 몬스터가 없어서 일단 그대로 두는 것 같다.

애니메이션 Run 테스트. 문제 없이 잘 작동한다.

---

5. 애니메이터 재활용

Player로 사용할 수 있는 Sprite는 다양하다

• 이 스프라이트들을 다 하나하나씩 위와 같은 과정으로 만들기에는 너무 힘들다. 그래서 이를 위해  애니메이터를 재활용하는 방법이 있다. 이를 위해서 일단 Farmer 1을 만들어 보자.

아쉽게도 애니메이션은 직접 다 만들어줘야한다. 스프라이트가 다 다르니 어쩔 수 없다...

다 추가하고 나면 위와 같이 Animator에 애니메이션이 생성되어있다.

깔끔하게 다 지워주자

• 새로 애니메이터를 만들 것이므로 여기서 생성된 애니메이션은 모두 다 지워준다.

우클릭 - Create - Animator Override Controller로 생성

생성된 Animator Override Controller. 이름은 위와 같이 바꿔주자.

Override할 Controller 선택

Override할 애니메이션도 다 설정해주면 설정 끝.

• Animator Override Controller : 애니메이션만 덮어 씌우는 에셋.
• 위에서 설정했던 상태, Transition 등이 모두 유지된 상태에서 작동할 애니메이션만 바꿀 수 있다.
• 새로 생성하거나 Ctrl + D로 복사해서 직접 바꾸는 것보다 훨씬 간편해 보인다.

테스트를 위해서 Ctrl + D로 플레이어 복사

복사한 플레이어는 X 좌표를 옮겨서 옆에 나란히 두고, Animator를 변경해주자. Sprite는 변경안해도 상관없지만, 구분을 위해서 했다.

애니메이터 복사 테스트. 문제 없이 잘 작동한다.